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 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 1
1.1 Sites e Aplicaes Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Navegadores e Dispositivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Web Servers e HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Domnios e endereos IP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 DNS (Domain Name System) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.6 Servios de Hospedagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.7 SEO (Search Engine Optimization) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.8 Arquitetura Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.9 Ativando o IIS e ASP Classic no Windows 7 . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.10 Instalao do Apache HTTP Server no Ubuntu 13.04 . . . . . . . . . . . . . . . . . . . . 16
1.11 Apache HTTP Server no Mac OS X Mountain Lion . . . . . . . . . . . . . . . . . . . . . . 16
1.12 Resumo do Captulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.13 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2 HTML 21
2.1 Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2 Estrutura Bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.3 Editores HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.4 Ferramentas de Desenvolvimento Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.5 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.6 Semntica HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.7 Ttulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.9 Pargrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.10 Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.12 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.14 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
2.16 Iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
2.17 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
2.19 ncoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.21 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
2.22 URLs absolutas e relativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
2.24 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
ii www.k19.com.br
iii S UMRIO

2.26 Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
2.28 Caixas de entrada especficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
2.30 Checkboxes e Radios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
2.31 Seleo de cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
2.33 Botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
2.35 Drop-down list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
2.37 Fieldset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
2.39 Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
2.41 Campos ou botes desabilitados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
2.42 Campos fixos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
2.44 Validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
2.46 Partes de um documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
2.47 Diviso de contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
2.49 Agrupando elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
2.50 Erro: Fechamento inadequado das tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
2.51 Erro: Imagens sem texto alternativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
2.52 Erro: Criar listas com o elemento br . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
2.53 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
2.55 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
3 CSS 141
3.1 Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
3.2 Regras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
3.3 Aplicando CSS ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
3.4 Comentrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
3.5 Chrome DevTools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
3.7 Cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
3.8 Unidades de medida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
3.9 Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
3.11 Textos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
3.13 Fontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
3.15 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
www.facebook.com/k19treinamentos iii
S UMRIO iv
3.17 Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

3.19 Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
3.21 Sombras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
3.23 Margens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
3.25 Altura e Largura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
3.27 Display e Visibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
3.29 Opacidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
3.31 Posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
3.33 Overflow e clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
3.35 Transformaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
3.37 Transies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
3.39 Animaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
3.41 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
3.43 Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
3.45 Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
3.47 Gradientes (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
3.48 Herana (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
3.49 box-sizing (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
3.50 Design Responsivo (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
3.53 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
4 JavaScript 305
4.1 Aplicando JavaScript ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
4.2 Carregamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
4.3 Chrome DevTools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
4.5 Variveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
4.6 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
4.7 Controle de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
4.9 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
iv www.k19.com.br
v S UMRIO
4.11 Funes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

4.13 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
4.14 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
4.16 DOM - Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
4.18 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
4.20 Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
4.22 History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
4.24 Geolocalizao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
4.26 Alarmes (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
4.29 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
5 jQuery 375
5.1 Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
5.3 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
5.5 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
5.7 Efeitos e Animaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
5.9 Manipulao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
5.11 Mais mtodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
5.12 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
5.16 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
A Projeto 421
A.1 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
B Quizzes 435
C Respostas 437
www.facebook.com/k19treinamentos v
S UMRIO vi
vi www.k19.com.br
1 S UMRIO
Sobre a K19
A K19 uma empresa especializada na capacitao de desenvolvedores de software. Sua equipe
composta por profissionais formados em Cincia da Computao pela Universidade de So Paulo
(USP) e que possuem vasta experincia em treinamento de profissionais para rea de TI.
O principal objetivo da K19 oferecer treinamentos de mxima qualidade e relacionados s prin-

cipais 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 melho-
ria, oferece instalaes fsicas apropriadas para o ensino e seus instrutores esto sempre atualizados
didtica e tecnicamente.
www.facebook.com/k19treinamentos 1
S UMRIO 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 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 Treina-
mento 10% do valor total do curso.
2 www.k19.com.br
3 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 4
TR
EIN
AM
EN
TR
TO
EIN
S
TREINAMENTOS
AM
EN
TO
S
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
4 www.k19.com.br
CAPTULO
I NTRODUO
1
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 definio 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 definio, 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 classificar como site ou aplicao web. Nessa viso, aplicaes web seriam
mais interativas e os sites menos interativos. Contudo, no h uma medida definida para calcular
esse grau de interatividade e com isso aplicar de forma objetiva essa classificao. Dessa forma, essa
diferenciao, na prtica, subjetiva.
Outras pessoas preferem utilizar o critrio do propsito para classificar como site ou aplicao
web. 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 uma
ferramenta 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 concluir
que, 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 importante
para 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 de
aplicaes web. Portanto, do nosso ponto de vista, essas diferenas no sero to relevantes.
I NTRODUO 2
Figura 1.1: Sites
Figura 1.2: Aplicaes Web
2 www.k19.com.br
3 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 ficaram cada vez mais parecidos nesse aspecto. Contudo, os
desenvolvedores web ainda devem tomar cuidado com essas diferenas.
Figura 1.3: ndice de utilizao dos navegadores em Outubro de 2013 (fonte http://gs.statcounter.com/)
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 4
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 conec-
tados 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
5 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 definidas pelo protocolo HTTP.
GET /cursos/k02 HTTP/1.1

Host: k19.com.br
Requisio HTTP
HTTP/1.1 200 OK
Date: Mon, 23 May 2014 22:38:34 GMT
Resposta HTTP 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 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 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 In-
tranet. Por outro lado, os endereos IP dos dispositivos conectados Internet so gerenciados pelos
provedores de acesso (ISP).
I NTRODUO 6
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
6 www.k19.com.br
7 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 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 endereos
IP.
I NTRODUO 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 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 aces-
sando 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
9 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 indi-
retamente 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 infra-
estrutura ou na infraestrutura de empresas especializadas. Em determinadas situaes, a primeira
possibilidade mais conveniente.
Por exemplo, normalmente, as instituies bancrias preferem manter os seus sites e as suas
aplicaes web em Web Servers dentro da sua prpria infraestrutura. Essa abordagem permite um
controle maior da comunicao entre essas instituies e os seus clientes. Mas, ela exige grandes
investimentos. Para garantir que os seus Web Servers estejam sempre funcionando, essas instituies
bancrias mantm profissionais 24 horas por dia 7 dias por semana (24/7). Caso contrrio, os sites
ou as aplicaes web dessas instituies podem ficar fora do ar e gerar grandes prejuzos.
Por outro lado, muitas vezes, mais conveniente manter os Web Servers de uma organizao na
infraestrutura de uma empresa especializada. Dessa forma, a responsabilidade de mant-los fun-
cionando 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 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 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.
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 profissi-
onais se especializam no client side e outros no server side. Outra denominao possvel para client
side front-end e para server side back-end.
Por exemplo, um web designer deve ter bons conhecimentos do client side. Por outro lado, um
programador web deve ter bons conhecimentos do server side.
Geralmente, os web designers no precisam ter conhecimento do server side mas t-lo pode ser
til. Por outro lado, os programadores web precisam conhecer razoavelmente bem o client side.
Nesse treinamento, estamos interessados especificamente no client side.
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.
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.
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
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 < 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. 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 os

dispositivos (computadores, tablets, celulares, tvs, entre outros) na criao das pginas web de um
site 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 endereos

IP.
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.
I NTRODUO 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 Web
Servers 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 nos

resultados das consultas realizadas nas ferramentas de busca.
13 Podemos dividir a arquitetura web em duas partes: client side e server side.
Prova
1 Qual alternativa est correta?
a) Existe uma 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.
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.
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.
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 site
est 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.
4 6
Minha Pontuao Pontuao Mnima: Pontuao Mxima:
I NTRODUO 20
20 www.k19.com.br
CAPTULO
HTML
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 Tim
Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que
quisesse disseminar documentos cientficos.
Desde sua proposta at os dias de hoje, a linguagem HTML sofreu diversas alteraes. A cada
verso, novos recursos so adicionados e problemas corrigidos. A verso mais atual da especificao
da linguagem HTML a 5. Essa verso ainda no foi finalizada, a previso que ela seja lanada em
definitivo 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 mais
conhecido por sua sigla W3C. Alm do HTML, o W3C tambm responsvel por linguagens como o
XML, o SVG e pela interface DOM (Document Object Model), por exemplo.
Estrutura Bsica
Basicamente, um documento HTML composto por elementos hierarquicamente organizados.

Para inserir um elemento em um documento HTML, devemos utilizar as tags correspondentes a
esse elemento. As tags so definidas com parnteses angulares (< e >). Os elementos podem possuir
atributos e contedo. Os atributos so formados por nome e valor. Normalmente, os valores dos
atributos so definidos dentro de aspas dupla e o contedo dos elementos um texto ou outros
elementos.
HTML 22
Declarao do tipo de documento
<!DOCTYPE html>
Tag de abertura do elemento html
<html lang=pt-br>
Nome de atributo
<head>
Valor de atributo
<meta http-equiv = Content-Type content=text/html; charset=UTF-8>
<title>K19 Treinamentos</title>
</head>
Contedo do elemento body
<body>
<p>K02 - Devenvolvimento Web com HTML, CSS e JavaScript</p>
</body>
</html>
Tag de fechamento do elemento html
Figura 2.1: Estrutura bsica de um documento HTML
Figura 2.2: Estrutura bsica de um documento HTML
Mais Sobre
A especificao do HTML5 define duas sintaxes distintas para produzir documentos
HTML. A primeira denominada sintaxe HTML e a segunda denominada sintaxe
XHTML. A maior parte dos autores recomendam a utilizao da sintaxe HTML. Nos exemplos
e nos exerccios dessa apostila, a preferncia ser pela sintaxe HTML.
22 www.k19.com.br
23 HTML
Mais Sobre
De 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 de
abertura e da tag de fechamento do elemento p.
1 <p > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ p >
Mais Sobre
H tambm elementos denominados Void Elements. Esses elementos no possuem
contedo. Na sintaxe HTML, esses elementos so abertos e fechados com apenas uma
tag com ou sem o caractere /. Um exemplo de Void Element o elemento br.
1 <p >
2 K01 - Lgica de Programao < br >
3 K02 - Desenvolvimento Web com HTML , CSS e JavaScript < br / >
4 K03 - SQL e Modelo Relacional
5 </ p >
Os Void Elements so: area, base, br, col, embed, hr, img, input, keygen, link, meta,
param, source, track, wbr.
Na sintaxe XHTML, os Void Elements podem ser abertos e fechados na mesma tag ou em tags
separadas. Contudo, o caractere / obrigatrio.
1 <p >
2 K01 - Lgica de Programao < br / >
3 K02 - Desenvolvimento Web com HTML , CSS e JavaScript < br > </ br >
5 </ p >
<!DOCTYPE>
Para um navegador exibir corretamente uma pgina web, devemos informar explicitamente o
tipo do documento. O tipo do documento informado com a declarao <!DOCTYPE>. Quando
conveniente, discutiremos as principais diferenas entre os tipos de documentos mais importantes.
Veja a declarao <!DOCTYPE> para os principais tipos de documentos.
1 <! DOCTYPE html >
Cdigo HTML 2.4: HTML 5
1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN "
2 " http :// www . w3 . org / TR / html4 / strict . dtd " >
Cdigo HTML 2.5: HTML 4.01 Strict
1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN "
2 " http :// www . w3 . org / TR / html4 / loose . dtd " >
Cdigo HTML 2.6: HTML 4.01 Transitional
HTML 24
1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Frameset // EN "
2 " http :// www . w3 . org / TR / html4 / frameset . dtd " >
Cdigo HTML 2.7: HTML 4.01 Frameset
1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Transitional // EN "
2 " http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - transitional . dtd " >
Cdigo HTML 2.8: XHTML 1.0 Transitional
1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Frameset // EN "
2 " http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - frameset . dtd " >
Cdigo HTML 2.9: XHTML 1.0 Frameset
1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.1// EN "
2 " http :// www . w3 . org / TR / xhtml11 / DTD / xhtml11 . dtd " >
Cdigo HTML 2.10: XHTML 1.1
<html>
Os elementos HTML, com exceo do DOCTYPE, devem ser inseridos no contedo do elemento
html. Esse elemento aberto com a tag <html>, fechado com a tag </html> e deve conter 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 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 (metain-
formao). So exemplos de metainformaes: o encoding, a taxa de atualizao, o autor, a descrio
e as palavras chaves do documento HTML.
1 < head >

2 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
3 < meta http - equiv = " refresh " content = " 30 " >
4 < meta name = " author " content = " Rafael Cosentino " >
5 < meta name = " description " content = " Cursos de Java e . NET " >
6 < meta name = " keywords " content = " curso java , curso C # " >
7 </ head >
24 www.k19.com.br
25 HTML
O elemento head aberto e fechado pelas tags <head> e </head> respectivamente. Obrigatoria-
mente, salvo algumas poucas excees, o corpo do head deve conter exatamente uma ocorrncia do
elemento title. Esse elemento define o ttulo do documento HTML.
1 < head >

2 ...
3 < title > K19 Treinamentos </ title >
4 </ head >
<body>
O contedo de uma pgina web deve ser definido no corpo do elemento body. Por exemplo,
podemos inserir no corpo do body cabealhos, textos, listas, tabelas, entre outros componentes.
Esse elemento aberto pela tag <body> e fechado pela tag </body>.
1 < body >

2 < h1 > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ h1 >
3 </ body >
Comentrios
Podemos adicionar comentrios em um documento HTML dentro das tags . Os comen-
trios so ignorados pelos navegadores.
1 <! DOCTYPE html >

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 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 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 en-
dereo 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.
HTML 26
Exerccios de Fixao
1 Abra o Netbeans e crie um projeto chamado html.
Importante
No Windows, utilizando o IIS (Internet Information Services) como Web Server, voc
deve salvar o projeto html em C:\inetpub\wwwroot. Lembre-se que necessrio
instalar o IIS conforme vimos anteriormente.
Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o pro-
jeto html em /home/<USUARIO>/public_html. Lembre-se que 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 <! DOCTYPE html >

3 <! - - cabealho -->
4 < head >
7 </ head >
8
9 <! - - corpo -->
10 < body >
11 <p > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ p >
12 </ body >
13 </ html >
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/~<USUARIO>/html/public_html/index.html.
4 Utilize o Chrome DevTools ou o Firebug para analisar e modificar os elementos do documento

HTML.
28 www.k19.com.br
29 HTML
Figura 2.6: Chrome DevTools
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 possui
um significado especfico. A utilizao equivocada das placas de trnsito pode causar problemas
como colises de veculos.
Considere um cruzamento no qual proibido virar a esquerda ou a direita (exemplo: Av. Re-
bouas 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 significado correto dessa placa pode decidir virar direita ou esquerda e sofrer uma coliso. Para
no gerar confuso o funcionrio poderia utilizar a placa abaixo.
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 um
propsito 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 autores
utilizam o termo semntica HTML ao se referirem ao uso correto dos elementos da linguagem HTML.
No exemplo abaixo, utilizamos o elemento p para definir um pargrafo. De acordo com a espe-
cificao da linguagem HTML, esse elemento deve ser utilizado justamente para definir pargrafos.
Portanto, ele foi aplicado corretamente.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de uso correto da semntica HTML </ title >
6 </ head >
7 < body >
8 <p > Este um texto para mostrar o significado da tag p . </ p >
9 </ body >
10 </ html >
Cdigo HTML 2.17: Exemplo de uso correto da semntica HTML
Agora, vejamos outro exemplo:
1 <! DOCTYPE html >

3 < head >
5 < title > Meus amigos - Site do Jonas - Criado pelo Jonas </ title >
6 </ head >
7 < body >
8 < address >
9 Rafael Cosentino
10 rafael . cosentino@k19 . com . br
11 Scio fundador da K19 Treinamentos
12 Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP
13 CEP 01452 -001
14 </ address >
15
16 < address >
17 Marcelo Martins
18 marcelo . martins@k19 . com . br
19 Scio fundador da K19 Treinamentos
20 Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP
21 CEP 01452 -001
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 especificao, esse elemento deve
ser 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 no
ttulo 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 informar
endereos 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 estabelecer
uma diviso do seu contedo. Para inserir ttulos em uma pgina web, devemos utilizar os elementos
h1, h2, h3, h4, h5 e h6. Os sufixos numricos de 1 a 6 indicam o nvel do ttulo dentro da hierarquia
de ttulos do documento. Veja o exemplo:
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de ttulos </ title >
6 </ head >
7 < body >
8 < h1 > Ttulo 1 </ h1 >
9 < h2 > Ttulo 2 </ h2 >
10 < h3 > Ttulo 3 </ h3 >
11 < h4 > Ttulo 4 </ h4 >
12 < h5 > Ttulo 5 </ h5 >
13 < h6 > Ttulo 6 </ h6 >
14 </ body >
15 </ html >
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 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 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 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 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 html
em Site Root.
1 <! DOCTYPE html >

3 < head >
HTML 36
5 < title > K02 - Desenvolvimento Web com HTML , CSS e Javascript </ title >
6 </ head >
7 < body >
8 < h1 > K02 - Desenvolvimento Web com HTML , CSS e Javascript </ h1 >
9
10 <p > Atualmente , praticamente todos os sistemas corporativos possuem
11 interfaces web . Para quem deseja atuar no mercado de desenvolvimento
12 de software , obrigatrio o conhecimento das linguagens : HTML , CSS
13 e JavaScript . </ p >
14
15 <p > Essas linguagens so utilizadas para o desenvolvimento da camada de
16 apresentao das aplicaes web . </ p >
17
18 < h2 >Pr - requisitos </ h2 >
19
20 < ul >
21 < li > Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X ) </ li >
22 < li > Lgica de programao </ li >
23 </ ul >
24
25 < h2 > Agenda </ h2 >
26
27 < h3 > Aos domingos </ h3 >
28
29 < ul >
30 < li > 10/11/2013 das 08:00 s 14:00 </ li >
31 < li > 23/02/2014 das 14:00 s 20:00 </ li >
32 </ ul >
33
34 < h3 > Aos sbados </ h3 >
35
36 < ul >
37 < li > 15/03/2014 das 08:00 s 14:00 </ li >
38 < li > 26/04/2014 das 14:00 s 20:00 </ li >
39 </ ul >
40 </ body >
41 </ html >
Cdigo HTML 2.20: titulos.html
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.
8 Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crie
uma pgina com uma receita fictcia utilizando ttulos para organizar contedo. Utilize quantos n-
veis de ttulo achar necessrio. Para isso, adicione um arquivo chamado receita.html no projeto
html em Site Root.
1 <! DOCTYPE html >

3 < head >
36 www.k19.com.br
37 HTML
5 < title > Como preparar um delicioso macarro instantneo em 6 min . </ title >
6 </ head >
7 < body >
8 < h1 > Como preparar um delicioso macarro instantneo em 6 min . </ h1 >
9
10 <p > Com esta receita voc se tornar um profissional na arte de
11 preparar um macarro instantneo . </ p >
12
13 < h2 > Ingredientes </ h2 >
14
15 < ul >
16 < li > Macarro instantneo da sua marca favorita </ li >
17 < li > 600 ml de gua </ li >
18 </ ul >
19
20 < h2 > Modo de preparo </ h2 >
21
22 < h3 > No micro - ondas </ h3 >
23
24 <p > Coloque o macarro instantneo em um recipiente com 600 ml de gua e
25 programe o micro ondas para 6 minutos . Aperte o boto iniciar ou
26 equivalente . </ p >
27
28 < h4 > Dicas </ h4 >
29
30 < ul >
31 < li >
32 Utilize um recipiente que permita o macarro ficar totalmente
33 submerso na gua .
34 </ li >
35 < li >
36 Quando ouvir o bip , no saia correndo . O micro ondas no explodir .
37 O bip significa que o macarro est pronto .
38 </ li >
39 </ ul >
40
41 < h3 > No fogo </ h3 >
42
43 <p >
44 Coloque o macarro instantneo em uma panela com 600 ml de gua e
45 leve ao fogo por 3 minutos .
46 </ p >
47
48 < h4 > Dicas </ h4 >
49
50 < ul >
51 < li >
52 Utilize uma panela que permita o macarro ficar totalmente
53 submerso na gua .
54 </ li >
55 < li >
56 No se distraia com a televiso ou qualquer outra coisa .
57 Voc poder queimar a sua refeio
58 </ li >
59 </ ul >
60 </ body >
61 </ html >
Cdigo HTML 2.21: receita.html
http://localhost/html/public_html/receita.html.
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 definidos atravs do elemento p. Assim como os ttulos,
normalmente, os navegadores definem os pargrafos como block-level elements. Dessa forma, por
padro, eles ocupam horizontalmente todo o espao do elemento pai.
Os navegadores ajustam os textos dos pargrafos largura do elemento pai. As quebras de linha
necessrias so inseridas automaticamente. Os espaos excedentes definidos em um documento
HTML entre as palavras de um pargrafo so desconsiderados pelos navegadores na exibio das
pginas web. Analogamente, as quebras de linha presentes no documento HTML tambm so 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 o
elemento wbr, como as palavras podem ser quebradas. Veja o exemplo abaixo.
1 <! DOCTYPE html >

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

3 < head >
5 < title > Exemplo de character entities </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de character entities </ h1 >
9 < ul >
10 < li > & starf ; & bigstar ; &# x02605 ; ★ </ li >
11 < li > & phone ; &# x0260E ; ☎ </ li >
12 < li > & female ; &# x02640 ; ♀ </ li >
13 < li > & sung ; &# x0266A ; ♪ </ li >
14 </ ul >
15 </ body >
16 </ html >
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 <! DOCTYPE html >

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

3 < head >
5 < title > Exemplo de character entities </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de character entities </ h1 >
9 < ul >
10 < li >& starf ; & bigstar ; &# x02605 ; ★ </ li >
11 < li >& phone ; &# x0260E ; ☎ </ li >
12 < li >& female ; &# x02640 ; ♀ </ li >
13 < li >& sung ; &# x0266A ; ♪ </ li >
14 </ ul >
15 </ body >
16 </ html >
Cdigo HTML 2.25: character-entities.html
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 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 linha
inseridos no documento HTML. Alm disso, os navegadores costumam utilizar fonte mono espaada
para 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 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de texto pr - formatado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto pr - formatado </ h1 >
9 < pre >
10 Os espaos excedentes so considerados pelos
11 navegadores . Assim como as
12
13 quebras
14
15 de
16
17 linha . Observe tambm o tipo de fonte utilizada nesse texto .
18 </ pre >
19 </ body >
20 </ html >
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 cdigos
ocupam horizontalmente somente o espao necessrio.
1 <! DOCTYPE html >

3 < head >
42 www.k19.com.br
43 HTML
5 < title > Exemplo de cdigos </ title >

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

3 < head >
5 < title > Exemplo de utilizao do elemento i </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de utilizao do elemento i </ h1 >
9 < ul >
10 < li > Porquinho - da - ndia ou <i > Cavia porcellus </ i > </ li >
11 < li > <i > Backup </ i >( cpia de segurana ) </ li >
12 < li > <i > shoot the breeze </ i >( bater papo ou jogar conversa fora ) </ li >
13 < li > <i > Moskv </ i >( transliterao da palavra Moscou em russo ) </ li >
14 < li > <i > Se no sabes , aprende ; se j sabes , ensina . </ i > ( Confcio ) </ li >
15 </ ul >
16 </ body >
17 </ html >
Cdigo HTML 2.28: Exemplo de utilizao do elemento i
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 navegadores
definem o b como inline-level element e exibem o contedo em negrito.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de utilizao do elemento b </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de utilizao do elemento b </ h1 >
9 <p >
10 Atualmente , praticamente todos os <b > sistemas corporativos </ b >
11 possuem <b > interfaces web </ b >. Para quem deseja atuar no mercado
12 de <b > desenvolvimento de software </ b > , obrigatrio o conhecimento
13 das linguagens : <b > HTML </ b > , <b > CSS </ b > e <b > JavaScript </ b >.
14 </ p >
15 </ body >
16 </ html >
Cdigo HTML 2.29: Exemplo de utilizao do elemento b
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 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de texto subscrito ou sobrescrito </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto subscrito ou sobrescrito </ h1 >
9 <p >
10 A cidade de So Paulo possui uma rea de 1.523 km < sup >2 </ sup >.
11 Em 2011 , So Paulo emitiu 16 ,430 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 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 o
contedo de um elemento em exibido em itlico. Normalmente, os navegadores definem esses
elementos como inline-level elements.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de texto importante ou enfatizado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto importante ou enfatizado </ h1 >
9 <p >
10 O < strong > Brasil </ strong > o nico
11 pas que ganhou < em > cinco vezes </ em >
12 a < strong > copa do mundo de futebol </ strong >.
13 </ p >
14 </ body >
15 </ html >
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 exibido
como elemento de linha. Esses dois elementos possuem o atributo cite que deve ser utilizado para
indicar a fonte da citao.
Tambm podemos citar, com o elemento cite, ttulos de trabalhos, livros, msicas, filmes, pro-
gramas de TV, peas de teatro, entre outros. Por padro, esse elemento exibido como elemento de
linha.
Normalmente, os navegadores definem o blockquote como block-level element. Por outro lado,
o q e o cite, normalmente, so definidos como inline-level elements.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de citaes </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de citaes </ h1 >
9 < blockquote cite = " http :// en . wikipedia . org / wiki / Computer " >
10 <p >
11 A computer is a general purpose device that can be programmed
12 to carry out a set of arithmetic or logical operations . Since a
13 sequence of operations can be readily changed , the computer
14 can solve more than one kind of problem .
15 </ p >
16
17 <p >
18 Conventionally , a computer consists of at least one processing
19 element , typically a central processing unit ( CPU ) and some form
20 of memory . The processing element carries out arithmetic and
21 logic operations , and a sequencing and control unit that can
22 change the order of operations based on stored information .
23 Peripheral devices allow information to be retrieved from an
24 external source , and the result of operations saved and retrieved .
25 </ p >
26 </ blockquote >
27
46 www.k19.com.br
47 HTML
28 <p >
29 Nelson Rodrigues disse :
30 <q cite = " http :// pt . wikipedia . org / wiki / Nelson_Rodrigues " >
31 O adulto no existe . O homem um menino perene
32 </ q >.
33 </ p >
34
35 <p >
36 A pea < cite >A mulher sem pecado </ cite > de Nelson Rodrigues estreou
37 em 1941 no Rio de Janeiro .
38 </ p >
39 </ body >
40 </ html >
Cdigo HTML 2.32: Exemplo de citaes
Figura 2.24: Exemplo de citaes
Abreviaes
Podemos definir abreviaes com o elemento abbr. Por padro, esse elemento exibido como
elemento de linha. O atributo title desse elemento utilizado para definir um tootip. Normalmente,
os navegadores definem esse elemento como inline-level element
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de abreviaes </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de abreviaes </ h1 >
9 <p >
10 O < abbr title = " Instituto de Matemtica e Estatstica " > IME </ abbr >
11 uma das unidades da < abbr title = " Universidade de So Paulo " > USP </ abbr >.
12 </ p >
13 </ body >
14 </ html >
Cdigo HTML 2.33: Exemplo de abreviaes
HTML 48
Figura 2.25: Exemplo de abreviaes
Definies
Podemos inserir definies em um documento HTML com o elemento dfn. Por padro, esse
elemento exibido como elemento de linha. Normalmente, os navegadores definem o dfn como
inline-level element
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de definies </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de definies </ h1 >
9 <p >
10 Um < dfn > pingado </ dfn > um copo de caf com um pouco de leite . < br >
11 Uma < dfn > bomba de chocolate </ dfn > um doce de padaria feito com
12 massa de farinha de trigo com recheio cremoso e cobertura de chocolate .
13 </ p >
14 </ body >
15 </ html >
Cdigo HTML 2.34: Exemplo de definies
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 texto
que deixou de ser correto, preciso ou relevante deve ser definido com o elemento s. Por padro,
esses elementos so exibidos como elementos de linha. Normalmente, os navegadores definem esses
elementos como inline-level elements.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de alteraes </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de alteraes </ h1 >
9 <p >
10 Natal a capital do Rio Grande do Norte . < ins > Sua fundao foi
11 em 25 de dezembro de 1599. </ ins > < del >A rea total dessa cidade
12 167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o IBGE , a populao
13 dessa cidade de 774.230 habitantes . </ s > De acordo com o IBGE a
14 populao dessa cidade de 803.739 habitantes .
15 </ p >
16 </ body >
17 </ html >
Cdigo HTML 2.35: Exemplo de alteraes
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 justificativas da alterao. O atributo datetime deve
ser utilizado para informar quando ocorreu a alterao.
1 <! DOCTYPE html >

3 < head >
6 </ head >
7 < body >
9 <p >
10 Natal a capital do Rio Grande do Norte . < ins cite = " ins - explicacao . html "
11 datetime = " 2013 -10 -15 T22 :55:03 Z " > Sua fundao foi em 25 de dezembro de
HTML 50
12 1599. </ ins > < del cite = " del - explicacao . html " datetime = " 2013 -10 -10 T17 :43:07 Z " >A
13 rea total dessa cidade 167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o
14 IBGE , a populao dessa cidade de 774.230 habitantes . </ s > De acordo com o
15 IBGE a populao dessa cidade de 803.739 habitantes .
16 </ p >
17 </ body >
18 </ html >
Cdigo HTML 2.36: Exemplo de alteraes
Data e hora
O elemento time permite que datas e horrios sejam definidos em um documento HTML. H
duas formas de utilizar esse elemento. A primeira definir a data e o horrio desejado no 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 na
especificao da linguagem HTML (http://www.w3.org/TR/html5/text-level-semantics.html#
the-time-element). Quando utilizamos o atributo datetime, o contedo do elemento time no pre-
cisa seguir um formato especfico. Normalmente, os navegadores definem o time como inline-level
element.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de datas e horas </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de datas e horas </ h1 >
9 < ul >
10 < li > < time > 2010 -08 </ time > </ li >
11 < li > < time > 1984 -10 -30 </ time > </ li >
12 < li > < time > 12 -25 </ time > </ li >
13 < li > < time > 09:00 </ time > </ li >
14 < li > < time > 2013 -12 -25 23:59 </ time > </ li >
15 < li > < time datetime = " 2010 -08 " > Fundao da K19 </ time > </ li >
16 < li > < time datetime = " 1984 -10 -30 " > Aniversrio do Rafael </ time > </ li >
17 < li > < time datetime = " 12 -25 " > Natal </ time > </ li >
18 < li > < time datetime = " 09:00 " > Horrio de Entrada </ time > </ li >
19 < li > < time datetime = " 2013 -12 -31 23:59:59 " > Ano Novo 2014 </ time > </ li >
20 </ ul >
21 </ body >
22 </ html >
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 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de texto marcado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto marcado </ h1 >
9 <p >
10 < mark > Java </ mark > e < mark >C # </ mark > so linguagens de programao
11 < mark > orientadas a objeto </ mark >.
12 </ p >
13 </ body >
14 </ html >
Cdigo HTML 2.38: Exemplo de texto marcado
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 Site

Root.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de texto pr - formatado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto pr - formatado </ h1 >
9 < pre >
10 Os espaos excedentes so considerados pelos
11 navegadores . Assim como as
12
13 quebras
14
15 de
16
17 linha . Observe tambm o tipo de fonte utilizada nesse texto .
18 </ pre >
19 </ body >
20 </ html >
Cdigo HTML 2.39: texto-pre-formatado.html
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 >

3 < head >
5 < title > Exemplo de cdigos </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de cdigos </ h1 >
9 <p >
10 Em Java , utilizamos o cdigo < code > System . out . println ( " K19 " ) ; </ code >
11 Em C # , utilizamos o cdigo < code > System . Console . WriteLine ( " K19 " ) ; </ code >
12 </ p >
13 </ body >
14 </ html >
Cdigo HTML 2.40: codigo.html
52 www.k19.com.br
53 HTML
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 >

3 < head >
5 < title > Exemplo de utilizao do elemento i </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de utilizao do elemento i </ h1 >
9 < ul >
15 </ ul >
16 </ body >
17 </ html >
Cdigo HTML 2.41: i.html
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 >

3 < head >
5 < title > Exemplo de utilizao do elemento b </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de utilizao do elemento b </ h1 >
9 <p >
14 </ p >
HTML 54
15 </ body >

16 </ html >
Cdigo HTML 2.42: b.html
http://localhost/html/public_html/b.html.
http://localhost/~<USUARIO>/html/public_html/b.html.
22 Crie um novo documento HTML chamado texto-subscrito-sobrescrito.html no projeto html

em Site Root.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de texto subscrito ou sobrescrito </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto subscrito ou sobrescrito </ h1 >
9 <p >
12 CO < sub >2 </ sub >.
13 </ p >
14 </ body >
15 </ html >
Cdigo HTML 2.43: texto-subscrito-sobrescrito.html
http://localhost/html/public_html/texto-subscrito-sobrescrito.html.
http://localhost/~<USUARIO>/html/public_html/texto-subscrito-sobrescrito.html.
24 Crie um novo documento HTML chamado texto-importante-enfatizado.html no projeto html

em Site Root.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de texto importante ou enfatizado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto importante ou enfatizado </ h1 >
54 www.k19.com.br
55 HTML
9 <p >
10 O < strong > Brasil </ strong > o nico
11 pas que ganhou < em > cinco vezes </ em >
12 a < strong > copa do mundo de futebol </ strong >.
13 </ p >
14 </ body >
15 </ html >
Cdigo HTML 2.44: texto-importante-enfatizado.html
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 >

3 < head >
5 < title > Exemplo de citaes </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de citaes </ h1 >
9 < blockquote cite = " http :// en . wikipedia . org / wiki / Computer " >
10 <p >
11 A computer is a general purpose device that can be programmed
12 to carry out a set of arithmetic or logical operations . Since a
13 sequence of operations can be readily changed , the computer
14 can solve more than one kind of problem .
15 </ p >
16
17 <p >
18 Conventionally , a computer consists of at least one processing
19 element , typically a central processing unit ( CPU ) and some form
20 of memory . The processing element carries out arithmetic and
21 logic operations , and a sequencing and control unit that can
22 change the order of operations based on stored information .
23 Peripheral devices allow information to be retrieved from an
24 external source , and the result of operations saved and retrieved .
25 </ p >
26 </ blockquote >
27
28 <p >
29 Nelson Rodrigues disse :
30 <q cite = " http :// pt . wikipedia . org / wiki / Nelson_Rodrigues " >
31 O adulto no existe . O homem um menino perene
32 </ q >.
33 </ p >
34
35 <p >
36 A pea < cite >A mulher sem pecado </ cite > de Nelson Rodrigues estreou
37 em 1941 no Rio de Janeiro .
38 </ p >
39 </ body >
40 </ html >
Cdigo HTML 2.45: citacoes.html
HTML 56
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 >

3 < head >
5 < title > Exemplo de abreviaes </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de abreviaes </ h1 >
9 <p >
10 O < abbr title = " Instituto de Matemtica e Estatstica " > IME </ abbr >
11 uma das unidades da < abbr title = " Universidade de So Paulo " > USP </ abbr >.
12 </ p >
13 </ body >
14 </ html >
Cdigo HTML 2.46: abreviacoes.html
http://localhost/html/public_html/abreviacoes.html.
http://localhost/~<USUARIO>/html/public_html/abreviacoes.html.
30 Crie um novo documento HTML chamado definicoes.html no projeto html em Site Root.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de definies </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de definies </ h1 >
9 <p >
10 Um < dfn > pingado </ dfn > um copo de caf com um pouco de leite . < br >
11 Uma < dfn > bomba de chocolate </ dfn > um doce de padaria feito com
12 massa de farinha de trigo com recheio cremoso e cobertura de chocolate .
13 </ p >
14 </ body >
15 </ html >
Cdigo HTML 2.47: definicoes.html
56 www.k19.com.br
57 HTML
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 >

3 < head >
6 </ head >
7 < body >
9 <p >
10 Natal a capital do Rio Grande do Norte . < ins > Sua fundao foi
11 em 25 de dezembro de 1599. </ ins > < del >A rea total dessa cidade
12 167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o IBGE , a populao
13 dessa cidade de 774.230 habitantes . </ s > De acordo com o IBGE a
14 populao dessa cidade de 803.739 habitantes .
15 </ p >
16 </ body >
17 </ html >
Cdigo HTML 2.48: alteracoes.html
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 >

3 < head >
5 < title > Exemplo de datas e horas </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de datas e horas </ h1 >
9 < ul >
10 < li > < time > 2010 -08 </ time > </ li >
11 < li > < time > 1984 -10 -30 </ time > </ li >
12 < li > < time > 12 -25 </ time > </ li >
13 < li > < time > 09:00 </ time > </ li >
14 < li > < time > 2013 -12 -25 23:59 </ time > </ li >
HTML 58
15 < li > < time datetime = " 2010 -08 " > Fundao da K19 </ time > </ li >
16 < li > < time datetime = " 1984 -10 -30 " > Aniversrio do Rafael </ time > </ li >
17 < li > < time datetime = " 12 -25 " > Natal </ time > </ li >
18 < li > < time datetime = " 09:00 " > Horrio de Entrada </ time > </ li >
19 < li > < time datetime = " 2013 -12 -31 23:59:59 " > Ano Novo 2014 </ time > </ li >
20 </ ul >
21 </ body >
22 </ html >
Cdigo HTML 2.49: data-hora.html
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 >

3 < head >
5 < title > Exemplo de texto marcado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto marcado </ h1 >
9 <p >
10 < mark > Java </ mark > e < mark >C # </ mark > so linguagens de programao
11 < mark > orientadas a objeto </ mark >.
12 </ p >
13 </ body >
14 </ html >
Cdigo HTML 2.50: mark.html
http://localhost/html/public_html/mark.html.
http://localhost/~<USUARIO>/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 formadas
por termos ou nomes e as suas respectivas descries. Os termos ou nomes so definidos com o
elemento dt. As descries so definidas com o elemento dd. Normalmente, os navegadores definem
todos esses elementos como block-level elements.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de lista de descries </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de lista de descries </ h1 >
9 < dl >
10 < dt > K01 - Lgica de Programao </ dt >
11 < dd >
12 Conhecimentos em Lgica de Programao o pr - requisito fundamental
13 para que uma pessoa consiga aprender qualquer Linguagem de Programao ...
14 </ dd >
15 < dt > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ dt >
16 < dd >
17 Atualmente , praticamente todos os sistemas corporativos possuem
18 interfaces web . Para quem deseja atuar no mercado de desenvolvimento ...
19 </ dd >
20 < dt > K03 - SQL e Modelo Relacional </ dt >
21 < dd >
22 Como as aplicaes corporativas necessitam armazenar dados fundamental
23 que os desenvolvedores possuam conhecimentos sobre persistncia de dados .
24 </ dd >
25 </ dl >
26 </ body >
27 </ html >
Cdigo HTML 2.51: Exemplo de lista de descries
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 elementos
como block-level elements.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de lista com ordem </ title >
6 </ head >
7 < body >
8 < h1 > Macarro instantneo - K19 Receitas </ h1 >
10
11 < ol >
12 < li > Ferver 600 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 or-
dem so definidos com o elemento li. Normalmente, os navegadores definem todos esses elementos
como block-level elements.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de lista sem ordem </ title >
6 </ head >
7 < body >
60 www.k19.com.br
61 HTML
10
11 < ul >
12 < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li >
14 </ ul >
15 </ body >
16 </ html >
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 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de listas aninhadas </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de listas aninhadas </ h1 >
9 < h2 > Continentes </ h2 >
10 < ul >
11 < li >
12 Europa
13 < ul >
14 < li > Portugual </ li >
15 < li > Frana </ li >
16 < li > Alemanha </ li >
17 </ ul >
18 </ li >
19 < li >
20 sia
21 < ul >
22 < li > Japo </ li >
23 < li > China </ li >
24 < li > ndia </ li >
25 </ ul >
26 </ li >
27 </ ul >
28 < h2 > Cronograma da minha viagem </ h2 >
29 < ol >
30 < li >
31 Europa
HTML 62
32 < ol >
34 < li > Frana </ li >
36 </ ol >
37 </ li >
38 < li >
39 sia
40 < ol >
41 < li > Japo </ li >
42 < li > China </ li >
43 < li > ndia </ li >
44 </ ol >
45 </ li >
46 </ ol >
47 </ body >
48 </ html >
Cdigo HTML 2.54: Exemplo de listas aninhadas
Figura 2.33: Exemplo de lista aninhadas
Exerccios de Fixao
38 Crie um novo documento HTML chamado lista-descricoes.html no projeto html em Site Root.
1 <! DOCTYPE html >

3 < head >
62 www.k19.com.br
63 HTML
5 < title > Exemplo de lista de descries </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de lista de descries </ h1 >
9 < dl >
10 < dt > K01 - Lgica de Programao </ dt >
11 < dd >
12 Conhecimentos em Lgica de Programao o pr - requisito fundamental
13 para que uma pessoa consiga aprender qualquer Linguagem de Programao ...
14 </ dd >
15 < dt > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ dt >
16 < dd >
17 Atualmente , praticamente todos os sistemas corporativos possuem
18 interfaces web . Para quem deseja atuar no mercado de desenvolvimento ...
19 </ dd >
20 < dt > K03 - SQL e Modelo Relacional </ dt >
21 < dd >
22 Como as aplicaes corporativas necessitam armazenar dados fundamental
23 que os desenvolvedores possuam conhecimentos sobre persistncia de dados .
24 </ dd >
25 </ dl >
26 </ body >
27 </ html >
Cdigo HTML 2.55: lista-descricoes.html
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 >

3 < head >
5 < title > Exemplo de lista com ordem </ title >
6 </ head >
7 < body >
8 < h1 > Macarro instantneo - K19 Receitas </ h1 >
10
11 < ol >
12 < li > Ferver 600 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
HTML 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 >

3 < head >
5 < title > Exemplo de lista sem ordem </ title >
6 </ head >
7 < body >
10
11 < ul >
12 < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li >
14 </ ul >
15 </ body >
16 </ html >
Cdigo HTML 2.57: lista-sem-ordem.html
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 >

3 < head >
5 < title > Exemplo de listas aninhadas </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de listas aninhadas </ h1 >
9 < h2 > Continentes </ h2 >
10 < ul >
11 < li >
12 Europa
13 < ul >
15 < li > Frana </ li >
17 </ ul >
18 </ li >
19 < li >
64 www.k19.com.br
65 HTML
20 sia
21 < ul >
22 < li > Japo </ li >
23 < li > China </ li >
24 < li > ndia </ li >
25 </ ul >
26 </ li >
27 </ ul >
28 < h2 > Cronograma da minha viagem </ h2 >
29 < ol >
30 < li >
31 Europa
32 < ol >
34 < li > Frana </ li >
36 </ ol >
37 </ li >
38 < li >
39 sia
40 < ol >
41 < li > Japo </ li >
42 < li > China </ li >
43 < li > ndia </ li >
44 </ ol >
45 </ li >
46 </ ol >
47 </ body >
48 </ html >
Cdigo HTML 2.58: listas-aninhadas.html
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 >

3 < head >
5 < title > Menu - K19 Pizzaria </ title >
6 </ head >
7 < body >
8 < h1 > Menu - K19 Pizzaria </ h1 >
9
10 < 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 >
20 < dd >
HTML 66
21 Aliche , parmeso e rodelas de tomate .

22 </ dd >
23 </ dl >
24 </ body >
25 </ html >
Cdigo HTML 2.59: restaurante.html
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 >

3 < head >
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
10 < 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
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.
1 <! DOCTYPE html >

3 < head >
66 www.k19.com.br
67 HTML
5 < title > K00 - Formao Bsica - K19 Treinamentos </ title >
6 </ head >
7 < body >
8 < h1 > K00 - Formao Bsica </ h1 >
9
10 < ul >
11 < li > K01 - Lgica de Programao </ li >
12 < li > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
13 < li > K03 - SQL e Modelo Relacional </ li >
14 </ ul >
15 </ body >
16 </ html >
Cdigo HTML 2.61: cursos.html
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 >

3 < head >
5 < title > Formaes - K19 Treinamentos </ title >
6 </ head >
7 < body >
8 < h1 > Formaes - K19 Treinamentos </ h1 >
9 < ul >
10 < li >
11 K00 - Formao Bsica
12 < ul >
15 < li > K03 - SQL e Modelo Relacional </ li >
16 </ ul >
17 </ li >
18 < li >
19 K10 - Formao Desenvolvedor Java
20 < 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 K30 - Formao Desenvolvedor . NET
27 < ul >
28 < li > K31 - C # e Orientao a Objetos </ li >
29 < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li >
30 </ ul >
31 </ li >
32 </ ul >
33 </ body >
34 </ html >
Cdigo HTML 2.62: formacoes.html
HTML 68
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 ele-
mento iframe utilizado pelos navegadores que no oferecem suporte a esse elemento. Normal-
mente, o iframe definido pelos navegadores como inline-level element.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de frames </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de frames </ h1 >
9 < iframe src = " http :// www . k19 . com . br " >
10 Esse navegador no suporta o elemento <i > iframe </ i >.
11 </ iframe >
12 < iframe src = " http :// www . usp . br " >
13 Esse navegador no suporta o elemento <i > iframe </ i >.
14 </ iframe >
15 </ body >
16 </ html >
Cdigo HTML 2.63: Exemplo de frames
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 cha-
mado href. O valor desse atributo indica o caminho relativo ou absoluto de uma outra pgina. Nor-
malmente, o a definido pelos navegadores como inline-level element.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de links </ title >
6 </ head >
7 < body >
8 < ul >
9 < li >
10 <a href = " pagina2 . html " > Exemplo de link com caminho relativo </ a >
11 </ li >
12 < li >
13 <a href = " outros / pagina3 . html " > Outro exemplo de link com caminho relativo </ a >
14 </ li >
15 < li >
16 <a href = " http :// www . k19 . com . br " > Exemplo de link com caminho absoluto </ a >
17 </ li >
18 </ ul >
19 </ body >
20 </ html >
Cdigo HTML 2.64: Exemplo de links
Figura 2.35: Exemplo de links
HTML 70
Alm do atributo href, podemos utilizar o atributo target para informar onde o destino de um
link deve ser aberto.
_blank: Abre o destino do link em uma nova janela ou aba.

_self: Abre o destino do link na mesma janela ou no mesmo frame que exibe o documento que
contm o link.
_parent: Abre o destino do link na janela ou no frame onde est contido o frame que exibe o
documento que contm o link.
_top: Abre o destino do link na janela que ancestral do frame que exibe o documento que
contm o link.
Um link com target _self possui o mesmo comportamento de um link com target _top se esses
links estiverem em um documento HTML que no esteja dentro de outro documento HTML.
Dentro de um documento HTML com diversos frames, podemos definir que o destino de um
determinado link deve ser aberto em um determinado frame. Para realizarmos tal tarefa, o valor do
atributo target deve ser o nome do frame onde o destino do link deve ser aberto.
Por padro, o destino de um link aberto na mesma pgina ou frame onde ele est contido. Em
outras palavras, se o atributo target no for definido explicitamente, o padro o comportamento
do _self.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de uso da tag a com o atributo target </ title >
6 </ head >
7 < body >
8 < ul >
9 < li >
10 <a href = " pagina1 . html " target = " _blank " > Abre em outra janela ou aba </ a >
11 </ li >
12 < li >
13 <a href = " pagina2 . html " target = " _self " > Abre na mesma janela ou aba </ a >
14 </ li >
15 < li >
16 <a href = " pagina3 . html " > Abre na mesma janela ou aba </ a >
17 </ li >
18 </ ul >
19 </ body >
20 </ html >
Cdigo HTML 2.65: Exemplo de links com target
Exerccios de Fixao
54 Crie dois arquivos chamados links-origem.html e links-destino.html dentro do projeto html

em Site Root.
1 <! DOCTYPE html >

3 < head >
70 www.k19.com.br
71 HTML
5 < title > Exemplo de links - origem </ title >

6 </ head >
7 < body >
8 < h1 > Exemplo de links - origem </ h1 >
9 < ul >
10 < li > <a href = " http :// www . k19 . com . br " target = " _blank " > Link externo </ a > </ li >
11 < li > <a href = " links - destino . html " target = " _self " > Link interno </ a > </ li >
12 < li > <a href = " links - destino . html " target = " _top " > Link interno </ a > </ p >
13 < li > <a href = " links - destino . html " > Link interno </ a > </ li >
14 </ ul >
15 </ body >
16 </ html >
Cdigo HTML 2.66: links-origem.html
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de links - destino </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de links - destino </ h1 >
9 </ body >
10 </ html >
Cdigo HTML 2.67: links-destino.html
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 identificar a seo que ser o destino desse link. Essa identificao realizada com o
atributo id. O id um atributo global, ou seja, todos os elementos possuem esse atributo. O segundo
passo criar os links utilizando os identificadores das sees de acordo com a sintaxe do exemplo a
seguir. Observe a utilizao do caractere #.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de ncoras </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de ncoras </ h1 >
9 < ul >
10 < li >
11 <a href = " # brasil " > Brasil </ a >
HTML 72
12 </ li >
13 < li >
14 <a href = " # historia " > Histria </ a >
15 </ li >
16 < li >
17 <a href = " # geografia " > Geografia </ a >
18 </ li >
19 < li >
20 <a href = " # demografia " > Demografia </ a >
21 </ li >
22 < li >
23 <a href = " http :// pt . wikipedia . org / wiki / Brasil # Economia " > Economia </ a >
24 </ li >
25 </ ul >
26
27 < h2 id = " brasil " > Brasil </ h2 >
28 ...
29
30 < h3 id = " historia " > Histria </ h3 >
31 ...
32
33 < h3 id = " geografia " > Geografia </ h3 >
34 ...
35
36 < h3 id = " demografia " > Demografia </ h3 >
37 ...
38 </ body >
39 </ html >
Cdigo HTML 2.68: Exemplo de ncoras
Figura 2.36: Exemplo de ncoras
72 www.k19.com.br
73 HTML
Exerccios de Fixao
56 Crie um documento HTML chamado ancoras1.html no projeto html em Site Root. Adicione
um link para uma seo dentro desse documento. Dica: insira contedo suficiente para que a barra
de rolagem vertical do navegador aparea.
1 <! DOCTYPE html >

3 < head >
6 </ head >
7 < body >
9 < ul >
10 < 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
20 <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
30 < 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
http://localhost/html/public_html/ancoras1.html.
http://localhost/~<USUARIO>/html/public_html/ancoras1.html.
58 Crie um novo arquivo chamado ancoras2.html no projeto html em Site Root. Identifique uma
seo com o nome ok. Dica: insira contedo suficiente para que a barra de rolagem vertical do
HTML 74
navegador aparea.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio sobre ncoras </ title >
6 </ head >
7 < body >
8 < h1 > Ancora pgina 2 </ h1 >
9
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 .
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 >

3 < head >
6 </ head >
7 < body >
9 < ul >
10 < 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
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 .
32
74 www.k19.com.br
75 HTML
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 >
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 con-
tedo das pginas. Podemos adicionar imagens em documento HTML com o elemento img. Esse
elemento possui um atributo chamado src. Esse atributo indica o caminho absoluto ou relativo da
imagem que queremos adicionar. Normalmente, o img definido pelos navegadores como inline-
level element.
O elemento img possui um atributo obrigatrio chamado alt. Esse atributo define um texto al-
ternativo que pode ser utilizado, por exemplo, se houver um problema ao carregar a imagem ou por
softwares de leitura de tela.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de imagens </ title >
6 </ head >
7 < body >
8 < h1 > K19 Treinamentos </ h1 >
9 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " alt = " K19 " / >
10
11 < h2 > Cursos </ h2 >
12 < ul >
13 < li >
14 < img src = " http :// www . k19 . com . br / css / img / k01 - logo - large . png " alt = " K01 " / >
15 K01 - Lgica de Programao
16 </ li >
17 < li >
19 K02 - Desenvolvimento Web com HTML , CSS e JavaScript
20 </ li >
21 < li >
24 </ li >
25 < li >
27 K11 - Orientao a Objetos em Java
HTML 76
28 </ li >
29 < li >
31 K12 - Desenvolvimento Web com JSF2 e JPA2
32 </ li >
33 </ ul >
34 </ body >
35 </ html >
Cdigo HTML 2.72: Exemplo de imagens
Figura 2.37: Exemplo de imagens
Tambm podemos definir um tooltip para uma imagem com o atributo title.
1 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " alt = " K19 " title = " K19 " / >
Cdigo HTML 2.73: Exemplo de imagens
URLs absolutas e relativas
Os links e as imagens podem ser adicionados em um documento HTML com URLs absolutas ou
relativas.
76 www.k19.com.br
77 HTML
1 <! DOCTYPE html >

3 < head >
5 < title > URLs absolutas e relativas </ title >
6 </ head >
7 < body >
8 < img src = " imagens / k19 - logo . png " alt = " K19 " >
9 <a href = " paginas / cursos . html " > Cursos </ a >
10 </ body >
11 </ html >
Cdigo HTML 2.74: http://www.k19.com.br/index.html
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 >

3 < head >
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 >
10 </ body >
11 </ html >
Cdigo HTML 2.75: http://www.k19.com.br/index.html
Podemos definir uma URL base para as imagens e os links adicionados em um documento HTML
com URLs relativas. A URL base definida no valor do atributo href do elemento base. Esse elemento
deve ser adicionado no contedo do elemento head.
1 <! DOCTYPE html >

3 < head >
5 < base href = " http :// www . k19 . com . br / site " >
7 </ head >
8 < body >
9 < img src = " imagens / k19 - logo . png " alt = " K19 " >
10 <a href = " paginas / cursos . html " > Cursos </ a >
11 </ body >
12 </ html >
Cdigo HTML 2.76: www.k19.com.br/index.html
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.
HTML 78
Exerccios de Fixao
61 Crie um documento HTML em um arquivo chamado imagens.html no projeto html em Site

Root com algumas imagens.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de imagens </ title >
6 </ head >
7 < body >
9 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " alt = " K19 " / >
10
11 < h2 > Cursos </ h2 >
12 < ul >
13 < li >
14 < img src = " http :// www . k19 . com . br / figs / k01 - logo - large . png " alt = " K01 " / >
15 K01 - Lgica de Programao
16 </ li >
17 < li >
19 K02 - Desenvolvimento Web com HTML , CSS e JavaScript
20 </ li >
21 < li >
24 </ li >
25 < li >
27 K11 - Orientao a Objetos em Java
28 </ li >
29 < li >
31 K12 - Desenvolvimento Web com JSF2 e JPA2
32 </ li >
33 </ ul >
34 </ body >
35 </ html >
Cdigo HTML 2.77: imagens.html
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 re-
latrios 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 apre-
sentar dados de forma tabular. As linhas de uma tabela so definidas 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 pos-
suem um atributo chamado colspan e outro chamado rowspan. O colspan define quantas colunas
uma clula deve ocupar e o rowspan define quantas linhas uma clula deve ocupar. Normalmente,
o table definido pelos navegadores como block-level element.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de tabela </ title >
6 </ head >
7 < body >
8 < h1 > Carros </ h1 >
9 < table >
10 < tr >
11 < th > Marca </ th >
12 < th > Modelo </ th >
13 < th > Ano </ th >
14 </ tr >
15 < tr >
16 < td > Toyota </ td >
17 < td > Corolla </ td >
18 < td > 2010 </ td >
19 </ tr >
20 < tr >
21 < td > Honda </ td >
22 < td > Civic </ td >
23 < td > 2011 </ td >
24 </ tr >
25 < tr >
26 < td > Mitsubishi </ td >
27 < td > Lancer </ td >
28 < td > 2012 </ td >
29 </ tr >
30 < tr >
31 < td colspan = " 3 " > ltima atualizao : 06/2012 </ td >
32 </ tr >
33 </ table >
34 </ body >
35 </ html >
Cdigo HTML 2.78: Exemplo de tabela
HTML 80
Figura 2.38: Exemplo de tabela
Cabealho, corpo e rodap
Para melhorar a semntica das tabelas, podemos definir explicitamente o cabealho, o corpo e o
rodap de uma tabela atravs dos elementos thead, tbody e tfoot respectivamente.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de tabela </ title >
6 </ head >
7 < body >
8 < h1 > Carros </ h1 >
9
10 < table >
11 < thead >
12 < tr >
13 < th > Marca </ th >
15 < th > Ano </ th >
16 </ tr >
17 </ thead >
18 < tfoot >
19 < tr >
21 </ tr >
22 </ tfoot >
23 < tbody >
24 < tr >
25 < td > Toyota </ td >
27 < td > 2010 </ td >
28 </ tr >
29 < tr >
30 < td > Honda </ td >
31 < td > Civic </ td >
32 < td > 2011 </ td >
33 </ tr >
34 < tr >
37 < td > 2012 </ td >
38 </ tr >
39 </ tbody >
40 </ 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: define o cabealho da tabela

tfoot: define o rodap da tabela
tbody: define o corpo da tabela
Por que complicar? Qual o motivo da existncia desses elementos?
O elemento thead, assim como o tfoot, servem para agrupar as linhas de cabealho e de ro-
dap, respectivamente.
O cdigo fica mais claro.
Facilita a aplicao de estilos CSS (atravs do seletor de elemento)
Os navegadores podem utilizar barras de rolagem para exibir o contedo de uma tabela longa.
Essa caracterstica no obrigatria.
Na impresso de uma tabela longa, a ferramenta utilizada pode replicar o cabealho e o rodap
em todas as pginas. Essa caracterstica no obrigatria.
Ttulos
Tambm podemos definir um ttulo para uma tabela atravs do elemento caption. Esse elemento
deve ser o primeiro filho do elemento table.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de ttulo de tabela </ title >
6 </ head >
HTML 82
7 < body >

8 < table >
9 < caption > Carros </ caption >
10 ...
11 </ table >
12 </ body >
13 </ html >
Cdigo HTML 2.80: Exemplo de ttulo de tabela
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 definir formataes especficas para cada grupo de colunas.
Para dividir em grupos as colunas de uma tabela, devemos utilizar os elementos colgroup e col. O
atributo span do elemento col define a quantidade de colunas de um determinado grupo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exemplo de agrupamento de colunas </ title >
6 </ head >
7 < body >
8 < h1 > Carros </ h1 >
9
10 < table >
11 < colgroup >
12 <! - - Agrupando a primeira e a segunda coluna -->
13 < col span = " 2 " style = " background - color : gray " >
14 <! - - Agrupando apenas a terceira coluna -->
15 < col style = " background - color : yellow " >
16 </ colgroup >
17 ...
18 </ table >
19 </ body >
20 </ html >
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
63 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:
Figura 2.42: Exerccio para a tag table
HTML 84
As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do pro-
blema.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de tabela </ title >
6 </ head >
7 < body >
8 < table >
9 < thead >
10 < tr >
11 < th > Marca </ th >
13 < th > Ano </ th >
14 </ tr >
15 </ thead >
16 < tfoot >
17 < tr >
19 </ tr >
20 </ tfoot >
21 < tbody >
22 < tr >
23 < td rowspan = " 2 " > Toyota </ td >
25 < td > 2010 </ td >
26 </ tr >
27 < tr >
28 < td > Camry </ td >
29 < td > 2011 </ td >
30 </ tr >
31
32 < tr >
33 < td rowspan = " 3 " > Honda </ td >
34 < td > Civic </ td >
35 < td > 2004 </ td >
36 </ tr >
37 < tr >
38 < td > Fit </ td >
39 < td > 2012 </ td >
40 </ tr >
41 < tr >
42 < td > City </ td >
43 < td > 2011 </ td >
44 </ tr >
45
46 < tr >
49 < td > 2012 </ td >
50 </ tr >
51 </ tbody >
52 </ table >
53 </ body >
54 </ html >
Cdigo HTML 2.82: tabela.html
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 >

3 < head >
5 < title > Exerccio de tabela </ title >
6 </ head >
7 < body >
8 < table >
9 < caption > Carros </ caption >
10 < 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
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 pe-
los 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 >
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 ima-
gem 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 adici-
onadas nos documentos HTML atravs do elemento input. Esse elemento possui um atributo cha-
mado type. Para definir uma caixa de texto, o valor do atributo type deve ser text. Normalmente, o
input definido pelos navegadores como inline-level element.
1 < input type = " text " >
Considere um 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 identificar esses dados. O atributo name do elemento input
utilizado para resolver esse problema.
1 < input type = " text " name = " endereco " >
2 < input type = " text " name = " cidade " >
Parmetros, GET e POST
Vamos analisar como os valores preenchidos nos formulrios so enviados aos Web Servers. Con-
sidere 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 definido. Quando
as caixas forem preenchidas e o formulrio enviado, os dados desse formulrio so adicionados na
requisio HTTP.
Observe na imagem abaixo que os valores preenchidos nas caixas de texto so enviados como
parmetros na URL da requisio HTTP. Os nomes dos parmetros so exatamente os nomes defini-
dos nas caixas de texto com o valor do atributo name. Note tambm que os valores dos parmetros
ficam expostos na barra de endereo do navegador.
HTML 88
Muitas vezes, no adequado exibir os valores dos atributos na barra de endereo dos navega-
dores. Podemos ocultar esses valores adicionando o atributo method com o valor post no elemento
form. Esse atributo aceita apenas dois valores: get e post. Ele define o tipo de requisio HTTP que
o navegador deve realizar para enviar o formulrio. Nas requisies do tipo GET, os parmetros so
adicionados na URL da requisio. Nas requisies do tipo POST, os parmetros so adicionados no
contedo da requisio.
88 www.k19.com.br
89 HTML
Rtulos
Nos formulrios, os rtulos so fundamentais para informar aos usurios quais dados devem ser
preenchidos. Para adicionar um rtulo, devemos utilizar o elemento label. Os textos dos rtulos so
definidos no contedo desse elemento.
HTML 90
1 < label > Nome : </ label >

2 < input type = " text " name = " nome " >
Para melhorar a acessibilidade dos documentos HTML, os rtulos devem ser explicitamente as-
sociados aos campos dos formulrios. Para estabelecer esse vnculo, o primeiro passo identificar
os campos atravs do atributo id. O segundo passo definir o atributo for do elemento label com o
identificador do campo correspondente ao rtulo.
1 < label for = " nome_id " > Nome : </ label >
2 < input type = " text " name = " nome " id = " nome_id " >
Figura 2.50: Rtulos
Placeholders
Como vimos, os rtulos so utilizados para informar aos usurios quais dados devem ser preen-
chidos 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.
2 < input id = " nome_id " type = " text " name = " nome " placeholder = " Digite o seu nome aqui " >
Figura 2.51: Placeholder
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 definidos 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
67 Se voc estiver utilizando o Ubuntu, crie um arquivo chamado parametros.php no projeto html
em Site Root.
1 <! DOCTYPE html >

3 < head >
5 < title > Parmetros </ title >
6 </ head >
7 < body >
8 < h1 > Parmetros </ h1 >
9 <? php
10 $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 }
20 }
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.
HTML 92
1 <! DOCTYPE html >

3 < head >
5 < title > Parmetros </ title >
6 </ head >
7 < body >
8 < h1 > Parmetros </ h1 >
9 < ul >
10 <%
11 dim Params , ArrayOfParams
12 If Request . Form < > " " And Request . QueryString < > " " Then
13 Params = Request . Form & " & " & Request . QueryString
14 ElseIf Request . Form < > " " Then
15 Params = Request . Form
16 Else
17 Params = Request . QueryString
18 End If
19
20 ArrayOfParams = Split ( Params , " & " )
21
22 For Each Param In ArrayOfParams
23 Response . Write ( " <li > " )
24 Response . Write ( Param )
25 Response . Write ( " </ li > " )
26 Next
27 %>
28 </ ul >
29 </ body >
30 </ html >
Cdigo HTML 2.94: parametros.asp
68 Crie um arquivo chamado formulario-basico.html no projeto html em Site Root com o seguinte
contedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de formulrio bsico </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
10 < 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
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 verificar os parmetros enviados atravs do for-
mulrio. Chame o instrutor caso tenha alguma dvida.
Caixas de entrada especficas
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 documen-
tos HTML, tipos especficos 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 al-
gum 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 especficas para nmeros. No HTML5, h
dois tipos de caixas para esse propsito. Os dois so definidos com o elemento input. O valor do
atributo type number para o primeiro tipo e range para o segundo tipo.
1 < input id = " numero1_id " name = " numero1 " type = " number " >
2 < input id = " numero2_id " name = " numero2 " type = " range " >
Esses dois tipos de componentes devem ser utilizados para coletar valores de sequncias nu-
mricas pr-definidas. A principal diferena entre eles que o primeiro (type=number) deve ofe-
recer um mecanismo preciso para os usurios selecionarem o valor desejado enquanto o segundo
HTML 94
(type=range) no possui essa obrigao. A imagem a seguir mostra uma possvel forma dos navega-
dores exibirem essas caixas.
Figura 2.56: Caixas de nmeros
Para definir a sequncia dos nmeros que podem ser selecionados pelos usurios, podemos uti-
lizar os atributos min, max e step. Por exemplo, para coletar um nmero da sequncia {0; 0,2; 0,4;
0,6; 0,8; 1}, os valores dos atributos min, max e step devem ser 0, 1 e 0.2 respectivamente.
1 < input id = " numero1_id " type = " number " name = " numero1 " min = " 0 " max = " 1 " step = " 0.2 " >
2 < input id = " numero2_id " type = " range " name = " numero2 " min = " 0 " max = " 1 " step = " 0.2 " >
Caixas de email, telefone e url
No HTML5 foram definidas caixas de entradas especficas 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 configu-
rao 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 hor-
rio.
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 < input id = " data_id " name = " data " type = " date " >
2 < input id = " data_hora_fuso_id " name = " data - hora - fuso " type = " datetime " >
3 < input id = " data_hora_id " name = " data - hora " type = " datetime - local " >
4 < input id = " mes_id " name = " mes " type = " month " >
5 < input id = " hora_id " name = " hora " type = " time " >
6 < input id = " semana_id " name = " semana " type = " week " >
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 especficas para esse tipo de informao. Para adicio-
nar 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 definida 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 = " 50 " >
2
3 </ textarea >
Podemos definir o limite de caracteres que podem ser inseridos no contedo do elemento texta-
rea atravs do atributo maxlength.
1 < textarea id = " mensagem_id " name = " mensagem " maxlength = " 140 " >
2
3 </ textarea >
Figura 2.62: Caixa de texto longo
Exerccios de Fixao
70 Crie um arquivo chamado formulario-caixas-especificas.html no projeto html em Site Root

com o seguinte contedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de formulrio com caixas especficas </ title >
6 </ head >
7 < body >
9 < label for = " keywords_id " > Busca : </ label >
10 < 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
20 id = " idade_id "
21 type = " number "
22 name = " idade "
23 min = " 18 "
24 max = " 60 " >
25
26 < br >
27
28 < label for = " curtiu_id " > Curtiu : </ label >
29 < input
30 id = " curtiu_id "
31 type = " range "
HTML 98
32 name = " curtiu "

33 min = " 0 "
34 max = " 10 " >
35
36 < br >
37
38 < label for = " email_id " > Email : </ label >
39 < input
40 id = " email_id "
41 type = " email "
42 name = " email "
43 placeholder = " Seu email " >
44
45 < br >
46
47 < label for = " telefone_id " > Telefone : </ label >
48 < input
49 id = " telefone_id "
50 type = " tel "
51 name = " telefone "
52 placeholder = " Seu telefone " >
53
54 < br >
55
56 < label for = " site_id " > Site : </ label >
57 < input
58 id = " site_id "
59 type = " url "
60 name = " site "
61 placeholder = " Seu site " >
62
63 < br >
64
65 < label for = " nascimento_id " > Nascimento : </ label >
66 < input
67 id = " nascimento_id "
68 type = " date "
69 name = " nascimento " >
70
71 < br >
72
73 < label for = " festa_aniversario_id " > Festa de Aniversrio : </ label >
74 < input
75 id = " festa_aniversario_id "
76 type = " datetime - local "
77 name = " festa_aniversario " >
78
79 < br >
80
81 < label for = " proximo_carnaval_mes_id " > Ms do prximo Carnaval : </ label >
82 < input
83 id = " proximo_carnaval_mes_id "
84 type = " month "
85 name = " proximo_carnaval_mes " >
86
87 < br >
88
89 < label for = " semana_rock_in_rio_id " > Semana do Rock in Rio : </ label >
90 < input
91 id = " semana_rock_in_rio_id "
92 type = " week "
93 name = " semana_rock_in_rio " >
94
95 < br >
96
97 < label for = " horario_de_entrada_id " > Horrio de entrada : </ label >
98 < input
99 id = " horario_de_entrada_id "
100 type = " time "
101 name = " horario_de_entrada " >
98 www.k19.com.br
99 HTML
102
103 < br >
104
105 < label for = " senha_id " > Senha : </ label >
106 < input
107 id = " senha_id "
108 type = " password "
109 name = " senha "
110 placeholder = " Sua senha " >
111
112 < br >
113
114 < label for = " mensagem_id " > Mensagem : </ label >
115 < textarea
116 id = " mensagem_id "
117 name = " mensagem "
118 rows = " 5 "
119 cols = " 50 "
120 maxlength = " 150 " > </ textarea >
121
122 < br >
123
125 </ form >
126 </ body >
127 </ html >
Cdigo HTML 2.104: formulario-caixas-especificas.html
Importante
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 definir um valor para o atributo value.
No envio do formulrio, esse valor transmitido ao Web Server se o checkbox correspondente estiver
marcado.
1 < input id = " sim_id " name = " newsletter " type = " checkbox " value = " sim " >
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 definir um checkbox. Para agrupar esses checkboxes, basta definir o atri-
buto name com o mesmo valor para eles.
1 < input id = " java_id " type = " checkbox " value = " java " name = " linguagens " >
2 < input id = " csharp_id " type = " checkbox " value = " csharp " name = " linguagens " >
3 < input id = " php_id " type = " checkbox " value = " php " name = " linguagens " >
4 < input id = " ruby_id " type = " checkbox " value = " ruby " name = " linguagens " >
5 < input id = " perl_id " type = " checkbox " value = " perl " name = " linguagens " >
Figura 2.63: Checkboxes
Para adicionar um radio em um formulrio, devemos utilizar o elemento input com type igual a
radio. Ao utilizar esse componente, importante definir um valor para o atributo value. No envio
do formulrio, esse valor transmitido ao Web Server se o radio correspondente estiver marcado.
1 < input id = " masculino_id " name = " sexo " type = " radio " value = " masculino " >
Eventualmente interessante agrupar um determinado conjunto de radios. Por exemplo, consi-

dere um formulrio que coleta o time preferido dos usurios. Para cada time, podemos definir um
radio. Para agrupar esses radios, basta definir o atributo name com o mesmo valor para eles.
1 < input id = " sp_id " type = " radio " value = " sao - paulo " name = " time - preferido " >
2 < input id = " barcelona_id " type = " radio " value = " barcelona " name = " time - preferido " >
3 < input id = " milan_id " type = " radio " value = " milan " name = " time - preferido " >
4 < input id = " mu_id " type = " radio " value = " manchester - united " name = " time - preferido " >
5 < input id = " bdm_id " type = " radio " value = " bayern - de - munique " name = " time - preferido " >
Figura 2.64: Radios
Por padro, quando um formulrio exibido para os usurios, os checkboxes e os radios no es-
to 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 HTML
1 < input id = " cor_id " name = " cor " type = " color " >
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 con-
tedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de checkboxes </ title >
6 </ head >
7 < body >
9 < label for = " java_id " > Java </ label >
10 < 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 >
20
21 < label for = " perl_id " > Perl </ label >
22 < input id = " perl_id " type = " checkbox " value = " perl " name = " linguagens " >
23
25 </ form >
26 </ body >
27 </ html >
Cdigo HTML 2.112: checkboxes.html
HTML 102
Importante
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 >

3 < head >
5 < title > Exerccio de radios </ title >
6 </ head >
7 < body >
9 < label for = " sp_id " > So Paulo </ label >
10 < input id = " sp_id " type = " radio " value = " sao - paulo " name = " time - preferido " checked >
11
12 < label for = " barcelona_id " > Barcelona </ label >
13 < input id = " barcelona_id " type = " radio " value = " barcelona " name = " time - preferido " >
14
15 < label for = " milan_id " > Milan </ label >
16 < input id = " milan_id " type = " radio " value = " milan " name = " time - preferido " >
17
18 < label for = " mu_id " > Manchester United </ label >
19 < input id = " mu_id " type = " radio " value = " manchester - united " name = " time - preferido " >
20
21 < label for = " bdm_id " > Bayern de Munique </ label >
22 < input id = " bdm_id " type = " radio " value = " bayern - munique " name = " time - preferido " >
23
25 </ form >
26 </ body >
27 </ html >
Cdigo HTML 2.113: radios.html
Importante
102 www.k19.com.br
103 HTML
http://localhost/html/public_html/radios.html.
http://localhost/~<USUARIO>/html/public_html/radios.html.
76 Crie um arquivo chamado selecao-cores.html no projeto html em Site Root com o seguinte
contedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de seleo de cores </ title >
6 </ head >
7 < body >
9 < label for = " cor_id " > Cor : </ label >
10 < input id = " cor_id " name = " cor " type = " color " >
11
13 </ form >
14 </ body >
15 </ html >
Cdigo HTML 2.114: selecao-cores.html
Importante
http://localhost/html/public_html/selecao-cores.html.
http://localhost/~<USUARIO>/html/public_html/selecao-cores.html.
Botes
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 definidas com JavaScript. Os textos
desses botes so definidos 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
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
definidos 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
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 file. Esse tipo de boto permite selecionar um arquivo para um eventual upload. O
formulrio que contm esse boto deve possuir o atributo enctype com o valor multipart/form-
data.
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 definida com o atributo src. Um texto alternativo deve ser definido com o atributo alt. Esse texto
pode ser utilizado caso ocorra algum problema no carregamento da imagem.
1 < form action = " parametros . php " method = " post " enctype = " multipart / form - data " >
2 < input id = " botao_id " alt = " enviar " type = " image " src = " submit . png " >
3 </ form >
Figura 2.71: Imagem como 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 >

3 < head >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " enctype = " multipart / form - data " >
HTML 106
9 < input id = " file_id " type = " file " name = " file " >
10
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
20 < 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 >
30 </ body >
31 </ html >
Cdigo HTML 2.121: botoes.html
Importante
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 op-
es. Essa seleo pode ser realizada atravs de um drop-down list. Para adicionar esse tipo de com-
ponente, devemos utilizar o elemento select. Normalmente, o select definido pelos navegadores
como inline-level element.
1 < select id = " estados_id " name = " estado " >
2 ...
3 </ select >
106 www.k19.com.br
107 HTML
As opes devem ser definidas no contedo do elemento select e elas so adicionadas com o ele-
mento option. O contedo do elemento option exibido para os usurios. Esse elemento possui um
atributo chamado value. Quando o formulrio for enviado, o valor do atributo value transmitido
ao Web Server se a opo correspondente foi selecionada pelo usurio. Se esse atributo no estiver
definido, o contedo do elemento option transmitido ao Web Server se a opo correspondente foi
selecionada pelo usurio.
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 " >
5 < option value = " PR " > Paran </ 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 cha-
mado label. O valor desse atributo exibido no drop-down list.
2 < optgroup label = " Regio Sudeste " >
HTML 108
5 </ optgroup >
6 < optgroup label = " Regio Sul " >
9 </ optgroup >
10 < optgroup label = " Regio Nordeste " >
13 </ optgroup >
14 </ select >
Drop-down list com itens pr-selecionados

Quando um drop-down list exibido para os usurios, opes podem estar por padro seleciona-
das. O atributo selected do elemento option define 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 " >
3 < option value = " SP " selected > So Paulo </ option >
5 </ optgroup >
7 < option value = " RS " selected > Rio Grande do Sul </ option >
9 </ optgroup >
13 </ optgroup >
14 </ select >
Exerccios de Fixao
80 Crie um arquivo chamado drop-down-list.html no projeto html em Site Root com o seguinte
contedo.
1 <! DOCTYPE html >

108 www.k19.com.br
109 HTML
3 < head >

6 </ head >
7 < body >
9 < select id = " estados_id " name = " estados " multiple = " multiple " >
16 </ select >
17
18 < select id = " estado_id " name = " estado " >
22 </ optgroup >
26 </ optgroup >
30 </ optgroup >
31 </ select >
32
34 </ form >
35 </ body >
36 </ html >
Cdigo HTML 2.127: drop-down-list.html
Importante
http://localhost/html/public_html/drop-down-list.html.
http://localhost/~<USUARIO>/html/public_html/drop-down-list.html.
Fieldset
HTML 110
Os campos de um formulrio muito longo podem ser agrupados logicamente com o elemento
fieldset. No contedo desse elemento, podemos utilizar o elemento legend para definir a legenda do
fieldset. Normalmente, o fieldset definido pelos navegadores como block-level element.
1 < fieldset >

2 < legend > Dados Pessoais </ legend >
3 ...
4 </ fieldset >
5 < fieldset >
6 < legend > Formao </ legend >
7 ...
8 </ fieldset >
9 < fieldset >
10 < legend > Experincia </ legend >
11 ...
12 </ fieldset >
Figura 2.75: Fieldset
Exerccios de Fixao
82 Crie um arquivo chamado fieldset.html no projeto html em Site Root com o seguinte contedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de fieldset </ title >
6 </ head >
7 < body >
9 < fieldset >
10 < legend > Dados Pessoais </ legend >
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 >
20 < 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 HTML
23 </ fieldset >

24
26 </ form >
27 </ body >
28 </ html >
Cdigo HTML 2.129: fieldset.html
Importante
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. funda-
mental identificar as listas de sugestes com o atributo id.
1 < datalist id = " comidas_id " >

2 ...
3 </ datalist >
As opes devem ser definidas no contedo do elemento datalist e elas so adicionadas com o
elemento option. O atributo value de um elemento option define uma sugesto.

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

8 </ datalist >
Figura 2.76: Autocomplete
Exerccios de Fixao
84 Crie um arquivo chamado autocomplete.html no projeto html em Site Root com o seguinte
contedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de autocomplete </ title >
6 </ head >
7 < body >
9 < input id = " comida_id " name = " comida " type = " text " list = " comidas_id " >
10
16 </ datalist >
17
19 </ form >
20 </ body >
21 </ html >
Cdigo HTML 2.133: autocomplete.html
Importante
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 >
HTML 114
Figura 2.80: Botes desabilitados
Campos fixos
Eventualmente, determinados campos de um formulrio devem ser fixo, ou seja, os usurios no

podem alterar o contedo. Para fixar o contedo de um campo, podemos utilizar o atributo readonly
dos elementos input e textarea. Esse atributo no precisa de valor.
1 < input id = " nome_id " name = " nome " type = " text " value = " Marcelo Martins " readonly >
Figura 2.81: Campos fixos
1 < textarea readonly >

2 Gostaria de efetuar a matrcula no K10 - Formao Desenvolvedor Java .
3 </ textarea >
Figura 2.82: Campos fixos
Exerccios de Fixao
86 Crie um arquivo chamado disabled-readonly.html no projeto html em Site Root com o seguinte
contedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de autocomplete </ title >
6 </ head >
7 < body >
10 < input id = " nome_id " name = " nome " type = " text " value = " Marcelo Martins " readonly >
11
13 < input id = " email_id " name = " email " type = " email " disabled >
114 www.k19.com.br
115 HTML
14
16 </ form >
17 </ body >
18 </ html >
Cdigo HTML 2.140: disabled-readonly.html
Importante
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 veri-
ficam se o contedo de uma caixa de email um email vlido.
Figura 2.83: Validao de email
Os navegadores tambm verificam se o contedo de uma caixa de URL uma url vlida.
HTML 116
Figura 2.84: Validao de URL
Outras validaes devem ser definidas explicitamente. Por exemplo, se um determinado campo
obrigatrio, devemos utilizar o atributo required. Esse atributo no precisa de valor.
1 < input id = " nome_id " name = " nome " type = " text " required >
Figura 2.85: Validao de campo obrigatrio
Se um determinado campo deve respeitar uma expresso regular, devemo utilizar o atributo pat-
tern.
1 < input
2 id = " placa_id "
3 name = " placa "
4 type = " text "
5 pattern = " [A - Z ]{3} [0 -9]{4} "
6 title = " As placas so formadas por 3 letras ou 4 nmeros " >
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 = " 60 "
7 title = " A idade minma 18 e a mxima 60 " >
116 www.k19.com.br
117 HTML
Figura 2.87: Validao de numrica de mnimo e mximo
Exerccios de Fixao
88 Crie um arquivo chamado validacao.html no projeto html em Site Root com o seguinte con-
tedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de validao </ title >
6 </ head >
7 < body >
10 < input id = " nome_id " name = " nome " type = " text " required >
11
14
15 < label for = " url_id " > Site : </ label >
17
18 < label for = " placa_id " > Placa : </ label >
19 < input
20 id = " placa_id "
21 name = " placa "
22 type = " text "
23 pattern = " [A - Z ]{3} [0 -9]{4} "
24 title = " As placas so formadas por 3 letras ou 4 nmeros " >
25
27 </ form >
28 </ body >
29 </ html >
Cdigo HTML 2.146: validacao.html
Importante
HTML 118
http://localhost/html/public_html/validacao.html.
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 definir especificamente os principais pedaos que ge-
ralmente um documento HTML possui.
header
O elemento header utilizado para definir um cabealho de um documento HTML ou de uma
seo de um documento HTML. O objetivo desse elemento definir um contedo de introduo
ou de navegao. Normalmente, no header, encontramos os elementos h1, h2, h3, h4, h5 e h6.
No contedo do header, tambm comum encontrar sumrios, formulrios de busca, logos, entre
outros.
1 < body >

2 < header >
3 < h1 > Blog da K19 </ h1 >
4 < img src = " k19 - logo . png " alt = " K19 " >
5 </ header >
6
7 < article >
8 < header >
9 < h1 > Novos elementos do HTML5 </ h1 >
10 < img src = " html5 - logo . png " alt = " HTML5 " >
11 </ header >
12
13 ...
14 </ article >
15
16 ...
17 </ body >
Cdigo HTML 2.147: Exemplo de cabealho
footer
O elemento footer utilizado para definir um rodap para o documento HTML ou para uma
seo do documento HTML. muito comum encontrarmos em seu contedo informaes sobre a
seo a qual ele pertence como quem a escreveu, links relacionados ao contedo da seo e infor-
maes legais, por exemplo.
1 < body >

2 ...
3 < article >
4 <p > Loren ipsum...</ p >
5
118 www.k19.com.br
119 HTML
6 < footer > Postado por : Jonas Hirata </ footer >
7 </ article >
8
9 < footer >&copy ;2013 K19 Treinamentos . </ footer >
10 </ body >
Cdigo HTML 2.148: Exemplo de rodap
nav
O elemento nav utilizado para definir um bloco com os principais links de um documento
HTML. comum, definir os principais links de um documento HTML nos rodaps. Dessa forma, o
elemento nav aparecer com frequncia no contedo do elemento footer.
1 < body >

2 < header >
3 < h1 > Blog da K19 </ h1 >
4
5 < nav >
6 <a href = " # " > Home </ a >
7 <a href = " # " > ltimos posts </ a >
8 <a href = " # " > Arquivo </ a >
9 </ nav >
10 </ header >
11
12 < section >
13 < h1 > Meus Posts </ h1 >
14
15 ...
16 </ section >
17
18 < footer >
19 <p >&copy ;2013 K19 Treinamentos . </ p >
20 < nav >
21 <a href = " # " > Home </ a >
22 <a href = " # " > ltimos posts </ a >
23 <a href = " # " > Arquivo </ a >
24 </ nav >
25 </ footer >
26 </ body >
Cdigo HTML 2.149: Exemplo de nav
article
O elemento article utilizado para definir uma composio independente em um documento
HTML. A princpio, um article pode ser distribudo independentemente ou facilmente reutilizado.
apropriado utilizar esse elemento para definir um post de um frum, um artigo de uma revista
ou jornal, um post de um blog, um comentrio enviado por um usurio, um widget interativo ou
qualquer item independente de contedo.
Considere um blog no qual os usurios podem enviar comentrios sobre os posts publicados. Os
posts desse blog podem ser definidos com o elemento article. Os comentrios podem ser definidos
com elementos article internos aos que definem os posts. Um elemento article dentro de outro
elemento article deve definir algo relacionado ao contedo do article que o contm.
1 < body >

2 < article >
3 < h1 > Primeiro post do blog </ h1 >
5
HTML 120
6 < h2 > Comentrios </ h2 >

7 < article > Legal este post ! </ article >
8 < article > Bacana este post ! </ article >
9 < article > Da hora este post ! </ article >
10 </ article >
11 </ body >
Cdigo HTML 2.150: Exemplo de artigo
aside
O elemento aside utilizado para definir algum contedo que esteja relacionado ao contedo
principal, mas no o foco do documento HTML. Normalmente, esse elemento exibido em uma
coluna lateral em relao ao contedo principal.
1 < body >

2 < article >
3 < h1 > Novidades do HTML5 </ h1 >
5
6 < h2 > Comentrios </ h2 >
7 < article > Legal este post ! </ article >
8 < article > Bacana este post ! </ article >
9 < article > Da hora este post ! </ article >
10 </ article >
11 < aside >
12 < h1 > Posts relacionados </ h1 >
13 ...
14 </ aside >
15 </ body >
Cdigo HTML 2.151: Exemplo de aside
section
O elemento section utilizado para definir uma seo genrica de um documento. Uma seo
o agrupamento de um contedo dentro de um tema. Normalmente, as sees possuem cabealho e
rodap.
1 < body >

2 < section >
3 < h1 > ltimos Posts </ h1 >
4 < article >
5 < h1 > Primeiro post do blog </ h1 >
7 </ article >
8
9 < article >
10 < h1 > Segundo post do blog </ h1 >
12 </ article >
13
14 < article >
15 < h1 > Terceiro post do blog </ h1 >
17 </ article >
18 </ section >
19 </ body >
Cdigo HTML 2.152: Exemplo de seo
120 www.k19.com.br
121 HTML
figure
O elemento figure deve ser utilizado para definir um contedo que auto-suficiente e tipica-
mente referenciado como uma unidade singular do fluxo principal do documento. Opcionalmente
o contedo pode possuir uma legenda.
Por exemplo, esse elemento pode ser utilizado para definir ilustraes, diagramas, fotos, vdeos,
cdigos fonte em um documento HTML. Normalmente, esse itens so referenciados no contedo
principal mas podem ser removidos sem afetar o fluxo do documento.
figcaption
O elemento figcaption deve ser filho de um elemento figure. Ele utilizado para definir a legenda
do contedo do elemento pai. Alm disso, o elemento figcaption deve ser o primeiro ou ltimo filho
de um elemento figure.
1 < body >

3
4 <p >
5 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vestibulum
6 enim est , ultrices ac vehicula vitae , pharetra id mauris . Quisque sit
7 amet nisl mollis sem fermentum accumsan . Sed sed quam nisi , cursus
8 sodales metus . Curabitur dapibus , massa sed sollicitudin viverra , odio
9 justo dignissim metus , vel tempor turpis neque id erat . Aenean fermentum
10 ultricies ante a luctus .
11 </ p >
12
13 < figure >
14 < img src = " # " title = " Aenean fermentum " alt = " Mauris convallis , leo sollicitudin " >
15 < figcaption > Figura 3 b . Curabitur dapibus , massa sed sollicitudin . </ figcaption >
16 </ figure >
17
18 <p >
19 Mauris fermentum lorem nec nisi euismod elementum . Aenean nec magna
20 dolor , vel fermentum turpis . Mauris convallis , leo sollicitudin
21 egestas malesuada , nunc est ultrices enim , eget varius odio felis et
22 velit . Sed ac lorem nibh , ut convallis ante .
23 </ p >
24 </ body >
Cdigo HTML 2.153: Exemplo de figure e figurecaption
HTML 122
header
nav
Home Destaque Arquivo
section
ltimos Posts
Neque porro quisquam est qui dolorem article
So Paulo, SP - 12/11/2013 - 03:45 PM
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
Phasellus ullamcorper nibh

Nullam dictum in nisl mollis ullamcorper. figcaption
aside
Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget ullamcorper turpis,
facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse pellentesque ligula arcu, in
viverra massa rhoncus a.
Comentrios
Mauris Vulputate article

13/11/2013 - 10:27 AM
Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget
ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse
pellentesque ligula arcu, in viverra massa rhoncus a.
article Donec Tristique

13/11/2013 - 11:42 AM
Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget
ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse
pellentesque ligula arcu, in viverra massa rhoncus a.
Posts em Destaque section
Donec quis suscipit odio, k19 treinamentos article

So Paulo, SP - 12/10/2013 - 06:19 PM
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 Donec varius a nibh
Sed sit amet enim sapien Maecenas non enim vel est volutpat
Nulla quis lectus non orci pellentesque tristique Vivamus tristique tempor est, interdum Like us on
Duis eget ullamcorper turpis, facilisis commodo

Suspendisse pellentesque ligula arcu, in viverra
Proin id pretium felis
Nulla tincidunt tincidunt est, ac porta quam
Bookface
Nulla at quam arcu Sed ultricies justo vitae ullamcorper pulvinar
Quisque sed erat ac ligula auctor porttitor Nullam dictum in nisl mollis ullamcorper
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, figure e figcap-
tion so definidos pelos navegadores como block-level elements.
Diviso de contedo
Muitas vezes, desejamos separar o contedo de um documento HTML. Geralmente, essas divi-
ses ocorrem quando h uma mudana de tpico no contedo. Essas divises podem ser realizadas
com o elemento hr. Normalmente, o hr definido pelos navegadores como block-level element.
1 < body >

3
4 <p >
11 </ p >
12
13 < hr >
14
15 <p >
16 Mauris fermentum lorem nec nisi euismod elementum . Aenean nec magna
17 dolor , vel fermentum turpis . Mauris convallis , leo sollicitudin
18 egestas malesuada , nunc est ultrices enim , eget varius odio felis et
19 velit . Sed ac lorem nibh , ut convallis ante .
20 </ p >
21 </ body >
Cdigo HTML 2.154: Exemplo de separao de contedo
Exerccios de Fixao
90 Crie um arquivo chamado hr.html no projeto html em Site Root com o seguinte contedo.
1 <! DOCTYPE html >

3 < head >
5 < title > Exerccio de separao de contedo </ title >
6 </ head >
7 < body >
8 < h1 > Desenvolvimento Web </ h1 >
9
10 < h2 > HTML </ h2 >
11 <p >
18 </ p >
19
20 < hr >
21
HTML 124
22 < h2 > CSS </ h2 >

23 <p >
30 </ p >
31 </ body >
32 </ html >
Cdigo HTML 2.155: hr.html
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
definem o elemento div como um block-level element e o span como um inline-level element. O
principal objetivo em agrupar elementos com div ou span aplicar formataes especficas para
cada grupo. Por isso, a utilidade desses elementos ficar mais clara quando falarmos sobre CSS.
Erro: Fechamento inadequado das tags
Um erro comum, ao definir um documento HTML, o fechamento inadequado das tags.
1 <! DOCTYPE html >

3 < head >
5 < title > Fechamento inadequado das tags </ title >
6 </ head >
7 < body >
8 < strong > Fechamento < em > inadequado </ strong > das tags </ em >
9 </ body >
10 </ html >
Erro: Imagens sem texto alternativo
Um erro comum, ao definir um documento HTML, no definir um texto alternativos para as

imagens.
124 www.k19.com.br
125 HTML
1 <! DOCTYPE html >

3 < head >
5 < title > Imagens sem texto alternativo </ title >
6 </ head >
7 < body >
8 < img src = " imagem . png " >
9 </ body >
10 </ html >
Erro: Criar listas com o elemento br
Um erro comum, ao definir um documento HTML, criar listas com o elemento br.
1 <! DOCTYPE html >

3 < head >
5 < title > Criar listas com o elemento br </ title >
6 </ head >
7 < body >
8 1. HTML < br >
9 2. CSS < br >
10 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.
2 Crie um arquivo chamado geografia.html no projeto html em Site Root. Utilize a imagem abaixo
como base.
HTML 126
3 Crie um arquivo chamado seguro-treinamento.html no projeto html em Site Root. Utilize a

imagem abaixo como base.
126 www.k19.com.br
127 HTML
4 Crie um arquivo chamado caracteres-especiais.html no projeto html em Site Root. Utilize a

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

Utilize a imagem abaixo como base.
6 Crie um arquivo chamado codigo-java.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
HTML 128
7 Crie um arquivo chamado elementos-i-b.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
8 Crie um arquivo chamado sao-paulo.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
9 Crie um arquivo chamado spfc.html no projeto html em Site Root. Utilize a imagem abaixo
como base.
128 www.k19.com.br
129 HTML
10 Crie um arquivo chamado mais-citacoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
11 Crie um arquivo chamado abbr.html no projeto html em Site Root. Utilize a imagem abaixo
como base.
12 Crie um arquivo chamado mais-definicoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
HTML 130
13 Crie um arquivo chamado mais-alteracoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
14 Crie um arquivo chamado mais-datas.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
15 Crie um arquivo chamado texto-marcado.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
130 www.k19.com.br
131 HTML
16 Crie um arquivo chamado pontos-turisticos.html no projeto html em Site Root. Utilize a ima-
gem abaixo como base.
17 Crie um arquivo chamado manual-k19.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
HTML 132
18 Crie um arquivo chamado mais-links.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
19 Crie um arquivo chamado mais-imagens.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
20 Crie um arquivo chamado mais-tabelas.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
132 www.k19.com.br
133 HTML
21 Crie um arquivo chamado mais-formularios.html no projeto html em Site Root. Utilize a ima-
gem abaixo como base.
Resumo do Captulo
HTML 134
1 A linguagem HTML utilizada na criao das pginas web e especificada pelo W3C.
2 Um documento HTML composto por elementos hierarquicamente organizados.
3 Os elementos so inseridos em um documento HTML com o uso de tags.
4 O elemento DOCTYPE utilizado para declarar o tipo do documento.
5 A raiz de um documento HTML definida pelo elemento html.
6 Informaes sobre um documento HTML devem ser definidas no corpo do elemento head.
7 No corpo do elemento body, definido o contedo do documento HTML.
8 A semntica dos elementos HTML deve ser respeitada para a correta interpretao do contedo
por buscadores e softwares de leitura (acessibilidade), por exemplo.
9 Os elementos h1, h2, h3, h4, h5 e h6 so utilizados para definir ttulos em um documento
HTML.
10 Pargrafos so inseridos em um documento HTML com o elemento p.
11 Determinados caracteres devem ser inseridos em um documento HTML atravs do seu respec-
tivo cdigo.
12 Os elementos pre, code, i, b, sub, sup, strong, em, blockquote, q, cite, abbr, dfn, ins, del, s,
time e mark so utilizados para definir os textos de um documento HTML.
13 As listas sem ordem so definidas com o elemento ul. As listas com ordem so definidas com o
elemento ol. As listas de descries so definidas com o elemento dl.
14 Os itens das listas com ordem e sem ordem so definidos com o elemento li.
15 Os termos de uma lista de descries so definidos com o elemento dt. As descries desses
termos so definidas com o elemento dd.
134 www.k19.com.br
135 HTML
16 Podemos adicionar um documento HTML dentro de outro documento HTML com o elemento
iframe.
17 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.
21 Basicamente, os campos de um formulrio so criados com os elementos input, textarea e

select.
22 As partes de um documento HTML podem ser definidas com os elementos header, footer,
article, aside, section, figure, figcaption, div e span.
23 As partes de um documento HTML podem ser separadas com o elemento hr.
Prova
1 Quem define a linguagem HTML?
a) Microsoft.
b) Anatel.
c) ABNT.
d) W3C.
e) NASA.
2 O que o elemento DOCTYPE determina?
a) O tipo do navegador.
b) O tipo do sistema operacional.
c) O tipo do documento.
HTML 136
d) O tipo do dispositivo.
e) Nenhuma das anteriores.
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.
4 Qual alternativa apresenta um comentrio HTML vlido?
a) <! comentrio >
b) <* comentrio *>
c) // comentrio
d) /* comentrio */
e) # comentrio
5 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 deficientes visuais.
c) Respeitar a semntica dos elementos HTML diminui o tamanho das pginas web.
d) A semntica dos elementos HTML definida na especificao da linguagem HTML.
a) Ttulos com h2 so mais importantes do que ttulos com h1.
b) Os ttulos so definidos com os elementos h1, h2, h3, h4, h5 e h6.
c) Os ttulos so definidos com os elementos h1, h2 e h3.
136 www.k19.com.br
137 HTML
d) Os ttulos so definidos com os elementos header1, header2, header3, header4, header5 e

header6.
e) O elemento header1 equivale ao elemento h1.
a) Texto pr-formatado pode ser definido com o elemento text-pre.
b) O elemento code utilizado para associar cdigo JavaScript a um documento HTML.
c) O elemento stronger define textos importantes.
d) Citaes longas so definidas com o elemento blockquote.
e) Podemos marcar texto com o elemento text-mark.
a) As listas com ordem so definidas atravs do elemento dl.
b) Os termos de uma lista de descries so definidos com o elemento li.
c) As listas com ordem e sem ordem so definidas atravs dos elementos ul e ol respectivamente.
d) Os tens de uma lista com ordem so definidos atravs do elemento item.
e) Uma lista pode ser definida dentro de outra lista.
9 Qual alternativa est incorreta?
a) Os links so definidos com o elemento a.
b) O destino de um link determinado pelo atributo href.
c) O destino de um link com target="_blank" aberto em uma nova aba ou janela.
d) O destino de um link com target="_self" aberto na mesma aba ou janela.
e) O atributo to define o destino dos links.
10 Para exibir um texto quando o mouse passa sobre uma imagem, devemos utilizar qual atributo
do elemento img?
a) alt.
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.
a) As caixas de texto so adicionadas com o elemento input-text.
b) Os rtulos so definidos com o elemento input-label.
c) Podemos criar um boto de submit com o elemento input.
d) As caixas de senha so definidas com o elemento password.
e) Os checkboxes e os radios so criados com os elementos checkbox e radio respectivamente.
a) As opes de um drop-down list so definidas 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 define 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.
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 fieldset.
c) O elemento label deve ser utilizado em conjunto com o elemento fieldset.
d) O elemento legend deve ser utilizado em conjunto com o elemento inputset.
e) A legenda de um fieldset definida atravs do atributo legend.
a) As sugestes para o autocomplete de um campo so definidas pelos elementos datalist e op-

tion.
b) As sugestes para o autocomplete de um campo so definidas atravs do atributo autocom-

plete.
c) O elemento disabled utilizado para desabilitar campos ou botes.
d) O atributo off utilizado para desabilitar campos ou botes.
e) Campos fixos podem ser definidos com o atributo no-write.
12 15
HTML 140
140 www.k19.com.br
CAPTULO
CSS
3
Quando no definimos uma formatao especfica para os elementos HTML de uma pgina web,
eles so exibidos com o estilo determinado pelo navegador utilizado. H dois problemas principais
em deixar os navegadores decidirem qual formatao deve ser adotada. O primeiro que cada na-
vegador pode adotar uma formatao diferente. Consequentemente, uma mesma pgina web no
ser exibida exatamente da mesma forma em todos os navegadores. O segundo problema que as
formataes adotadas pelos principais navegadores no so bonitas.
Podemos padronizar a forma que as pginas web so exibidas nos diferentes navegadores e obter
um visual agradvel definindo a nossa prpria formatao. O estilo das pginas deve ser definido
com a linguagem CSS (Cascading Style Sheets).
Mais Sobre
Assim como a linguagem HTML, a linguagem CSS definida pelo W3C. Voc pode con-
sultar a especificao do CSS no endereo http://www.w3.org/Style/CSS/specs.
O W3C faz diversas recomendaes sobre como implementar as funcionalidades do CSS. Con-
tudo, nem sempre, os navegadores respeitam essas recomendaes e eventualmente cada nave-
gador adota uma abordagem prpria para uma determinada funcionalidade. Essas diferenas
podem gerar problemas nas pginas web.
Mais Sobre
Nas primeiras verses da linguagem HTML, a formatao era realizada atravs de atri-
butos especficos dos elementos. Por exemplo, a cor do fundo de uma pgina poderia
ser definida da seguinte forma:
1 < body bgcolor = " red " >
Hoje em dia, essa abordagem totalmente no recomendada. Qualquer alterao visual dos
elementos HTML deve ser definida atravs da linguagem CSS.
Box Model
Todo elemento HTML, no corpo de uma pgina web, est contido em um box. Considere o do-
cumento HTML abaixo.
1 <! DOCTYPE html >

3 < head >
CSS 142
5 < title > Desenvolvimento Web </ title >

6 </ head >
7 < body >
8 < h1 > Desenvolvimento Web </ h1 >
9
10 < h2 > HTML </ h2 >
11 <p >
14 amet nisl mollis sem fermentum < strong > accumsan </ strong >.
15 </ p >
16 <a href = " # " > Mais sobre </ a >
17
18 < h2 > CSS </ h2 >
19 <p >
20 Lorem ipsum dolor sit amet , < em > consectetur </ em > adipiscing elit . Vestibulum
22 amet nisl mollis sem fermentum accumsan .
23 </ p >
24 <a href = " # " > Mais sobre </ a >
25 </ body >
26 </ html >
Agora, observe em destaque na imagem a seguir, os boxes correspondentes aos elementos HTML
do documento anterior.
Figura 3.1: Boxes
Na imagem, os boxes dos block-level elements foram exibidos com linha contnua enquanto os
boxes dos inline-level elements foram exibidos com linha tracejada. Os boxes dos block-level ele-
ments 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
CSS 144
Podemos aplicar regras de formatao para cada elemento HTML. Observe a estrutura de uma
regra CSS.
Seletor Corpo
p {
font-size: 40px; Propriedade
}
Figura 3.3: Estrutura de uma regra CSS
O seletor determina para quais elementos a regra de formatao deve ser aplicada. No corpo de
uma regra CSS, podemos definir diversas propriedades. Cada propriedade define uma caracterstica
visual. Por exemplo, a propriedade font-size utilizada para definir o tamanho da fonte utilizada
nos textos.
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 pro-
priedades CSS muito alto dificultando a manuteno das pginas web.
1 <p style = " color : red " >

2 ...
3 </ p >
Internal style sheet

As regras CSS podem ser definidas no contedo do elemento style. Esse elemento deve ser defi-
nido dentro do head.
1 < head >

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 definido as regras de formatao em um arquivo
independente.
1 p {
2 color : red ;
3 }
Cdigo CSS 3.1: estilo.css
Depois de definir as regras CSS em um arquivo separado, ele deve ser associado ao documento
HTML atravs do elemento link.
1 < head >

4 < link rel = " stylesheet " type = " text / css " href = " estilo . css " >
5 </ head >
Comentrios
Podemos adicionar comentrios no cdigo CSS atravs dos marcadores /* e */.
1 /* uma regra CSS para formatar os pargrafos */

2 p {
3 color : red ;
4 }
Cdigo CSS 3.2: estilo.css
Chrome DevTools
Como vimos no captulo anterior, podemos utilizar ferramentas como o Chrome DevTools para
analisar e modificar os documentos HTML. Essas ferramentas, tambm podem ser utilizadas para
editar as propriedades CSS dos elementos de uma pgina web. Considere o cdigo HTML e o CSS
abaixo.
1 <! DOCTYPE html >

3 < head >
4 < title > K19 - Chrome DevTools </ title >
6 < link rel = " stylesheet " type = " text / css " href = " chrome - devtools . css " >
7 </ head >
8 < body >
9 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
10 <p class = " class1 " > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
11 </ body >
12 </ html >
Cdigo HTML 3.6: chrome-devtools.html
1 p {
2 border : 4 px solid red ;
CSS 146
3 font - size : 20 px ;
4 }
5
6 . class1 {
7 color : blue ;
8 border : 10 px solid green ;
9 }
Cdigo CSS 3.3: chrome-devtools.css
Observe a figura abaixo. Atravs do painel Styles podemos visualizar as regras CSS que foram
aplicadas a um determinado elemento HTML. Esse painel tambm mostra a origem dessas regras e
as dimenses do box do elemento.
Podemos incluir, remover, desabilitar ou alterar as propriedades de um elemento clicando sobre

elas no painel Styles.
146 www.k19.com.br
147 CSS
Observe na imagem abaixo que o elemento HTML selecionado no painel Styles afetado por
duas regras CSS oriundas do arquivo chrome-devtools.css. Repare que a propriedade border defi-
nida nessas duas regras. O Chrome DevTools indica atravs de um trao horizontal qual ocorrncia
dessa propriedade est sendo desconsiderada. Mais adiante, discutiremos como determinar a prio-
ridade das regras CSS em situaes como essa.
CSS 148
No painel Computed podemos conferir todas as propriedades CSS que foram aplicadas em um
elemento.
148 www.k19.com.br
149 CSS
Se desejarmos visualizar as propriedades que foram herdadas dos elementos ancestrais, pode-
mos marcar a opo Show inherited.
CSS 150
Exerccios de Fixao
1 Abra o Netbeans e crie um projeto chamado css.
Importante
deve salvar o projeto css em C:\inetpub\wwwroot. Lembre-se que necessrio ins-
talar o IIS conforme vimos anteriormente.
150 www.k19.com.br
151 CSS
Importante
jeto css em /home/<USUARIO>/public_html. Lembre-se que necessrio instalar
e configurar o Apache HTTP Server como vimos anteriormente.
Figura 3.4: Projeto css
CSS 152
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao1.zip
152 www.k19.com.br
153 CSS
2 No projeto css, crie um arquivo chamado css.html. Todos os pargrafos desse documento devem
ser exibidos em negrito, com cor azul e com fonte 20px. Defina uma regra CSS para formatar os
pargrafos.
1 <! DOCTYPE html >

3 < head >
5 < title > CSS </ title >
6 < style type = " text / css " >
7 p {
8 font - weight : bold ;
10 color : #0000 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
http://localhost/css/public_html/css.html.
http://localhost/~<USUARIO>/css/public_html/css.html.
4 Para organizar melhor o contedo e a formatao da pgina criada anteriormente, crie um ar-
quivo CSS chamado style.css no projeto css.
1 p {
4 color : #0000 FF ;
5 }
Cdigo CSS 3.4: style.css
5 Modifique o arquivo css.html para aplicar as regras de formatao criadas no exerccio anterior.
1 <! DOCTYPE html >

3 < head >
5 < title > CSS </ title >
6 < link rel = " stylesheet " type = " text / css " href = " style . css " >
7 </ head >
8 < body >
9 <p > Um pargrafo formatado </ p >
CSS 154
10 <p > Outro pargrafo formatado </ p >

11 </ body >
12 </ html >
Cdigo HTML 3.8: css.html
Cores
H diversas formas de escolher uma cor na linguagem CSS.
Nome
A especificao da linguagem CSS nomeou 147 cores. Voc pode verificar a lista desses nomes
no endereo http://www.w3.org/TR/css3-color/#svg-color. As cores bsicas do CSS so: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.
Hexadecimal
A quantidade de cores suportada pela linguagem CSS 16.777.216. Como vimos apenas 147 co-
res 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 hexa-
decimal das cores bsicas.
cdigo hexadecimal nome da cor cor cdigo hexadecimal nome da cor cor
#00FFFF aqua #000080 navy
#000000 black #808000 olive
#0000FF blue #800080 purple
#FF00FF fuchsia #FF0000 red
#808080 gray #C0C0C0 silver
#008000 green #008080 teal
#00FF00 lime #FFFFFF white
#800000 marron #FFFF00 yellow
O cdigo hexadecimal de uma cor comea com o caractere #. Os dois primeiros dgitos definem
a quantidade de vermelho, os dois dgitos do meio definem a quantidade de verde e os dois ltimos
dgitos definem a quantidade de azul.
Funo rgb()
A funo rgb() devolve uma cor a partir de uma quantidade de vermelho, de verde e de azul.
Essas quantidades podem ser definidas em porcentagem ou em valores inteiros de 0 a 255. Veja
como podemos obter as cores bsicas a partir da funo rgb().
154 www.k19.com.br
155 CSS
rgb() nome da cor cor rgb() nome da cor cor

rgb(0, 255, 255) aqua rgb(0, 0, 128) navy
rgb(0, 0, 0) black rgb(128, 128, 0) olive
rgb(0, 0, 255) blue rgb(128, 0, 128) purple
rgb(255, 0, 255) fuchsia rgb(255, 0, 0) red
rgb(128, 128, 128) gray rgb(192, 192, 192) silver
rgb(0, 128, 0) green rgb(0, 128, 128) teal
rgb(0, 255, 0) lime rgb(255, 255, 255) white
rgb(128, 0, 0) marron rgb(255, 255, 0) yellow
Funo rgba()
A funo rgba() muito semelhante funo rgb(). A diferena que a funo rgba() possui um
quarto parmetro que define a opacidade da cor. O valor desse parmetro deve ser maior ou igual a
0 e menor ou igual a 1. Por exemplo, para definir a cor blue com 50% de opacidade, podemos utilizar
a funo rgba() com os seguintes parmetros.
1 rgba (0 , 0 , 255 , 0.5)
Funo hsl()
Podemos usar a escala HSL (Hue, Saturation and Lightness ou Matiz, Saturao e Brilho) para
selecionar uma cor atravs da funo hsl(). Essa funo recebe 3 parmetros. O primeiro deve ser
um valor inteiro de 0 at 360. O segundo e o terceiro so porcetagens.
1 hsl (180 , 50% , 60%)
Funo hsla()
Assim como a funo hsl(), a funo hsla() tambm permite a seleo das cores atravs da escala
HSL. A diferena que a ltima permite que a opacidade da cor seja definida.
1 hsla (180 , 50% , 60% , 0.5)
Unidades de medida
Para definir um tamanho ou uma distncia, devemos utilizar as unidades da linguagem CSS.
Podemos classificar essas unidades em absolutas e relativas.
Unidades absolutas
Unidade Descrio
cm centmetro
mm milmetro
in polegada
pt ponto (1 pt igual a 1/72 in)
pc pica (1 pc igual a 12 pt)
px pixel
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 Descrio
em 1 em igual ao tamanho da fonte do elemento onde essa unidade for utili-
zada.
ex Geralmente, 1 ex igual a altura da letra x da fonte atual.
ch Geralmente, 1 ch igual a largura do dgito 0 da fonte atual.
rem 1 rem igual ao tamanho da fonte do elemento raiz do documento HTML.
vw 1 vw igual a 1% da largura da rea de visualizao do navegador (viewport).
vh 1 vh igual a 1% da altura da rea de visualizao do navegador (viewport).
vmin 1 vmim igual ao valor mnimo entre vw e vh.
vmax 1 vmim igual ao valor mximo entre vw e vh.
Backgrounds
Podemos definir a formatao do background de um elemento HTML com as seguintes proprie-

dades CSS:
background-color
A propriedade background-color utilizada para definir a cor do background dos elementos
HTML.
Valor Descrio
color Uma cor CSS.
transparent Faz o background ser transparente (padro).
inherit Assume o valor da mesma propriedade no elemento HTML pai.
K19 Treinamentos background-color: yellow
K19 Treinamentos background-color: #c1a4cd
K19 Treinamentos background-color: transparent
background-image
A propriedade background-image utilizada para definir a imagem que deve ser utilizada como
background de um elemento HTML.
Valor Descrio
url(url) URL da imagem de background.
none Sem imagem de background (padro).
156 www.k19.com.br
157 CSS
Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Nunc iaculis pharetra
felis elementum mollis. Integer iaculis
luctus ante quis consectetur. Pellen-
tesque a libero ultrices, varius nibh eu,
ullamcorper nunc. Sed iaculis congue
dui nec iaculis. Ut sagittis nec tortor background-image: url(bg-image.png)
quis congue. Quisque tincidunt tincid-
unt felis id fermentum. Maecenas
adipiscing faucibus nulla et facilisis.
Quisque sed elementum sem. Vestibu-
lum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae;
Morbi lacus odio, adipiscing et ultrices
Mais Sobre
Podemos definir mltiplas imagens de background. As URLs dessas imagens devem
ser separadas por vrgula. As imagens so sobrepostas sendo que a primeira ficar no
primeiro plano, a segunda no segundo plano e assim por diante at a ltima que ficar no ltimo
plano.
1 background - image : url ( " imagem1 . png " ) , url ( " imagem2 . png " ) , url ( " imagem3 . png " ) ;
background-repeat
Por padro, se uma imagem utilizada como background for menor do que o box do elemento
HTML correspondente, ela ser replicada na horizontal e na vertical. A propriedade background-
repeat permite controlar como essa replicao deve ser realizada. Essa propriedade aceita os se-
guintes valores:
Valor Descrio
repeat A imagem de background replicada na horizontal e na vertical (padro).
repeat-x A imagem de background replicada apenas na horizontal.
repeat-y A imagem de background replicada apenas na vertical.
no-repeat A imagem no replicada.
background-repeat: repeat background-repeat: repeat-x
CSS 158
background-repeat: repeat-y background-repeat: no-repeat
background-attachment
A propriedade background-attachment permite definir qual comportamento dos backgrounds
em relao a rolagem do contedo.
Valor Descrio
scroll O background acompanha a rolagem do contedo (padro).
fixed 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, de-
vemos utilizar a propriedade background-position.
Valor Descrio
left top Canto superior esquerdo (padro).
center top Centralizado horizontalmente no topo.
right top Canto superior direito.
left center Do lado esquerdo centralizado verticalmente.
center center Centralizado horizontalmente e verticalmente.
158 www.k19.com.br
159 CSS
Valor Descrio
right center Do lado direito centralizado verticalmente.
left bottom Canto inferior esquerdo.
center bottom Centralizado horizontalmente na base.
right bottom Canto inferior direito.
left O mesmo que "left center".
center O mesmo que "center center".
right O mesmo que "right center".
top O mesmo que "center top".
bottom O mesmo que "center bottom".
x% y% O valor x corresponde posio horizontal e o y posio vertical. Eles so
relativos ao canto superior esquerdo.
x% O mesmo que "x% 50%".
medida1 medida2 A medida1 corresponde posio horizontal e a medida2 posio vertical.
Elas so relativas ao canto superior esquerdo.
left top center top right top
left center center center right center
left bottom center bottom right bottom
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 Descrio
border-box rea delimitada pelas bordas (padro).
padding-box rea delimitada pelas margens internas.
content-box rea delimitada pelo contedo.
Lorem ipsum dolor sit amet, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
background-clip: border-box
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis

background-clip: padding-box

background-clip: content-box
background-origin
A propriedade background-origin determina onde ficar o ponto de origem para o posiciona-
mento das imagens utilizadas como background.
160 www.k19.com.br
161 CSS
Valor Descrio
border-box Canto superior esquerdo da rea delimitada pelas bordas.
padding-box Canto superior esquerdo da rea delimitada pelas margens internas (padro).
content-box Canto superior esquerdo da rea delimitada pelo contedo.

Integer iaculis luctus ante quis background-origin: border-box;
consectetur. Pellentesque a libero background-repeat: no-repeat;

Integer iaculis luctus ante quis background-origin: padding-box;

Integer iaculis luctus ante quis background-origin: content-box;
background-size
Quando uma imagem utilizada como background de um elemento HTML, podemos definir o
tamanho dessa imagem com a propriedade background-size.
Valor Descrio
auto auto Tamanho original da imagem (padro).
auto O mesmo que "auto auto".
medida auto A medida corresponde largura. A altura calculada de forma proporcional
largura.
auto medida A medida corresponde altura. A largura calculada de forma proporcional
altura.
CSS 162
Valor Descrio
medida1 medida2 A medida1 corresponde largura e a medida2 altura.
x% y% O valor x corresponde largura e o y altura. Esses valores so porcetagens
relativas dimenso do elemento HTML.
x% auto O valor x corresponde largura. Esse valor uma porcentagem relativa
largura do elemento HTML. A altura calculada automaticamente de forma
proporcional a largura.
auto y% O valor y corresponde altura. Esse valor uma porcentagem relativa al-
tura do elemento HTML. A largura calculada automaticamente de forma
proporcional a altura.
cover A imagem de background redimensionada proporcionalmente de tal forma
a cobrir toda a rea do elemento HTML.
contain A imagem de background redimensionada proporcionalmente de tal forma
a ter o maior tamanho possvel sem extrapolar a rea do elemento HTML.

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
6 No projeto css, crie um arquivo chamado backgrounds.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Backgrounds </ title >
6 < link rel = " stylesheet " type = " text / css " href = " backgrounds . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
10 < 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
7 No projeto css, crie um arquivo CSS chamado backgrounds.css.
1 div {
2 width : 200 px ;
3 height : 100 px ;
4 margin : 10 px ;
5 border : 5 px black dashed ;
6 }
7
8 # div1 {
9 background - color : yellow ;
10 }
11
12 # div2 {
13 background - color : # c1a4cd ;
14 background - clip : padding - box ;
15 }
16
17 # div3 {
18 background - image : url ( " http :// k19 . com . br / figs / seguro - treinamento . png " ) ;
19 background - repeat : no - repeat ;
20 }
21
22 # div4 {
25 background - origin : border - box ;
26 }
CSS 164
27
28 # div5 {
31 background - size : contain ;
32 }
33
34 body {
35 background - image : url ( " http :// k19 . com . br / figs / main - header - logo . png " ) ;
37 background - attachment : fixed ;
38 background - position : top center ;
39 }
Cdigo CSS 3.10: backgrounds.css
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 definir a cor do texto contido em um elemento HTML atravs da propriedade color.
1 p {
2 color : blue ;
3 }
Valor Descrio
color Uma cor CSS.
text-align
O alinhamento do texto contido em um elemento HTML pode ser determinado com a proprie-
dade text-align.
Valor Descrio
left Alinhado esquerda (padro).
right Alinhado direita.
center Centralizado.
justify Justificado.
164 www.k19.com.br
165 CSS
Valor Descrio
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
sit amet, consectetur sit amet, consectetur sit amet, consectetur sit amet, consectetur
adipiscing elit. Cras adipiscing elit. Cras adipiscing elit. Cras adipiscing elit. Cras
vehicula bibendum vehicula bibendum vehicula bibendum vehicula bibendum
arcu sit amet lacinia. arcu sit amet lacinia. arcu sit amet lacinia. arcu sit amet lacinia.
Sed dui nulla. Sed dui nulla. Sed dui nulla. Sed dui nulla.
left center right justify
text-decoration
Podemos definir a decorao dos textos contidos em um elemento HTML com a propriedade
text-decoration.
Valor Descrio
none Texto sem decorao (padro).
underline Texto com trao inferior.
overline Texto com trao superior.
line-through Texto riscado.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-decoration: none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-decoration: underline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-decoration: overline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-decoration: line-through
text-transform
A capitalizao dos textos pode ser determinada atravs da propriedade text-transform.
Valor Descrio
none Texto normal (padro).
capitalize A primeira letra de cada palavra ser transformada em maiscula.
uppercase Todas as letras do texto sero transformadas em maisculas.
lowercase Todas as letras do texto sero transformadas em minsculas.
Lorem ipsum dolor sit amet. Consectetur adipiscing elit. text-transform: none
Lorem Ipsum Dolor Sit Amet. Consectetur Adipiscing. text-transform: capitalize
LOREM IPSUM DOLOR SIT AMET. CONSECTUR. text-transform: uppercase
lorem ipsum dolor sit amet, consectetur adipiscing elit. text-transform: lowercase
CSS 166
text-indent
Normalmente, indentamos a primeira linha de um bloco de texto. Podemos definir o compri-
mento dessa indentao atravs da propriedade text-indent.
Valor Descrio
medida A medida corresponde ao tamanho da indentao.
x% O valor x o tamanho da indentao em porcentagem relativa largura do ele-
mento HTML pai.
Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur
elit. Cras vehicula bibendum arcu. adipiscing elit. Cras vehicula bibendum arcu.
Sed dui nulla, cursus et lacinia eu, vulputate ac Sed dui nulla, cursus et lacinia eu, vulputate ac
dolor. dolor.
Quisque faucibus congue congue. Quisque faucibus congue congue.
text-indent: 0 text-indent: 20px
letter-spacing
O espaamento entre as letras pode ser determinado atravs da propriedade letter-spacing.
Valor Descrio
normal Espaamento padro definido para a fonte utilizada (padro).
medida A medida corresponde ao espaamento extra desejado. Esse valor pode ser nega-
tivo.
Lorem ipsum dolor sit amet. Consectetur adipiscing elit... letter-spacing: normal
L o r e m ip s u m d o l o r si t am et ... letter-spacing: 10px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean mats nam ... letter-spacing: -2px
word-spacing
O espaamento entre as palavras pode ser determinado com a propriedade word-spacing.
Valor Descrio
normal Espaamento padro definido para a fonte utilizada (padro).
medida A medida corresponde ao espaamento extra desejado. Esse valor pode ser nega-
tivo.
Lorem ipsum dolor sit amet. Consectetur adipiscing elit... word-spacing: 0
Lorem ipsum dolor sit amet. Consectetur adipisc... word-spacing: 4px
Lorem
ipsum
dolor
sit
amet.
Consectetur
adipiscing
elit.
Pellentesque
leo
anon
tortor
tincid... word-spacing: -4px
166 www.k19.com.br
167 CSS
word-wrap
Podemos controlar, atravs da propriedade word-wrap, como as palavras so divididas quando
ocorre uma quebra de linha automtica.
Valor Descrio
normal As palavras so divididas apenas nos pontos de quebras definidos com o ele-
mento wbr (padro).
break-word As palavras podem ser divididas em qualquer ponto.
Otorrinolaringologista. Otorrinolaringo
logista.
word-wrap: normal word-wrap: break-word
line-height
A altura das linhas de um texto pode ser determinada com a propriedade line-height.
Valor Descrio
normal Altura padro de linha (padro).
x A altura das linhas o produto do valor x pelo tamanho da fonte atual.
medida A medida corresponde altura das linhas.
x% O valor x a altura das linhas em porcentagem relativa ao tamanho da fonte atual.
Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras vehicula bibendum arcu.
Sed dui nulla, cursus et lacinia eu, vulputate ac elit. Cras vehicula bibendum arcu.
dolor.
Quisque faucibus congue congue. Sed dui nulla, cursus et lacinia eu, vulputate ac
line-height: normal line-height: 20px
white-space
possvel controlar a forma de tratamento dos espaos em branco e das quebras de linha atravs
da propriedade white-space. Os valores possveis para essa propriedade so:
Valor Descrio
normal 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).
CSS 168
Valor Descrio
nowrap 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 automatica-
mente.
pre 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.
pre-line 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.
pre-wrap 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.
HTML
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula
bibendum arcu.
Sed dui nulla, cursus et lacinia eu, vulputate ac dolor.

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

Quisque faucibus congue congue.
white-space: pre
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
adipiscing elit. Cras vehicula bibendum consectetur adipiscing elit. Cras vehicula
arcu. bibendum arcu.
Sed dui nulla, cursus et lacinia eu, Sed dui nulla, cursus et lacinia
vulputate ac dolor. eu, vulputate ac dolor.
Quisque faucibus congue congue. Quisque faucibus congue congue.
white-space: pre-line white-space: pre-wrap
168 www.k19.com.br
169 CSS
text-shadow
Para adicionar uma sombra no texto de um elemento HTML, devemos utilizar a propriedade
text-shadow. Para usar essa propriedade, devemos definir as seguintes informaes sobre a sobra
desejada: a posio horizontal, a posio vertical, o raio do blur e a cor.
Deslocamento Esmaecimento
horizontal (opcional)
text-shadow: 10px 10px 10px #ff0000
Deslocamento Cor
horizontal (opcional)
Vrias sombras podem ser aplicadas ao texto de um elemento HTML. As informaes que defi-
nem essas sombras devem ser separadas por vrgula.
text-shadow: 10px 10px 10px #ff0000 , -10px -10px 10px #0000ff
Texto
Texto Texto
text-shadow: 10px 10px #ff0000 text-shadow: 10px 10px 10px #ff0000
Texto
Texto Texto
text-shadow: -10px -10px #ff0000 text-shadow: -10px -10px 10px #ff0000
Texto Texto
text-shadow: 0 0 10px #ff0000 text-shadow: 10px 10px 10px #ff0000,
-10px -10px 10px #0000ff
Outras propriedades
A linguagem CSS define mais algumas propriedades de formatao de texto.
unicode-bdi
hanging-punctuation
punctuation-trim
text-align-last
text-justify
text-outline
text-overflow
text-wrap
direction
CSS 170
word-break
Exerccios de Fixao
9 No projeto css, crie um arquivo chamado textos.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Textos </ title >
6 < link rel = " stylesheet " type = " text / css " href = " textos . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
10 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 .
20 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
10 No projeto css, crie um arquivo CSS chamado textos.css.
1 p {
2 border : 2 px black solid ;
3 }
4
5 # p1 {
6 width : 400 px ;
7 color : blue ;
8 text - align : justify ;
9 text - decoration : line - through ;
10 text - transform : uppercase ;
11 text - indent : 20 px ;
12 letter - spacing : 2 px ;
13 line - height : 25 px ;
14 word - spacing : 11 px ;
15 }
16
17 # p2 {
18 width : 100 px ;
19 word - wrap : break - word ;
170 www.k19.com.br
171 CSS
20 }
21
22 # p3 {
23 width : 400 px ;
24 white - space : pre - line ;
25 }
26
27 # p4 {
28 width : 100 px ;
31 text - shadow : 2 px 2 px # ff0000 ;
32 }
Cdigo CSS 3.12: textos.css
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 proprie-
dades.
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 uti-
lizar a primeira fonte disponvel da lista definida com a propriedade font-family. Por isso, essa lista
deve ser ordenada da fonte com maior prioridade para a fonte com menor prioridade.
Algumas fontes so consideradas seguras (Web Safe Fonts). Essa qualidade atribuda s fontes
que so suportadas em praticamente todos os sistemas operacionais e navegadores. Uma lista com
essas fontes pode ser consultada no endereo http://cssfontstack.com/.
A linguagem CSS classifica as fontes em 5 grupos genricos:
serif: Fontes serifadas. Os acabamentos nas extremidades das hastes das letras so denomina-
dos serifas.
sans-serif: Fontes no serifadas.
cursive: Fontes com estilo semelhante escrita manual.
CSS 172
fantasy: Fontes que possuem caracteres com decoraes.

monospace: Fontes que possuem caracteres com largura exatamente igual.
Verdana Optimus Princeps Unispace Honey Script Most Wazted

Sans-serif Serif Monospace Cursive Fantasy
Helvetica Times New Roman Courier New Zapfino Comic Sans

Sans-serif Serif Monospace Cursive Fantasy
Se qualquer fonte de um determinado grupo genrico pode ser utilizada, devemos adicionar o
nome desse grupo na lista definida com a propriedade font-family. Nesse caso, os prprios navega-
dores 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 dispon-
veis, os navegadores utilizaro alguma fonte do grupo sans-serif.
font-size
O tamanho da fonte determinado atravs da propriedade font-size.
Valor Descrio
xx-small Tamanho de fonte extra extra pequeno.
x-small Tamanho de fonte extra pequeno.
small Tamanho de fonte pequeno.
medium Tamanho de fonte mdio (padro).
large Tamanho de fonte grande.
x-large Tamanho de fonte extra grande.
xx-large Tamanho de fonte extra extra grande.
smaller Um tamanho de fonte menor do que o do elemento HTML pai.
larger Um tamanho de fonte maior do que o do elemento HTML pai.
medida A medida corresponde ao tamanho da fonte.
x% O valor x o tamanho da fonte. Esse valor uma porcentagem do tamanho da
fonte do elemento HTML pai.
172 www.k19.com.br
173 CSS
9px K19 Treinamentos
xx-small K19 Treinamentos
x-small K19 Treinamentos
small K19 Treinamentos

medium K19 Treinamentos
large K19 Treinamentos
x-large K19 Treinamentos
xx-large
K19 Treinamentos
font-style
Podemos determinar o estilo da fonte atravs da propriedade font-style.
Valor Descrio
normal Fonte normal (padro).
italic Fonte itlica.
oblique Fonte oblqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. font-style: normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. font-style: italic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. font-style: oblique
font-variant
Para determinar que o texto de um elemento HTML deve ser exibido em small caps, devemos
utilizar a propriedade font-vaiant. Todas as letras de um texto em small caps so transformadas em
maisculas e o tamanho da fonte da primeira letra de cada palavra maior do que o tamanho da
fonte das demais letras.
Valor Descrio
normal Fonte normal (padro).
small-caps Fonte em small caps.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. font-variant: normal
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING E... font-variant: small-caps
CSS 174
font-weight
A grossura dos caracteres pode ser definida com a propriedade font-weight.
Valor Descrio
normal Grossura normal (padro).
bold Negrito.
100 Grossura 100.
200 Grossura 200.
300 Grossura 300.
400 Grossura 400. Equivale ao valor normal
500 Grossura 500.
600 Grossura 600.
700 Grossura 700. Equivale ao valor bold
800 Grossura 800.
900 Grossura 900.
bolder Uma grossura maior do que a do elemento HTML pai.
lighter Uma grossura menor do que a do elemento HTML pai.
Importante
Normalmente, as fontes no definem uma grossura diferente para cada um dos poss-
veis valores da propriedade font-weight. Por isso, geralmente, dois ou mais valores so
mapeados para a mesma grossura de fonte.
font-weight
Fonte utilizada: K19 Treinamentos font-weight: normal
Roboto
http://google.com/fonts/specimen/Roboto
K19 Treinamentos font-weight: 100

Curiosidade:
A fonte Roboto a fonte padro K19 Treinamentos font-weight: 400
utilizada nos sistemas Android a partir
da verso 4.0.
K19 Treinamentos font-weight: bold
font
A propriedade font um atalho para as outras propriedades de fonte.
174 www.k19.com.br
175 CSS
1 font : font - style font - variant font - weight font - size / line - height font - family ;
@font-face
A regra @font-face permite utilizar uma fonte mesmo que ela no esteja disponvel no sistema
operacional do usurio. A fonte pode estar em um arquivo local (mquina do usurio) ou remoto
(servidor). Para cada fonte que deve ser adicionada, devemos definir uma regra font-face. Os na-
vegadores 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 remota-
mente. Para carregar uma fonte disponvel na mquina do usurio, devemos utilizar a funo local(),
passando como parmetro o nome da fonte desejada.
1 @font - face {
2 font - family : NomeDaFonte ;
3 src : local ( nome - da - fonte ) ;
4 }
Para utilizar as fontes definidas na regra @font-face, basta definir a a propriedade font-family.
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 {
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 navega-
dor. Recomendamos o site Can I use (http://caniuse.com/).
Existem diversos repositrios de fontes pagas e/ou gratuitas. Podemos utilizar as fontes des-
ses repositrios atravs da regra font-face. Um dos repositrios mais importantes o Google Fonts
(http://www.google.com/fonts).
Outras propriedades
A linguagem CSS define mais algumas propriedades de formatao de fonte.
font-size-adjust
CSS 176
font-stretch
Exerccios de Fixao
12 No projeto css, crie um arquivo chamado fontes.html.
1 <! DOCTYPE html >

3 < head >
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 >
10 < body >
11 <p id = " p1 " >
14 </ p >
15 <p id = " p2 " >
18 </ p >
19 </ body >
20 </ html >
Cdigo HTML 3.11: fontes.html
13 No projeto css, crie um arquivo CSS chamado fontes.css.
1 p {
3 }
4
5 # p1 {
6 width : 400 px ;
7 font - family : " Arial Black " , " Georgia " , " Courier New " , " sans - serif " ;
8 font - size : xx - large ;
9 font - style : italic ;
10 font - variant : small - caps ;
12 }
13
14 # p2 {
15 width : 400 px ;
16 font - family : Butcherman ;
17 }
Cdigo CSS 3.20: fontes.css
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 definir o smbolo utilizado nos itens de uma determinada lista com a propriedade list-
style-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 I. K19 Treinamentos i. K19 Treinamentos

2. K19 Treinamentos II. K19 Treinamentos ii. K19 Treinamentos
3. K19 Treinamentos III. K19 Treinamentos iii. K19 Treinamentos
decimal upper-roman lower-roman
A. K19 Treinamentos a. K19 Treinamentos . K19 Treinamentos

B. K19 Treinamentos b. K19 Treinamentos . K19 Treinamentos
C. K19 Treinamentos c. K19 Treinamentos . K19 Treinamentos
upper-alpha lower-alpha hebrew
. K19 Treinamentos . K19 Treinamentos . K19 Treinamentos

lower-greek katakana cjk-ideographic
list-style-image
possvel definir uma imagem para ser utilizada nos itens de uma determinada lista com a pro-
priedade list-style-image.
Valor Descrio
url(url) URL da imagem.
CSS 178
Valor Descrio
none Sem imagem (padro).
K19 Treinamentos
K19 Treinamentos list-style-image: url(estrela.png)
K19 Treinamentos
list-style-position
Por padro, os bullets de uma lista no so exibidos dentro dos boxes dos itens. Podemos alterar
esse comportamento atravs da propriedade list-style-position.
Valor Descrio
inside Os bullets so exibidos dentro dos boxes dos itens.
outside Os bullets no so exibidos dentro dos boxes dos itens. (padro).
K19 Treinamentos K19 Treinamentos

list-style-position: outside list-style-position: inside
list-style
A propriedade list-style um atalho para as outras propriedades de lista.
1 list - style : list - style - type , list - style - position , list - style - image
Exerccios de Fixao
15 No projeto css, crie um arquivo chamado listas.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Listas </ title >
6 < link rel = " stylesheet " type = " text / css " href = " listas . css " >
7 </ head >
8 < body >
9 < ul id = " ul1 " >
12 < li > K03 - Modelo Relacional e SQL </ li >
178 www.k19.com.br
179 CSS
13 </ ul >
14
15 < ul id = " ul2 " >
19 </ ul >
20
21 < ol >
25 </ ol >
26 </ body >
27 </ html >
Cdigo HTML 3.12: listas.html
16 No projeto css, crie um arquivo CSS chamado listas.css.
1 li {
3 width : 400 px ;
4 }
5
6 # ul1 {
7 list - style - type : square ;
8 list - style - position : inside ;
9 }
10
11 # ul2 {
12 list - style - image : url ( http : // k19 . com . br / figs / k02 - logo - small . png ) ;
13 }
14
15 ol {
16 list - style - type : upper - roman ;
17 }
Cdigo CSS 3.22: listas.css
http://localhost/css/public_html/listas.html.
http://localhost/~<USUARIO>/css/public_html/listas.html.
Bordas
A linguagem CSS possui diversas propriedades para definir a formatao das bordas dos elemen-
tos HTML.
CSS 180
border-style
Podemos definir o estilo das bordas de um elemento HTML com a propriedade border-style. Veja
os principais valores dessa propriedade.
dotted dashed solid double
groove ridge inset outset
border-width
A grossura das bordas pode ser determinada com a propriedade border-width.
Valor Descrio
thin Borda fina.
medium Borda mdia (padro).
thick Borda grossa.
medida A medida corresponde grossura da borda.
thin medium thick 10px
border-color
A propriedade border-color define a cor das bordas de um elemento HTML. Essa propriedade
aceita o valor transparent(padro) ou qualquer cor CSS.
Valor Descrio
color Uma cor CSS.
transparent Faz a borda ser transparente.
180 www.k19.com.br
181 CSS
border
A propriedade border um atalho para as propriedades que definem o estilo, a grossura e a cor
das bordas dos elementos HTML.
1 border : border - width border - style border - color ;
border-left-* border-top-* border-right-* border-bottom-*

O estilo, a grossura e a cor podem ser definidos individualmente para a borda da esquerda, borda
superior, borda da direita e borda inferior de um elemento HTML. Veja o exemplo a seguir.
border-width: 10px;
border-top-style: dashed;
border-top-color: blue;
border-right-style: solid;
border-right-color: green;
border-bottom-style: groove;
border-bottom-color: orange;
border-left-style: dotted;
border-left-color: red;
border-left border-top border-right border-bottom

As propriedades border-left, border-top, border-right e border-bottom so atalhos para as pro-
priedades que definem individualmente o estilo, a grossura e a cor das bordas da esquerda, superio-
res, da direita e inferiores dos elementos HTML. Veja alguns exemplos:
border-top: 10px dashed blue;

border-right: 10px solid green;
border-bottom: 10px groove orange;
border-left: 10px dotted red;
border-radius
Bordas com cantos arredondados podem ser definidas com a propriedade border-radius.
CSS 182
Valor Descrio
medida A medida corresponde ao raio.
x% O valor x o raio em porcentagem.
5px
10px 10px 10px
10px 10px 10px

5px
border-radius: 10px border-radius: 10px 5px
5px 5px
10px 10px
20px 20px
5px 3px
border-radius: 10px 5px 20px border-radius: 10px 5px 20px 3px
border-*-*-radius
As propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius

e border-bottom-left-radius so utilizadas para definir o arredondamento das bordas dos cantos
superior esquerdo, superior direito, inferior direito e inferior esquerdo respectivamente. Veja alguns
exemplos:
10px 10px
border-top-left-radius: 10px border-top-right-radius: 10px
10px 10px
border-bottom-right-radius: 10px border-bottom-left-radius: 10px
182 www.k19.com.br
183 CSS
border-collapse
Podemos definir bordas para cada clula de uma tabela e para a prpria tabela. Por padro, essas
bordas so exibidas separadamente. Mas, possvel determinar que duas bordas vizinhas sejam
exibidas como se fossem uma s com a propriedade border-collapse.
Valor Descrio
separate Bordas separadas (padro).
collapse Bordas unidades.
Clula 1 Clula 2 Clula 1 Clula 2

border-collapse: separate border-collapse: collapse
border-spacing
A propriedade border-spacing permite definir o espaamento entre as clulas de uma tabela.
Essa propriedade afeta o espaamento entre as bordas somente se o valor da propriedade border-
collapse for separate.
Valor Descrio
medida1 medida2 A medida1 corresponde ao espaamento horizontal e a medida2 corresponde
ao espaamento vertical.
medida A medida corresponde ao espaamento horizontal e vertical.

border-spacing: 5px border-spacing: 10px 5px
Outras propriedades
A linguagem CSS define mais algumas propriedades de formatao de bordas.
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
CSS 184
Exerccios de Fixao
18 No projeto css, crie um arquivo chamado bordas.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Bordas </ title >
6 < link rel = " stylesheet " type = " text / css " href = " bordas . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
10 < 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 > K01 </ td >
18 < td > K02 </ td >
19 < td > K03 </ td >
20 </ tr >
21 </ table >
22
24 < tr >
25 < td > K01 </ td >
26 < td > K02 </ td >
27 < td > K03 </ td >
28 </ tr >
29 </ table >
30 </ body >
31 </ html >
Cdigo HTML 3.13: bordas.html
19 No projeto css, crie um arquivo CSS chamado bordas.css.
1 div {
2 width : 200 px ;
3 height : 100 px ;
4 margin : 10 px ;
5 }
6
7 # div1 {
8 border - style : solid ;
9 border - width : thin ;
10 border - color : red ;
11 border - radius : 10 px ;
12 }
13
14 # div2 {
15 border - style : dotted ;
16 border - color : yellow ;
17 border - radius : 10 px 30 px ;
18 }
19
20 # div3 {
184 www.k19.com.br
185 CSS
21 border - style : dashed ;

22 border - width : 4 px ;
23 border - color : blue ;
24 border - radius : 10 px 20 px 30 px 40 px ;
25 }
26
27 # div4 {
28 border - style : double ;
30 border - color : green ;
31 border - top - left - radius : 10 px ;
32 border - top - right - radius : 20 px ;
33 border - bottom - right - radius : 30 px ;
34 border - bottom - left - radius : 40 px ;
35 }
36
37 # div5 {
38 border - left - style : solid ;
39 border - left - width : thin ;
40 border - left - color : red ;
41
42 border - top - style : dotted ;
43 border - top - color : yellow ;
44
45 border - right - style : dashed ;
46 border - right - width : 4 px ;
47 border - right - color : blue ;
48
49 border - bottom - style : double ;
50 border - bottom - width : 8 px ;
51 border - bottom - color : green ;
52 }
53
54 table , td {
56 border : 1 px solid black ;
57 margin : 10 px ;
58 }
59
60 # tabela1 {
61 border - collapse : collapse ;
62 }
63
64 # tabela2 {
65 border - spacing : 20 px ;
66 }
Cdigo CSS 3.24: bordas.css
http://localhost/css/public_html/bordas.html.
http://localhost/~<USUARIO>/css/public_html/bordas.html.
Outline
CSS 186
O box de um elemento HTML pode ser contornado por uma linha denominada outline. Essa
linha no afeta as dimenses dos boxes. A linguagem CSS possui diversas propriedades para definir
a formatao do outline dos elementos HTML.
outline-style
Podemos definir o estilo do outline de um elemento HTML com a propriedade outline-style. Veja
os principais valores dessa propriedade.
dotted dashed solid double
groove ridge inset outset
outline-color
A propriedade outline-color define a cor do outline de um elemento HTML.
Valor Descrio
color Uma cor CSS.
invert A cor inversa cor do background (padro).
outline-width
A grossura dos outlines pode ser determinada com a propriedade outline-width.
Valor Descrio
thin Outline fino.
medium Outline mdio (padro).
thick Outline grosso.
medida A medida corresponde grossura do outline.
186 www.k19.com.br
187 CSS
thin medium thick 10px
outline-offset
Podemos definir a distncia do outline de um elemento HTML em relao s bordas do mesmo
com a propriedade outline-offset.
Valor Descrio
medida A medida corresponde ao tamanho do outline-offset (0px o valor padro). Esse
valor pode ser negativo.
Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam accumsan vehicula diam sit amet elit. Aliquam accumsan vehicula diam sit amet
bibendum. Aliquam sed tempor tellus. Duis bibendum. Aliquam sed tempor tellus. Duis
placerat suscipit turpis in sollicitudin. Nunc lacus placerat suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum ac augue. magna, auctor vitae venenatis eu, dictum ac augue.
outline-offset: 10px outline-offset: -5px
outline
A propriedade outline um atalho para as propriedades outline-color, outline-style e outline-
width. Veja a sintaxe dessa propriedade.
1 outline : outline - color outline - style outline - width ;
Exerccios de Fixao
21 No projeto css, crie um arquivo chamado outlines.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Outlines </ title >
6 < link rel = " stylesheet " type = " text / css " href = " outlines . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
10 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >
Cdigo HTML 3.14: outlines.html
CSS 188
22 No projeto css, crie um arquivo CSS chamado outlines.css.
1 div {
2 width : 200 px ;
3 height : 100 px ;
5 margin : 50 px ;
6 }
7
8 # div1 {
9 outline - style : solid ;
10 outline - color : red ;
11 outline - width : 4 px ;
12 }
13
14 # div2 {
15 outline - style : dashed ;
16 outline - color : blue ;
18 outline - offset : -20 px ;
19 }
20
21 # div3 {
23 outline - color : green ;
25 outline - offset : 20 px ;
26 }
Cdigo CSS 3.26: outlines.css
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 ele-
mentos HTML. O valor dessa propriedade pode ser definido de diversas maneiras. Confira, nas ima-
gens abaixo, algumas formas de utilizao da propriedade box-shadow para definir sombras exter-
nas.
188 www.k19.com.br
189 CSS
Deslocamento horizontal
#a {
box-shadow: 10px 10px #7f7f7f; #a
}
Deslocamento vertical
Esmaecimento
#b {
box-shadow: 10px 10px 10px #7f7f7f; #b
}
Propagao
Esmaecimento
#c {
box-shadow: 10px 10px 0 10px #7f7f7f; #c
}
Os valores dos deslocamentos vertical e horizontal podem ser negativos fazendo com que a som-
bra externa seja projetada para cima e para a esquerda.
As regras para definir uma da sombra interna 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
CSS 190
#b {
box-shadow: inset 10px 10px 10px #000000;
} #b
Esmaecimento
#c {
box-shadow: inset 10px 10px 0 10px #000000;
}
Esmaecimento
#c
Propagao
Exerccios de Fixao
24 No projeto css, crie um arquivo chamado sombras.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Sombras </ title >
6 < link rel = " stylesheet " type = " text / css " href = " sombras . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
10 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >
Cdigo HTML 3.15: sombras.html
25 No projeto css, crie um arquivo CSS chamado sombras.css.
1 div {
2 width : 200 px ;
3 height : 100 px ;
5 margin : 50 px ;
6 }
7
8 # div1 {
190 www.k19.com.br
191 CSS
9 box - shadow : 10 px 5 px gray ;

10 }
11
12 # div2 {
13 box - shadow : 10 px 5 px 5 px gray ;
14 }
15
16 # div3 {
17 box - shadow : inset 10 px 10 px gray ;
18 }
19
20 # div4 {
21 box - shadow : inset 10 px 10 px 5 px gray ;
22 }
Cdigo CSS 3.27: sombras.css
http://localhost/css/public_html/sombras.html.
http://localhost/~<USUARIO>/css/public_html/sombras.html.
Margens
A linguagem CSS possui diversas propriedades para definir a formatao das margens internas e
externas dos elementos HTML.
margin-*
Os tamanhos das margens externas do box de elemento HTML podem ser definidos individual-
mente com as propriedades margin-left, margin-top, margin-right e margin-bottom.
Valor Descrio
auto O tamanho da margem calculado automaticamente pelos navegadores.
medida A medida corresponde ao tamanho da margem (0px o padro).
x% O valor x corresponde ao tamanho da margem. Esse valor uma porcenta-
gem da largura do elemento HTML pai.
CSS 192
5px
margin-top: 5px
20px 10px
margin-right: 10px
margin-bottom: 15px
margin-left: 20px
15px
margin
A propriedade margin um atalho para as propriedades margin-left, margin-top, margin-right
e margin-bottom. Podemos utilizar a propriedade margin de 4 formas diferentes:
5px 5px
20px 10px 10px 10px
15px 15px
margin: 5px 10px 15px 20px margin: 5px 10px 15px
5px 5px
10px 10px 5px 5px
5px 5px
margin: 5px 10px margin: 5px
padding-*
Os tamanhos das margens internas do box de elemento HTML podem ser definidos individual-
mente com as propriedades padding-left, padding-top, padding-right e padding-bottom.
Valor Descrio
medida A medida corresponde ao tamanho da margem (0px o padro).
x% O valor x corresponde ao tamanho da margem. Esse valor uma porcenta-
gem da largura do elemento HTML pai.
192 www.k19.com.br
193 CSS
5px
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis volutpat laoreet magna,
nec placerat nisl egestas id. Maecenas a padding-top: 5px
20px nulla vel arcu viverra lobortis. In ligula nunc, 10px
cursus non faucibus sed, hendrerit id est.
Maecenas felis neque, porta et sagittis padding-right: 10px
faucibus, fringilla id tellus. Etiam nec
pulvinar tellus. Mauris et diam at est cursus padding-bottom: 15px
egestas. Donec tincidunt metus non ante
tristique egestas.
padding-left: 20px
15px
padding
A propriedade padding um atalho para as propriedades padding-left, padding-top, padding-
right e padding-bottom. Podemos utilizar a propriedade padding de 4 formas diferentes:
5px 5px
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis volutpat laoreet magna, adipiscing elit. Duis volutpat laoreet magna,
nec placerat nisl egestas id. Maecenas a nec placerat nisl egestas id. Maecenas a
20px nulla vel arcu viverra lobortis. In ligula nunc, 10px 10px nulla vel arcu viverra lobortis. In ligula nunc, 10px
cursus non faucibus sed, hendrerit id est. cursus non faucibus sed, hendrerit id est.
Maecenas felis neque, porta et sagittis Maecenas felis neque, porta et sagittis
faucibus, fringilla id tellus. Etiam nec faucibus, fringilla id tellus. Etiam nec
pulvinar tellus. Mauris et diam at est cursus pulvinar tellus. Mauris et diam at est cursus
egestas. Donec tincidunt metus non ante egestas. Donec tincidunt metus non ante
tristique egestas. tristique egestas.
15px 15px
padding: 5px 10px 15px 20px padding: 5px 10px 15px
5px 5px
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis volutpat laoreet magna, adipiscing elit. Duis volutpat laoreet magna,
nec placerat nisl egestas id. Maecenas a nec placerat nisl egestas id. Maecenas a
10px nulla vel arcu viverra lobortis. In ligula nunc, 10px 5px nulla vel arcu viverra lobortis. In ligula nunc, 5px
cursus non faucibus sed, hendrerit id est. cursus non faucibus sed, hendrerit id est.
Maecenas felis neque, porta et sagittis Maecenas felis neque, porta et sagittis
faucibus, fringilla id tellus. Etiam nec faucibus, fringilla id tellus. Etiam nec
pulvinar tellus. Mauris et diam at est cursus pulvinar tellus. Mauris et diam at est cursus
egestas. Donec tincidunt metus non ante egestas. Donec tincidunt metus non ante
tristique egestas. tristique egestas.
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 {
CSS 194
2 width : 50%;
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 : 50%;
5 }
Exerccios de Fixao
27 No projeto css, crie um arquivo chamado margens.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Margens </ title >
6 < link rel = " stylesheet " type = " text / css " href = " margens . css " >
7 </ head >
8 < body >
9 < div >
10 <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
28 No projeto css, crie um arquivo CSS chamado margens.css.
1 div {
2 width : 600 px ;
4 }
5
6 p, a {
8 }
9
10 # p1 {
11 margin : 5 px 10 px 20 px 30 px ;
12 padding : 5 px 0 px 0 px 20 px ;
13 }
14
15 # a1 {
16 margin - left : 10 px ;
194 www.k19.com.br
195 CSS
17 padding : 5 px ;
18 }
19
20 # a2 {
22 padding : 10 px ;
23 }
24
25 # p2 {
26 margin : 20 px ;
28 }
Cdigo CSS 3.30: margens.css
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 definidas com as propriedades
height e width respectivamente.
Valor Descrio
auto A altura ou largura so calculadas automaticamente pelos navegadores.
medida A medida corresponde largura ou a altura.
x% A medida corresponde largura ou a altura como porcentagem das dimenses do
elemento HTML pai
min-height e max-height
A propriedade height utilizada para determinar a altura exata do box de um elemento HTML.
Uma outra abordagem definir um limite inferior e/ou um limite superior para essa dimenso. Esses
limites podem ser definidos com as propriedades min-height e max-height.
Valor Descrio
none Sem valor (padro para max-height).
medida A medida corresponde altura mxima ou mnima desejada (0px padro para
min-height).
CSS 196
Valor Descrio
x% O valor x corresponde altura mxima ou mnima. Esse valor uma porcentagem
da altura do elemento HTML pai
min-width e max-width
A propriedade width utilizada para determinar a largura exata do box de um elemento HTML.
Uma outra abordagem definir um limite inferior e/ou um limite superior para essa dimenso. Esses
limites podem ser definidos com as propriedades min-width e max-width.
Valor Descrio
none Sem valor (padro para max-width).
medida A medida corresponde largura mxima ou mnima desejada (0px padro para
min-width).
x% O valor x corresponde largura mxima ou mnima. Esse valor uma porcentagem
da largura do elemento HTML pai
Exerccios de Fixao
30 No projeto css, crie um arquivo chamado altura-largura.html.
1 <! DOCTYPE html >

3 < head >
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 " >
10 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 " >
22 </ p >
23 <p id = " p3 " >
29 </ p >
30 </ body >
31 </ html >
Cdigo HTML 3.18: altura-largura.html
196 www.k19.com.br
197 CSS
31 No projeto css, crie um arquivo CSS chamado altura-largura.css.
1 p {
3 max - width : 600 px ;
4 max - height : 250 px ;
5 min - height : 100 px ;
6 }
7
8 # p1 {
9 width : 200 px ;
10 }
11
12 # p2 {
13 width : 400 px ;
14 }
Cdigo CSS 3.31: altura-largura.css
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 define a forma de exibio dos elementos HTML. Os 5 principais valores
dessa propriedade so: inline(padro), block, inline-block, list-item e none.
Valor Descrio
inline Considere o box de um elemento HTML com display: inline. Esse box no gera
quebras de linha e as suas dimenses so calculadas com base no contedo do ele-
mento HTML. As propriedades width e height no modificam a largura e a altura
do box. As margens e as bordas do box de um elemento HTML com display: inline
empurram os boxes vizinhos horizontalmente. Verticalmente, os boxes vizinhos
no so empurrados.
block Considere o box de um elemento HTML com display: block. Esse box gera quebras
de linha e, por padro, ocupa todo o espao horizontal do elemento pai. Podemos
controlar a largura e a altura desse box com as propriedades width e height.
CSS 198
Valor Descrio
inline-block O comportamento dos boxes dos elementos HTML com display: inline-block
similar ao dos boxes dos elementos HTML com display: inline. Basicamente, a
diferena entre eles que podemos modificar a largura e altura dos boxes dos ele-
mentos HTML com display: inline-block.
list-item O comportamento dos boxes dos elementos HTML com display: list-item similar
ao dos boxes dos elementos HTML com display: block. Basicamente, a diferena
entre eles que um bullet exibido no canto esquerdo de box de um elemento
HTML com display: list-item.
none Os boxes dos elementos HTML com display: none no so exibidos e no ocupam
espao na pgina.
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
amet bibendum. Aliquam sed tempor tellus. Duis
placerat
suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue.
Nunc eleifend dignissim felis.
display: block
display: inline-block
amet bibendum. Aliquam sed tempor tellus. Duis
placerat
suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue.
Nunc eleifend dignissim felis.
display: list-item
198 www.k19.com.br
199 CSS
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
display: none
visibility
Podemos determinar se um elemento HTML deve ser exibido ou no atravs da propriedade
visibility. O valor visible(padro) indica que o elemento deve ser exibido e o valor hidden indica que
o elemento no deve ser exibido.
Valor Descrio
visible Visvel (padro).
hidden Invisvel.
visibility: visible
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin.
visibility: hidden
Importante
Na renderizao, os elementos HTML com display: none so totalmente desconside-
rados. 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 po-
dem afetar o posicionamento dos demais elementos pois o espao ocupado por eles pode no
ser nulo.
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
CSS 200
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin.
visibility: hidden
Exerccios de Fixao
33 No projeto css, crie um arquivo chamado display-visibilidade.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Display e Visibilidade </ title >
6 < link rel = " stylesheet " type = " text / css " href = " display - visibilidade . css " >
7 </ head >
8 < body >
9 <p >
10 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 >
17 </ p >
18
19 <p >
20 Lorem ipsum dolor sit amet , < span id = " span3 " > inline - block </ span >
22 </ p >
23
24 <p >
25 Lorem ipsum dolor sit amet , < span id = " span4 " > list - item </ span >
27 </ p >
28
29 <p >
30 Lorem ipsum dolor sit amet , < span id = " span5 " > none </ span >
32 </ p >
33
34 <p >
35 Lorem ipsum dolor sit amet , < span id = " span6 " > hidden </ span >
37 </ p >
38 </ body >
39 </ html >
Cdigo HTML 3.19: display-visibilidade.html
34 No projeto css, crie um arquivo CSS chamado display-visibilidade.css.
1 p {
200 www.k19.com.br
201 CSS
3 width : 600 px ;
4 }
5
6 span {
7 padding : 15 px ;
8 margin : 40 px ;
9 width : 200 px ;
10 height : 100 px ;
13 }
14
15 # span1 {
16 display : inline ;
17 }
18
19 # span2 {
20 display : block ;
21 }
22
23 # span3 {
24 display : inline - block ;
25 }
26
27 # span4 {
28 display : list - item ;
29 }
30
31 # span5 {
32 display : none ;
33 }
34
35 # span6 {
36 visibility : hidden ;
37 }
Cdigo CSS 3.32: display-visibilidade.css
http://localhost/css/public_html/display-visibilidade.html.
http://localhost/~<USUARIO>/css/public_html/display-visibilidade.html.
Opacidade
Podemos definir a opacidade dos elementos HTML com a propriedade opacity.
Valor Descrio
x O valor x um nmero entre 0(totalmente transparente) e 1(sem transparncia,
padro).
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 >

3 < head >
5 < title > K19 - Opacidade </ title >
6 < link rel = " stylesheet " type = " text / css " href = " opacidade . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
10 < 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
37 No projeto css, crie um arquivo CSS chamado opacidade.css.
1 div {
2 width : 100 px ;
3 height : 100 px ;
4 background - color : red ;
5 }
6
7 # div1 {
8 opacity : 0;
9 }
10
11 # div2 {
12 opacity : 0.25;
13 }
14
15 # div3 {
16 opacity : 0.5;
17 }
18
19 # div4 {
20 opacity : 0.75;
21 }
22
23 # div5 {
24 opacity : 1;
25 }
202 www.k19.com.br
203 CSS
Cdigo CSS 3.33: opacidade.css
http://localhost/css/public_html/opacidade.html.
http://localhost/~<USUARIO>/css/public_html/opacidade.html.
Posicionamento
A linguagem CSS define quatro formas para posicionar os boxes dos elementos HTML: static,
relative, fixed e absolute. Mostraremos o funcionamento de cada uma dessas formas. A propriedade
position determina a forma de posicionamento desejada.
static
O valor static o valor padro da propriedade position. O box de um elemento com position:
static colocado na sua posio natural. No podemos alterar a posio dos boxes dos elementos
HTML com position: static.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam

accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus.
Duis placerat suscipit turpis in sollicitudin.
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent
at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesua
fames ac ante ipsum primis in faucibus.
position: static
relative
O box de um elemento com position: relative colocado em uma posio relativa a sua posio
natural. As propriedades left, top, right e bottom so utilizadas para determinar o deslocamento
entre a posio desejada e a posio natural. O espao que seria ocupado por esse box se ele estivesse
em sua posio natural no ocupado por nenhum outro elemento.
CSS 204

position: relative
fixed
O box de um elemento com position: fixed colocado em uma posio relativa pgina e no
acompanha a rolagem do contedo. As propriedades left, top, right e bottom so utilizadas para
determinar o deslocamento entre a posio desejada e pagina.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum
tellus. Duis placerat suscipit turpis in sollicitudin. erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue
Praesent at leo feugiat, fermentum diam ut, commodo lacus. ligula. Fusce id varius magna. In quis fringilla ante, id
Interdum et malesua fames ac ante ipsum primis in faucibus. pellentesque risus. Maecenas elementum at purus a facilisis.
Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu Lorem ipsum dolor sit amet, consectetur adipiscing elit.
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum Aliquam sed tempor tellus. Duis placerat suscipit turpis in
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue ac augue. Nunc eleifend dignissim felis at mattis. Duis nunc est,
ligula. Fusce id varius magna. In quis fringilla ante, id consequat vel pulvinar in, egestas sit amet odio. Praesent at leo
pellentesque risus. Maecenas elementum at purus a facilisis. feugiat, fermentum diam ut, commodo lacus. Interdum et
Lorem ipsum dolor sit amet, consectetur adipiscing elit. malesuada fames ac ante ipsum primis in faucibus.
position: fixed
absolute
O box de um elemento com position: absolute colocado em uma 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 CSS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam Duis nunc est, consequat vel pulvinar in, egestas sit amet odio.
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor Praesent at leo feugiat, fermentum diam ut, commodo lacus.
tellus. Duis placerat suscipit turpis in sollicitudin. Interdum et malesua fames ac ante ipsum primis in faucibus.
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu
Praesent at leo feugiat, fermentum diam ut, commodo lacus. dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum
Interdum et malesua fames ac ante ipsum primis in faucibus. erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique
Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum ligula. Fusce id varius magna. In quis fringilla ante, id
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique pellentesque risus. Maecenas elementum at purus a facilisis.
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue Lorem ipsum dolor sit amet, consectetur adipiscing elit.
ligula. Fusce id varius magna. In quis fringilla ante, id Aliquam sed tempor tellus. Duis placerat suscipit turpis in
pellentesque risus. Maecenas elementum at purus a facilisis. sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ac augue. Nunc eleifend dignissim felis at mattis.
position: absolute
Figura 3.8: Pgina utilizada como referncia
float
Podemos fazer o box de um elemento HTML flutuar ao redor dos demais elementos atravs da
propriedade float.
Valor Descrio
left Flutuar esquerda.
right Flitar direita.
none Sem flutuao (padro).
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
Aliquam accumsan vehicula Aliquam accumsan vehicula
diam sit amet bibendum. diam sit amet bibendum.
Aliquam sed tempor tellus. Duis placerat Aliquam sed tempor tellus. Duis placerat
suscipit turpis in sollicitudin. suscipit turpis in sollicitudin.
float: left float: right
Importante
Os elementos HTML com float diferente de none podem ser reposicionados se a janela
for redimensionada.
Importante
Os elementos HTML com float diferente de none no afetam a altura ou a largura do
elemento HTML onde eles esto contidos.
clear
Os box dos elementos HTML prximos do box de um elemento HTML om float diferente de none
so empurrados horizontalmente esquerda ou direita. Podemos determinar que, ao invs de se-
rem empurrados horizontalmente, eles sejam exibidos em uma nova linha atravs da propriedade
clear.
CSS 206
Valor Descrio
left No permite boxes flutuando esquerda dele.
right No permite boxes flutuando direita dele.
both No permite boxes flutuando nem esquerda nem direita dele.
none Permite boxes flutuando esquerda e direita (padro) dele.
clear: none
Aliquam sed tempor tellus. Duis placerat

clear: left
suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum Aliquam sed tempor tellus. Duis placerat
ac augue. suscipit turpis in sollicitudin. Nunc lacus
clear: none clear: left
clear: none

clear: right
clear: none clear: rigth
Lorem ipsum Lorem ipsum

dolor sit amet. dolor sit amet.
clear: none

clear: both
clear: none clear: both
z-index
A sobreposio dos boxes dos elementos HTML pode ser controlada atravs da propriedade z-
index. Basicamente, essa propriedade permite determinar em qual plano um box deve ser exibido.
Valor Descrio
auto Mesmo plano do box do elemento HTML pai (padro).
x O valor x o plano desejado. Esse valor pode ser negativo.
206 www.k19.com.br
207 CSS
Lorem ipsum dolor sit amet, consectetur adipiscing

z-index: 1 elit. Aliquam accumsan vehicula diam
sit amet bibendum. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin.
Nunc lacus magna, auctor vitae venenatis z-index: 2 ac augue. Nunc eleifend dignissim
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
#container {
height: 600px;
position: relative; top: 50%
}
margin-top: -100px
#conteudo { #conteudo
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px; #container
}
Exerccios de Fixao
39 No projeto css, crie um arquivo chamado posicionamento.html.
1 <! DOCTYPE html >

3 < head >
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 " >
10 <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 " >
17 </ p >
18
19 <p id = " p3 " >
22 </ p >
23
24 <p id = " p4 " >
27 </ p >
28 <p id = " p5 " >
31 </ p >
CSS 208
32 <p id = " p6 " >

35 </ p >
36 <p id = " p7 " >
39 </ p >
40 <p id = " p8 " >
43 </ p >
44
45 < div id = " div1 " >
46 Posicionamento fixo
47 </ div >
48
49 < div id = " div2 " >
50 Posicionamento relativo
51 < div id = " div3 " >
52 Posicionamento absoluto
53 </ div >
54 </ div >
55 </ body >
56 </ html >
Cdigo HTML 3.21: posicionamento.html
40 No projeto css, crie um arquivo CSS chamado posicionamento.css.
1 img {
2 float : left ;
3 }
4
5 # p3 {
6 clear : left ;
7 }
8
9 div {
10 width : 200 px ;
12 color : white ;
13 }
14
15 # div1 {
16 position : fixed ;
17 right : 20 px ;
18 top : 40 px ;
19 background - color : green ;
20 }
21
22 # div2 {
23 position : relative ;
24 top : 30 px ;
25 left : 60 px ;
26 background - color : blue ;
27 }
28
29 # div3 {
30 position : absolute ;
31 bottom : -40 px ;
32 right : -100 px ;
34 z - index : -1;
35 }
208 www.k19.com.br
209 CSS
Cdigo CSS 3.34: posicionamento.css
http://localhost/css/public_html/posicionamento.html.
http://localhost/~<USUARIO>/css/public_html/posicionamento.html.
Overflow e clip
Eventualmente, o contedo de um elemento HTML extrapola os limites do mesmo. A linguagem

CSS define algumas propriedades para determinar como essa situao deve ser tratada.
overflow-x
A propriedade overflow-x determina o que os navegadores devem fazer quando o contedo de
um elemento HTML extrapola horizontalmente os limites do mesmo.
Valor Descrio
visible O contedo excedente na horizontal ser exibido (padro).
hidden O contedo excedente na horizontal no ser exibido.
scroll O contedo excedente na horizontal no ser exibido e um mecanismo rolagem
horizontal ser disponibilizado.
auto O contedo excedente na horizontal no ser exibido e um mecanismo rolagem
horizontal ser disponibilizado somente se necessrio.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
overflow-x: visible overflow-x: hidden overflow-x: scroll
Lorem ipsum dolor sit amet. Lorem ipsum.
overflow-x: auto overflow-x: auto
CSS 210
overflow-y
A propriedade overflow-y determina o que os navegadores devem fazer quando o contedo de
um elemento HTML extrapola verticalmente os limites do mesmo.
Valor Descrio
visible O contedo excedente na vertical ser exibido (padro).
hidden O contedo excedente na vertical no ser exibido.
scroll O contedo excedente na vertical no ser exibido e um mecanismo rolagem ver-
tical ser disponibilizado.
auto O contedo excedente na vertical no ser exibido e um mecanismo rolagem ver-
tical ser disponibilizado somente se necessrio.
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor
amet, consectetur amet, consectetur sit amet, consectetur
adipiscing elit. adipiscing elit. adipiscing elit.
Aliquam accumsan Aliquam accumsan Aliquam accumsan
vehicula diam sit. vehicula diam sit. vehicula diam sit.
overflow-y: visible overflow-y: hidden overflow-y: scroll
Lorem ipsum dolor Lorem ipsum dolor sit

sit amet, consectetur amet, consectetur
adipiscing elit. adipiscing elit.
Aliquam accumsan
vehicula diam sit.
overflow-y: auto overflow-y: auto
overflow
A propriedade overflow determina o que os navegadores devem fazer quando o contedo de um
elemento HTML extrapola os limites do mesmo.
Valor Descrio
visible O contedo excedente ser exibido (padro).
hidden O contedo excedente no ser exibido.
scroll O contedo excedente no ser exibido e um mecanismo rolagem ser disponibi-
lizado.
auto O contedo excedente no ser exibido e um mecanismo rolagem ser disponibi-
lizado somente se necessrio.
no-display O elemento HTML no ser exibido se o seu contedo extrapolar os limites do seu
box.
210 www.k19.com.br
211 CSS
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit. consectetur adipiscing elit.
Aliquam accumsan vehicula Aliquam accumsan vehicula Aliquam accumsan vehicula
diam sit. Duis placerat diam sit. Duis placerat diam sit. Duis placerat
suscipit turpis in sollicitudin. suscipit turpis in sollicitudin. suscipit turpis in sollicitudin.
overflow: visible overflow: hidden overflow: scroll
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit

consectetur adipiscing elit. amet, consectetur.
Aliquam accumsan vehicula
diam sit. Duis placerat
suscipit turpis in sollicitudin.
overflow: auto overflow: auto
clip
Podemos determinar a regio do box de um elemento HTML que deve ser exibida com a propri-
edade clip. Essa propriedade s tem efeito sobre elementos com position: absolute.
Valor Descrio
auto O box inteiro ser exibido (padro).
rect(top, right, bottom, left) Retngulo que define a regio que ser exibida.
85px 20px
50px
95px
clip: auto clip: rect(20px, 95px, 85px, 50px)
Exerccios de Fixao
42 No projeto css, crie um arquivo chamado overflow-clip.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Overflow e clip </ title >
6 < link rel = " stylesheet " type = " text / css " href = " overflow - clip . css " >
7 </ head >
CSS 212
8 < body >

9 < div id = " div1 " >
10 <p > Lorem ipsum dolor sit amet , consectetur . </ p >
14 </ div >
15
16 < div id = " div2 " >
21 </ div >
22
23 < div id = " div3 " >
28 </ div >
29
30 < div id = " div4 " >
35 </ div >
36
37 < div id = " div5 " >
38 Ol .
39 </ div >
40
41 < img id = " img1 " src = " http :// www . k19 . com . br / figs / main - header - logo . png " >
42 < img id = " img2 " src = " http :// www . k19 . com . br / figs / main - header - logo . png " >
43 </ body >
44 </ html >
Cdigo HTML 3.22: overflow-clip.html
43 No projeto css, crie um arquivo CSS chamado overflow-clip.css.
1 div {
2 margin : 70 px ;
3 width : 200 px ;
4 height : 100 px ;
6 }
7
8 p {
9 width : 270 px ;
10 }
11
12 # div1 {
13 overflow : visible ;
14 }
15
16 # div2 {
17 overflow : hidden ;
18 }
19
20 # div3 {
21 overflow : scroll ;
22 }
23
212 www.k19.com.br
213 CSS
24 # div4 {
25 overflow : auto ;
26 }
27
28 # div5 {
30 }
31
32 # img1 {
34 top : 10 px ;
35 left : 400 px ;
36 clip : auto ;
37 }
38
39 # img2 {
41 top : 250 px ;
42 left : 400 px ;
43 clip : rect (10 px , 118 px , 108 px , 40 px ) ;
44 }
Cdigo CSS 3.35: overflow-clip.css
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, es-
calonamento, 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.
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 definida por m e sobre a altura a uma taxa definida por n. Caso a fun-
o seja chamada com apenas um parmetro, a mesma taxa ser aplicada na altura e largura do
elemento.
transform: scale( m , n );
w* m Original
w Escalonado
h
h* n
Figura 3.10: 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 definem as distor-
es aplicadas nos eixos x e y respectivamente. Os valores de m e n devem ser dados em graus, voltas
ou grado.
transform: skew( m , n );
Original
Destorcido
Figura 3.12: Funo skew()
Exerccios de Fixao
45 No projeto css, crie um arquivo chamado transformacoes.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Transformaes </ title >
6 < link rel = " stylesheet " type = " text / css " href = " transformacoes . css " >
7 </ head >
8 < body >
CSS 216
9 < div id = " div1 " >

10 translate ()
11 </ div >
12
13 < div id = " div2 " >
14 scale ()
15 </ div >
16
17 < div id = " div3 " >
18 rotate ()
19 </ div >
20
21 < div id = " div4 " >
22 skew ()
23 </ div >
24 </ body >
25 </ html >
Cdigo HTML 3.23: transformacoes.html
46 No projeto css, crie um arquivo CSS chamado transformacoes.css.
1 div {
2 margin : 70 px ;
5 width : 100 px ;
6 height : 100 px ;
7 }
8
9 # div1 {
10 transform : translate (50 px , -20 px ) ;
11
12 /* Webkit : Chrome , Safari */
13 - webkit - transform : translate (50 px , -20 px ) ;
14 }
15
16 # div2 {
17 transform : scale (0.5 , 2) ;
18
20 - webkit - transform : scale (0.5 , 2) ;
21 }
22
23 # div3 {
24 transform : rotate (15 deg ) ;
25
27 - webkit - transform : rotate (15 deg ) ;
28 }
29
30 # div4 {
31 transform : skew (10 deg , -45 deg ) ;
32
34 - webkit - transform : skew (10 deg , -45 deg ) ;
35 }
36
37 /* Moz : Firefox */
38 /* substituir " webkit " por " moz "
39
40 /* O : Opera */
41 /* substituir " webkit " por " o "
42
43 /* Ms : Internet Explorer */
216 www.k19.com.br
217 CSS
44 /* substituir " webkit " por " ms " */
Cdigo CSS 3.36: transformacoes.css
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 div {
2 width : 50 px ;
3 height : 50 px ;
4 }
5
6 div : hover {
7 width : 100 px ;
8 height : 100 px ;
9 }
De acordo com as duas regras CSS acima, quando o ponteiro do mouse for colocado por cima de
um div, a largura e a altura desse elemento HTML aumentar instantaneamente de 50px para 100px.
height: 20px; height: 80px;
Estado inicial Estado final
Quando a mudana visual de um elemento HTML muito significativa, o resultado pode no ser
agradvel aos usurio. A linguagem CSS possui propriedades para melhorar essas transies.
transition-duration
A durao das transies pode ser controlada com a propriedade transition-duration.
CSS 218
Valor Descrio
tempo A durao em segundos(s) ou milissegundos(ms). Os o valor padro.
Os navegadores devem gerar, automaticamente, frames intermedirios entre visual inicial e o

final. Esses frames devem ser exibidos sequencialmente durante o tempo determinado com a pro-
priedade transition-duration.
width: 80px;
width: 20px; height: 80px;
height: 20px; transition-duration: 4s;
tempo (s)
0 4
transition-delay
Podemos estabelecer um atraso para o incio de uma transio com a propriedade transition-
delay.
Valor Descrio
tempo A durao em segundos(s) ou milissegundos(ms). Os o valor padro.
width: 80px;
height: 80px;
width: 20px; transition-duration: 1500ms;
height: 20px; transition-delay: 1s;
tempo (s)
0 1 2.5
transition-timing-function
Os frames que foram uma 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 Descrio
linear Mesma velocidade do incio at o final da transio. Equivale a cubic-
bezier(0, 0, 1, 1).
ease O incio da transio lento, o meio rpido e o final volta a ser lento (pa-
dro). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1).
218 www.k19.com.br
219 CSS
Valor Descrio
ease-in O incio da transio lento. O meio e o final so rpidos. Equivale a cubic-
bezier(0.42, 0, 1, 1)
ease-out O incio e o meio da transio so rpidos e o final lento. Equivale a cubic-
bezier(0, 0, 0.58, 1)
ease-in-out Semelhante ao valor ease com incio e final mais longos. Equivale a cubic-
bezier(0.42, 0, 0.58, 1).
cubic-bezier(n,n,n,n) A transio seguir o padro definido pela funo cbica de bezier.
height: 80px;
transition-duration: 4s;
height: 20px; transition-timing-function: linear;
tempo (s)
0 4
height: 80px;
height: 20px; transition-timing-function: ease;
tempo (s)
0 4
height: 80px;
height: 20px; transition-timing-function: ease-in;
tempo (s)
0 4
CSS 220
height: 80px;
height: 20px; transition-timing-function: ease-out;
tempo (s)
0 4
height: 80px;
height: 20px; transition-timing-function: ease-in-out;
tempo (s)
0 4
transition-property
Podemos escolher quais propriedades CSS devem ser consideradas nas transies atravs da pro-
priedade transition-property.
Valor Descrio
none Nenhuma propriedade ser considerada na transio.
all Todas as propriedades sero consideradas na transio (padro).
lista-de-propriedades Lista das propriedades que devem ser consideradas na transio.
width: 20px;
height: 80px;
opacity: 1;
width: 1px; transition-duration: 4s;
height: 20px; transition-timing-function: linear;
opacity: 0.3; transition-property: height, opacity;
tempo (s)
0 4
220 www.k19.com.br
221 CSS
Exerccios de Fixao
48 No projeto css, crie um arquivo chamado transicoes.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Transies </ title >
6 < link rel = " stylesheet " type = " text / css " href = " transicoes . css " >
7 </ head >
8 < body >
9 < div id = " div1 " >
10 K19 Treinamentos
11 </ div >
12 </ body >
13 </ html >
Cdigo HTML 3.24: transicoes.html
49 No projeto css, crie um arquivo CSS chamado transicoes.css.
1 # div1 {
2 margin : 300 px ;
3 padding : 10 px ;
4 width : 200 px ;
5 height : 200 px ;
6 background - color : #064 e83 ;
7 color : white ;
8 transition : 1 s ease - in - out ;
9 }
10
11 # div1 : hover {
12 transform : scale (4 , 4) rotate (360 deg ) ;
13
15 - webkit - transform : scale (4 , 4) rotate (360 deg ) ;
16 }
17
20
21 /* O : Opera */
23
Cdigo CSS 3.38: transicoes.css
http://localhost/css/public_html/transicoes.html.
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, de-
vemos definir os quadros principais e os navegadores completam a animao inserindo os quadros
intermerdirios.
Keyframe Frames intermedirios Keyframe
Os quadros principais so definidos com a propriedade keyframes. A forma mais simples de

utilizao dessa propriedade definir 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 : 10 px ;
4 }
5 to {
6 width : 100 px ;
7 }
8 }
Os quadros principais so definidos de acordo com o momento no qual eles sero exibidos. Esse
instante descrito como uma porcentagem do tempo total da animao.
222 www.k19.com.br
223 CSS
Quadros gerados automaticamente Quadros gerados automaticamente

pelo navegador pelo navegador
tempo (s)
0 3 6
@keyframes minha-animacao {
0% {
height: 20px;
opacity: 0.35;
}
50% {
opacity: 1;
}
100% {
height: 80px;
opacity: 0.35;
}
}
Mais Sobre
Essencialmente, as duas animaes abaixo so exatamente iguais.
1 @keyframes animacao1 {
2 from {
3 width : 10 px ;
4 }
5 to {
6 width : 70 px ;
7 }
8 }
2 0% {
3 width : 10 px ;
4 }
5 100% {
6 width : 70 px ;
7 }
8 }
Depois de definir as animaes com a propriedade keyframes, devemos associ-la aos elemen-
tos HTML atravs da propriedade animation-name e determinar o tempo de durao com a propri-
edade animation-duration.
1 div {
CSS 224
2 animation - name : k19 - animacao ;

3 animation - duration : 3 s ;
4 }
5
6 @keyframes k19 - animacao {
7 from {
8 width : 10 px ;
9 }
10 to {
11 width : 100 px ;
12 }
13 }
animation-timing-function
Podemos determinar o padro de exibio dos quadros de uma animao com a propriedade
animation-timing-function.
Valor Descrio
linear Mesma velocidade do incio at o final da animao. Equivale a cubic-
bezier(0, 0, 1, 1).
ease O incio da animao lento, o meio rpido e o final volta a ser lento (pa-
dro). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1).
ease-in O incio da animao lento. O meio e o final so rpidos. Equivale a cubic-
bezier(0.42, 0, 1, 1)
ease-out O incio e o meio da animao so rpidos e o final lento. Equivale a cubic-
bezier(0, 0, 0.58, 1)
ease-in-out Semelhante ao valor ease com incio e final mais longos. Equivale a cubic-
bezier(0.42, 0, 0.58, 1).
cubic-bezier(n,n,n,n) A animao seguir o padro definido pela funo cbica de Bzier.
animation-delay
Podemos adicionar um atraso para o incio de uma animao com a propriedade animation-
delay.
Valor Descrio
tempo 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 animation-
iteration-count.
Valor Descrio
x O valor x a quantidade de repeties da animao. 1 o valor padro.
infinite A animao se repetir indefinidamente.
animation-direction
A direo adotada na exibio de uma animao pode ser determinada atravs da propriedade
animation-direction.
224 www.k19.com.br
225 CSS
Valor Descrio
normal A animao ser exibida na direo normal (padro).
reverse A animao ser exibida na direo inversa.
alternate A animao ser exibida nas direes normal e inversa de forma alternada,
iniciando com a direo normal
alternate-reverse 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 Descrio
paused A animao parada.
running A animao em execuo.
Exerccios de Fixao
51 No projeto css, crie um arquivo chamado animacoes.html.
1 <! DOCTYPE html >

3 < head >
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 " >
10 < img id = " img2 " src = " http :// www . k19 . com . br / figs / bolinha - vermelha - sombra . png " >
11 </ body >
12 </ html >
Cdigo HTML 3.25: animacoes.html
52 No projeto css, crie um arquivo CSS chamado animacoes.css.
1 # img1 {
3 top : 0 px ;
4 left : 100 px ;
5 z - index : 2;
6 animation : animacao1 1 s linear , animacao2 0.5 s linear ,
7 animacao3 500 ms linear , animacao4 500 ms linear ;
8 animation - delay : 2s , 3s , 3.5 s , 4 s ;
9
11 - webkit - animation : animacao1 1 s linear , animacao2 0.5 s linear ,
13 - webkit - animation - delay : 2s , 3s , 3.5 s , 4 s ;
14 }
15
CSS 226
16 # img2 {
18 top : 400 px ;
19 left : 110 px ;
20 z - index : 1;
21 transform : scale (2.5 , 2.5) ;
22 animation : animacao5 1 s linear , animacao6 0.5 s linear ,
24 animation - delay : 2s , 3s , 3.5 s , 4 s ;
25
27 - webkit - transform : scale (2.5 , 2.5) ;
28 - webkit - animation : animacao5 1 s linear , animacao6 0.5 s linear ,
30 - webkit - animation - delay : 2s , 3s , 3.5 s , 4 s ;
31 }
32
34 to {
35 top : 310 px ;
36 }
37 }
38
40 from {
41 top : 310 px ;
42 }
43 to {
44 top : 335 px ;
45 transform : scale (1.25 , 0.75) ;
46 }
47 }
48
50 from {
51 top : 335 px ;
52 transform : scale (1.25 , 0.75) ;
53 }
54 to {
55 top : 285 px ;
56 transform : scale (0.75 , 1.25) ;
57 }
58 }
59
61 from {
62 top : 285 px ;
63 transform : scale (0.75 , 1.25) ;
64 }
65 to {
66 top : 310 px ;
67 transform : scale (1 , 1) ;
68 }
69 }
70
72 to {
74 }
75 }
76
78 from {
80 }
81 to {
82 transform : scale (1.75 , 1.75) ;
83 }
84 }
85
226 www.k19.com.br
227 CSS
87 from {
88 transform : scale (1.75 , 1.75) ;
89 }
90 to {
91 transform : scale (1.25 , 1.25) ;
92 }
93 }
94
96 from {
97 transform : scale (1.25 , 1.25) ;
98 }
99 to {
101 }
102 }
103
105
106 @ - webkit - keyframes animacao1 {
107 to {
108 top : 310 px ;
109 }
110 }
111
113 from {
114 top : 310 px ;
115 }
116 to {
117 top : 335 px ;
119 }
120 }
121
123 from {
124 top : 335 px ;
126 }
127 to {
128 top : 285 px ;
130 }
131 }
132
134 from {
135 top : 285 px ;
137 }
138 to {
139 top : 310 px ;
140 - webkit - transform : scale (1 , 1) ;
141 }
142 }
143
145 to {
147 }
148 }
149
151 from {
153 }
154 to {
CSS 228
156 }
157 }
158
160 from {
162 }
163 to {
165 }
166 }
167
169 from {
171 }
172 to {
174 }
175 }
176
179
180 /* O : Opera */
182
Cdigo CSS 3.43: animacoes.css
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 afe-
tados por uma regra CSS. A linguagem CSS oferece uma grande variedade de seletores.
Seletores bsicos
Seletor Padro Exemplo Descrio

Universal * * Seleciona todos os elementos
Tipo e p Seleciona todos os elementos p
Classe .class .erro Seleciona todo elemento da classe erro
ID #id #conteudo Seleciona o elemento de id conteudo
Descendente e1 e2 pa Seleciona todo elemento a descendente de um ele-
mento p
Filho e1 > e2 p>a Seleciona todo elemento a filho de um elemento p
228 www.k19.com.br
229 CSS
Seletor Padro Exemplo Descrio

Irmo Adjacente e1 + e2 h1 + p Seleciona todo elemento p imediatamente precedido
de um elemento h1
Irmo e1 e2 h1 p Seleciona todo elemento p precedido de um elemento
h1
Seletores de atributos
Padro Exemplo Descrio

[a] [min] Seleciona todos os elementos que tenham o atributo
min definido
[a=v] [min=10] Seleciona todos os elementos que tenham o atributo
min igual a 10
[a=v] [title=k19] Seleciona todos os elementos que possuam a palavra
k19 no valor do atributo title
[a=v] [href="https"] Seleciona todos os elementos que tenham o valor do
atributo href iniciando com https
[a$=v] [href$=".css"] Seleciona todos os elementos que tenham o valor do
atributo href terminando com .css
[a*=v] [title*=k19] Seleciona todos os elementos que possuam a string
k19 no valor do atributo title
[a|=v] [href|="https"] Seleciona todos os elementos que tenham o atributo
href iniciando com https
Pseudo-classes

:root :root Seleciona o elemento raiz do documento
:nth-child(n) :nth-child(3) Seleciona todo terceiro elemento contido em algum
outro elemento
:nth-last-child(n) :nth-last-child(3) Seleciona todo terceiro elemento de trs para frente
contido em algum outro elemento
:nth-of-type(n) a:nth-of-type(3) Seleciona todo elemento a que o terceiro elemento
:nth-last-of-type(n) a:nth-last-of-type(3) Seleciona todo elemento a que o terceiro elemento de
trs para frente contido em algum outro elemento
:first-child :first-child Seleciona todo primeiro elemento contido em algum
outro elemento
:last-child :last-child Seleciona todo ltimo elemento contido em algum ou-
tro elemento
:first-of-type a:first-of-type Seleciona todo elemento a que o primeiro elemento
:last-of-type a:last-of-type Seleciona todo elemento a que o ltimo elemento
:only-child :only-child Seleciona todo elemento que filho nico
:only-of-type a:only-of-type Seleciona todo elemento que o nico filho do tipo a
de algum outro elemento
CSS 230

:empty :empty Seleciona todo elemento que no tem contedo
:link a:link Seleciona todo link no visitado
:visited a:visited Seleciona todo link visitado
:active a:active Seleciona todo link ativo
:hover a:hover Seleciona todo link sob o ponteiro do mouse
:focus input:focus Seleciona o input que est no foco
:target :target Seleciona a ncora atual
:lang(lang) :lang(pt) Seleciona todos os elementos com a linguagem pt
:enabled input:enabled Seleciona todos os inputs habilitados
:disabled input:disabled Seleciona todos os inputs desabilitados
:checked input:checked Seleciona todos os inputs marcados
:not(s) :not(.erro) Seleciona todo elemento que no da classe erro
Pseudo-elementos

:first-line p:first-line Seleciona a primeira linha de todo pargrafo
:first-letter p:first-letter Seleciona a primeira letra de todo pargrafo
:before p:before Utilizado para adicionar contedo antes dos pargra-
fos
:after p:after Utilizado para adicionar contedo depois dos pargra-
fos
Prioridade de seletores
Eventualmente, um elemento HTML afetado por duas ou mais regras CSS. Alm disso, uma de-
terminada propriedade CSS pode ser definida com valores diferentes em duas ou mais dessas regras.
Nesse caso, essa propriedade ter o valor definido na regra CSS de maior prioridade. Essas priori-
dades so calculadas de acordo com os seletores utilizados nas regras CSS e na ordem em que elas
foram definidas.
Considere o cdigo HTML e o cdigo CSS a seguir.
1 <p id = " p1 " class = " class1 " >

2 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
3 </ p >
1 p {
2 color : red ;
4 }
5
6 p {
7 color : blue ;
8 }
Perceba que todo elemento p afetado pelas duas regras CSS acima. Nessas duas regras, a pro-
priedade color foi definida com valores diferentes. Os seletores dessas duas regras possuem a mesma
importncia. Nesse caso, a ltima regra tem maior prioridade. Portanto, o texto do pargrafo ser
exibido em azul.
230 www.k19.com.br
231 CSS
A propriedade font-size no entrou em conflito, pois foi definida em apenas uma das regras CSS.
Portanto, o tamanho da fonte do texto do pargrafo ser 14px.
Agora, suponha que o cdigo CSS seja o seguinte:
1 . class1 {
2 color : red ;
4 }
5
6 p {
7 color : blue ;
8 }
Observe que o pargrafo do exemplo afetado pelas duas regras CSS acima. Nesse caso, qual ser
a cor do texto do pargrafo? A resposta correta vermelho. Isso ocorre, pois os seletores de classe
possuem importncia maior que os seletores de tipo.
Conforme a complexidade dos seletores utilizados em nossas regras CSS aumenta, a dificuldade
em determinar qual deles possui maior importncia tambm aumenta. Por isso, devemos seguir o
algoritmo definido na especificao da linguagem CSS para determinar a importncia dos seletores.
Nesse algoritmo, os seletores obtero uma pontuao em quatro critrios diferentes.
A: Caso as propriedades sejam definidas atravs do atributo style, a pontuao nesse critrio ser 1.
Caso contrrio ser 0.
B: A pontuao nesse critrio ser a quantidade de seletores de ID que formam o seletor da regra
CSS.
C: A pontuao nesse critrio ser a soma das quantidades de seletores de classe, de atributos e de
pseudo-classes que formam o seletor da regra CSS.
D: A pontuao nesse critrio ser a soma das quantidades de seletores de tipo e de pseudo-elementos
que formam o seletor da regra CSS.
O critrio A possui prioridade sobre o critrio B, que por sua vez possui prioridade sobre o critrio
C, que por sua vez possui prioridade sobre o critrio D. Veja nas imagens abaixo, um exemplo de
como calcular a pontuao dos seletores.
C 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 , 3 , 5 , 3
A B C D
CSS 232
D D C D D C B C B C B
section article.class2 div div:hover #p1 .class1 #a1:visited #input1 {
color: red;
}
Pontuao: 0 , 3 , 4 , 4
A B C 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 >

3 < head >
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 " >
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 >
20 </ ul >
21 </ li >
22 < li class = " cancelado " > Item 4 </ li >
23 </ ul >
24
28 </ div >
29 </ body >
30 </ html >
Cdigo HTML 3.27: seletores-basicos.html
55 No projeto css, crie um arquivo CSS chamado seletores-basicos.css.
1 * {
232 www.k19.com.br
233 CSS
2 margin : 0 px ;
3 padding : 0 px ;
4 }
5
6 body {
7 background - color : # ddd ;
8 }
9
10 # conteudo {
11 width : 800 px ;
12 margin : 0 auto ;
13 background - color : white ;
14 border : 1 px solid #333;
16 }
17
18 . cancelado {
20 }
21
22 ul {
23 padding : 0 0 0 40 px ;
24 }
25
26 ul li {
27 color : blue ;
28 }
29
30 # conteudo > ul > li {
31 margin : 0 0 20 px 0;
32 }
33
34 ul + p {
35 color : red ;
36 }
37
38 ul ~ p {
40 }
Cdigo CSS 3.46: seletores-basicos.css
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 >

3 < head >
6 < link rel = " stylesheet " type = " text / css " href = " seletores - de - atributos . css " >
7 </ head >
8 < body >
9 <a href = " #a - link " > Link 1 </ a >
10 <a href = " #b - link " title = " Link para a pgina 2 " > Link 2 </ a >
CSS 234
11 <a href = " # link - c " title = " Pgina 3 " > Link 3 </ a >
12 <a href = " # link - d " title = " Link para a pgina 4 " > Link 4 </ a >
13 <a href = " # link - e " title = " Link para a pgina da K19 Treinamentos " > Link 5 </ a >
14 <a href = " # links - f " title = " Link para a pgina 6 " > Link 6 </ a >
15 <a href = " # link " title = " Link para a pgina 7 " > Link 7 </ a >
16
17 < hr >
18
19 < img src = " http :// www . k19 . com . br / figs / main - header - logo . png "
20 title = " Logo da K19 " >
21 < img src = " http :// www . k19 . com . br / figs / k01 - logo - large . png " >
22 < img src = " http :// www . k19 . com . br / figs / k02 - logo - large . png " >
23 </ body >
24 </ html >
Cdigo HTML 3.28: seletores-de-atributos.html
58 No projeto css, crie um arquivo CSS chamado seletores-de-atributos.css.
1 [ title ] {
3 }
4
5 [ title = Pgina 3 ] {
6 color : green ;
7 }
8
9 [ title ~= K19 ] {
11 background : yellow ;
12 }
13
14 [ title ^= Link ] {
15 margin - right : 30 px ;
16 }
17
18 [ href$ = link ] {
19 outline : 4 px solid blue ;
20 }
21
22 [ src *= large ] {
23 border : 4 px solid green ;
24 }
25
26 [ href |= # link ] {
28 }
Cdigo CSS 3.47: seletores-de-atributos.css
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 CSS
60 No projeto css, crie um arquivo chamado seletores-de-pseudo-classes.html.
1 <! DOCTYPE html >

3 < head >
6 < link rel = " stylesheet " type = " text / css " href = " seletores - de - pseudo - classes . css " >
7 </ head >
8 < body >
9 < h1 id = " seletores -3 - ancora " >
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 " >
20 < 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
32
33 < div >
34 < h1 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h1 >
37 </ div >
38
39 < div >
41 </ div >
42
43 < div >
47 </ div >
48
49 < div > </ div >
50
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 >
58 < input type = " text " disabled >
60 </ div >
61
62 < div >
63 < input type = " checkbox " >
64 < input type = " checkbox " checked >
65 < input type = " checkbox " >
66 </ div >
67
68 < ul lang = " es " >
CSS 236
69 < li > Item 1 </ li >

70 < li > Item 2 </ li >
71 < li > Item 3 </ li >
72 </ ul >
73
74 < ul lang = " en " >
75 < li > Item 1 </ li >
76 < li > Item 2 </ li >
77 < li > Item 3 </ li >
78 </ ul >
79
80 < ol lang = " en " >
81 < li > Item 1 </ li >
82 < li > Item 2 </ li >
83 < li > Item 3 </ li >
84 </ ol >
85 </ body >
86 </ html >
Cdigo HTML 3.29: seletores-de-pseudo-classes.html
61 No projeto css, crie um arquivo CSS chamado seletores-de-pseudo-classes.css.
1 : root {
3 }
4
5 # lista1 li : first - child {
6 color : red ;
7 }
8
9 # lista1 li : last - child {
10 color : blue ;
11 }
12
13 # lista2 li : nth - child (2) {
14 color : magenta ;
15 }
16
17 # lista2 li : nth - last - child (2) {
18 color : orange ;
19 }
20
21 p : first - of - type {
22 color : yellow ;
23 }
24
25 p : last - of - type {
26 color : aqua ;
27 }
28
29 p : nth - of - type (2) {
30 color : firebrick ;
31 }
32
33 p : nth - last - of - type (2) {
34 color : lawngreen ;
35 }
36
37 : only - child {
39 }
40
41 h2 : only - of - type {
42 color : plum ;
236 www.k19.com.br
237 CSS
43 }
44
45 : empty {
46 height : 20 px ;
47 border : 4 px dashed black ;
48 }
49
50 a : link {
51 color : springgreen ;
53 }
54
55 a : visited {
56 color : # ccc ;
57 }
58
59 a : active {
60 color : orange ;
61 }
62
63 a : hover {
64 color : fuchsia ;
65 }
66
67 input : focus {
69 color : white ;
70 }
71
72 : target {
73 border : 4 px solid magenta ;
74 color : purple ;
75 }
76
77 : lang ( en ) {
78 color : red ;
79 }
80
81 : enabled {
82 outline : 4 px solid red ;
83 }
84
85 : disabled {
86 outline : 4 px solid blue ;
87 }
88
89 : checked {
90 outline : 4 px solid green ;
91 }
92
93 : not ( ul ) > li {
94 padding - left : 100 px ;
95 }
Cdigo CSS 3.48: seletores-de-pseudo-classes.css
http://localhost/css/public_html/seletores-de-pseudo-classes.html.
http://localhost/~<USUARIO>/css/public_html/seletores-de-pseudo-classes.html.
CSS 238
63 No projeto css, crie um arquivo chamado seletores-de-pseudo-elementos.html.
1 <! DOCTYPE html >

3 < head >
6 < link rel = " stylesheet " type = " text / css " href = " seletores - de - pseudo - elementos . css " >
7 </ head >
8 < body >
10
11 <p >
17 </ p >
18 </ body >
19 </ html >
Cdigo HTML 3.30: seletores-de-pseudo-elementos.html
64 No projeto css, crie um arquivo CSS chamado seletores-de-pseudo-elementos.css.
1 p : first - line {
3 }
4
5 p : first - letter {
7 }
8
9 h1 : before {
10 content : ~ ;
11 color : red ;
12 }
13
14 h1 : after {
15 content : ~ ;
16 color : red ;
17 }
Cdigo CSS 3.49: seletores-de-pseudo-elementos.css
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 definimos as regras CSS dos nossos documentos, tambm podemos de-
terminar 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 define os seguintes tipos de mdia.
Media Type Descrio

all Todos os tipos de mdia.
braille Dispositivos em braille com resposta a toques.
embossed Impressoras em braille.
handheld Dispositivos portteis (exceto smartphones mais modernos).
print Impressoras convencionais.
projection Projetores.
screen Tela de computadores, smartphones ou algum dispositivo do gnero.
speech Sintetizadores de voz.
tty Dispositivos de grades com caracteres de tamanho fixo (teletypes, terminal
ou dispositivos com limitaes de exibio).
tv Televisores.
Podemos definir as mesmas regras CSS para diversos tipos de mdia. Para isso devemos separar
esses tipos por vrgula.
1 < link rel = " stylesheet " type = " text / css " href = " aquivo . css " media = " screen , print " >
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 propri-
edade 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.
CSS 240
Para identificar, mais facilmente, quais propriedades podem ser aplicadas a um determinado
tipo de mdia, a especificao da linguagem CSS divide em grupos os diversos tipos de mdia.
Confira na tabela a seguir a relao entre os tipos de mdia e os grupos de mdia:
Media Type Media Groups

continuous e paged visual, audio, speech e tactile grid e bitmap interactive e static
braille continuous tactile grid ambos
embossed paged tactile grid static
handheld ambos visual, audio, speech ambos ambos
print paged visual bitmap static
projection paged visual bitmap interactive
screen continuous visual, audio bitmap ambos
speech continuous speech nenhum ambos
tty continuous visual grid ambos
tv ambos visual, audio bitmap ambos
Propriedades especficas
Os tipos de mdia do CSS permitem definir diferentes regras para cada tipo de mdia. Entretanto,
eventualmente necessrio definir regras CSS de acordo com caractersticas mais especficas dos
dispositivo de sada. Para isso, devemos utilizar as chamadas media queries. Veja o seguinte exem-
plo.
1 @media screen and ( min - width : 500 px ) {

2 ...
3 }
No exemplo acima, as regras CSS sero aplicadas caso o tipo de mdia utilizado seja screen e a
rea de renderizao do documento (viewport) tenha, no mnimo, 500 pixels de largura. Como vimos
as media queries tambm podem ser definidas atravs do atributo media do elemento link.
1 < link
2 rel = " stylesheet "
3 type = " text / css "
4 href = " arquivo . css "
5 media = " screen and ( min - width : 500 px ) " / >
No exemplo abaixo, o cdigo dentro da regra media ser aplicado quando a largura do viewport
for pelo menos 500 pixels ou quando a orientao for portrait.
1 @media ( min - width : 500 px ) , ( orientation : portrait ) {

2 ...
3 }
Eventualmente, uma media query pode no fazer sentido. Considere o seguinte exemplo.
1 @media speech and ( min - width : 500 px ) {

2 ...
3 }
240 www.k19.com.br
241 CSS
No exemplo acima, a media query contraditria, pois o tipo de mdia speech no compatvel
com a propriedade min-width. Dessa forma, o cdigo CSS definido dentro da regra media nunca
ser processado.
Veja a seguir algumas propriedades que podemos utilizar nas media queries
Propriedade Descrio Valor Media Type min e max?

width Determina qual deve ser a largura do Medidas visual e tactile sim
viewport no dispositivo de sada.
height Determina qual deve ser a altura do Medidas visual e tactile sim
viewport no dispositivo de sada.
device-width Determina qual deve ser a largura da Medidas visual e tactile sim
tela do dispositivo de sada.
device-height Determina qual deve ser a altura da Medidas visual e tactile sim
tela do dispositivo de sada.
orientation Verifica se o viewport est na orien- portrait ou lands- bitmap no
tao portrait (retrato) ou landscape cape
(paisagem).
aspect-ratio Determina a razo entre as proprie- inteiro/inteiro bitmap sim
dades width e height.
color-index Determina o nmero de cores do inteiro visual sim
dispositivo de sada.
resolution Determina a resoluo do disposi- dpi bitmap sim
tivo de sada.
Exerccios de Fixao
66 No projeto css, crie um arquivo chamado media-types.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Media Types </ title >
6 < link rel = " stylesheet " type = " text / css " href = " media - types . css " >
7 </ head >
8 < body >
10 </ body >
11 </ html >
Cdigo HTML 3.34: media-types.html
67 No projeto css, crie um arquivo CSS chamado media-types.css.
1 @media all {
2 p {
CSS 242
4 }
5 }
6
7 @media screen {
8 p {
9 color : red ;
10 }
11 }
12
13 @media print {
14 p {
15 color : blue ;
16 }
17 }
18
19 @media handheld , screen and ( max - device - width :480 px ) {
20 p {
21 color : green ;
22 }
23 }
Cdigo CSS 3.55: media-types.css
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 quanti-
dade de requisies e ao overhead dos pacotes HTTP.
Analogia
Adicionar individualmente imagens pequenas ou mdias em uma pgina web como
1
80
19
E 8
K X
K
P B 0-
Y
B
K
O
E
D
A
M
ter quer comprar diversos itens pequenos ou mdios no supermercado e fazer uma vi-
agem para trazer cada um deles.
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-image: url(cursos-icones.png);

background-position: 0px 0px; background-position: -100px -100px;
Exerccios de Fixao
69 No projeto css, crie um arquivo chamado sprites.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Sprites </ title >
6 < link rel = " stylesheet " type = " text / css " href = " sprites . css " >
7 </ head >
8 < body >
9 < ul >
10 < 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 = " k20 " > K20 - Formao Desenvolvedor Java Avanado </ li >
16 </ ul >
17 </ body >
18 </ html >
Cdigo HTML 3.35: sprites.html
70 No projeto css, crie um arquivo CSS chamado sprites.css.
1 li : before {
2 content : " " ;
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 " ) ;
CSS 244
9 }
10
11 li . k12 : before {
12 background - position : -44 px 0 px ;
13 }
14
16 background - position : -88 px 0 px ;
17 }
18
20 background - position : 0 px -44 px ;
21 }
22
24 background - position : -44 px -44 px ;
25 }
26
28 background - position : -88 px -44 px ;
29 }
Cdigo CSS 3.56: media-types.css
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 definir 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 defi-
nir um gradiente diretamente no cdigo CSS atravs das funes linear-gradient, repeating-linear-
gradient, radial-gradient e repeating-radial-gradient.
De acordo com a especificao CSS, os gradientes so semelhantes s imagens. Eles podem ser
definidos 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 definir um gradiente linear, necessrio utilizar a funo linear-gradient.
244 www.k19.com.br
245 CSS
Definio da Lista de
linha do gradiente paradas de cores
linear-gradient( [ <angulo> | to <lado-ou-canto>,]? <parada-de-cor> [, <parada-de-cor>]+ )
<angulo> <lado-ou-canto>
Representa o ngulo de inclinao do gradiente. Representa a regio do box do gradiente na qual a ltima
<parada-de-cor> ser posicionada. formado pelos pares de
<parada-de-cor> lados left | right e/ou top | bottom, no importando a ordem em
Representa uma cor e a posio em que ela deve que aparecem. A primeira <parada-de-cor> ser posicionada na
aparecer sobre a linha do gradiente. regio simetricamente oposta a da ltima <parada-de-cor>.
No exemplo abaixo, podemos entender melhor cada um dos parmetros:
Linha do gradiente
linear-gradient(to top left, green, yellow)
ltima parada de cor (ending point)

top left
-
340 -20
Primeira parada de cor (starting point)
Veja mais alguns exemplos:
linear-gradient(to top right, green 50%, yellow)
linear-gradient(135deg, green, white, blue)
Repare que quando a primeira parada de cor comea em uma posio diferente de 0%, o gradi-
ente preenchido com a cor da primeira parada de cor do 0% at essa posio.
Gradiente linear com repetio

Para definir 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%.
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 definidas.
Veja alguns exemplos:
linear-gradient(to top left, green, yellow)
repeating-linear-gradient(to top left, green, yellow)
linear-gradient(to top left, green 50%, yellow)
repeating-linear-gradient(to top left, green 50%, yellow)
linear-gradient(to top left, green, yellow 50%)
repeating-linear-gradient(to top left, green, yellow 50%)
Gradiente radial
Para definir um gradiente radial, devemos utilizar a 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 CSS
<tamanho> | <porcentagem> <posio>
Representa o tamanho do raio da forma do gradiente. Representa a posio do box do gradiente na qual a primeira
No caso da elipse, o tamanho pode ser dado atravs <parada-de-cor> ser posicionada. Pode ser informada atravs
da porcentagem em relao ao tamanho do box do dos pares de lados left | right e/ou top | bottom, no importando
gradiente. a ordem em que aparecem. Tambm pode receber o valor
center, que o padro. A posio tambm pode ser informada
<parada-de-cor> atravs de coordenadas em relao ao canto superior esquerdo
Representa uma cor e a posio em que ela deve do box do gradiente.
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 definir 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 definidas.
Confira o exemplo:
radial-gradient(black 0%, white 25%)
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 filho. Os valores de algumas propriedades so herdados au-
tomaticamente 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 >

3 </ div >
1 div {
2 color : red ;
3 }
No exemplo acima, a propriedade color foi definida apenas para o elemento div. No elemento p,
essa propriedade assumir o valor padro que inherit, ou seja, ser herdado automaticamente do
elemento pai. Como consequncia a cor do texto do pargrafo ser vermelha.
Agora, considere este outro exemplo:
1 < div >

3 </ div >
1 div {
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 defi-
nir as seguintes regras CSS:
1 div {
3 }
4
5 p {
6 border : inherit ;
7 }
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 final 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. Confira na tabela abaixo os possveis valores da propriedade:
content-box
Comportamento padro. As propriedades width e height definem as dimenses da rea do con-
tedo do elemento.
padding-box
As propriedades width e height definem as dimenses da rea do contedo do elemento em
conjunto com as margens internas.
border-box
As propriedades width e height definem as dimenses da rea do contedo do elemento em
conjunto com as margens internas e bordas.
inherit
Assume o valor da mesma propriedade no elemento HTML pai.
Veja a figura abaixo para compreender melhor cada um dos valores:
box-sizing: content-box box-sizing: padding-box box-sizing: border-box
width width width

padding padding padding
border border border
Design Responsivo (Contedo Extra)
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 ficar cada vez mais preocupados em
atender de maneira satisfatria o pblico mobile.
Atender o pblico mobile de maneira satisfatria significa 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 ficar 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 disposi-
tivo. 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 atra-
vs de URLs especficas. 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 ques-
tes:
Como fica 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 ficar 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 ficar extremamente
decepcionado. Os usurios tendem a querer ter todo o poder do desktop nos smartphones e afins.
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 flexveis, media queries
e mdias flexveis. A seguir iremos discutir sobre cada parte.
250 www.k19.com.br
251 CSS
Layouts Flexveis
A ideia por trs dos layouts flexveis fazer com que os elementos de uma pgina sejam capazes
de terem as suas dimenses adaptadas dinamicamente. Isso bem interessante quando queremos
que o layout da pgina se adapte a diferentes tamanhos de tela ou alguns elementos sejam redimen-
sionados aps uma interao do usurio, por exemplo.
Quando criamos layouts estticos, em geral, trabalhamos com unidades de medida estticas
como px, pt, in, cm e etc. Ao criarmos layouts flexveis passamos a trabalhar muito mais com as
unidades relativas como %, em, ex e etc. Fazemos isso para evitar que ocorram deformaes ou
overflow na apresentao do contedo.
Para facilitar o trabalho de quem desenhar o layout de uma pgina e tambm de quem pro-
duzir o cdigo HTML e CSS, uma tcnica muito comum a de tentar visualizar a tela como um
sistema de grades. Nesse sistema, cada grade deve ter as suas dimenses definidas com unidades de
medida relativas. Dessa forma, se a tela do usurio for redimensionada, todo o sistema de grade ser
reajustado.
Layout esttico
Layout flexvel
Media Queries
Como o objetivo do design responsivo apresentar o contedo de uma pgina de maneiras dife-
rentes em dispositivos com tamanhos de telas diferentes, em algum momento sentiremos a necessi-
dade de criar regras CSS para cada tamanho de tela ou para cada conjunto de tamanho de telas. Em
uma situao como essa, as media queries se encaixam perfeitamente e devemos utiliz-las.
Breakpoints
O ponto principal da relao das media queries com o design responsivo a definio daquilo
que chamamos de breakpoints (pontos de quebra). Muitos autores costumam definir esses pontos
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 dispositi-
vos 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, content-
based breakpoints ou pontos de quebra orientados ao contedo. Nessa estratgia definimos os pon-
tos de quebra observando se o contedo da pgina se acomoda corretamente ao tamanho do view-
port. Uma tcnica muito eficiente comear do menor para o maior tamanho de viewport. Em geral,
o menor tamanho refere-se aos dispositivos mobile e, por isso, a tcnica recebe o nome de mobile
first.
Aplicar a estratgia do content-drive breakpoints juntamente com a tcnica mobile first re-
lativamente simples: redimensione a janela do navegador para que o viewport fique com o menor
tamanho esperado (mobile). Esse ser o primeiro breakpoint. Aplique as regras CSS na pgina e em
seguida redimensione a janela do navegador at que o contedo no seja apresentado corretamente
ou a pgina tenha o layout quebrado. Quando isso ocorrer significa que encontramos o prximo
breakpoint. Nesse breakpoint, aplique as regras CSS para que a pgina volte a ser apresentada corre-
tamente. Repita esse processo at considerar que tenha definido todos os breakpoints necessrios.
Mdias Flexveis
Para criarmos uma pgina que seja confortvel para a leitura, devemos ajustar o posicionamento
e a dimenso dos elementos conforme vimos anteriormente. As imagens, players de vdeo e udio
no so excees. Entretanto, quando trabalhamos com certos tipos de mdias devemos ter alguns
cuidados especiais.
Suponha uma imagem de 320px de largura que gostaramos de exibir em uma pgina de maneira
que ela se adapte largura da tela. Conseguiramos fazer isso utilizando a propriedade width: 100%,
por exemplo. Veja abaixo como ficaria essa pgina exibida em um smartphone e em um desktop.
Smartphone Desktop
Na imagem acima podemos perceber que a qualidade da imagem diminuiu ao estic-la. Para
evitar ou amenizar esse tipo de problema poderamos criar diversas verses da imagem, uma para
252 www.k19.com.br
253 CSS
cada breakpoint. Poderamos tambm obter uma imagem original de tamanho maior, pois, em geral,
diminuir uma imagem perde menos qualidade do que esticar. Ou ainda, dependendo da imagem,
poderamos utilizar uma verso vetorial da mesma. Como podemos observar, existem diversas tc-
nicas 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
1 No projeto css, crie um arquivo chamado background-color.html.
1 <! DOCTYPE html >

3 < head >
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 >
10 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >
Cdigo HTML 3.38: background-color.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar1.zip
2 No projeto css, crie um arquivo CSS chamado background-color.css.
1 div {
2 height : 100 px ;
3 width : 400 px ;
4 }
5
6 # div1 {
8 }
9
10 # div2 {
11 background - color : #00 ff00 ;
12 }
13
14 # div3 {
15 background - color : rgb (0 , 0 , 255) ;
16 }
Cdigo CSS 3.60: background-color.css
CSS 254
http://localhost/css/public_html/background-color.html.
http://localhost/~<USUARIO>/css/public_html/background-color.html.
4 No projeto css, crie um arquivo chamado background-image.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - background - image </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - image . css " >
7 </ head >
8 < body >
9
10 </ body >
11 </ html >
Cdigo HTML 3.39: background-image.html
5 No projeto css, crie um arquivo CSS chamado background-image.css.
1 body {
2 background - image :
3 url ( " http :// www . k19 . com . br / figs / planeta . png " ) ,
4 url ( " http :// www . k19 . com . br / figs / fundo . jpg " ) ;
5 }
Cdigo CSS 3.61: background-image.css
http://localhost/css/public_html/background-image.html.
http://localhost/~<USUARIO>/css/public_html/background-image.html.
7 No projeto css, crie um arquivo chamado background-repeat.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - background - repeat </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - repeat . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
254 www.k19.com.br
255 CSS
10 < div id = " div2 " > </ div >

11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >
Cdigo HTML 3.40: background-repeat.html
8 No projeto css, crie um arquivo CSS chamado background-repeat.css.
1 div {
2 height : 300 px ;
3 width : 400 px ;
5 margin : 10 px ;
6 }
7
8 # div1 {
9 background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ;
10 }
11
12 # div2 {
15 }
16
17 # div3 {
19 background - repeat : repeat - x ;
20 }
21
22 # div4 {
24 background - repeat : repeat - y ;
25 }
Cdigo CSS 3.62: background-repeat.css
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 >

3 < head >
5 < title > K19 - background - attachment </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - attachment . css " >
7 </ head >
8 < body >
9
CSS 256
10 </ body >

11 </ html >
Cdigo HTML 3.41: background-attachment.html
11 No projeto css, crie um arquivo CSS chamado background-attachment.css.
1 body {
3 background - image : url ( " http :// www . k19 . com . br / figs / fundo . jpg " ) ;
4 }
Cdigo CSS 3.63: background-attachment.css
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 ro-

lagem.
13 No projeto css, altere o arquivo CSS background-attachment.css.
1 body {
3 background - image : url ( " http :// www . k19 . com . br / figs / fundo . jpg " ) ;
4 background - attachment : fixed ;
5 }
Cdigo CSS 3.64: background-attachment.css
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 ro-

lagem.
15 No projeto css, crie um arquivo chamado background-position.html.
256 www.k19.com.br
257 CSS
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - background - position </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - position . css " >
7 </ head >
8 < body >
9
10 </ body >
11 </ html >
Cdigo HTML 3.42: background-position.html
16 No projeto css, crie um arquivo CSS chamado background-position.css.
1 body {
4 background - position : center top ;
5 }
Cdigo CSS 3.65: background-position.css
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 >

3 < head >
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 >
10 < 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.
CSS 258
1 div {
2 width : 400 px ;
3 height : 50 px ;
4 margin : 10 px ;
5 padding : 50 px ;
6 border : 10 px dotted black ;
8 }
9
10 # div1 {
11 background - clip : border - box ;
12 }
13
14 # div2 {
15 background - clip : padding - box ;
16 }
17
18 # div3 {
19 background - clip : content - box ;
20 }
Cdigo CSS 3.66: background-clip.css
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 >

3 < head >
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 >
10 < 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 : 400 px ;
3 height : 100 px ;
4 margin : 10 px ;
5 padding : 25 px ;
258 www.k19.com.br
259 CSS

9 }
10
11 # div1 {
12 background - origin : border - box ;
13 }
14
15 # div2 {
16 background - origin : padding - box ;
17 }
18
19 # div3 {
20 background - origin : content - box ;
21 }
Cdigo CSS 3.67: background-origin.css
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 >

3 < head >
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 >
10 < 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 : 400 px ;
3 height : 100 px ;
4 margin : 10 px ;
5 padding : 25 px ;
9 }
10
CSS 260
11 # div1 {
12 background - size : 50 px auto ;
13 }
14
15 # div2 {
16 background - size : cover ;
17 }
18
19 # div3 {
20 background - size : contain ;
21 }
Cdigo CSS 3.68: background-size.css
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 >

3 < head >
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 >
12 </ body >
13 </ html >
Cdigo HTML 3.46: color.html
28 No projeto css, crie um arquivo CSS chamado color.css.
1 # p1 {
2 color : red ;
3 }
4
5 # p2 {
6 color : #00 ff00 ;
7 }
8
9 # p3 {
10 color : rgb (0 , 0 , 255) ;
11 }
Cdigo CSS 3.69: color.css
260 www.k19.com.br
261 CSS
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 >

3 < head >
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 " >
15 </ p >
16 <p id = " p2 " >
22 </ p >
23 <p id = " p3 " >
29 </ p >
30 <p id = " p4 " >
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 {
3 width : 400 px ;
4 }
CSS 262
5
6 # p1 {
7 text - align : left ;
8 }
9
10 # p2 {
11 text - align : center ;
12 }
13
14 # p3 {
15 text - align : right ;
16 }
17
18 # p4 {
19 text - align : justify ;
20 }
Cdigo CSS 3.70: text-align.css
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 >

3 < head >
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 " >
15 </ p >
16 <p id = " p2 " >
22 </ p >
23 <p id = " p3 " >
29 </ p >
30 </ 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.
1 p {
2 width : 400 px ;
3 }
4
5 # p1 {
6 text - decoration : underline ;
7 }
8
9 # p2 {
10 text - decoration : overline ;
11 }
12
13 # p3 {
15 }
Cdigo CSS 3.71: text-decoration.css
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 >

3 < head >
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 " >
15 </ p >
16 <p id = " p2 " >
22 </ p >
23 <p id = " p3 " >
CSS 264

29 </ p >
30 </ body >
31 </ html >
Cdigo HTML 3.49: text-transform.html
37 No projeto css, crie um arquivo CSS chamado text-transform.css.
1 p {
2 width : 400 px ;
3 }
4
5 # p1 {
6 text - transform : capitalize ;
7 }
8
9 # p2 {
11 }
12
13 # p3 {
14 text - transform : lowercase ;
15 }
Cdigo CSS 3.72: text-transform.css
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 >

3 < head >
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 " >
15 </ p >
16 <p id = " p2 " >
264 www.k19.com.br
265 CSS

22 </ p >
23 </ body >
24 </ html >
Cdigo HTML 3.50: text-indent.html
40 No projeto css, crie um arquivo CSS chamado text-indent.css.
1 p {
2 width : 400 px ;
3 }
4
5 # p1 {
7 }
8
9 # p2 {
11 }
Cdigo CSS 3.73: text-indent.css
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 >

3 < head >
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 " >
11 </ p >
12 <p id = " p2 " >
14 </ p >
15 <p id = " p3 " >
17 </ p >
18 <p id = " p4 " >
20 </ p >
21 </ body >
22 </ html >
Cdigo HTML 3.51: letter-spacing.html
CSS 266
43 No projeto css, crie um arquivo CSS chamado letter-spacing.css.
1 # p1 {
3 }
4
5 # p2 {
6 letter - spacing : -2 px ;
7 }
8
9 # p3 {
11 }
12
13 # p4 {
15 }
Cdigo CSS 3.74: letter-spacing.css
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 >

3 < head >
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 " >
11 </ p >
12 <p id = " p2 " >
14 </ p >
15 <p id = " p3 " >
17 </ p >
18 <p id = " p4 " >
20 </ p >
21 </ body >
22 </ html >
Cdigo HTML 3.52: word-spacing.html
266 www.k19.com.br
267 CSS
46 No projeto css, crie um arquivo CSS chamado word-spacing.css.
1 # p1 {
3 }
4
5 # p2 {
6 word - spacing : -5 px ;
7 }
8
9 # p3 {
11 }
12
13 # p4 {
15 }
Cdigo CSS 3.75: word-spacing.css
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 >

3 < head >
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 " >
11 </ p >
12 <p >
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 : 100 px ;
4 }
5
CSS 268
6 # p1 {
7 word - wrap : break - word ;
8 }
Cdigo CSS 3.76: word-wrap.css
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 >

3 < head >
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 " >
15 </ p >
16 <p id = " p2 " >
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.
1 p {
2 width : 400 px ;
4 }
5
6 # p1 {
8 }
9
10 # p2 {
12 }
268 www.k19.com.br
269 CSS
Cdigo CSS 3.77: line-height.css
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 >

3 < head >
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 " >
10 Lorem
11 ipsum dolor sit amet , consectetur adipiscing elit . Cras vehicula
12 bibendum arcu .
13
14 Sed
17 </ p >
18 <p id = " p2 " >
19 Lorem
21 bibendum arcu .
22
23 Sed
26 </ p >
27 <p id = " p3 " >
28 Lorem
30 bibendum arcu .
31
32 Sed
35 </ p >
36 <p id = " p4 " >
37 Lorem
39 bibendum arcu .
40
41 Sed
44 </ p >
45 <p id = " p5 " >
46 Lorem
48 bibendum arcu .
CSS 270
49
50 Sed
53 </ p >
54 </ body >
55 </ html >
Cdigo HTML 3.55: white-space.html
55 No projeto css, crie um arquivo CSS chamado white-space.css.
1 p {
2 width : 400 px ;
4 }
5
6 # p1 {
7 white - space : nowrap ;
8 }
9
10 # p2 {
11 white - space : pre ;
12 }
13
14 # p3 {
15 white - space : pre - line ;
16 }
17
18 # p4 {
19 white - space : pre - wrap ;
20 }
Cdigo CSS 3.78: white-space.css
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 >

3 < head >
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 " >
11 </ p >
12 <p id = " p2 " >
270 www.k19.com.br
271 CSS

14 </ p >
15 <p id = " p3 " >
17 </ p >
18 <p id = " p4 " >
20 </ p >
21 <p id = " p5 " >
23 </ p >
24 </ body >
25 </ html >
Cdigo HTML 3.56: text-shadow.html
58 No projeto css, crie um arquivo CSS chamado text-shadow.css.
1 p {
3 }
4
5 # p1 {
6 text - shadow : 3 px 3 px # ff0000 ;
7 }
8
9 # p2 {
10 text - shadow : -3 px -3 px # ff0000 ;
11 }
12
13 # p3 {
14 text - shadow : 0 0 10 px # ff0000 ;
15 }
16
17 # p4 {
18 text - shadow : 10 px 10 px 10 px # ff0000 ;
19 }
20
21 # p5 {
22 text - shadow : 5 px 5 px 5 px # ff0000 , -5 px -5 px 5 px #0000 ff ;
23 }
Cdigo CSS 3.79: text-shadow.css
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.
1 <! DOCTYPE html >

3 < head >
CSS 272
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 " >
11 </ p >
12 <p id = " p2 " >
14 </ p >
15 <p id = " p3 " >
17 </ p >
18 <p id = " p4 " >
20 </ p >
21 <p id = " p5 " >
23 </ p >
24 </ body >
25 </ html >
Cdigo HTML 3.57: font-family.html
61 No projeto css, crie um arquivo CSS chamado font-family.css.
1 p {
3 }
4
5 # p1 {
6 font - family : " Arial " ;
7 }
8
9 # p2 {
10 font - family : " Courier " ;
11 }
12
13 # p3 {
14 font - family : " Verdana " ;
15 }
16
17 # p4 {
18 font - family : " serif " ;
19 }
20
21 # p5 {
22 font - family : " cursive " ;
23 }
Cdigo CSS 3.80: font-family.css
http://localhost/css/public_html/font-family.html.
272 www.k19.com.br
273 CSS
http://localhost/~<USUARIO>/css/public_html/font-family.html.
63 No projeto css, crie um arquivo chamado font-size.html.
1 <! DOCTYPE html >

3 < head >
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 " >
11 </ p >
12 <p id = " p2 " >
14 </ p >
15 <p id = " p3 " >
17 </ p >
18 <p id = " p4 " >
20 </ p >
21 <p id = " p5 " >
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.
1 # p1 {
2 font - size : x - small ;
3 }
4
5 # p2 {
6 font - size : x - large ;
7 }
8
9 # p3 {
11 }
12
13 # p4 {
15 }
16
17 # p5 {
19 }
Cdigo CSS 3.81: font-size.css
CSS 274
http://localhost/css/public_html/font-size.html.
http://localhost/~<USUARIO>/css/public_html/font-size.html.
66 No projeto css, crie um arquivo chamado font-style.html.
1 <! DOCTYPE html >

3 < head >
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 " >
11 </ p >
12 <p id = " p2 " >
14 </ p >
15 <p id = " p3 " >
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.
1 p {
3 }
4
5 # p1 {
7 }
8
9 # p2 {
10 font - style : oblique ;
11 }
Cdigo CSS 3.82: font-style.css
http://localhost/css/public_html/font-style.html.
http://localhost/~<USUARIO>/css/public_html/font-style.html.
274 www.k19.com.br
275 CSS
69 No projeto css, crie um arquivo chamado font-variant.html.
1 <! DOCTYPE html >

3 < head >
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 " >
11 </ p >
12 <p id = " p2 " >
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.
1 p {
3 }
4
5 # p1 {
6 font - variant : small - caps ;
7 }
Cdigo CSS 3.83: font-variant.css
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 >

3 < head >
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 " >
11 </ p >
12 <p id = " p2 " >
CSS 276
14 </ p >
15 <p id = " p3 " >
17 </ p >
18 </ body >
19 </ html >
Cdigo HTML 3.61: font-weight.html
73 No projeto css, crie um arquivo CSS chamado font-weight.css.
1 p {
3 }
4
5 # p1 {
6 font - weight : 400;
7 }
8
9 # p2 {
11 }
12
13 # p3 {
15 }
Cdigo CSS 3.84: font-weight.css
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 >

3 < head >
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 " >
10 href = " http :// fonts . googleapis . com / css ? family = Bad + Script " >
12 href = " http :// fonts . googleapis . com / css ? family = Ceviche + One " >
13 </ head >
14 < body >
15 <p id = " p1 " >
17 </ p >
18 <p id = " p2 " >
276 www.k19.com.br
277 CSS

20 </ p >
21 <p id = " p3 " >
23 </ p >
24 </ body >
25 </ html >
Cdigo HTML 3.62: font-face.html
76 No projeto css, crie um arquivo CSS chamado font-face.css.
1 p {
3 }
4
5 # p1 {
6 font - family : " Norican " ;
7 }
8
9 # p2 {
10 font - family : " Bad Script " ;
11 }
12
13 # p3 {
14 font - family : " Ceviche One " ;
15 }
Cdigo CSS 3.85: font-face.css
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 >

3 < head >
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 " >
13 </ ul >
14 < ul id = " ul2 " >
CSS 278
18 </ ul >
19 < ul id = " ul3 " >
23 </ ul >
24 < ol id = " ol1 " >
28 </ ol >
29 < ol id = " ol2 " >
33 </ ol >
34 < ol id = " ol3 " >
38 </ ol >
39 </ body >
40 </ html >
Cdigo HTML 3.63: list-style-type.html
79 No projeto css, crie um arquivo CSS chamado list-style-type.css.
1 # ul1 {
2 list - style - type : disc ;
3 }
4
5 # ul2 {
6 list - style - type : circle ;
7 }
8
9 # ul3 {
10 list - style - type : square ;
11 }
12
13 # ol1 {
14 list - style - type : decimal ;
15 }
16
17 # ol2 {
18 list - style - type : lower - latin ;
19 }
20
21 # ol3 {
22 list - style - type : georgian ;
23 }
Cdigo CSS 3.86: list-style-type.css
http://localhost/css/public_html/list-style-type.html.
278 www.k19.com.br
279 CSS
http://localhost/~<USUARIO>/css/public_html/list-style-type.html.
81 No projeto css, crie um arquivo chamado list-style-image.html.
1 <! DOCTYPE html >

3 < head >
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 " >
13 </ ul >
14 < ul id = " ul2 " >
18 </ ul >
19 < ul id = " ul3 " >
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.
1 # ul1 {
2 list - style - image : url ( " http :// www . k19 . com . br / figs / star . png " ) ;
3 }
4
5 # ul2 {
6 list - style - image : url ( " http :// www . k19 . com . br / figs / cake . png " ) ;
7 }
8
9 # ul3 {
10 list - style - image : url ( " http :// www . k19 . com . br / figs / flying_heart . png " ) ;
11 }
Cdigo CSS 3.87: list-style-image.css
http://localhost/css/public_html/list-style-image.html.
http://localhost/~<USUARIO>/css/public_html/list-style-image.html.
CSS 280
84 No projeto css, crie um arquivo chamado list-style-position.html.
1 <! DOCTYPE html >

3 < head >
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 " >
13 </ ul >
14 < ul id = " ul2 " >
18 </ ul >
19 </ body >
20 </ html >
Cdigo HTML 3.65: list-style-position.html
85 No projeto css, crie um arquivo CSS chamado list-style-position.css.
1 li {
3 }
4
5 # ul1 {
6 list - style - position : inside ;
7 }
Cdigo CSS 3.88: list-style-position.css
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 >

3 < head >
5 < title > K19 - border - style </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - style . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
280 www.k19.com.br
281 CSS
10 < div id = " div2 " > </ div >

11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >
Cdigo HTML 3.66: border-style.html
88 No projeto css, crie um arquivo CSS chamado border-style.css.
1 div {
2 width : 400 px ;
3 height : 200 px ;
4 margin : 10 px ;
6 }
7
8 # div1 {
9 border - style : dotted ;
10 }
11
12 # div2 {
13 border - style : dashed ;
14 }
15
16 # div3 {
18 }
19
20 # div4 {
21 border - style : double ;
22 }
Cdigo CSS 3.89: border-style.css
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 >

3 < head >
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 >
10 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
CSS 282
13 </ body >

14 </ html >
Cdigo HTML 3.67: border-width.html
91 No projeto css, crie um arquivo CSS chamado border-width.css.
1 div {
2 width : 400 px ;
3 height : 200 px ;
4 margin : 10 px ;
6 }
7
8 # div1 {
9 border - width : thin ;
10 }
11
12 # div2 {
13 border - width : thick ;
14 }
15
16 # div3 {
18 }
19
20 # div4 {
22 }
Cdigo CSS 3.90: border-width.css
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 >

3 < head >
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 >
10 < 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.
1 div {
2 width : 400 px ;
3 height : 200 px ;
5 }
6
7 # div1 {
8 border - color : red ;
9 }
10
11 # div2 {
12 border - color : #00 ff00 ;
13 }
14
15 # div3 {
16 border - color : rgb (0 , 0 , 255) ;
17 }
Cdigo CSS 3.91: border-color.css
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 >

3 < head >
5 < title > K19 - bordas - individuais </ title >
6 < link rel = " stylesheet " type = " text / css " href = " bordas - individuais . css " >
7 </ head >
8 < body >
9 < div > </ div >
10 </ 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 : 400 px ;
3 height : 200 px ;
4
CSS 284
5 border - top - style : dashed ;

6 border - top - color : red ;
7 border - top - width : 2 px ;
8
9 border - right - style : dotted ;
10 border - right - color : #00 ff00 ;
11 border - right - width : 8 px ;
12
13 border - bottom - style : double ;
14 border - bottom - color : rgb (0 , 0 , 255) ;
15 border - bottom - width : 14 px ;
16
17 border - left - style : solid ;
18 border - left - color : black ;
19 border - left - width : 20 px ;
20 }
Cdigo CSS 3.92: bordas-individuais.css
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 >

3 < head >
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 >
10 < 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 : 400 px ;
3 height : 100 px ;
4 margin : 10 px ;
6 }
7
8 # div1 {
284 www.k19.com.br
285 CSS
10 }
11
12 # div2 {
13 border - radius : 20 px 60 px ;
14 }
15
16 # div3 {
17 border - radius : 20 px 60 px 100 px ;
18 }
19
20 # div4 {
21 border - radius : 20 px 60 px 100 px 140 px ;
22 }
Cdigo CSS 3.93: border-radius.css
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 >

3 < head >
5 < title > K19 - border - collapse </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - collapse . css " >
7 </ head >
8 < body >
10 < 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 >
20 < 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 >
30 </ html >
Cdigo HTML 3.71: border-collapse.html
CSS 286
103 No projeto css, crie um arquivo CSS chamado border-collapse.css.
1 table {
3 margin : 10 px ;
4 }
5
6 td {
8 }
9
10 # tabela1 {
11 border - collapse : collapse ;
12 }
Cdigo CSS 3.94: border-collapse.css
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 >

3 < head >
5 < title > K19 - border - spacing </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - spacing . css " >
7 </ head >
8 < body >
10 < 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 >
20 < 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 >
30 </ 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.
1 table {
3 margin : 10 px ;
4 }
5
6 td {
8 }
9
10 # tabela1 {
11 border - spacing : 10 px 5 px ;
12 }
Cdigo CSS 3.95: border-spacing.css
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 >

3 < head >
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 >
10 < 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 : 400 px ;
3 height : 100 px ;
4 margin : 10 px ;
5 }
6
7 # div1 {
CSS 288
8 outline - style : dashed ;

9 }
10
11 # div2 {
12 outline - style : dotted ;
13 }
14
15 # div3 {
17 }
Cdigo CSS 3.96: outline-style.css
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 >

3 < head >
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 >
10 < 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.
1 div {
2 width : 400 px ;
3 height : 100 px ;
4 margin : 10 px ;
6 }
7
8 # div1 {
9 outline - color : red ;
10 }
11
12 # div2 {
13 outline - color : #00 ff00 ;
14 }
15
16 # div3 {
288 www.k19.com.br
289 CSS
17 outline - color : rgb (0 , 0 , 255) ;

18 }
Cdigo CSS 3.97: outline-color.css
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 >

3 < head >
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 >
10 < 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.
1 div {
2 width : 400 px ;
3 height : 100 px ;
4 margin : 20 px ;
6 }
7
8 # div1 {
9 outline - width : thin ;
10 }
11
12 # div2 {
13 outline - width : thick ;
14 }
15
16 # div3 {
18 }
Cdigo CSS 3.98: outline-width.css
CSS 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 >

3 < head >
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 >
10 < 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.
1 div {
2 width : 400 px ;
3 height : 50 px ;
4 margin : 50 px ;
5 outline : 5 px solid red ;
7 }
8
9 # div1 {
10 outline - offset : 20 px ;
11 }
12
13 # div2 {
14 outline - offset : -20 px ;
15 }
Cdigo CSS 3.99: outline-offset.css
http://localhost/css/public_html/outline-offset.html.
http://localhost/~<USUARIO>/css/public_html/outline-offset.html.
290 www.k19.com.br
291 CSS
120 No projeto css, crie um arquivo chamado box-shadow.html.
1 <! DOCTYPE html >

3 < head >
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 >
10 < 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.
1 div {
2 width : 200 px ;
3 height : 100 px ;
5 margin : 50 px ;
6 }
7
8 # div1 {
9 box - shadow : 10 px 5 px gray ;
10 }
11
12 # div2 {
13 box - shadow : 10 px 5 px 5 px gray ;
14 }
15
16 # div3 {
17 box - shadow : inset 10 px 10 px gray ;
18 }
19
20 # div4 {
21 box - shadow : inset 10 px 10 px 5 px gray ;
22 }
Cdigo CSS 3.100: box-shadow.css
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.
CSS 292
1 <! DOCTYPE html >

3 < head >
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 >
10 < 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
124 No projeto css, crie um arquivo CSS chamado margens-externas.css.
1 div {
4 width : 100 px ;
5 height : 100 px ;
6 }
7
8 # div1 {
9 margin - top : 50 px ;
10 margin - right : 50 px ;
11 }
12
13 # div2 {
14 margin - bottom : 50 px ;
15 }
16
17 # div3 {
19 }
20
21 # div4 {
23 margin - bottom : 50 px ;
24 }
Cdigo CSS 3.101: margens-externas.css
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 CSS

3 < head >
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 >
10 < 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
127 No projeto css, crie um arquivo CSS chamado margens-internas.css.
1 div {
4 width : 100 px ;
5 height : 100 px ;
7 background - clip : content - box ;
8 }
9
10 # div1 {
11 padding - top : 50 px ;
12 padding - right : 50 px ;
13 }
14
15 # div2 {
16 padding - bottom : 50 px ;
17 }
18
19 # div3 {
21 }
22
23 # div4 {
25 padding - bottom : 50 px ;
26 }
Cdigo CSS 3.102: margens-internas.css
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.
CSS 294
1 <! DOCTYPE html >

3 < head >
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 " >
15 </ p >
16 <p id = " p2 " >
22 </ p >
23 <p id = " p3 " >
29 </ p >
30 </ body >
31 </ html >
Cdigo HTML 3.80: conteudo-dimensao.html
130 No projeto css, crie um arquivo CSS chamado conteudo-dimensao.css.
1 p {
3 max - height : 200 px ;
4 max - width : 400 px ;
5 }
6
7 # p1 {
8 width : 200 px ;
9 }
10
11 # p2 {
13 }
Cdigo CSS 3.103: conteudo-dimensao.css
http://localhost/css/public_html/conteudo-dimensao.html.
294 www.k19.com.br
295 CSS
http://localhost/~<USUARIO>/css/public_html/conteudo-dimensao.html.
Resumo do Captulo
1 A linguagem CSS utilizada para formatar visualmente as pginas web.
2 Podemos considerar cada elemento HTML como um box.
3 A estrutura dos boxes definida pelo Box Model.
4 De acordo com o Box Model, cada box possui contedo, margens internas, bordas e margens
externas.
5 Por padro, os boxes dos block-level elements ocupam todo o espao horizontal do elemento
pai e provocam quebras de linha.
6 Por padro, os boxes dos inline-level elements ocupam apenas o espao necessrio e no
provocam quebras de linha.
7 A formatao dos elementos HTML definida atravs das regras CSS
8 Uma regra CSS composta por seletor e corpo. No corpo, so definidas as propriedades CSS.
9 Os seletores definem quais elementos HTML sero afetados pelas regras CSS.
10 As propriedades CSS definem as caractersticas visuais dos elementos HTML.
11 As regras CSS podem ser aplicadas aos documentos HTML de trs formas diferentes: inline
style, internal style sheet e external style sheet.
12 Os comentrios CSS so definidos com os marcadores /* e */.
13 Na linguagem CSS, toda cor est associada a um cdigo numrico expresso em hexadecimal.
Algumas cores possuem nome.
CSS 296
14 Podemos escolher uma cor atravs do cdigo dela ou atravs das funes rgb(), rgba(), hsl() e
hsla(). As cores que possuem nome podem ser escolhidas atravs do seu nome.
15 As unidades absolutas da linguagem CSS so: cm, mm, in, pt, pc e px.
16 As unidades relativas da linguagem CSS so: em, ex, ch, rem, vw, vh, vmin e vmax.
17 As principais propriedades de background so: background-color, background-image, background-

repeat, background-attachment, background-position, background-clip, background-origin, background-
size e background.
18 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.
19 As principais propriedades de fonte so: font-family, font-size, font-style, font-variant, font-

weight, font e @font-face.
20 As principais propriedades de lista so: list-style-type, list-style-image, list-style-position e

list-style.
21 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, border-
collapse e border-spacing.
22 As principais propriedades de outline so: outline-style, outline-color, outline-width, outline-

offset e outline.
23 A principal propriedade de sombra box-shadow.
24 As principais propriedades de margens so: margin-*, margin, padding-* e padding.
25 As principais propriedades de altura e largura so: height, width, min-height, max-height,

min-width e max-width.
26 A propriedade display define a forma de exibio dos boxes.
27 A propriedade display define a forma de exibio dos boxes.
296 www.k19.com.br
297 CSS
28 A propriedade visibility define a visibilidade dos boxes.
29 Podemos controlar a opacidade dos boxes com a propriedade opacity.
30 Os quatro tipos de posicionamento do CSS so: static, relative, fixed e absolute.
31 As principais propriedades de posicionamento so: position, float, clear e z-index.
32 As principais propriedades de overflow e clips so: overflow, overflow-x, overflow-y e clip.
33 As principais funes de transformao so: translate(), scale(), rotate() e skew().
34 As principais propriedades de transio so: transition-duration, transition-delay, transition-

timing-function e transition-property.
35 As principais propriedades de animao so: animation-timing-function, animation-delay,

animation-iteration-count, animation-direction e animation-play-state.
36 Podemos dividir os seletores do CSS em bsicos, seletores de atributo, pseudo-classes e pseudo-

elementos.
37 Quando ocorre conflito entre duas ou mais regras CSS, devemos calcular a prioridade dos
seletores dessas regras para saber qual delas ser aplicada.
38 Com as media queries podemos definir formataes especficas para os diversos tipos de dis-
positivos que desejamos suportar.
39 A tcnica sprites melhora o tempo de carregamento das pginas web.
Prova
1 Considere a formatao padro dos navegadores. O que podemos dizer sobre um block-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
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 que-
bras 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 que-
bras de linha.
e) Ocupa todo o espao horizontal e provoca quebras de linha.
3 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 >
4 Qual das alternativas um valor invlido de cor CSS?
298 www.k19.com.br
299 CSS
a) red
b) #00ff00
c) preto
d) rgba(0, 100, 30, 0.1)
e) hsl(100, 20%, 10%)
5 Qual das alternativas uma unidade invlida de medida CSS?
a) px
b) em
c) rem
d) qm
e) pc
6 Qual das propriedades abaixo pode ser utilizada para definir uma imagem de fundo de um
elemento?
a) background-attachment
b) background
c) bg-color
d) background-size
e) bg-image
7 Para definirmos a cor da fonte de um texto, qual propriedade CSS devemos utilizar?
a) color
b) font-color
c) text-color
d) foreground-color
e) colour
8 Considere o seguinte cdigo HTML:
CSS 300
1 < div > Lorem ipsum dolor sit amet , consectetur adipiscing elit .
2
3 Cras vehicula bibendum arcu .
4 Sed dui nulla , cursus et lacinia eu ,
5 vulputate ac dolor .
6 Quisque faucibus congue congue . </ div >
O que acontecer quando esse 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
10 Podemos alterar a fonte de um texto atravs da propriedade CSS font-family. Quais valores
podem ser atribudos a essa propriedade?
a) O nome de uma fonte.
b) O nome de um grupo de fonte classificado pela espessura das fontes.
c) O nome de uma 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 classificado pelo tamanho das fontes.
300 www.k19.com.br
301 CSS
11 Considere um elemento com as seguintes propriedades CSS:
1 width : 100 px ;
3 margin : 10 px ;
4 padding : 10 px ;
Ao ser renderizado em um navegador, o elemento ter:
a) 120px de largura.
b) 120px de altura.
c) 130px de largura.
d) 140px de altura.
e) 160px de largura.
12 Qual a diferena entre uma borda produzida pela propriedade outline e outra produzida pela
propriedade border?
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.
13 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?
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:
CSS 302
2 top : 0 px ;
3 left : 0 px ;
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 : 50 px ; height : 50 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.
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 .
7 < div id = " div3 " >
10 </ div >
302 www.k19.com.br
303 CSS
11 </ div >

12 < div id = " div4 " >
15 < div id = " div5 " >
18 </ div >
19 </ div >
21 <a href = " # " class = " class1 " > Lorem ipsum dolor sit amet . </ a >
22 < div id = " div6 " > Lorem ipsum dolor sit amet . </ div >
23 </ div >
Considere tambm que o seguinte cdigo CSS foi aplicado ao documento:
1 # div1 > p + div p . class1 {

2 color : red ;
3 }
Quem ficar com texto vermelho?
a) Apenas o elemento com atributo id igual a p5.
b) Os elementos com atributo id igual a p5 e p6.
c) Os elementos com atributo id igual a p2, p5 e p7.
d) Apenas o elemento com atributo id igual a p3.
e) Os elementos com atributo id igual a p3 e p4.
1 @media all and ( width : 480 px ) , ( orientation : portrait ) {

2 ...
3 }
O que podemos dizer sobre as regras CSS definidas dentro da media query acima?
a) Sero aplicadas quando o viewport tiver 480px e a altura do viewport for maior que a sua lar-
gura.
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.
13 17
CSS 304
304 www.k19.com.br
CAPTULO
J AVA S CRIPT
4
Nos captulos anteriores, vimos que as linguagens HTML e a CSS so fundamentais para a cria-
o 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 definido dentro de um documento HTML no corpo do elemento
script.
1 < script >

2 alert ( " K19 " ) ;
3 </ script >
Nessa abordagem, o cdigo JavaScript fica amarrado a um nico documento HTML.
JavaScript externo
O cdigo JavaScript pode ser definido em arquivos separados e depois associados aos documen-
tos HTML atravs do elemento script.
1 alert ( " K19 " ) ;
Cdigo Javascript 4.1: script.js
1 < script src = " script . js " > </ script >
Nessa outra abordagem, podemos reutilizar o mesmo cdigo JavaScript em vrios documentos
HTML.
Carregamento
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 ele-
mento 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 >

3 < head >
7 </ head >
8 < body >
9 ...
10 </ body >
11 </ html >
No prximo exemplo, o elemento script foi colocado no final do body. Consequentemente, o

JavaScript s ser carregado depois de todos os outros elementos do body.
1 <! DOCTYPE html >

3 < head >
6 </ head >
7 < body >
8 ...
10 </ body >
11 </ html >
Normalmente, a segunda abordagem mais recomendada pois as pginas web so exibidas mais
rapidamente aos usurios. Contudo, eventualmente, o cdigo JavaScript deve ser utilizado antes do
processamento dos elementos do body. Nesses casos, necessrio utilizar a primeira abordagem.
Chrome DevTools
Os navegadores oferecem alguns recursos para testar ou depurar cdigo JavaScript. Nas imagens
abaixo, mostramos a utilizao do painel Console do Chrome DevTools.
306 www.k19.com.br
307 J AVA S CRIPT
J AVA S CRIPT 308
Exerccios de Fixao
1 Abra o Netbeans e crie um projeto chamado javascript.
Importante
deve salvar o projeto javascript em C:\inetpub\wwwroot. Lembre-se que necess-
rio instalar o IIS conforme vimos anteriormente.
308 www.k19.com.br
309 J AVA S CRIPT
Importante
jeto javascript em /home/<USUARIO>/public_html. Lembre-se que necessrio
instalar e configurar o Apache HTTP Server como vimos anteriormente.
Figura 4.1: Projeto javascript
J AVA S CRIPT 310
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao1.zip
310 www.k19.com.br
311 J AVA S CRIPT
2 No projeto javascript, crie um arquivo chamado javascript.html.
1 <! DOCTYPE html >

3 < head >
5 < title > JavaScript </ title >
6 < script >
7 alert ( " K19 " ) ;
8 </ script >
9 </ head >
10 < 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.
4 Altere o arquivo javascript.html do projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 </ head >
7 < body >
8 < h1 > K19 - JavaScript </ h1 >
9 < script >
10 alert ( " K19 " ) ;
11 </ script >
12 </ body >
13 </ html >
6 No projeto javascript, crie um arquivo chamado script.js.
J AVA S CRIPT 312
1 alert ( " K19 " ) ;
Cdigo Javascript 4.2: script.js
7 Altere novamente o arquivo javascript.html do projeto javascript.
1 <! DOCTYPE html >

3 < head >
7 </ head >
8 < body >
9 < h1 > K19 - JavaScript </ h1 >
10 </ body >
11 </ html >
Variveis
Assim como qualquer linguagem de programao, JavaScript permite a criao de variveis atra-
vs da palavra chave var. Toda varivel deve ter um nome (identificador).
1 var idadeDoJonas = 30;

2 var precoDoProduto = 28.75;
3 var nomeDoInstrutor = " Marcelo Martins " ;
4 var acessoLiberado = true ;
No exemplo anterior, todas as variveis foram inicializadas. Antes da inicializao, as variveis

possuem o valor especial undefined. No prximo exemplo, a varivel altura no inicializada. Por-
tanto, ela possura o valor undefined.
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 ofere-
cidos 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 matem-
tica. Os operadores aritmticos so:
Adio +
Subtrao -
Multiplicao *
Diviso /
Mdulo %
1 var umMaisUm = 1 + 1;
2 // umMaisUm = 2
3
4 var tresVezesDois = 3 * 2;
5 // tresVezesDois = 6
6
7 var quatroDivididoPorDois = 4 / 2;
8 // quatroDivididoPor2 = 2
9
10 var seisModuloCinco = 6 % 5;
11 // seisModuloCinco = 1
12
13 var x = 7;
14
15 x = x + 1 * 2;
16 // x = 9
17
18 x = x - 3;
19 // x = 6
20
21 x = x / (6 - 2 - (3 * 5) / (16 - 1) ) ;
22 // 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.
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 var a = Math . pow (3 , 5) ;

2 // a = 243
3
4 var b = Math . sqrt (9) ;
5 // 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 var s1 = " Marcelo " ;

2 var s2 = " " ;
3 var s3 = " Martins " ;
4
5 // " Marcelo Martins "
6 var s4 = s1 + s2 + s3 ;
Considere o exemplo a seguir.
1 var s1 = " Idade : " ;

2 var idade = 30;
3
4 // " Idade : 30"
5 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 se-
guinte exemplo:
1 alert (1 + 2 + 3 + " testando " ) ;

2 alert ( " testando " + 1 + 2 + 3) ;
O que seria exibido nesse exemplo?
314 www.k19.com.br
315 J AVA S CRIPT
Atribuio
Nas sees anteriores, j vimos um dos operadores de atribuio, o operador = (igual). Os opera-
dores de atribuio so:
Simples =
Incremental +=
Decremental -=
Multiplicativa *=
Divisria /=
Modular %=
Incremento ++
Decremento --
1 var valor = 1;
2 // valor = 1
3
4 valor += 2;
5 // valor = 3
6
7 valor -= 1;
8 // valor = 2
9
10 valor *= 6;
11 // valor = 12
12
13 valor /= 3;
14 // valor = 4
15
16 valor %= 3;
17 // valor = 1
18
19 valor ++;
20 // valor = 2
21
22 valor - -;
23 // valor = 1
Cdigo Javascript 4.10: Exemplo de uso dos operadores de atribuio.
As instrues acima poderiam ser escritas de outra forma:
1 var valor = 1;
2 // valor = 1
3
4 valor = valor + 2;
5 // valor = 3
6
7 valor = valor - 1;
8 // valor = 2
9
10 valor = valor * 6;
11 // valor = 12
12
13 valor = valor / 3;
14 // valor = 4
15
16 valor = valor % 3;
17 // valor = 1
18
J AVA S CRIPT 316
19 valor = valor + 1;
20 // valor = 2
21
22 valor = valor - 1;
23 // valor = 1
Cdigo Javascript 4.11: O mesmo exemplo anterior, usando os operadores aritmticos.
Como podemos observar, os operadores de atribuio, exceto o simples (=), reduzem a quan-
tidade 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 var valor = 2;
2 var t = false ;
3 t = ( valor == 2) ; // t = true
4 t = ( valor != 2) ; // t = false
5 t = ( valor < 2) ; // t = false
6 t = ( valor <= 2) ; // t = true
7 t = ( valor > 1) ; // t = true
8 t = ( valor >= 1) ; // t = true
Cdigo Javascript 4.12: Exemplo de uso dos operadores relacionais em JavaScript.
Lgicos
A linguagem JavaScript permite verificar duas ou mais condies atravs de operadores lgicos.
Os operadores lgicos devolvem valores booleanos. A seguir descreveremos o funcionamento desses
operadores.
&& (E)
1 var a = Math . random () ;

2 var b = Math . random () ;
3
4 alert ( a > 0.2 && b < 0.8) ;
Cdigo Javascript 4.13: Exemplo de uso do operador &
A tabela verdade uma forma prtica de visualizar o resultado dos operadores lgicos. Veja a
seguir a tabela verdade do operador &&.
316 www.k19.com.br
317 J AVA S CRIPT
a > 0.2 b < 0.8 a > 0.2 && b < 0.8

V V V
V F F
F V F
F F F
Figura 4.4: Tabela verdade do operador &&
|| (OU)
1 var a = Math . random () ;

2 var b = Math . random () ;
3
4 alert ( a > 0.2 || b < 0.8) ;
Cdigo Javascript 4.14: Exemplo de uso do operador ||
A tabela verdade uma forma prtica de visualizar o resultado dos operadores lgicos. Veja a
seguir a tabela verdade do operador ||.
a > 0.2 b < 0.8 a > 0.2 || b < 0.8

V V V
V F V
F V V
F F F
Figura 4.5: Tabela verdade do operador ||
Operador !
Valores booleanos podem ser invertidos com o operador de ! (negao). Por exemplo, podemos
verificar se uma varivel numrica armazena um valor maior do que 0.5 de duas formas diferentes.
1 d > 0.5
1 !( d <= 0.5)
Pr e Ps Incremento ou Pr e Ps Decremento
Os operadores ++ e -- podem ser utilizados de duas formas diferentes, antes ou depois de
uma varivel numrica.
1 var i = 10;
2 i ++;
J AVA S CRIPT 318
3 i - -;
1 var i = 10;
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 = 10;
2
3 // true
4 alert ( i ++ == 10) ;
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 d-
vida em relao a ordem de execuo desses operadores. O incremento com o operador ++ ser
realizado antes ou depois da comparao com o operador ==?
Como o operador ++ foi utilizado na forma de ps incremento, a comparao ocorrer antes

do incremento. Analogamente, a comparao ocorreria antes do decremento se o operador -- fosse
utilizado na forma de ps decremento.
Agora, considere a utilizao do operador ++ na forma de pr incremento.
1 var i = 10;
2
3 // false
4 alert (++ i == 10) ;
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 decre-

mento e ps decremento. O que seria exibido nos exemplos abaixo?
1 var i = 10;
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 exemplificar, va-
mos gerar a nota de um aluno aleatoriamente.
1 var nota = Math . random () ;
O programa deve exibir a mensagem aprovado se nota de um aluno for maior ou igual a 0.5
e reprovado se a nota for menor do que 0.5. Esse problema pode ser resolvido com o operador
ternrio.
nota >= 0.5 ? aprovado : reprovado
Condio Valor 1 Valor 2
Figura 4.6: Operador ternrio
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 resul-
tado do operador ternrio em uma varivel ou simplesmente exibi-lo.
1 var resultado = nota >= 0.5 ? " aprovado " : " reprovado " ;
2 alert ( nota >= 0.5 ? " aprovado " : " reprovado " ) ;
Nos exemplos anteriores, o operador ternrio foi utilizado com valores do tipo string. Contudo,
podemos utiliz-lo com qualquer tipo de valor. Veja o exemplo a seguir.
1 var i = nota >= 0.5 ? 1 : 2;

2 var d = nota >= 0.5 ? 0.1 : 0.2;
Controle de fluxo
if e else
O comportamento de uma aplicao pode ser influenciado por valores definidos pelos usurios.
Por exemplo, considere um sistema de cadastro de produtos. Se um usurio tenta adicionar um
produto com preo negativo, a aplicao no deve cadastrar esse produto. Caso contrrio, se o preo
no for negativo, o cadastro pode ser realizado normalmente.
Outro exemplo, quando o pagamento de um boleto realizado em uma agncia bancria, o sis-
tema do banco deve verificar a data de vencimento do boleto para aplicar ou no uma multa por
atraso.
Para verificar uma determinada condio e decidir qual bloco de instrues deve ser executado,
devemos aplicar o comando if.
1 if ( preco < 0) {
2 alert ( O preo do produto no pode ser negativo ) ;
J AVA S CRIPT 320
3 } else {
4 alert ( Produto cadastrado com sucesso ) ;
5 }
O comando if permite que valores booleanos sejam testados. Se o valor passado como 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 exem-
plo, suponha que seja necessrio exibir 5 vezes a mensagem: Bom Dia. Podemos resolver essa
tarefa com o seguinte cdigo JavaScript.
1 console . log ( " Bom 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 pro-
blema.
Atravs do comando while, possvel executar vrias vezes um determinado trecho de cdigo.
1 var contador = 0;
2
3 while ( contador < 100) {
5 contador ++;
6 }
Cdigo Javascript 4.27: while
A varivel contador indica o nmero de vezes que a mensagem Bom Dia foi exibida. O operador
++ incrementa a varivel contador a cada iterao. O parmetro do comando while deve ser um valor
booleano.
for
O comando for anlogo ao while. A principal diferena entre esses dois comandos que o for
recebe trs argumentos.
1 for ( var contador = 0; contador < 100; contador ++) {

3 }
Exerccios de Fixao
9 Adicione um arquivo chamado exibe-nome.html no projeto javascript.
320 www.k19.com.br
321 J AVA S CRIPT
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - JavaScript </ title >
6 < script type = " text / javascript " src = " exibe - nome . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.8: exibe-nome.html
10 Adicione um arquivo chamado exibe-nome.js no projeto javascript.

2 console . log ( " Rafael Cosentino " ) ;
3 }
Cdigo Javascript 4.29: exibe-nome.js
http://localhost/javascript/public_html/exibe-nome.html.
http://localhost/~<USUARIO>/javascript/public_html/exibe-nome.html.
Verifique as mensagens exibidas no console do navegador.
12 Adicione um arquivo chamado exibe-1-ate-100.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " exibe -1 - ate -100. js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.9: exibe-1-ate-100.html
13 Adicione um arquivo chamado exibe-1-ate-100.js no projeto javascript.

2 console . log ( contador ) ;
J AVA S CRIPT 322
3 }
Cdigo Javascript 4.30: exibe-1-ate-100.js
http://localhost/javascript/public_html/exibe-1-ate-100.html.
http://localhost/~<USUARIO>/javascript/public_html/exibe-1-ate-100.html.
15 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:
*
**
*
**
*
**
Adicione um arquivo chamado exibe-padrao-1.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " exibe - padrao -1. js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.10: exibe-padrao-1.html
16 Adicione um arquivo chamado exibe-padrao-1.js no projeto javascript.
1 for ( var contador = 1; contador <= 100; contador ++) {

2 var resto = contador % 2;
3 if ( resto == 1) {
4 console . log ( " * " ) ;
5 } else {
6 console . log ( " ** " ) ;
7 }
8 }
322 www.k19.com.br
323 J AVA S CRIPT
Cdigo Javascript 4.31: exibe-padrao-1.js
http://localhost/javascript/public_html/exibe-padrao-1.html.
http://localhost/~<USUARIO>/javascript/public_html/exibe-padrao-1.html.
18 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:
1
2
3
PIN
5
6
7
PIN
Adicione um arquivo chamado exibe-padrao-2.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " exibe - padrao -2. js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.11: exibe-padrao-2.html
19 Adicione um arquivo chamado exibe-padrao-2.js no projeto javascript.

3 if ( resto == 0) {
4 console . log ( " PI " ) ;
5 } else {
6 console . log ( contador ) ;
J AVA S CRIPT 324
7 }
8 }
Cdigo Javascript 4.32: exibe-padrao-2.js
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 undefined. Podemos adicionar uma nova propriedade a um objeto que j
existe. Um objeto pode herdar propriedades de outro objeto utilizando a ideia de prototype.
Criando objetos
Um objeto pode ser criado de forma literal com a sintaxe JSON. Veja o exemplo a seguir.
1 var objetoVazio = {};

2 var curso = {
3 sigla : " K11 " ,
4 nome : " Orientao a Objetos em Java "
5 };
Um objeto pode se relacionar com outros objetos atravs de propriedades. Observe o cdigo
abaixo.
1 var formacaoJava = {
2 sigla : " K10 " , nome : " Formao Desenvolvedor Java " ,
3 cursos : [
4 {
5 sigla : " K11 " ,
7 },
8 {
9 sigla : " K12 " ,
10 nome : " Desenvolvimento Web com JSF2 e JPA2 "
11 },
12 ]
13 };
324 www.k19.com.br
325 J AVA S CRIPT
Recuperando o valor de uma propriedade

Para recuperar os valores das propriedades de um objeto, podemos utilizar o operador . ou [].
Veja o exemplo a seguir.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
6 console . log ( curso . sigla ) ;
7 console . log ( curso [ " sigla " ]) ;
8
9 var sigla = " sigla " ;
10 console . log ( curso [ sigla ]) ;
Alterando o valor de uma propriedade

Para alterar o valor de uma propriedade, basta atribuir um novo valor propriedade do objeto.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
6 curso . sigla = " K12 " ;
7 curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
8
10 console . log ( curso . nome ) ;
Referncias
Os objetos so acessados atravs de referncias.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
6 // copiando uma referncia
7 var x = curso ;
8
9 x . sigla = " K12 " ;
10 x . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
11
12 // imprime K12
14
15 // imprime Desenvolvimento Web com JSF2 e JPA2
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 " ,
J AVA S CRIPT 326
5 };
6
7 // criando um objeto sem propriedades
8 var novo_curso = {};
9
10 // definindo o primeiro objeto como prottipo do segundo
11 novo_curso . __proto__ = curso ;
12
13 // imprime K11
14 console . log ( novo_curso . sigla ) ;
15
16 // imprime Orientao a Objetos em Java
17 console . log ( novo_curso . nome ) ;
Tambm podemos utilizar o mtodo create de Object para criar objetos baseados em objetos
existentes. Veja o exemplo abaixo.
1 // criando um objeto com duas propriedades

2 var curso = {
3 sigla : " K11 " ,
5 };
6
7 // criando um objeto sem propriedades
8 var novo_curso = {};
9
10 // definindo o primeiro objeto como prottipo do segundo
11 novo_curso = Object . create ( curso ) ;
12
13 // imprime K11
15
Se uma propriedade for adicionada a um objeto, ela tambm ser adicionada a todos os objetos
que o utilizam como prottipo.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
6 var novo_curso = Object . create ( curso ) ;
7
8 curso . carga_horaria = 36;
9
10 // imprime K11
12
15
16 // imprime 36
17 console . log ( novo_curso . carga_horaria ) ;
Por outro lado, se uma propriedade for adicionada a um objeto, ela no ser adicionada no pro-
ttipo desse objeto.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
326 www.k19.com.br
327 J AVA S CRIPT

7
8 novo_curso . carga_horaria = 36;
9
10 // imprime K11
12
15
16 // imprime undefined
17 console . log ( curso . carga_horaria ) ;
Se o valor de uma propriedade de um objeto for modificado, os objetos que o utilizam como
prottipo podem ser afetados.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
7
8 curso . sigla = " K12 " ;
10
11 // imprime K12
13
Por outro lado, alteraes nos valores das propriedades de um objeto no afetam o prottipo
desse objeto.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
7
8 novo_curso . sigla = " K12 " ;
9 novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
10
11 // imprime K11
13
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 prot-
tipo. 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 " ,
4 };
5
7
J AVA S CRIPT 328

10
11 curso . sigla = " K21 " ;
12 curso . nome = " Persistncia com JPA2 e Hibernate " ;
13
14 // imprime K12
16
Removendo uma Propriedade

Podemos remover uma propriedade de um objeto com a funo delete.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
6 // imprime K11
8
9 delete curso . sigla ;
10
11 // imprime undefined
Verificando a Existncia de uma Propriedade

Podemos verificar se uma propriedade existe, podemos utilizar a funo in.
1 var curso = {
2 sigla : " K11 " ,
4 };
5
6 // imprime true
7 console . log ( " sigla " in curso ) ;
8
9 // imprime false
10 console . log ( " carga_horaria " in curso ) ;
Exerccios de Fixao
21 Adicione um arquivo chamado objetos.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " objetos . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
328 www.k19.com.br
329 J AVA S CRIPT
Cdigo HTML 4.12: objetos.html
22Adicione um arquivo chamado objetos.js no projeto javascript. Crie objetos com propriedades
chamadas sigla e nome. Exiba o valor dessas propriedades no console do navegador.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
4
5 var curso2 = { sigla : " K12 " , nome : " Desenvolvimento Web com JSF2 e JPA2 " };
6 console . log ( curso2 . sigla ) ;
7 console . log ( curso2 . nome ) ;
Cdigo Javascript 4.47: objetos.js
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 >

3 < head >
6 < script type = " text / javascript " src = " referencias . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.13: referencias.html
25 Adicione um arquivo chamado referencias.js no projeto javascript.
2
3 // exibe K11
5
6 // exibe Orientao a Objetos em Java
J AVA S CRIPT 330
8
9 var x = curso ;
10
11 x . sigla = " K12 " ;
12 x . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
13
14 // exibe K12
16
17 // exibe Desenvolvimento Web com JSF2 e JPA2
Cdigo Javascript 4.48: referencias.js
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 >

3 < head >
6 < script type = " text / javascript " src = " prototype . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.14: prototype.html
28 Adicione um arquivo chamado prototype.js no projeto javascript. Crie um objeto a partir de

outro objeto existente.
2
4
5 // exibe K11
7
Cdigo Javascript 4.49: prototype.js
330 www.k19.com.br
331 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. Defina uma propri-
edade em um objeto utilizado como prottipo e verifique que essa propriedade ser adicionada nos
objetos criados a partir desse prottipo.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " propriedade -1. js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.15: propriedade-1.html
31 Adicione um arquivo chamado propriedade-1.js no projeto javascript.
2
4
5 curso . carga_horaria = 36;
6
7 // exibe K11
9
12
13 // exibe 36
14 console . log ( novo_curso . carga_horaria ) ;
Cdigo Javascript 4.50: propriedade-1.js
http://localhost/javascript/public_html/propriedade-1.html.
http://localhost/~<USUARIO>/javascript/public_html/propriedade-1.html.
J AVA S CRIPT 332
33 Adicione um arquivo chamado propriedade-2.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
7 </ head >
8 < body >
9 </ body >
10 </ html >
34 Adicione um arquivo chamado propriedade-2.js no projeto javascript. Defina uma propriedade
em um objeto e verifique que o prottipo desse objeto no afetado.
2
4
5 novo_curso . carga_horaria = 36;
6
7 // exibe K11
9
12
13 // exibe undefined
14 console . log ( curso . carga_horaria ) ;
1 <! DOCTYPE html >

3 < head >
332 www.k19.com.br
333 J AVA S CRIPT

7 </ head >
8 < body >
9 </ body >
10 </ html >
37 Adicione um arquivo chamado propriedade-3.js no projeto javascript. Altere o valor de uma

propriedade de um objeto utilizado como prottipo e verifique que essa alterao afetar os objetos
criados a partir desse prottipo.
2
4
5 // exibe K11
7
10
11 curso . sigla = " K12 " ;
13
14 // exibe K12
16
1 <! DOCTYPE html >

3 < head >
7 </ head >
8 < body >
9 </ body >
J AVA S CRIPT 334
10 </ html >
40 Adicione um arquivo chamado propriedade-4.js no projeto javascript. Reescreva em um objeto

as propriedades herdadas de um prottipo e verifique que alteraes nos valores dessas proprieda-
des no prottipo no afetam mais os valores delas nesse objeto.
2
4
7
8 // exibe K12
10
13
14 curso . sigla = " K21 " ;
15 curso . nome = " Persistncia com JPA2 e Hibernate " ;
16
17 // exibe K12
19
Funes
As funes em JavaScript so objetos. Voc pode armazen-las em variveis, arrays e outros ob-
jetos. 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 var conta = {
2 saldo : 0 ,
3 deposita : function ( valor ) {
4 this . saldo += valor ;
5 }
6 }
7
8 conta . deposita (100) ;
9 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 var deposita = function ( valor ) {

3 }
4
5 var conta = {
6 saldo : 0
7 }
8
9 deposita . apply ( conta , [200]) ;
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.
J AVA S CRIPT 336
1 var soma = function () {

2 var soma = 0;
3
4 for ( var i = 0; i < arguments . length ; i ++) {
5 soma += arguments [ i ];
6 }
7
8 return soma ;
9 }
10
11 var resultado = soma (2 ,4 ,5 ,6 ,1) ;
12
13 console . log ( resultado ) ;
Cdigo Javascript 4.59: Arguments
Exerccios de Fixao
42 Adicione um arquivo chamado multiplicacao.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " multiplicacao . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.19: multiplicacao.html
43 Adicione um arquivo chamado multiplicacao.js no projeto javascript.
1 var multiplicacao = function (x , y ) {

2 return x * y ;
3 };
4
5 var resultado = multiplicacao (5 , 3) ;
6
Cdigo Javascript 4.60: multiplicacao.js
http://localhost/javascript/public_html/multiplicacao.html.
336 www.k19.com.br
337 J AVA S CRIPT
http://localhost/~<USUARIO>/javascript/public_html/multiplicacao.html.
45 Adicione um arquivo chamado metodos.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " metodos . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.20: metodos.html
46 Adicione um arquivo chamado metodos.js no projeto javascript.
1 var conta = {
2 saldo : 0 ,
3 deposita : function ( valor ) {
5 }
6 };
7
8 conta . deposita (500) ;
9
Cdigo Javascript 4.61: metodos.js
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 >

3 < head >
6 < script type = " text / javascript " src = " soma . js " > </ script >
7 </ head >
J AVA S CRIPT 338
8 < body >

9 </ body >
10 </ html >
Cdigo HTML 4.21: soma.html
49 Adicione um arquivo chamado soma.js no projeto javascript.
1 var soma = function () {

2 var soma = 0;
3
4 for ( var i = 0; i < arguments . length ; i ++) {
5 soma += arguments [ i ];
6 }
7
8 return soma ;
9 };
10
11 var resultado = soma (2 ,4 ,5 ,6 ,1) ;
12
Cdigo Javascript 4.62: soma.js
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 var vazio = [];

2 var cursos = [ " K01 " ," K02 " ," K03 " ];
3
4 console . log ( vazio [0]) ;
5 // undefined
6
7 console . log ( cursos [0]) ;
8 // K01
9
10 console . log ( vazio . length ) ;
11 // 0
12
13 console . log ( cursos . length ) ;
14 // 3
338 www.k19.com.br
339 J AVA S CRIPT
Percorrendo um Array
Para percorrer um array, podemos utilizar o comando for.
1 var cursos = [ " K01 " ," K02 " ," K03 " ];
2
3 for ( var i = 0; i < cursos . length ; i ++) {
4 console . log ( cursos [ i ]) ;
5 }
Adicionando Elementos
Para adicionar um elemento no final de um array, podemos utilizar a propriedade length.
1 var cursos = [ " K01 " ," K02 " ];

2
3 cursos [ cursos . length ] = " K03 " ;
4 // [" K01 ", " K02 " , " K03 "]
5
8 }
Tambm podemos utilizar o mtodo push().
1 var cursos = [ " K01 " ," K02 " ];

2
3 cursos . push ( " K03 " ) ;
4 // [" K01 ", " K02 " , " K03 "]
5
8 }
Removendo Elementos
O mtodo delete() permite remover elementos de um array.
1 var cursos = [ " K01 " , " K02 " , " K03 " ];
2
3 delete cursos [0];
4 // [ undefined , " K02 " , " K03 "]
5
8 }
Concatenando Arrays
O mtodo concat() permite concatenar dois arrays.
1 var formacaoBasica = [ " K01 " , " K02 " , " K03 " ];
2 var formacaoJava = [ " K11 " , " K12 " ];
3
4 var formacaoCompleta = formacaoBasica . concat ( formacaoJava ) ;
5 // [" K01 ", " K02 " , " K03 " , " K11 " , " K12 "]
6
7 for ( var i = 0; i < formacaoCompleta . length ; i ++) {
8 console . log ( formacaoCompleta [ i ]) ;
9 }
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 var formacaoJava = [ " K11 " , " K12 " ];

2
3 var resultado = formacaoJava . join ( " ," ) ;
4 // K11 , K12
5
Removendo o ltimo Elemento

O mtodo pop() remove e retorna o ltimo elemento.
1 var cursos = [ " K01 " , " K02 " , " K03 " ];
2
3 var curso = cursos . pop () ;
4 // [" K01 ", " K02 "]
5
6 console . log ( " Elemento removido : " + curso ) ;
7
10 }
Invertendo os Elementos de um Array

O mtodo reverse() inverte a ordem dos elementos de um array.
1 var cursos = [ " K01 " , " K02 " , " K03 " ];
2
3 cursos . reverse () ;
4 // [" K03 ", " K02 " , " K01 "]
5
8 }
Removendo o Primeiro Elemento

O mtodo shift() remove e retorna o primeiro elemento de um array.
1 var cursos = [ " K01 " , " K02 " , " K03 " ];
2
3 var curso = cursos . shift () ;
4 // [" K02 ", " K03 "]
5
7
10 }
Copiando um Trecho de um Array

O mtodo slice() cria uma cpia de uma poro de um array.
1 var cursos = [ " K01 " , " K02 " , " K03 " , " K11 " , " K12 " ];
2
340 www.k19.com.br
341 J AVA S CRIPT
3 var formacaoBasica = cursos . slice (0 , 3) ;

4 // [" K01 ", " K02 " , " K03 "]
5
6 for ( var i = 0; i < formacaoBasica . length ; i ++) {
7 console . log ( formacaoBasica [ i ]) ;
8 }
Removendo e Adicionando Elementos em um Array

O mtodo splice() permite remover elementos do array e adicionar novos elementos.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . splice (2 , 3 , " K31 " , " K32 " ) ;
4 // [" K11 ", " K12 " , " K31 " , " K32 "]
5
8 }
Adicionando um Elemento na Primeira Posio

O mtodo unshift() adiciona elementos na primeira posio de um array.
1 var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . unshift ( " K11 " ) ;
4 // [" K11 ", " K12 " , " K21 " , " K22 " , " K23 "]
5
8 }
Strings
Acessando os Caracteres de uma String por Posio

O mtodo charAt() retorna o caractere na posio especificada.
1 var curso = " K12 " ;

2
3 console . log ( curso . charAt (0) ) ;
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 (0 ,3) ) ;
Dividindo uma String

O mtodo split() cria uma array de strings a partir de um separador.
J AVA S CRIPT 342
2 var aux = curso . split ( " -" ) ;
3
4 console . log ( aux [0]) ;
Exerccios de Fixao
51 Adicione um arquivo chamado array-length.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " array - length . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.22: array-length.html
52 Adicione um arquivo chamado array-length.js no projeto javascript.
1 var vazio = [];

2 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ," K31 " ," K32 " ];
3
4 console . log ( vazio [0]) ;
5 console . log ( cursos [0]) ;
6
7 console . log ( vazio . length ) ;
8 console . log ( cursos . length ) ;
Cdigo Javascript 4.79: array-length.js
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 J AVA S CRIPT

3 < head >
6 < script type = " text / javascript " src = " array - elementos . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.23: array-elementos.html
55 Adicione um arquivo chamado array-elementos.js no projeto javascript.
4 }
Cdigo Javascript 4.80: array-elementos.js
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 >

3 < head >
6 < script type = " text / javascript " src = " array - add . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.24: array-add.html
58 Adicione um arquivo chamado array-add.js no projeto javascript.
2
3 cursos [ cursos . length ] = " K01 " ;
J AVA S CRIPT 344
4
7 }
Cdigo Javascript 4.81: array-add.js
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 >

3 < head >
6 < script type = " text / javascript " src = " array - push . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.25: array-push.html
61 Adicione um arquivo chamado array-push.js no projeto javascript.
2
3 cursos . push ( " K01 " ) ;
4
7 }
Cdigo Javascript 4.82: array-push.js
http://localhost/javascript/public_html/array-push.html.
344 www.k19.com.br
345 J AVA S CRIPT
http://localhost/~<USUARIO>/javascript/public_html/array-push.html.
63 Adicione um arquivo chamado array-concat.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " array - concat . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.26: array-concat.html
64 Adicione um arquivo chamado array-concat.js no projeto javascript.
1 var formacaoJava = [ " K11 " ," K12 " ];

2 var formacaoJavaAvancado = [ " K21 " ," K22 " ," K23 " ];
3
4 var formacaoCompleta = formacaoJava . concat ( formacaoJavaAvancado ) ;
5
6 for ( var i = 0; i < formacaoCompleta . length ; i ++) {
7 console . log ( formacaoCompleta [ i ]) ;
8 }
Cdigo Javascript 4.83: array-concat.js
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 >

3 < head >
6 < script type = " text / javascript " src = " array - pop . js " > </ script >
7 </ head >
8 < body >
9 </ body >
J AVA S CRIPT 346
10 </ html >
Cdigo HTML 4.27: array-pop.html
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
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 >

3 < head >
6 < script type = " text / javascript " src = " array - reverse . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.28: array-reverse.html
70 Adicione um arquivo chamado array-reverse.js no projeto javascript.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . reverse () ;
4
7 }
Cdigo Javascript 4.85: array-reverse.js
346 www.k19.com.br
347 J AVA S CRIPT
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 >

3 < head >
6 < script type = " text / javascript " src = " array - shift . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.29: array-shift.html
73 Adicione um arquivo chamado array-shift.js no projeto javascript.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var curso = cursos . shift () ;
4
6
9 }
Cdigo Javascript 4.86: array-shift.js
http://localhost/javascript/public_html/array-shift.html.
http://localhost/~<USUARIO>/javascript/public_html/array-shift.html.
J AVA S CRIPT 348
75 Adicione um arquivo chamado array-slice.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
6 < script type = " text / javascript " src = " array - slice . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.30: array-slice.html
76 Adicione um arquivo chamado array-slice.js no projeto javascript.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var formacaoJava = cursos . slice (0 ,2) ;
4
5 for ( var i = 0; i < formacaoJava . length ; i ++) {
6 console . log ( formacaoJava [ i ]) ;
7 }
Cdigo Javascript 4.87: array-slice.js
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 >

3 < head >
6 < script type = " text / javascript " src = " array - unshift . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.31: array-unshift.html
348 www.k19.com.br
349 J AVA S CRIPT
79 Adicione um arquivo chamado array-unshift.js no projeto javascript.
1 var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . unshift ( " K11 " ) ;
4
7 }
Cdigo Javascript 4.88: array-unshift.js
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 >

3 < head >
6 < script type = " text / javascript " src = " array - split . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.32: array-split.html
82 Adicione um arquivo chamado array-split.js no projeto javascript.
2 var aux = curso . split ( " -" ) ;
3
Cdigo Javascript 4.89: array-split.js
http://localhost/javascript/public_html/array-split.html.
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 identificador desejado.
1 var elemento = document . getElementById ( " conteudo " ) ;
Podemos buscar elementos HTML pelo valor do atributo name atravs do mtodo getEle-
mentsByName. 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 getElementsBy-

TagName. 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 getElementsBy-
ClassName. 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 querySelec-
tor 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 ele-
mentos 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 attri-

butes.
350 www.k19.com.br
351 J AVA S CRIPT
1 for ( var i = 0; 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 modificar os atributos de um elemento HTML atravs do mtodo setAttribute.
1 elemento . setAttribute ( " type " , " text " ) ;
Podemos modificar 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 modificar 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.

2 elemento . remove () ;
Podemos remover um elemento HTML atravs do seu pai.

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 var titulo = document . createElement ( " h1 " ) ;

2 titulo . innerHTML = " K19 Treinamentos " ;
4 elemento . appendChild ( titulo ) ;
Tambm podemos adicionar um elemento HTML em um documento HTML atravs do m-

todo insertBefore.
J AVA S CRIPT 352
1 var titulo = document . createElement ( " h1 " ) ;

2 titulo . innerHTML = " Cursos K19 " ;
3
4 var conteudo = document . getElementById ( " conteudo " ) ;
5 var tabela = conteudo . getElementById ( " tabela - de - cursos " ) ;
6
7 conteudo . insertBefore ( titulo , tabela ) ;
Mais Sobre
Os objetos que representam os documentos e os elementos HTML possuem uma
grande quantidade de propriedades e mtodos. Para saber mais sobre essas proprie-
dade 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 >

3 < head >
6 </ head >
7 < body >
8 < h1 id = " titulo " class = " centralizado " > K19 - JavaScript </ h1 >
9
10 < 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
20 < 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.
352 www.k19.com.br
353 J AVA S CRIPT
1 var titulo = document . getElementById ( " titulo " ) ;

2 console . log ( titulo . tagName + " : " + titulo . innerHTML ) ;
3
4 var array = document . getElementsByName ( " categoria " ) ;
5 for ( var i = 0; i < array . length ; i ++) {
6 console . log ( array [ i ]. tagName + " : " + array [ i ]. id ) ;
7 }
8
9 array = document . getElementsByTagName ( " label " ) ;
11 console . log ( array [ i ]. tagName + " : " + array [ i ]. getAttribute ( " for " ) ) ;
12 }
13
14 array = document . getElementsByClassName ( " centralizado " ) ;
16 console . log ( array [ i ]. tagName + " : " + array [ i ]. id ) ;
17 }
18
19 var formulario = document . querySelector ( " body > form " ) ;
20 console . log ( formulario . tagName + " : " + formulario . getAttribute ( " action " ) ) ;
21
22 array = document . querySelectorAll ( " label " ) ;
24 console . log ( array [ i ]. tagName + " : " + array [ i ]. getAttribute ( " for " ) ) ;
25 }
Cdigo Javascript 4.106: DOM.js
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.
1 var titulo = document . getElementById ( " titulo " ) ;

2
3 titulo . style . color = " red " ;
4
5 titulo . innerHTML = " K19 - JavaScript - DOM " ;
6
7 titulo . remove () ;
8
9 var body = document . querySelector ( " body " ) ;
10
11 var form = document . getElementById ( " formulario " ) ;
12
13 body . insertBefore ( titulo , form ) ;
Eventos
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 iden-
tificar o movimento do mouse, a digitao do usurio, a finalizao 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 definir o que deve ocorrer quando um determinado evento detectado. No exemplo
abaixo, toda vez que o usurio clicar no pargrafo, a mensagem K19 ser exibida no console do
navegador.
1 <p onclick = " console . log ( K19 ) " >

3 </ p >
load
O evento load disparado no trmino do carregamento de um recurso (imagem, script, folhas de
estilos, entre outros) contido em um documento HTML ou do prprio documento. Podemos definir
o tratamento desse evento utilizando o atributo onload. Esse atributo pode ser utilizado em diversos
elementos HTML. Por exemplo: body, img, script e link.
1 < body onload = " console . log ( K19 ) " >

2 </ body >
resize
O evento resize disparado quando ocorre uma alterao no tamanho de determinados elemen-
tos. Podemos definir o tratamento desse evento utilizando o atributo onresize. Esse atributo pode
ser utilizado em diversos elementos HTML. Por exemplo: body, img, form e textarea.
1 < body onresize = " console . log ( K19 ) " >

2 </ body >
scroll
O evento scroll disparado quando a barra de rolagem de um determinado elemento HTML
movida. Podemos definir o tratamento desse evento utilizando o atributo onscroll. Esse atributo
pode ser utilizado em diversos elementos HTML. Por exemplo: body, section, div e textarea.
1 < body onscroll = " console . log ( K19 ) " >

2 </ body >
focus
O evento focus disparado quando um determinado elemento ganha o foco. Podemos definir o
tratamento desse evento utilizando o atributo onfocus. Esse atributo pode ser utilizado em diversos
354 www.k19.com.br
355 J AVA S CRIPT
elementos HTML. Por exemplo: input, select e textarea.
1 < input onfocus = " console . log ( K19 ) " ...>
change
O evento change disparado quando um determinado elemento HTML perde o foco aps ter o
seu contedo alterado. Podemos definir o tratamento desse evento utilizando o atributo onchange.
Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: input, select e textarea.
1 < input onchange = " console . log ( K19 ) " ...>
blur
O evento blur disparado quando um determinado elemento perde o foco. Podemos definir o
tratamento desse evento utilizando o atributo onblur. Esse atributo pode ser utilizado em diversos
elementos HTML. Por exemplo: input, select e textarea.
1 < input onblur = " console . log ( K19 ) " ...>
select
O evento select disparado quando o texto contido em um input ou textarea selecionado.
Podemos definir o tratamento desse evento utilizando o atributo onselect.
1 < input onselect = " console . log ( K19 ) " ...>
submit
O evento submit disparado imediatamente antes do envio de um formulrio. Podemos definir
o tratamento desse evento utilizando o atributo onsubmit.
1 < form onsubmit = " console . log ( K19 ) " ...>
reset
O evento reset disparado quando um formulrio reiniciado. Podemos definir o tratamento
desse evento utilizando o atributo onreset.
1 < form onreset = " console . log ( K19 ) " ...>
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 definir o tratamento
desses eventos utilizando os atributos onmousedown, onmouseup e onclick. Esses atributos po-
dem ser utilizados em diversos elementos HTML. Por exemplo: p, div, table e img. Esses eventos
ocorrem na seguinte ordem:
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 ) " >
5 </ p >
dblclick
O evento dblclick disparado quando um determinado elemento recebe um duplo clique. Po-
demos definir o tratamento desse evento utilizando o atributo ondblclick. Esse atributo pode ser
utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p ondblclick = " console . log ( K19 ) " >

3 </ p >
mousemove
O evento mousemove disparado quando o usurio movimenta o mouse sobre um determinado
elemento. Podemos definir o tratamento desse evento utilizando o atributo onmousemove. Esse
atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p onmousemove = " console . log ( K19 ) " >

3 </ p >
mouveover
O evento mouveover disparado quando o ponteiro do mouse passa a estar sobre um deter-
minado elemento. Podemos definir o tratamento desse evento utilizando o atributo onmouveover.
Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p onmouveover = " console . log ( K19 ) " >

3 </ p >
mouseout
O evento mouseout disparado quando o ponteiro do mouse deixa de estar sobre um determi-
nado elemento. Podemos definir o tratamento desse evento utilizando o atributo onmouseout. Esse
atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p onmouseout = " console . log ( K19 ) " >

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 definir o tratamento desses eventos uti-
lizando os atributos onkeydown, onkeypress e onkeyup. Esses atributos podem ser utilizados em
diversos elementos HTML. Por exemplo: input e textarea. Esses eventos ocorrem na seguinte ordem:
1. keydown
2. keypress
3. keyup
1 < input
2 onkeydown = " console . log ( 1 ) "
3 onkeypress = " console . log ( 2 ) "
4 onkeyup = " console . log ( 3 ) " ...>
Mais Sobre
O evento keypress no disparado para teclas que no representam caracteres. Por
exemplo, SHIFT, CTRL, ALT, entre outros.
Mtodos: addEventListener e removeEventListener

Podemos definir o tratamento dos eventos programaticamente atravs do mtodo addEventLis-
tener. O primeiro parmetro desse mtodo o nome do evento que desejamos tratar. O segundo
parmetro a funo que tratar o evento.
1 function click () {
2 console . log ( " click " ) ;
3 }
4
6 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.

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.
J AVA S CRIPT 358
Propriedades dos objetos do DOM

Outra forma de definir programaticamente o tratamento dos eventos utilizar as propriedades
de evento dos objetos que representam os elementos HTML. Veja o exemplo a seguir.

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 >

3 < head >
6 < script type = " text / javascript " src = " eventos . js " > </ script >
7 < style >
8 body {
9 width : 2000 px ;
10 height : 2000 px ;
11 }
12
13 div {
14 width : 200 px ;
17 }
18 </ style >
19 </ head >
20 < 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 J AVA S CRIPT
8 };
9
10 input . addEventListener ( " change " , function () {
11 console . log ( " change " ) ;
12 }) ;
13
14 input . onblur = function () {
15 console . log ( " blur " ) ;
16 };
17
18 input . onselect = function () {
19 console . log ( " select " ) ;
20 };
21
22 input . onkeydown = function () {
23 console . log ( " keydown " ) ;
24 };
25
26 input . onkeypress = function () {
27 console . log ( " keypress " ) ;
28 };
29
30 input . onkeyup = function () {
31 console . log ( " keyup " ) ;
32 };
33
34 var div = document . querySelector ( " div " ) ;
35
36 div . onmousedown = function () {
37 console . log ( " mousedown " ) ;
38 };
39
40 div . onmouseup = function () {
41 console . log ( " mouseup " ) ;
42 };
43
44 div . onclick = function () {
46 };
47
48 div . ondblclick = function () {
49 console . log ( " dblclick " ) ;
50 };
51
52 div . onmousemove = function ( event ) {
53 var x = event . clientX ;
54 var y = event . clientY ;
55 console . log ( " mousemove : ( " + x + " , " + y + " ) " ) ;
56 };
57
58 div . onmouseover = function () {
59 console . log ( " mouseover " ) ;
60 };
61
62 div . onmouseout = function () {
63 console . log ( " mouseout " ) ;
64 };
65 };
66
67 function resize () {
68 var w = window . outerWidth ;
69 var h = window . outerHeight ;
70
71 console . log ( " resize ( " + w + " , " + h + " ) " ) ;
72 }
73
74 function scroll () {
75 var x = window . pageXOffset ;
76 var y = window . pageYOffset ;
77
J AVA S CRIPT 360
78 console . log ( " scroll ( " + x + " , " + y + " ) " ) ;

79 }
Cdigo Javascript 4.112: eventos.js
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 for-
mas de armazenamento.
Local storage: Os dados so armazenados nos navegadores indefinidamente. 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 compar-
tilhados 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 J AVA S CRIPT
1 usuario = localStorage . getItem ( " usuario " ) ;

2 usuario = sessionStorage . getItem ( " usuario " ) ;
No exemplo abaixo, mostramos outra forma de recuperar dados do Web Storage.
1 usuario = localStorage . usuario ;

2 usuario = sessionStorage . usuario ;
Podemos percorrer todas as entradas do localStorage ou do sessionStorage da seguinte forma:
1 for ( var i = 0; i < localStorage . length ; i ++) {

2 var key = localStorage . key ( i ) ;
3 var value = localStorage . getItem ( key ) ;
4 }
5
6 for ( var i = 0; i < sessionStorage . length ; i ++) {
7 var key = sessionStorage . key ( i ) ;
8 var value = sessionStorage . getItem ( key ) ;
9 }
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 m-

todo clear.
1 localStorage . clear () ;
2 sessionStorage . clear () ;
Exerccios de Fixao
91 Adicione um arquivo chamado web-storage.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - Web Storage </ title >
6 < script src = " web - storage . js " > </ script >
7 </ head >
8 < body >
9 < h1 > K19 - Web Storage </ h1 >
10 <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 >
J AVA S CRIPT 362
Cdigo HTML 4.51: web-storage.html
92 Adicione um arquivo chamado web-storage.js no projeto javascript.
1 function atualizaSaudacao () {
2 var saudacao = document . getElementById ( " saudacao " ) ;
3 if ( localStorage . nome ) {
4 saudacao . innerHTML = " Ol " + localStorage . nome ;
5 } else {
6 saudacao . innerHTML = null ;
7 }
8 };
9
10 window . onload = function () {
11 var botaoEnviar = document . getElementById ( " botaoEnviar " ) ;
12 botaoEnviar . onclick = function () {
13 var campoNome = document . getElementById ( " campoNome " ) ;
14 localStorage . nome = campoNome . value ;
15 atualizaSaudacao () ;
16 };
17
18 var botaoLimpar = document . getElementById ( " botaoLimpar " ) ;
19 botaoLimpar . onclick = function () {
20 localStorage . removeItem ( " nome " ) ;
22 };
23
25 };
Cdigo Javascript 4.120: web-storage.js
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 J AVA S CRIPT
1 window . history . forward () ;
1 window . history . back () ;
Tambm podemos utilizar o mtodo go. Esse mtodo recebe um nmero inteiro como parme-
tro.
1 // avana uma pgina

2 window . history . go (1) ;
3
4 // retrocede uma pgina
5 window . history . go ( -1) ;
6
7 // avana trs pginas
8 window . history . go (3) ;
9
10 // retrocede trs pginas
11 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 modificando entradas do histrico

Atravs do mtodo pushState, podemos adicionar uma entrada na posio atual do histrico.
Com o mtodo replaceState, podemos modificar 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 exi-
bida 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 " ) ;
J AVA S CRIPT 364
Exerccios de Fixao
94 Adicione um arquivo chamado historico-pagina1.html no projeto javascript.
1 <! DOCTYPE html >

3 < head >
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 >
10 < button onclick = " window . history . go (2) ; " > Avanar 2 pgina </ button >
11 </ body >
12 </ html >
Cdigo HTML 4.52: historico-pagina1.html
1 <! DOCTYPE html >

3 < head >
6 </ head >
7 < body >
9 < button onclick = " window . history . back () ; " > Voltar 1 pgina </ button >
10 < button onclick = " window . history . forward () ; " > Avanar 1 pgina </ button >
11 </ body >
12 </ html >
1 <! DOCTYPE html >

3 < head >
6 </ head >
7 < body >
9 < button onclick = " window . history . go ( -2) ; " > Voltar 2 pgina </ button >
10 < button onclick = " window . history . back () ; " > Voltar 1 pgina </ button >
11 </ body >
12 </ html >
364 www.k19.com.br
365 J AVA S CRIPT
97 No Windows, utilize o Chrome para acessar na sequncia os endereos:
http://localhost/javascript/public_html/historico-pagina1.html.
No Ubuntu, utilize o Chrome para acessar na sequncia os endereos:
http://localhost/~<USUARIO>/javascript/public_html/historico-pagina1.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, definir uma funo JavaScript para receber a localizao
quando ela for obtida.
1 function positionCallback ( position ) {

2 console . log ( " Latitude : " + position . coords . latitude ) ;
3 console . log ( " Longitude : " + position . coords . longitude ) ;
4 }
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 >

3 < head >
5 < title > K19 - Geolocalizacao </ title >
7 # mapa {
8 width : 800 px ;
9 height : 600 px ;
10 }
11 </ style >
12
13 <! - - google maps api -->
J AVA S CRIPT 366
14 < script src = " https :// maps . googleapis . com / maps / api / js ? v =3. exp & sensor = false " >
15 </ script >
16
17 < script src = " geolocalizacao . js " > </ script >
18 </ head >
19 < body >
20 < h1 > K19 - Geolocalizacao </ h1 >
21 < div id = " mapa " > </ div >
22 </ body >
23 </ html >
Cdigo HTML 4.55: geolocalizacao.html
99 Adicione um arquivo chamado geolocalizacao.js no projeto javascript.
1 function positionCallback ( position ) {

2 var latitude = position . coords . latitude ;
3 var longitude = position . coords . longitude ;
4 var geolocation = new google . maps . LatLng ( latitude , longitude ) ;
5
6 var mapOptions = {
7 zoom : 18 ,
8 center : geolocation ,
9 mapTypeId : google . maps . MapTypeId . ROADMAP
10 };
11
12 var div = document . getElementById ( " mapa " ) ;
13 var map = new google . maps . Map ( div , mapOptions ) ;
14
15 var marker = new google . maps . Marker ({
16 position : geolocation ,
17 map : map ,
18 title : " Voc est aqui ! "
19 }) ;
20 }
21
22 window . onload = function () {
23 navigator . geolocation . getCurrentPosition ( positionCallback ) ;
24 };
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 mto-
dos setTimeout e setInterval. A primeira permite definir uma funo que deve ser executada apenas
uma vez depois de um determinado tempo. A segunda permite definir uma funo que deve ser
executada de forma peridica.
366 www.k19.com.br
367 J AVA S CRIPT
No exemplo a seguir, definimos uma funo que ser executada uma vez depois de 1600 milise-
gundos.
1 window . setTimeou ( function () {

2 console . log ( " timeout " ) ;
3 } , 1600) ;
Por outro lado, nesse outro exemplo, definimos uma funo que ser executada a cada 2500 mi-
lisegundos.
1 window . setInterval ( function () {

2 console . log ( " interval " ) ;
3 } , 2500) ;
Podemos cancelar os alarmes com os mtodos clearTimeout e clearInterval. Esses mtodos

necessitam da referencia da funo associada ao alarme.
1 function alarmeTimeout () {
2 console . log ( " timeout " ) ;
3 }
4
5 window . setTimeout ( alarmeTimeout , 1600) ;
6
7 window . clearTimeout ( alarmeTimeout ) ;
1 function alarmeInterval () {
2 console . log ( " interval " ) ;
3 }
4
5 window . setInterval ( alarmeInterval , 2500) ;
6
7 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.

navegador o seu nome cinco vezes. A cada exibio do seu nome, exiba trs vezes a palavra K19.
3 Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nme-
ros de 1 at 60. Para os nmeros mltiplos de 3, exiba ***. Para os nmeros que no so mltiplos
de 3, exiba *.

navegador todos os nmeros de 1 at 80 exceto os mltiplos de 4 e 7. Para esses exiba *.
J AVA S CRIPT 368

navegador um tringulo de *. Veja o exemplo abaixo:
*
**
***
****
*****

navegador vrios tringulos de *. Observe o padro abaixo.
*
**
***
****
*
**
***
****
7 Os nmeros de Fibonacci so uma sequncia de nmeros definida recursivamente. O primeiro

elemento da sequncia 0 e o segundo 1. Os outros elementos so calculados somando os dois
antecessores.
0, 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.
8 Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros

em um array. Preencha todas as posies do array com valores sequenciais e em seguida exiba-os na
tela. Depois, escolha duas posies aleatoriamente e troque os valores contidos nelas. Repita essa
operao 10 vezes. Ao final, exiba o array novamente.
Dica: O mtodo Math.random() gera nmeros aleatrios maiores ou iguais a 0 e menores do que
1. O mtodo Math.floor() recebe um nmero real como parmetro e devolve o maior inteiro menor
ou igual a esse nmero real.
9 Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros

em um array. Preencha todas as posies do array com valores aleatrios e em seguida exiba-os na
tela. Aps exibir o array, ordene o array do menor valor para o maior. Ao final, exiba o array ordenado.
368 www.k19.com.br
369 J AVA S CRIPT
Dica: Os arrays possuem um mtodo chamada sort. Esse mtodo ordena os elementos dos ar-
rays.
Resumo do Captulo
1 A linguagem de programao JavaScript utilizada principalmente para aumentar a interativi-

dade entre as pginas web e os usurios.
2 Cdigo JavaScript pode ser aplicado aos documentos HTML de duas formas: JavaScript interno
e JavaScript externo.
3 O carregamento do cdigo JavaScript depende do posicionamento do elemento script.
4 Comentrios JavaScript de bloco podem ser definidos com os marcadores /* e */. script.
5 Comentrios JavaScript de linha podem ser definidos com o marcador //. script.
6 Em JavaScript, as variveis so criadas atravs da palavra especial var.
7 Variveis no inicializadas possuem o valor especial undefined.
8 Os operadores do JavaScript so:
Aritmtico: + - * / %
Atribuio: = += -= *= /= %= ++ --
Relacional: == != < <= > >=
Lgico: && ||
9 O operador + utilizado para concatenar strings.
10 A linguagem JavaScript permite a definio de objetos com a sintaxe do JSON.
11 Funes JavaScript so criadas com a palavra function.
12 Os mtodos getElementById(), getElementsByName(), getElementsByTagName(), getEle-

mentsByClassName(), querySelector() e querySelectorAll() so utilizados para recuperar os ele-
J AVA S CRIPT 370
mentos de um documento HTML.
13 Os mtodos getAttribute() e setAttribute() so utilizados, respectivamente, para recuperar e

alterar os valores dos atributos dos elementos HTML.
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.
16 Os mtodos remove() e removeChild() so utilizados para remover elementos de um docu-

mento HTML.
17 Os mtodos appendChild() e insertBefore() so utilizados para adicionar elementos em um

documento HTML.
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.
370 www.k19.com.br
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.
3 Considere o seguinte trecho de cdigo JavaScript.
var i = 10;
var j = ++ i + i - -;
Qual o valor da varivel j?
a) 18.
b) 19.
c) 20.
d) 21.
e) 22.
var i = 10;
var j = 15;
console . log (!( i < j ) ? ( j % 2 == i % 3 ? " K01 " : " K02 " ) : ( j % 4 > i % 4 ? " K03 " : " -
K11 " ) ) ;
O que ser exibido no console do navegador?
a) K01.
b) K02.
c) K03.
d) K11.
e) Nenhuma das anteriores.
J AVA S CRIPT 372
var i = 10;
while ( i ++ < 15) {

console . log (++ i ) ;
}
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, undefined.
b) a, b, undefined, a.
c) b, a, undefined, a.
d) b, a, undefined, b.
e) a, b, a, undefined.
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 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 modificadas.
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.
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().
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.
J AVA S CRIPT 374
d) A localizao dos usurios pode ser obtida atravs da API de geolocalizao mesmo sem a au-
torizao dos usurios.
8 11
374 www.k19.com.br
CAPTULO
J Q UERY
5
Introduo
Basicamente, jQuery uma biblioteca JavaScript. Ela foi desenvolvida para simplificar e diminuir
a quantidade de cdigo JavaScript. Os principais recursos oferecidos por essa essa biblioteca so:
Seletores
Manipulao de elementos HTML
Manipulao de propriedades CSS
Eventos
Efeitos e Animaes
AJAX
Para utilizar o jQuery, basta adicionar o arquivo JavaScript que contm o cdigo dessa biblio-
teca 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 Uncom-
pressed. 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.10.1. min . js " > </ script >
Google CDN
J Q UERY 376
1 < script
2 src = " http :// ajax . googleapis . com / ajax / libs / jquery /1.10.2/ jquery . min . js " > </ script >
Microsoft CDN
1 < script
2 src = " http :// ajax . aspnetcdn . com / ajax / jQuery / jquery -1.10.2. min . js " > </ script >
CDNJS
1 < script
2 src = " http :// cdnjs . cloudflare . com / ajax / libs / jquery /1.10.2/ jquery . min . js " > </ script >
A documentao completa do jQuery est no endereo http://docs.jquery.com/.
Exerccios de Fixao
1 Abra o Netbeans e crie um projeto chamado jQuery.
Importante
deve salvar o projeto jQuery em C:\inetpub\wwwroot. Lembre-se que necessrio
instalar o IIS conforme vimos anteriormente.
Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o
projeto jQuery em /home/<USUARIO>/public_html. Lembre-se que necessrio
instalar e configurar o Apache HTTP Server como vimos anteriormente.
376 www.k19.com.br
377 J Q UERY
Figura 5.1: Projeto jQuery
J Q UERY 378
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao1.zip
2 No projeto jQuery, crie um arquivo chamado jQuery.html.
1 <! DOCTYPE html >

3 < head >
5 < title > K19 - jQuery </ title >
8 div {
9 height : 200 px ;
10 width : 400 px ;
12 }
13 </ style >
14 </ head >
15 < body >
16 < button id = " esconder " > Esconder </ button >
17 < button id = " mostrar " > Mostrar </ button >
18 < div > </ div >
19
20 < script src = " jQuery . js " > </ script >
21 </ body >
22 </ html >
Cdigo HTML 5.6: jQuery.html
3 No projeto jQuery, crie um arquivo chamado jQuery.js.
378 www.k19.com.br
379 J Q UERY
1 $ ( " # esconder " ) . click ( function () {

2 $ ( " div " ) . slideUp () ;
3 }) ;
4
5 $ ( " # mostrar " ) . click ( function () {
6 $ ( " div " ) . slideDown () ;
7 }) ;
Cdigo Javascript 5.1: jQuery.js
http://localhost/jQuery/public_html/jQuery.html.
http://localhost/~<USUARIO>/jQuery/public_html/jQuery.html.
Eventos
Evento Descrio
ready Esse evento disparado aps o carregamento rvore de elementos do documento
HTML.
http://api.jquery.com/ready
resize Esse evento disparado quando a janela do navegador redimensionada.

http://api.jquery.com/resize
scroll Esse evento disparado quando a barra de rolagem de um elemento movimentada.

http://api.jquery.com/scroll
focus Esse evento disparado quando um elemento ganha o foco.

http://api.jquery.com/focus
focusin Esse evento disparado quando um elemento ou um dos seus descendentes ganha
o foco.
http://api.jquery.com/focusin
blur Esse evento disparado quando um elemento perde o foco.

http://api.jquery.com/blur
focusout Esse evento disparado quando um elemento ou um dos seus descendentes perde o
foco.
http://api.jquery.com/focusout
select Esse evento disparado quando o valor de um elemento selecionado.

http://api.jquery.com/select
change Em determinados casos, esse evento disparado depois de um elemento ter o seu va-
lor modificado e em seguida perder o foco. Em outros casos, esse evento disparado
depois de um elemento ter o seu valor modificado e selecionado nessa ordem.
http://api.jquery.com/change
keydown Esse evento disparado quando uma tecla pressionada.

http://api.jquery.com/keydown
J Q UERY 380
Evento Descrio
keypress 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
keyup Esse evento disparado quando uma tecla solta.
http://api.jquery.com/keyup
click Esse evento disparado quando o usurio clica sobre um elemento com o boto es-
querdo 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 ele-
mento 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 deter-
minado elemento.
http://api.jquery.com/mouseup
mouseenter Esse evento disparado no momento em que o ponteiro do mouse passa a estar
sobre um determinado elemento.
http://api.jquery.com/mouseenter
mouseleave Esse evento disparado no momento em que o ponteiro do mouse passa a no estar
sobre um determinado elemento.
http://api.jquery.com/mouseleave
hover Esse evento disparado no mouseenter e mouseleave.
http://api.jquery.com/hover
mouveover Esse evento disparado no momento em que o ponteiro do mouse passa a estar
sobre um determinado elemento ou sobre os seus descendentes.
http://api.jquery.com/mouveover
mouseout Esse evento disparado no momento em que o ponteiro do mouse passa a 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 determi-
nado 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 definir o tratamento dos eventos com o mtodo on. No exemplo abaixo, o primeiro
parmetro o nome do evento que ser tratado e o segundo parmetro a funo que tratar o evento.
1 $( " body " ) . on ( " click " , function () {

3 }) ;
O tratamento de diversos eventos pode ser definido com uma nica chamada do mtodo on.
1 $( " body " ) . on ( " click mouseenter mouseleave " , function () {
380 www.k19.com.br
381 J Q UERY
2 console . log ( " click mouseenter mouseleave " ) ;

3 }) ;
off
Podemos eliminar o tratamento de um evento com o mtodo off. A seguir, mostramos algumas
formas de utilizao desse mtodo.
1 /* Removendo todos os tratamentos associados aos eventos dos pargrafos */

2 $( " p " ) . off () ;
3
4 /* Removendo todos os tratamentos associados ao evento de clique dos pargrafos */
5 $( " p " ) . off ( " click " ) ;
6
7 /* Removendo um tratamento especfico associado ao evento de clique dos pargrafos */
8 $( " p " ) . off ( " click " , tratamento ) ;
Atalhos
O tratamento de um evento pode ser definido atravs de mtodos que funcionam como atalhos
para o mtodo on. No exemplo abaixo, utilizamos o mtodo click que um atalho para on("click",
funo).
1 $( " body " ) . click ( function () {

3 }) ;
Analogamente, para cada evento, h um mtodo de atalho com o mesmo nome.
Propriedades
Os eventos so associados informaes especificas. Por exemplo, quando o evento click dis-
parado, ele associado a uma coordenada horizontal e uma vertical. Essas coordenadas definem
a posio do ponteiro do mouse quando o clique ocorreu. Para recuperar essas informaes, basta
adicionar um parmetro nas funes de tratamento de eventos.
No exemplo abaixo, utilizamos as propriedades pageX e pageY para recuperar as coordenadas

correspondentes posio do ponteiro do mouse quando um clique ocorrer no body.
1 $( " body " ) . click ( function ( event ) {

2 console . log ( " click : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
3 }) ;
Propriedade Descrio
pageX Coordenada horizontal da posio do ponteiro do mouse.
http://api.jquery.com/event.pageX
pageY 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
J Q UERY 382
Propriedade Descrio
event.which A tecla ou o boto do mouse que foi pressionado.
http://api.jquery.com/event.which
Mais Sobre
Podemos utilizar a propriedade event.which para recuperar o keyCode das teclas
pressionadas nos eventos keydown, keypress e keyup. Contudo, importante saber
que o mapeamento de teclas para os eventos keydown e keyup diferente do mapeamento de
teclas para o evento keypress.
Exerccios de Fixao
5 No projeto jQuery, crie um arquivo chamado eventos.html.
1 <! DOCTYPE html >

2 < html lang = " pt - br " id = " html " >
3 < head >
7 < script src = " eventos . js " > </ script >
9 body {
10 width : 1000 px ;
12 }
13 # div1 {
14 width : 400 px ;
17 }
18 # div2 {
19 width : 400 px ;
22 }
23 # div - interno {
24 width : 400 px ;
26 margin : auto ;
27 background - color : green ;
28 }
29 </ style >
30 </ 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 >
40 </ 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
6 No projeto jQuery, crie um arquivo chamado eventos.js.
1 /* tratando o evento ready */

2 $( document ) . ready ( function () {
3 console . log ( " ready " ) ;
4
5 /* tratando o evento resize */
6 $( window ) . resize ( function () {
7 var largura = $( window ) . width () ;
8 var altura = $( window ) . height () ;
9 console . log ( " resize : ( " + largura + " , " + altura + " ) " ) ;
10 }) ;
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 */
20 $( " * " ) . 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 () {
30 console . log ( " focusin : ( " + tagName + " , # " + id + " ) " ) ;
31 }) ;
32
33 /* tratando o evento blur */
34 $( " * " ) . blur ( function () {
37 console . log ( " blur : ( " + tagName + " , # " + id + " ) " ) ;
38 }) ;
39
40 /* tratando o evento focusout */
41 $( " * " ) . focusout ( function () {
44 console . log ( " focusout : ( " + tagName + " , # " + id + " ) " ) ;
45 }) ;
46
47 /* tratando o evento select */
48 $( " input " ) . select ( function () {
49 console . log ( " select : ( " + window . getSelection () + " ) " ) ;
50 }) ;
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 + " ) " ) ;
J Q UERY 384
60 }) ;
61
62 /* tratando o evento keypress */
63 $( " input " ) . keypress ( function ( event ) {
64 console . log ( " keypress : ( " + event . which + " ) " ) ;
65 }) ;
66
67 /* tratando o evento keyup */
68 $( " input " ) . keyup ( function ( event ) {
69 console . log ( " keyup : ( " + event . which + " ) " ) ;
70 }) ;
71
72 /* tratando o evento click */
73 $( " # div1 " ) . click ( function ( event ) {
74 console . log ( " click : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
75 }) ;
76
77 /* tratando o evento dblclick */
78 $( " # div1 " ) . dblclick ( function ( event ) {
79 console . log ( " dblclick : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
80 }) ;
81
82 /* tratando o evento mousedown */
83 $( " # div1 " ) . mousedown ( function ( event ) {
84 console . log ( " mousedown : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
85 }) ;
86
87 /* tratando o evento mouseup */
88 $( " # div1 " ) . mouseup ( function ( event ) {
89 console . log ( " mouseup : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
90 }) ;
91
92 /* tratando o evento mouseenter */
93 $( " # div1 " ) . mouseenter ( function ( event ) {
94 console . log ( " mouseenter : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
95 }) ;
96
97 /* tratando o evento mouseleave */
98 $( " # div1 " ) . mouseleave ( function ( event ) {
99 console . log ( " mouseleave : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
100 }) ;
101
102 /* tratando o evento hover */
103 $( " # div1 " ) . hover ( function ( event ) {
104 console . log ( " hover : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
105 }) ;
106
107 /* tratando o evento mouseover */
108 $( " # div1 " ) . mouseover ( function ( event ) {
109 console . log ( " mouseover : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
110 }) ;
111
112 /* tratando o evento mouseout */
113 $( " # div1 " ) . mouseout ( function ( event ) {
114 console . log ( " mouseout : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
115 }) ;
116
117 /* tratando o evento mousemove */
118 $( " # div2 " ) . mousemove ( function ( event ) {
119 console . log ( " mousemove : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
120 }) ;
121 }) ;
Cdigo Javascript 5.7: eventos.js
384 www.k19.com.br
385 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 especificado.
Exemplo: selecionando os divs que possuem id.
$ ( " div [ id ] " ) ;
http://api.jquery.com/has-attribute-selector
[atributo="valor"] Seleciona os elementos tal que o valor de um determinado atributo igual ao valor
especificado.
Exemplo: selecionando os imgs com title igual a logo.
$ ( " img [ title = logo ] " ) ;
http://api.jquery.com/attribute-equals-selector
[atributo!="valor"] Seleciona os elementos tal que o valor de um determinado atributo no igual ao

valor especificado.
Exemplo: selecionando os imgs com title diferente de logo.
$ ( " img [ title != logo ] " ) ;
http://api.jquery.com/attribute-not-equal-selector
[atributo="valor"] Seleciona os elementos tal que o valor de um determinado atributo comea com o
valor especificado.
Exemplo: selecionando os imgs com title iniciando com a string logo.
$ ( " img [ title ^= logo ] " ) ;
http://api.jquery.com/attribute-starts-with-selector
[atributo$="valor"] Seleciona os elementos tal que o valor de um determinado atributo termina com o
valor especificado.
Exemplo: selecionando os imgs com title terminando com a string logo.
$ ( " img [ title$ = logo ] " )
http://api.jquery.com/attribute-ends-with-selector
J Q UERY 386
Seletor Descrio
[atributo*="valor"] Seleciona os elementos tal que o valor de um determinado atributo contm o valor
especificado como substring.
Exemplo: selecionando os imgs com title contendo a string logo.
$ ( " img [ title *= logo ] " )
http://api.jquery.com/attribute-contains-selector
[atributo="valor"] Seleciona os elementos tal que o valor de um determinado atributo contm o valor
especificado como palavra.
Exemplo: selecionando os imgs com title contendo a palavra logo.
$ ( " img [ title ~= logo ] " )
http://api.jquery.com/attribute-contains-word-selector
[atributo|="valor"] Seleciona os elementos tal que o valor de um determinado atributo igual ao valor
especificado ou inicia com esse valor seguido do caractere -.
Exemplo: selecionando os imgs com title iniciando com o prefixo logo.
$ ( " img [ title |= logo ] " )
http://api.jquery.com/attribute-contains-prefix-selector
[f1][f2]...[fn] Seleciona os elementos de acordo com os filtros de atributo especificados.
Exemplo: selecionando os inputs com id e type igual a text.
$ ( " input [ id ][ type = text ] " )
http://api.jquery.com/multiple-attribute-selector
#id Seleciona o elemento com o identificador especificado.
Exemplo: selecionando o elemento com id igual a conteudo .
$ ( " # conteudo " )
http://api.jquery.com/id-selector
tipo Seleciona todos os elementos do tipo especificado.
Exemplo: selecionando os divs.
$ ( " div " )
http://api.jquery.com/element-selector
s1 s2 Seleciona todos os elementos que combinam com o seletor s2 e 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 filhos de elemen-
tos que combinam com o seletor s1.
Exemplo: selecionando os spans filhos de um div.
$ ( " div > span " )
http://api.jquery.com/child-selector
386 www.k19.com.br
387 J Q UERY
Seletor Descrio
s1 + s2 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 especificada.
Exemplo: selecionando os elementos da classe titulo.
$ ( " . titulo " )
http://api.jquery.com/class-selector
s1,s2,s3... Seleciona todos os elementos que combinam com pelo menos um dos seletores espe-
cificados.
Exemplo: selecionando os divs ou os elementos da classe titulo.
$ ( " div , . titulo " )
http://api.jquery.com/multiple-selector
:first Seleciona o primeiro elemento da lista dos elementos que combinam com o seletor
utilizado.
Exemplo: selecionando o primeiro div.
$ ( " div : first " )
http://api.jquery.com/first-selector
:last Seleciona o ltimo elemento da lista dos elementos que combinam com o seletor uti-
lizado.
Exemplo: selecionando o ltimo div.
$ ( " div : last " )
http://api.jquery.com/last-selector
:eq(n) Seleciona o n-simo elemento da lista dos elementos que combinam com o seletor
utilizado.
Exemplo: selecionando o quarto div.
$ ( " div : eq (3) " )
http://api.jquery.com/eq-selector
:gt(n) Da lista de elementos que combinam com o seletor utilizado, seleciona do (n+1)-
simo elemento at o ltimo.
Exemplo: selecionando do quarto ao ltimo div.
$ ( " div : gt (2) " )
http://api.jquery.com/gt-selector
J Q UERY 388
Seletor Descrio
:lt(n) Da lista de elementos que combinam com o seletor utilizado, seleciona do primeiro
elemento at o (n-1)-simo.
Exemplo: selecionando do primeiro ao dcimo div.
$ ( " div : lt (10) " )
http://api.jquery.com/lt-selector
:even Da lista de elementos que combinam com o seletor utilizado, seleciona todos os ele-
mentos de ndice par.
Exemplo: selecionando os divs de ndice 0, 2, 4, 6 . . .
$ ( " div : even " )
http://api.jquery.com/even-selector
:odd Da lista de elementos que combinam com o seletor utilizado, seleciona todos os ele-
mentos de ndice mpar.
Exemplo: selecionando os divs de ndice 1, 3, 5, 7 . . . .
$ ( " div : odd ")
http://api.jquery.com/odd-selector
:first-child Seleciona os elementos que 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
:first-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 J Q UERY
Seletor Descrio
:nth-last-child(n) 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 filhos.
Exemplo: selecionando os divs que possuem filho.
$ ( " div : parent " )
http://api.jquery.com/parent-selector
:hidden Seleciona os elementos considerados hidden. Os elementos que 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
J Q UERY 390
Seletor Descrio
:disabled Seleciona todos os elementos desabilitados.
Exemplo: selecionando os inputs desabilitados.
$ ( " input : disabled " )
http://api.jquery.com/disabled-selector
:enabled Seleciona todos os elementos habilitados.
Exemplo: selecionando os inputs habilitados.
$ ( " input : enabled " )
http://api.jquery.com/enabled-selector
:contains("texto") Seleciona todos os elementos que possuem o texto especificado em seu 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 especificado.
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
:file Seleciona todos os elementos com type="file".
Exemplo: selecionando os inputs com type=file.
$ ( " input : file " )
http://api.jquery.com/file-selector
390 www.k19.com.br
391 J Q UERY
Seletor Descrio
:image Seleciona todos os elementos com type="image".
Exemplo: selecionando os inputs com type=image.
$ ( " input : image " )
http://api.jquery.com/image-selector
:password Seleciona todos os elementos com type="password".
Exemplo: selecionando os inputs com type=password.
$ ( " input : password " )
http://api.jquery.com/password-selector
:radio Seleciona todos os elementos com type="radio".
Exemplo: selecionando os inputs com type=radio.
$ ( " input : radio " )
http://api.jquery.com/radio-selector
:checkbox Seleciona todos os elementos com type="checkbox".
Exemplo: selecionando os inputs com type=checkbox.
$ ( " input : checkbox " )
http://api.jquery.com/checkbox-selector
:reset Seleciona todos os elementos com type="reset".
Exemplo: selecionando os inputs com type=reset.
$ ( " input : reset " )
http://api.jquery.com/reset-selector
:text Seleciona os elementos com type="text".
Exemplo: selecionando os inputs com type=text.
$ ( " input : text " )
http://api.jquery.com/text-selector
:submit Seleciona os elementos com type="submit".
Exemplo: selecionando os inputs com type=submit.
$ ( " input : submit " )
http://api.jquery.com/submit-selector
:input Seleciona todos os elementos input e textarea.
http://api.jquery.com/input-selector
:header Seleciona os ttulos (h1,h2,h3,h4,h5 e h6).
http://api.jquery.com/header-selector
:lang(linguagem) Seleciona todos os elementos com lang igual linguagem especificada.
Exemplo: selecionando os divs com lang=pt-br.
$ ( " div : lang ( pt - br )
http://api.jquery.com/lang-selector
J Q UERY 392
Seletor Descrio
:animated Seleciona todos os elementos que esto com alguma animao em andamento.
Exemplo: selecionando os divs com animao em andamento.
$ ( " div : animated " )
http://api.jquery.com/animated-selector
:root Seleciona o elemento raiz do documento.
http://api.jquery.com/root-selector
:selected Seleciona os elementos option marcados.
http://api.jquery.com/selected-selector
:checked Seleciona todos os checkboxes, radios e options marcados.

http://api.jquery.com/checked-selector
:focus Seleciona o elemento que tem o foco.

http://api.jquery.com/focus-selector
:target Seleciona o elemento com id igual ao fragmento da URL.

http://api.jquery.com/target-selector
Exerccios de Fixao
8 No projeto jQuery, crie um arquivo chamado seletores.html.
1 <! DOCTYPE html >

3 < head >
7 < script src = " seletores . js " > </ script >
8 </ head >
9 < body >
10 < 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
20 </ form >
21
22 < ul >
26 </ ul >
27 </ body >
28 </ html >
Cdigo HTML 5.8: seletores.html
392 www.k19.com.br
393 J Q UERY
9 No projeto jQuery, crie um arquivo chamado seletores.js.

2 $( " input [ type = text ][ required ] " ) . css ({
3 " background - color " : " yellow "
4 }) ;
5
6 $( " label : first " ) . css ({
7 " color " : " red "
8 }) ;
9
10 $( " 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 "
20 }) ;
21
22 $( " : header " ) . css ({
23 " color " : " darkgreen "
24 }) ;
25 }) ;
Cdigo Javascript 5.63: seletores.js
http://localhost/jQuery/public_html/seletores.html.
http://localhost/~<USUARIO>/jQuery/public_html/seletores.html.
Efeitos e Animaes
Efeito Descrio
fadeIn Faz os elementos se tornarem opacos gradativamente.
http://api.jquery.com/fadeIn
fadeOut Faz os elementos se tornarem transparentes gradativamente.

http://api.jquery.com/fadeOut
fadeToggle Faz os elementos opacos se tornarem transparentes gradativamente e os elementos
transparentes se tornarem opacos gradativamente.
http://api.jquery.com/fadeToggle
fadeTo(opacidade) Modifica a opacidade dos elementos gradativamente at atingir a opacidade especifi-

cada.
http://api.jquery.com/fadeTo
hide Esconde os elementos.

http://api.jquery.com/hide
J Q UERY 394
Efeito Descrio
show Exibe os elementos.
http://api.jquery.com/show
toggle Esconde os elementos que esto sendo exibidos e exibe os elementos que esto es-
condidos.
http://api.jquery.com/toggle
slideDown Exibe os elementos com efeito de deslizamento.

http://api.jquery.com/slideDown
slideUp Esconde os elementos com efeito de deslizamento.

http://api.jquery.com/slideUp
slideToggle Exibe os elementos que esto escondidos com efeito de deslizamento. Esconde os
elementos que esto sendo exibidos com efeito de deslizamento.
http://api.jquery.com/slideToggle
animate Modifica gradativamente determinadas propriedades CSS at atingir os valores espe-
cificados.
http://api.jquery.com/animate
Durao
Podemos definir a durao dos efeitos ou animaes em milissegundos. No exemplo abaixo, o
tempo de execuo do efeito fadeOut foi definido como 1000 milissegundos.
1 $( " a " ) . click ( function () {

2 $( this ) . fadeOut (1000) ;
3 }) ;
Callback
Podemos definir uma funo para ser executada ao trmino da execuo dos efeitos ou das ani-
maes. No exemplo abaixo, uma funo que exibe a mensagem terminou o fadeOut foi associada
ao trmino do efeito fadeOut.
1 $( " a " ) . click ( function () {

2 $( this ) . fadeOut (1000 , function () {
3 console . log ( " terminou o fadeOut " ) ;
4 }) ;
5 }) ;
Exerccios de Fixao
11 No projeto jQuery, crie um arquivo chamado efeitos.html.
1 <! DOCTYPE html >

3 < head >
7 < script src = " efeitos . js " > </ script >
9 div {
10 width : 1000 px ;
394 www.k19.com.br
395 J Q UERY
14 }
15 </ style >
16 </ head >
17 < body >
18 < button id = " fadeIn " > fadeIn </ button >
19 < button id = " fadeOut " > fadeOut </ button >
20 < button id = " fadeToggle " > fadeToggle </ button >
21 < button id = " fadeTo1 " > fadeTo 0.5 </ button >
22 < button id = " fadeTo2 " > fadeTo 1.0 </ button >
23 < button id = " hide " > hide </ button >
24 < button id = " show " > show </ button >
25 < button id = " toggle " > toggle </ button >
26 < button id = " slideDown " > slideDown </ button >
27 < button id = " slideUp " > slideUp </ button >
28 < button id = " slideToggle " > slideToggle </ button >
29 < button id = " animate1 " > animate1 </ button >
30 < button id = " animate2 " > animate2 </ button >
31 < div id = " div " > </ div >
32 </ body >
33 </ html >
Cdigo HTML 5.9: efeitos.html
12 No projeto jQuery, crie um arquivo chamado efeitos.js.

2 /* fadeIn */
3 $( " # fadeIn " ) . click ( function () {
4 $( " # div " ) . fadeIn () ;
5 }) ;
6
7 /* fadeOut */
8 $( " # fadeOut " ) . click ( function () {
9 $( " # div " ) . fadeOut () ;
10 }) ;
11
12 /* fadeToggle */
13 $( " # fadeToggle " ) . click ( function () {
14 $( " # div " ) . fadeToggle () ;
15 }) ;
16
17 /* fadeTo1 */
18 $( " # fadeTo1 " ) . click ( function () {
19 $( " # div " ) . fadeTo ( " fast " , 0.5) ;
20 }) ;
21
22 /* fadeTo2 */
23 $( " # fadeTo2 " ) . click ( function () {
24 $( " # div " ) . fadeTo ( " fast " , 1.0) ;
25 }) ;
26
27 /* hide */
28 $( " # hide " ) . click ( function () {
29 $( " # div " ) . hide () ;
30 }) ;
31
32 /* show */
33 $( " # show " ) . click ( function () {
34 $( " # div " ) . show () ;
35 }) ;
36
37 /* toggle */
J Q UERY 396
38 $( " # toggle " ) . click ( function () {

39 $( " # div " ) . toggle () ;
40 }) ;
41
42 /* slideDown */
43 $( " # slideDown " ) . click ( function () {
44 $( " # div " ) . slideDown () ;
45 }) ;
46
47 /* slideUp */
48 $( " # slideUp " ) . click ( function () {
49 $( " # div " ) . slideUp () ;
50 }) ;
51
52 /* slideToggle */
53 $( " # slideToggle " ) . click ( function () {
54 $( " # div " ) . slideToggle () ;
55 }) ;
56
57 /* animate1 */
58 $( " # animate1 " ) . click ( function () {
59 $( " # div " ) . animate ({
60 " border - width " : " 5 px " ,
61 " margin - top " : " 100 px "
62 }) ;
63 }) ;
64
65 /* animate2 */
66 $( " # animate2 " ) . click ( function () {
67 $( " # div " ) . animate ({
68 " border - width " : " 1 px " ,
69 " margin - top " : " 0 "
70 }) ;
71 }) ;
72 }) ;
Cdigo Javascript 5.66: efeitos.js
http://localhost/jQuery/public_html/efeitos.html.
http://localhost/~<USUARIO>/jQuery/public_html/efeitos.html.
Manipulao
Mtodo Descrio
addClass Adiciona uma ou mais classes aos elementos selecionados.
Exemplo: adicionando as classes destaque e grid nos divs.
$ ( " div " ) . addClass ( " destaque grid " )
http://api.jquery.com/addClass
396 www.k19.com.br
397 J Q UERY
Mtodo Descrio
removeClass 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 Verifica se algum dos elementos selecionados da classe especificada.
Exemplo: verificando 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 se-
lecionados.
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 sele-
cionados.
Exemplo: adicionando um hr imediatamente antes dos tables.
$ ( " table " ) . before ( " <hr > " )
http://api.jquery.com/before
insertAfter Semelhante ao after com sintaxe levemente diferente.
Exemplo: adicionando um 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
J Q UERY 398
Mtodo Descrio
append Adiciona um determinado contedo no final do corpo de cada um dos elementos selecio-
nados.
Exemplo: adicionando o texto (fonte: K19) no final de cada p.
$ ( " p " ) . append ( " <em >( fonte K19 ) </ em > " )
http://api.jquery.com/append
prepend Adiciona um determinado contedo no comeo do corpo de cada um dos elementos sele-
cionados.
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 final de cada p.
$ ( " <em >( fonte K19 ) </ em > " ) . appendTo ( " p " )
http://api.jquery.com/appendTo
prependTo Semelhante ao prepend com sintaxe levemente diferente.
Exemplo: adicionando o texto (fonte: K19) no 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 J Q UERY
Mtodo Descrio
css Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar os valores das
propriedades CSS do primeiro elemento selecionado. O segundo alterar os valores das
propriedades CSS de todos os elementos selecionados.
Exemplo: recuperando a propriedade CSS color do primeiro div.
var color = $ ( " div " ) . css ( " color " ) ;
Exemplo: alterando as propriedades color, width e height dos divs.
$ ( " div " ) . css ({

color : " red " ,
width : " 300 px " ,
height : " 150 px "
}) ;
http://api.jquery.com/css
removeAttr Remove o atributo especificado dos elementos selecionados.
Exemplo: removendo o atributo title dos imgs.
$ ( " img " ) . removeAttr ( " title " ) ;
http://api.jquery.com/removeAttr
removeProp Remove a propriedade especificada dos elementos selecionados.
Exemplo: removendo a propriedade title dos imgs.
$ ( " img " ) . removeProp ( " title " ) ;
http://api.jquery.com/removeProp
clone Cria uma 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
J Q UERY 400
Mtodo Descrio
replaceAll Substitui todos os elementos selecionados.
Exemplo: substituindo todos os pargrafos por <p>K19</p>.
$ ( " <p > K19 </ p > " ) . replaceAll ( " p " ) ;
http://api.jquery.com/replaceAll
replaceWith Semelhante ao replaceAll com sintaxe levemente diferente.
Exemplo: substituindo todos os 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 selecio-
nados.
Exemplo: recuperando a altura do primeiro div.
var altura = $ ( " div " ) . height () ;
Exemplo: alterando altura dos divs.
$ ( " div " ) . height (100) ;
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 seleci-
onados.
Exemplo: recuperando a largura do primeiro div.
var largura = $ ( " div " ) . width () ;
Exemplo: alterando largura dos divs.
$ ( " div " ) . width (100) ;
http://api.jquery.com/width
innerHeight Recupera o innerHeight do primeiro elemento selecionado. O innerHeight a soma da

altura, margem interna inferior e margem interna superior.
Exemplo: recuperando o innerHeight do primeiro div.
var innerHeight = $ ( " div " ) . innerHeight () ;
http://api.jquery.com/innerHeight
innerWidth Recupera o innerWidth do primeiro elemento selecionado. O innerWidth a soma da lar-

gura, margem interna da esquerda e margem interna da direita.
Exemplo: recuperando o innerWidth do primeiro div.
var innerWidth = $ ( " div " ) . innerWidth () ;
http://api.jquery.com/innerWidth
400 www.k19.com.br
401 J Q UERY
Mtodo Descrio
outerHeight Recupera o outerHeight do primeiro elemento selecionado. Se esse mtodo for chamado
sem parmetros, o outerHeight a soma da altura, margem interna inferior, margem in-
terna 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 parme-
tro true, o outerWidth a soma da largura, margem interna da esquerda, margem interna
da direita, borda da esquerda, borda da direita, margem externa da esquerda e margem ex-
terna da direita.
Exemplo: recuperando o outerWidth do primeiro div.
var outerWidth1 = $ ( " div " ) . outerWidth () ;

var outerWidth2 = $ ( " div " ) . outerWidth ( true ) ;
http://api.jquery.com/outerWidth
html Esse 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 con-
tido no corpo do primeiro elemento selecionado. O segundo alterar o texto contido no
corpo de todos os elementos selecionados.
Exemplo: recuperando o texto contido no corpo do primeiro div.
var texto = $ ( " div " ) . text () ;
Exemplo: alterando o texto contido no corpo dos divs.
$ ( " div " ) . text ( " K19 Cursos " ) ;
http://api.jquery.com/text
val Esse 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
J Q UERY 402
Mtodo Descrio
wrap Adiciona na rvore de elementos uma estrutura envolvendo cada um dos elementos seleci-
onados.
Exemplo: Envolvendo cada pargrafo com a estrutura <section><div></div></section>.
$ ( " p " ) . wrap ( " < section > < div > </ div > </ section > " ) ;
http://api.jquery.com/wrap
wrapAll Adiciona na rvore de elementos uma estrutura envolvendo o conjunto dos elementos sele-
cionados.
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 seleci-
onados. 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 : 100;
top : 20;
}) ;
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 J Q UERY
Mtodo Descrio
scrollLeft Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a posio da
barra de rolagem horizontal do primeiro elemento selecionado. O segundo alterar a posi-
o 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 (300) ;
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 (300) ;
http://api.jquery.com/scrollTop
Exerccios de Fixao
14 No projeto jQuery, crie um arquivo chamado manipulacao.html.
1 <! DOCTYPE html >

3 < head >
6 < style >
7 . destaque {
9 }
10 </ style >
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
20 < 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
J Q UERY 404
29 < button id = " height " > height </ button >
30 < button id = " width " > width </ button >
31 < button id = " innerHeight " > innerHeight </ button >
32 < button id = " innerWidth " > innerWidth </ button >
33 < button id = " outerHeight " > outerHeight </ button >
34 < button id = " outerWidth " > outerWidth </ button >
35
36 < div id = " div1 " >
37 < ul >
38 < li > Jonas Hirata </ li >
39 < li > Marcelo Martins </ li >
40 < li > Rafael Cosentino </ li >
41 </ ul >
42 </ div >
43 </ body >
44 </ html >
Cdigo HTML 5.10: manipulacao.html
15 No projeto jQuery, crie um arquivo chamado manipulacao.js.

2 $( " # div1 " ) . css ({
3 " border " : " 2 px solid black " ,
4 " width " : " 800 px " ,
5 " height " : " 200 px " ,
6 " margin " : " 15 px " ,
7 " padding " : " 15 px "
8 }) ;
9
10 $( " # 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 " ) ;
20 }) ;
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 > " ) ;
30 }) ;
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 " ) ;
40 }) ;
41
42 $( " # insertBefore " ) . click ( function () {
43 $( " # p1 " ) . remove () ;
44 $( " <p id = p1 > insertBefore <p > " ) . insertBefore ( " # div1 " ) ;
404 www.k19.com.br
405 J Q UERY
45 }) ;
46
47 $( " # append " ) . click ( function () {
48 $( " # p1 " ) . remove () ;
49 $( " # div1 " ) . append ( " <p id = p1 > append <p > " ) ;
50 }) ;
51
52 $( " # prepend " ) . click ( function () {
53 $( " # p1 " ) . remove () ;
54 $( " # div1 " ) . prepend ( " <p id = p1 > prepend <p > " ) ;
55 }) ;
56
57 $( " # appendTo " ) . click ( function () {
58 $( " # p1 " ) . remove () ;
59 $( " <p id = p1 > appendTo <p > " ) . appendTo ( " # div1 " ) ;
60 }) ;
61
62 $( " # prependTo " ) . click ( function () {
63 $( " # p1 " ) . remove () ;
64 $( " <p id = p1 > prependTo <p > " ) . prependTo ( " # div1 " ) ;
65 }) ;
66
67 $( " # height " ) . click ( function () {
68 $( " # p1 " ) . remove () ;
69 var height = $( " # div1 " ) . height () ;
70 $( " # div1 " ) . after ( " <p id = p1 > height : " + height + " <p > " ) ;
71 }) ;
72
73 $( " # width " ) . click ( function () {
74 $( " # p1 " ) . remove () ;
75 var width = $( " # div1 " ) . width () ;
76 $( " # div1 " ) . after ( " <p id = p1 > width : " + width + " <p > " ) ;
77 }) ;
78
79 $( " # innerHeight " ) . click ( function () {
80 $( " # p1 " ) . remove () ;
81 var innerHeight = $( " # div1 " ) . innerHeight () ;
82 $( " # div1 " ) . after ( " <p id = p1 > innerHeight : " + innerHeight + " <p > " ) ;
83 }) ;
84
85 $( " # innerWidth " ) . click ( function () {
86 $( " # p1 " ) . remove () ;
87 var innerWidth = $( " # div1 " ) . innerWidth () ;
88 $( " # div1 " ) . after ( " <p id = p1 > innerWidth : " + innerWidth + " <p > " ) ;
89 }) ;
90
91 $( " # outerHeight " ) . click ( function () {
92 $( " # p1 " ) . remove () ;
93 var outerHeight = $( " # div1 " ) . outerHeight () ;
94 $( " # div1 " ) . after ( " <p id = p1 > outerHeight : " + outerHeight + " <p > " ) ;
95 }) ;
96
97 $( " # outerWidth " ) . click ( function () {
98 $( " # p1 " ) . remove () ;
99 var outerWidth = $( " # div1 " ) . outerWidth () ;
100 $( " # div1 " ) . after ( " <p id = p1 > outerWidth : " + outerWidth + " <p > " ) ;
101 }) ;
102 }) ;
Cdigo Javascript 5.119: manipulacao.js
http://localhost/jQuery/public_html/manipulacao.html.
J Q UERY 406
http://localhost/~<USUARIO>/jQuery/public_html/manipulacao.html.
Mais mtodos
Mtodo Descrio
add Adiciona elementos a um conjunto.
Exemplo: adicionando os spans ao conjunto de divs.
$ ( " div " ) . add ( " span " ) ;
http://api.jquery.com/add
parent Recupera os pais de cada elemento de um conjunto.
Exemplo: recuperando os pais dos divs e dos spans.
$ ( " div , span " ) . parent () ;
http://api.jquery.com/parent
parents Recupera os ancestrais de cada elemento de um conjunto.
Exemplo: recuperando os ancestrais dos divs e dos spans.
$ ( " div , span " ) . parents () ;
http://api.jquery.com/parents
siblings Recupera os 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 filhos de cada elemento de um conjunto. Opcionalmente, pode receber

um seletor como parmetro para filtrar o resultado.
Exemplo: recuperando os filhos dos divs e dos spans.
$ ( " div , span " ) . children () ;
Exemplo: recuperando os filhos dos divs e dos spans que possuam a classe destaque.
$ ( " div , span " ) . children ( " . destaque " ) ;
http://api.jquery.com/children
find Recupera os descendentes de cada elemento de um conjunto. Opcionalmente, pode
receber um seletor como parmetro para filtrar o resultado.
Exemplo: recuperando os descendentes dos divs e dos spans.
$ ( " div , span " ) . find () ;
Exemplo: recuperando os descendentes dos divs e dos spans que possuam a classe destaque.
$ ( " div , span " ) . find ( " . destaque " ) ;
http://api.jquery.com/find
406 www.k19.com.br
407 J Q UERY
Mtodo Descrio
each 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
filter Filtra os elementos de conjunto.
Exemplo: recuperando os divs da classe grid.
$ ( " div " ) . filter ( " . grid " ) ;
http://api.jquery.com/filter
has Devolve os elementos de um conjunto que possuem um descendente que combina

com o seletor especificado.
Exemplo: recupera os divs e os spans que possuem um elemento da classe destaque como descendente.
$ ( " div , span " ) . has ( " . destaque " )
http://api.jquery.com/has
not Remove elementos de um conjunto.
Exemplo: removendo os elementos da classe destaque do conjunto de divs e spans.
$ ( " div , span " ) . not ( " . destaque " )
http://api.jquery.com/not
first Devolve o primeiro elemento de uma lista.
Exemplo: devolve o primeiro elemento da lista de divs e spans.
$ ( " div , span " ) . first () ;
http://api.jquery.com/first
last Devolve o ltimo elemento de uma lista.
Exemplo: devolve o ltimo elemento da lista de divs e spans.
$ ( " div , span " ) . last ()
http://api.jquery.com/last
eq Recupera o elemento do ndice especificado.
Exemplo: recupera o sexto elemento da lista de divs e spans.
$ ( " div , span " ) . eq (5) ;
http://api.jquery.com/eq
J Q UERY 408
Mtodo Descrio
slice Recupera um determinado trecho de uma lista de elementos.
Exemplo: recuperando do terceiro ao dcimo elementos da lista de divs e spans.
$ ( " 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 ca-
sos, 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 ) {

}) ;
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 m-
todo funciona de forma semelhante ao mtodo get. Veja alguns exemplos.
$. post ( " k19 . php " ) ;
J Q UERY 410
var post = $. post ( " k19 . php " ) ;
post . done ( function ( resultado ) {

}) ;
var dados = {
nome : " Rafael " ,
empresa : " K19 "
};
var post = $. post ( " k19 . php " , dados ) ;
post . done ( function ( 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.
1 <? php
2 $soma = $_REQUEST [ " x " ] + $_REQUEST [ " y " ];
3
4 echo $soma ;
5 ?>
Cdigo HTML 5.11: ajax.php
18 No projeto jQuery, crie um arquivo chamado ajax.html.
1 <! DOCTYPE html >

3 < head >
7 < script src = " ajax . js " > </ script >
8 </ head >
9 < body >
10 < 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
17 </ form >
18
19 <p id = " resultado " > </ p >
20 </ body >
410 www.k19.com.br
411 J Q UERY
21 </ html >
Cdigo HTML 5.12: ajax.html
19 No projeto jQuery, crie um arquivo chamado ajax.js.

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 }) ;
10
11 return false ;
12
13 }) ;
14 }) ;
Cdigo Javascript 5.148: ajax.js
http://localhost/jQuery/public_html/ajax.html.
http://localhost/~<USUARIO>/jQuery/public_html/ajax.html.
1 No projeto jQuery, crie um arquivo chamado jquery-complementar.html.
1 <! DOCTYPE html >

2 < html lang = " pt - br " id = " html " >
3 < head >
5 < title > K19 - Eventos - jQuery </ title >
7 < script src = " jquery - complementar . js " > </ script >
9 # header {
10 top : 0 px ;
11 left : 0 px ;
12 width : 100%;
14 position : fixed ;
15 background - color : white ;
16 border - bottom : 10 px black solid ;
17 }
18
J Q UERY 412
19 # saida {
20 margin : 0 px auto ;
21 width : 800 px ;
24 }
25
26 # content {
27 width : 800 px ;
28 margin : 250 px auto 0 px ;
29 }
30
31 pre {
34 background - color : # eeeeee ;
35 }
36
37 # div1 , # div2 {
39 width : 200 px ;
41 }
42
43 # div3 {
45 width : 50 px ;
46 height : 50 px ;
47 margin : auto ;
48 }
49 </ style >
50 </ head >
51 < body id = " body " >
52 < div id = " header " >
53 < div id = " saida " > </ div >
54 </ div >
55 < div id = " content " >
56
57 < h1 > ready </ h1 >
58 < pre id = " ready - on " >
60 var saida = $( " # saida " ) ;
61 saida . append ( " evento ready disparado & lt ; br & gt ; " ) ;
62 }) ;
63 </ pre >
64
65 < h1 > resize </ h1 >
66 < button id = " resize " > ON </ button >
67 < pre >
68 /* ON */
72 saida . append ( " resize : ( " + largura + " , " + altura + " ) " ) ;
73 saida . append ( " & lt ; br & gt ; " ) ;
74 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
75 }) ;
76
77 /* OFF */
78 $( window ) . off ( " resize " ) ;
79 </ pre >
80
81 < h1 > scroll </ h1 >
82 < button id = " scroll " > ON </ button >
83 < pre >
84 /* ON */
88 saida . append ( " scroll : ( " + x + " , " + y + " ) " ) ;
412 www.k19.com.br
413 J Q UERY

91 }) ;
92
93 /* OFF */
94 $( window ) . off ( " scroll " ) ;
95 </ pre >
96
97 < h1 > focus , focusin , blur e focusout </ h1 >
98 < button id = " foco " > ON </ button >
99 < pre >
100 /* ON */
101 $( " * " ) . on ( " focus focusin blur focusout " ,
102 function ( event ) {
103 var tag = this . tagName ;
105 var type = event . type ;
106
107 saida . append ( type + " ( " + tag + " , # " + id + " ) " ) ;
110 }
111 );
112
113 /* OFF */
114 $( " * " ) . off ( " focus focusin blur focusout " ) ;
115 </ pre >
116 < label > Teste : </ label >
117 < input id = " input1 " >
118
119 < h1 > select </ h1 >
120 < button id = " select " > ON </ button >
121 < pre >
122 /* ON */
123 $( " # input2 " ) . select ( function () {
124 saida . append ( " select : ( " + window . getSelection () + " ) " ) ;
127 }) ;
128
129 /* OFF */
130 $( " # input2 " ) . off ( " select " ) ;
131 </ pre >
134
135 < h1 > change </ h1 >
136 < button id = " change " > ON </ button >
137 < pre >
138 /* ON */
139 $( " input3 " ) . change ( function () {
140 saida . append ( " change : ( " + $( this ) . val () + " ) " ) ;
143 }) ;
144
145 /* OFF */
146 $( " # input3 " ) . off ( " change " ) ;
147 </ pre >
150
151 < h1 > keydown , keypress e keyup </ h1 >
152 < button id = " key " > ON </ button >
153 < pre >
154 /* ON */
155 $( " # input4 " ) . on ( " keydown keypress keyup " ,
158
J Q UERY 414
159 saida . append ( type + " : ( " + event . which + " ) " ) ;
162 }
163 );
164
165 /* OFF */
166 $( " # input4 " ) . off ( " keydown keypress keyup " ) ;
167 </ pre >
170
171 < h1 > click , dblclick , mousedown , mouseup , mouseenter ,
172 mouseleave , hover , mouseover e mouseout </ h1 >
173 < button id = " mouse " > ON </ button >
174 < pre >
175 /* ON */
176 $( " # div1 " ) . on ( " click dblclick mousedown mouseup " +
177 " mouseenter mouseleave hover mouseover mouseout " ,
180
184 }
185 );
186
187 /* OFF */
188 $( " # div1 " ) . off ( " click dblclick mousedown mouseup " +
189 " mouseenter mouseleave hover mouseover mouseout " ) ;
190 </ pre >
191 < div id = " div1 " > < div id = " div3 " > </ div > </ div >
192
193 < h1 > mousemove </ h1 >
194 < button id = " mousemove " > ON </ button >
195 < pre >
196 /* ON */
198 var x = event . pageX ;
199 var y = event . pageY ;
201
202 saida . append ( type + " : ( " + x + " , " + y + " ) " ) ;
205 }) ;
206
207 /* OFF */
208 $( " # div2 " ) . off ( " mousemove " ) ;
209 </ pre >
210 < div id = " div2 " > </ div >
211 </ div >
212 </ body >
213 </ html >
Cdigo HTML 5.13: jquery-complementar.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-complementar1.zip
2 No projeto jQuery, crie um arquivo chamado jquery-complementar.js.
1 /* ready */
3 var saida = $( " # saida " ) ;
4 saida . append ( " evento ready disparado < br > " ) ;
5
414 www.k19.com.br
415 J Q UERY
6 /* resize */
7 var resize = false ;
8 $( " # resize " ) . click ( function () {
9 if ( resize ) {
10 $( window ) . off ( " resize " ) ;
11 $( " # resize " ) . html ( " ON " ) ;
12 resize = false ;
13 } else {
17 saida . append ( " resize : ( " + largura + " , " + altura + " ) " ) ;
18 saida . append ( " <br > " ) ;
20 }) ;
21 $( " # resize " ) . html ( " OFF " ) ;
22 resize = true ;
23 }
24 }) ;
25
26 /* scroll */
27 var scroll = false ;
28 $( " # scroll " ) . click ( function () {
29 if ( scroll ) {
30 $( window ) . off ( " scroll " ) ;
31 $( " # scroll " ) . html ( " ON " ) ;
32 scroll = false ;
33 } else {
37 saida . append ( " scroll : ( " + x + " , " + y + " ) " ) ;
38 saida . append ( " <br > " ) ;
40 }) ;
41 $( " # scroll " ) . html ( " OFF " ) ;
42 scroll = true ;
43 }
44 }) ;
45
46 /* focus focusin blur focusout */
47 var foco = false ;
48 $( " # foco " ) . click ( function () {
49 if ( foco ) {
50 $( " * " ) . off ( " focus focusin blur focusout " ) ;
51 $( " # foco " ) . html ( " ON " ) ;
52 foco = false ;
53 } else {
54 $( " * " ) . on ( " focus focusin blur focusout " ,
56 var tag = this . tagName ;
59
60 saida . append ( type + " ( " + tag + " , # " + id + " ) " ) ;
61 saida . append ( " <br > " ) ;
63 }
64 );
65 $( " # foco " ) . html ( " OFF " ) ;
66 foco = true ;
67 }
68 }) ;
69
70 /* select */
71 var select = false ;
72 $( " # select " ) . click ( function () {
73 if ( select ) {
74 $( " # input2 " ) . off ( " select " ) ;
75 $( " # select " ) . html ( " ON " ) ;
J Q UERY 416
76 select = false ;
77 } else {
78 $( " # input2 " ) . select ( function () {
79 saida . append ( " select : ( " + window . getSelection () + " ) " ) ;
80 saida . append ( " <br > " ) ;
82 }) ;
83 $( " # select " ) . html ( " OFF " ) ;
84 select = true ;
85 }
86 }) ;
87
88 /* change */
89 var change = false ;
90 $( " # change " ) . click ( function () {
91 if ( change ) {
92 $( " # input3 " ) . off ( " change " ) ;
93 $( " # change " ) . html ( " ON " ) ;
94 change = false ;
95 } else {
96 $( " # input3 " ) . change ( function () {
97 saida . append ( " change : ( " + $( this ) . val () + " ) " ) ;
98 saida . append ( " <br > " ) ;
100 }) ;
101 $( " # change " ) . html ( " OFF " ) ;
102 change = true ;
103 }
104 }) ;
105
106 /* key */
107 var key = false ;
108 $( " # key " ) . click ( function () {
109 if ( key ) {
110 $( " # input4 " ) . off ( " keydown keypress keyup " ) ;
111 $( " # key " ) . html ( " ON " ) ;
112 key = false ;
113 } else {
114 $( " # input4 " ) . on ( " keydown keypress keyup " ,
117
119 saida . append ( " <br > " ) ;
121 }
122 );
123 $( " # key " ) . html ( " OFF " ) ;
124 key = true ;
125 }
126 }) ;
127
128 /* mouse */
129 var mouse = false ;
130 $( " # mouse " ) . click ( function () {
131 if ( mouse ) {
132 $( " # div1 " ) . off ( " click dblclick mousedown mouseup " +
133 " mouseenter mouseleave hover mouseover mouseout " ) ;
134 $( " # mouse " ) . html ( " ON " ) ;
135 mouse = false ;
136 } else {
137 $( " # div1 " ) . on ( " click dblclick mousedown mouseup " +
138 " mouseenter mouseleave hover mouseover mouseout " ,
143
145 saida . append ( " <br > " ) ;
416 www.k19.com.br
417 J Q UERY

147 }
148 );
149 $( " # mouse " ) . html ( " OFF " ) ;
150 mouse = true ;
151 }
152 }) ;
153
154 /* mousemove */
155 var mousemove = false ;
156 $( " # mousemove " ) . click ( function () {
157 if ( mousemove ) {
158 $( " # div2 " ) . off ( " mousemove " ) ;
159 $( " # mousemove " ) . html ( " ON " ) ;
160 mousemove = false ;
161 } else {
166
168 saida . append ( " <br > " ) ;
170 }) ;
171 $( " # mousemove " ) . html ( " OFF " ) ;
172 mousemove = true ;
173 }
174 }) ;
175 }) ;
Cdigo Javascript 5.149: jquery-complementar.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-complementar2.zip
http://localhost/jQuery/public_html/jquery-complementar.html.
http://localhost/~<USUARIO>/jQuery/public_html/jquery-complementar.html.
Resumo do Captulo
1 Resumidamente, jQuery uma biblioteca JavaScript.
2 Podemos obter a biblioteca jQuery na verso compressed ou uncompressed.
3 A utilizao de um CDN (Content Delivery Network), melhora o tempo de carregamento e a

disponibilidade da biblioteca jQuery.
4 O mtodo on() permite associar eventos jQuery aos elementos HTML.
J Q UERY 418
5 O mtodo off() permite dissociar eventos jQuery dos elementos HTML.
6 A biblioteca jQuery suporta todos os seletores do CSS. Alm disso, ela oferece alguns seletores
que no existem no CSS.
7 Podemos definir o tempo de durao dos efeitos e animaes do jQuery.
8 Podemos determinar uma funo que deve ser executada ao trmino de um efeito ou anima-
o.
9 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.
a) Geralmente, a utilizao de CDNs aumenta a quantidade dados transmitidos entre os navega-

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

gadores.
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.
3 Quais alternativas esto corretas?
418 www.k19.com.br
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.
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.
6 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.
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.
5 7
420 www.k19.com.br
APNDICE
P ROJETO
A
Para exercitar o contedo visto nesta apostila, implemete uma pgina web semelhante imagem
a seguir.
Smartphone Desktop
Exerccios de Fixao
1 Abra o Netbeans e crie um projeto chamado blog.
P ROJETO 422
Importante
deve salvar o projeto blog em C:\inetpub\wwwroot. Lembre-se que necessrio ins-
talar o IIS conforme vimos anteriormente.
Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o
projeto blog em /home/<USUARIO>/public_html. Lembre-se que necessrio ins-
talar e configurar o Apache HTTP Server como vimos anteriormente.
Figura A.1: Projeto blog
422 www.k19.com.br
423 P ROJETO
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao1.zip
2 No projeto blog, altere o arquivo index.html.
P ROJETO 424
1 <! DOCTYPE html >

2 < html >
3 < head >
4 < title > K19 Blog </ title >
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.0.3. min . js " >
9 </ script >
10 < 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
20 < 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 <! - -
30 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 >
40 </ header >
41
42 < ul >
43 < li > <a href = " # " > Janeiro 2013 </ a > </ li >
44 < li > <a href = " # " > Fevereiro 2013 </ a > </ li >
45 < li > <a href = " # " > Maro 2013 </ a > </ li >
46 < li > <a href = " # " > Abril 2013 </ a > </ li >
47 < li > <a href = " # " > Maio 2013 </ a > </ li >
48 < li > <a href = " # " > Junho 2013 </ a > </ li >
49 < li > <a href = " # " > Julho 2013 </ a > </ li >
50 < li > <a href = " # " > Agosto 2013 </ a > </ li >
51 < li > <a href = " # " > Setembro 2013 </ a > </ li >
52 < li > <a href = " # " > Outubro 2013 </ a > </ li >
53 < li > <a href = " # " > Novembro 2013 </ a > </ li >
54 < li > <a href = " # " > Dezembro 2013 </ a > </ li >
55 </ ul >
56 </ section >
57 </ aside >
58
59 < footer >
60 < small >& copy ; K19 Treinamentos 2013. </ small >
61 </ footer >
62 </ div >
63 </ body >
64 </ html >
Cdigo HTML A.1: index.html
424 www.k19.com.br
425 P ROJETO
3 No projeto blog, crie um arquivo chamado principal.css em uma pasta chamada css.
1 /* Declarando as fontes que sero utilizadas na pgina . */

2 @font - face {
3 font - family : Roboto ;
4 src : url ( Roboto - Regular - webfont . eot ) ;
5 src : url ( Roboto - Regular - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
6 url ( Roboto - Regular - webfont . woff ) format ( woff ) ,
7 url ( Roboto - Regular - webfont . ttf ) format ( truetype ) ,
8 url ( Roboto - Regular - webfont . svg # RobotoRegular ) format ( svg ) ;
9 font - weight : normal ;
10 font - style : normal ;
11 }
12
13 @font - face {
15 src : url ( Roboto - Italic - webfont . eot ) ;
16 src : url ( Roboto - Italic - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
17 url ( Roboto - Italic - webfont . woff ) format ( woff ) ,
18 url ( Roboto - Italic - webfont . ttf ) format ( truetype ) ,
19 url ( Roboto - Italic - webfont . svg # RobotoItalic ) format ( svg ) ;
22 }
23
24 @font - face {
26 src : url ( Roboto - Bold - webfont . eot ) ;
27 src : url ( Roboto - Bold - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
28 url ( Roboto - Bold - webfont . woff ) format ( woff ) ,
29 url ( Roboto - Bold - webfont . ttf ) format ( truetype ) ,
30 url ( Roboto - Bold - webfont . svg # RobotoBold ) format ( svg ) ;
33 }
34
35 @font - face {
37 src : url ( Roboto - BoldItalic - webfont . eot ) ;
38 src : url ( Roboto - BoldItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
39 url ( Roboto - BoldItalic - webfont . woff ) format ( woff ) ,
40 url ( Roboto - BoldItalic - webfont . ttf ) format ( truetype ) ,
41 url ( Roboto - BoldItalic - webfont . svg # RobotoBoldItalic ) format ( svg ) ;
44 }
45
46 @font - face {
48 src : url ( Roboto - Thin - webfont . eot ) ;
49 src : url ( Roboto - Thin - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
50 url ( Roboto - Thin - webfont . woff ) format ( woff ) ,
51 url ( Roboto - Thin - webfont . ttf ) format ( truetype ) ,
52 url ( Roboto - Thin - webfont . svg # RobotoThin ) format ( svg ) ;
55 }
56
57 @font - face {
59 src : url ( Roboto - ThinItalic - webfont . eot ) ;
60 src : url ( Roboto - ThinItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
61 url ( Roboto - ThinItalic - webfont . woff ) format ( woff ) ,
62 url ( Roboto - ThinItalic - webfont . ttf ) format ( truetype ) ,
63 url ( Roboto - ThinItalic - webfont . svg # RobotoThinItalic ) format ( svg ) ;
66 }
67
68 @font - face {
P ROJETO 426

70 src : url ( Roboto - Light - webfont . eot ) ;
71 src : url ( Roboto - Light - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
72 url ( Roboto - Light - webfont . woff ) format ( woff ) ,
73 url ( Roboto - Light - webfont . ttf ) format ( truetype ) ,
74 url ( Roboto - Light - webfont . svg # RobotoLight ) format ( svg ) ;
77 }
78
79 @font - face {
81 src : url ( Roboto - LightItalic - webfont . eot ) ;
82 src : url ( Roboto - LightItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
83 url ( Roboto - LightItalic - webfont . woff ) format ( woff ) ,
84 url ( Roboto - LightItalic - webfont . ttf ) format ( truetype ) ,
85 url ( Roboto - LightItalic - webfont . svg # RobotoLightItalic ) format ( svg ) ;
88 }
89
90 @font - face {
92 src : url ( Roboto - Medium - webfont . eot ) ;
93 src : url ( Roboto - Medium - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
94 url ( Roboto - Medium - webfont . woff ) format ( woff ) ,
95 url ( Roboto - Medium - webfont . ttf ) format ( truetype ) ,
96 url ( Roboto - Medium - webfont . svg # RobotoMedium ) format ( svg ) ;
99 }
100
101 @font - face {
103 src : url ( Roboto - MediumItalic - webfont . eot ) ;
104 src : url ( Roboto - MediumItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
105 url ( Roboto - MediumItalic - webfont . woff ) format ( woff ) ,
106 url ( Roboto - MediumItalic - webfont . ttf ) format ( truetype ) ,
107 url ( Roboto - MediumItalic - webfont . svg # RobotoMediumItalic ) format ( svg ) ;
110 }
111
112 /*
113 Removendo as margens internas e externas de todos os elementos para
114 evitar diferenas entre os navegadores .
115 */
116 * {
117 margin : 0;
118 padding : 0;
119 font - family : Roboto , helvetica , arial , sans - serif ;
120 }
121
122 @media ( max - width : 480 px ) {
123 body {
124 font - size :1.2 rem ;
125 }
126
127 . show - comments {
128 display : inline ;
129 }
130
131 . article - comments form ,
132 . article - comments article {
133 display : none ;
134 }
135 }
136
137 @media ( min - width : 640 px ) {
138 # articles - container {
426 www.k19.com.br
427 P ROJETO
139 width : 70%;

140 float : left ;
141 }
142
143 aside {
144 width : 28%;
145 float : left ;
146 margin : 0 0 0 2%;
147 }
148
149 . article - comments form ,
152 }
153
154 # main - header nav {
157 }
158
159 # main - header nav input : first - child {
161 }
162
163 # main - header nav ul ,
164 # main - header nav li {
165 display : inherit ;
166 vertical - align : inherit ;
167 }
168
169 # main - header nav ul {
170 margin : 0 0 0 4 em ;
171 }
172
174 background : white ;
175 border - radius : 0.3 em ;
176 padding : 0.3 em 0.5 em ;
177 font - size : 0.8 em ;
178 margin : 0 0.5 em ;
179 color : black ;
180 }
181
182 # main - header nav li a {
183 color : inherit ;
184 text - decoration : none ;
185 }
186
187 # main - header nav li : hover {
188 background : #38 c3f2 ;
189 color : white ;
190 }
191
192 . article - text figure {
193 margin - bottom : 1 em ;
194 }
195
196 . article - text figure img {
197 width : 100%;
198 }
199
200 . article - text figure figcaption {
201 font - size : 0.5 em ;
204 }
205 }
206
207 @media ( min - width : 480 px ) {
208 body {
P ROJETO 428
209 font - size :1.5 rem ;

210 }
211
212 . show - comments {
214 }
215 }
216
217 @media ( max - width : 640 px ) {
218 # main - header nav {
220 top : 1 em ;
221 right : 0.5 em ;
223 }
224
225 # main - header nav input : first - child {
228 border : none ;
229 padding : 0.3 em 0.5 em ;
230 font - size : 0.8 em ;
231 margin : 0 0 0.1 em 0;
232 cursor : pointer ;
233 }
234
235 # main - header nav input : first - child : hover {
236 color : #38 c3f2 ;
237 }
238
239 # main - header nav ul {
243 list - style - type : none ;
244 padding : 0.6 em ;
245 box - shadow : 3 px 3 px 10 px rgba (0 , 0 , 0 , 0.8) ;
246 }
247
249 text - align : left ;
251 color : black ;
252 }
253
254 # main - header nav li a {
257 }
258
259 # main - header nav li : hover {
260 color : #38 c3f2 ;
261 }
262
263 . article - text figure {
264 float : left ;
265 margin : 0 0.6 em 0.6 em 0;
266 width : 5 em ;
267 }
268
269 . article - text figure img {
270 width : 100%;
271 }
272
273 . article - text figure figcaption {
274 font - size : 0.7 em ;
277 }
278 }
428 www.k19.com.br
429 P ROJETO
279
280 # main - wrapper {
281 max - width : 980 px ;
282 width : 100%;
283 margin : 0 auto ;
284 }
285
286 # main - header {
287 position : relative ;
288 background : black ;
290 }
291
292 # main - header h1 {
293 color : white ;
294 font - size : 1.5 em ;
297 }
298
299 article header {
300 background : #38 c3f2 ;
301 color : white ;
303 }
304
305 article header h1 {
306 font - size : 1.2 em ;
307 }
308
309 article header h2 {
310 font - size : 0.8 em ;
312 }
313
314 . article - text {
316 }
317
318 . article - text p {
319 font - size : 0.8 em ;
320 margin - bottom : 0.8 em ;
321 }
322
323 # archive - links header {
324 background : #888;
325 color : white ;
327 }
328
329 # archive - links header h1 {
330 font - size : 1 em ;
331 }
332
333 # archive - links ul {
334 padding : 0.8 em 0 0.8 em 1.6 em ;
335 color : #888;
336 font - size : 0.8 em ;
337 }
338
339 # archive - links li {
340 padding : 0.2 em 0;
341 }
342
343 # archive - links li a {
346 }
347
348 # archive - links li a : hover {
P ROJETO 430
349 color : #38 c3f2 ;

350 }
351
352 . article - comments {
353 padding : 0 0.8 em ;
354 }
355
356 . article - comments > input : first - child {
357 border : none ;
358 background : #00 c425 ;
359 color : white ;
360 font - size : 0.8 em ;
361 padding : 0.3 em 0.5 em ;
363 margin : 0 0 2 em 0;
364 }
365
366 . article - comments fieldset {
370 margin : 0 0 1 em 0;
371 }
372
373 . article - comments fieldset legend {
374 padding : 0 0.2 em ;
375 color : #999;
376 }
377
378 . article - comments fieldset input : not ([ type = submit ]) ,
379 . article - comments fieldset textarea {
381 font - size : 0.8 em ;
382 margin : 0 0 0.5 em 0;
383 width : 100%;
386 }
387
388 . article - comments fieldset textarea {
389 height : 10 em ;
390 }
391
392 . article - comments fieldset input [ type = submit ] {
393 border : none ;
394 background : #00 c425 ;
395 color : white ;
396 font - size : 0.8 em ;
397 padding : 0.3 em 0.5 em ;
399 }
400
402 margin : 0 0 1 em 0;
403 }
404
405 . article - comments article p {
406 font - size : 0.8 em ;
407 color : #444;
408 margin : 0 0 0 1 em ;
409 }
410
411 # lazy - load - point {
413 }
414
415 # lazy - load - point . loading {
416 background : url ( ajax - loader ) no - repeat center ;
417 }
418
430 www.k19.com.br
431 P ROJETO
419 footer {
421 clear : left ;
422 }
423
424 footer small {
425 font - size : 0.5 em ;
426 }
Cdigo CSS A.1: principal.css
4 No projeto blog, crie um arquivo chamado servico.php.
1 <? php for ($i = 0; $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 >
10 < 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 >
18 Maecenas convallis viverra justo sed adipiscing .
19 Maecenas vitae arcu lectus . Praesent eleifend sapien et
20 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
30 < 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 " >
40 < input type = " email " placeholder = "E - mail " >
41 < textarea placeholder = " Comentrios " > </ textarea >
43 </ fieldset >
44 </ form >
45
46 < article >
47 < small > Jonas Hirata </ small >
48 <p >
49 Praesent eleifend egestas volutpat . Quisque quis
50 tortor ut odio adipiscing egestas sit amet ut
51 nisl . Vivamus venenatis turpis id nisl
52 facilisis , sed cursus odio scelerisque .
P ROJETO 432
53 </ p >
54 </ article >
55 </ div >
56 </ article >
57 <? php endfor ; ? >
Cdigo HTML A.2: servico.php
5 No projeto blog, crie um arquivo chamado principal.js em uma pasta chamada js.
1 var scrollTimeout = 0;
2 var isLoadingArticles = false ;
3
5 $( # articles - container ) . on ( click , . show - comments , function ( e ) {
6 $( this ) . parent () . find ( form , article ) . slideDown () ;
7 $( this ) . hide () ;
8 }) ;
9
10 // Trata o evento de clique no boto de menu adicionando uma classe
11 // ao mesmo para indicar que o mesmo est expandido .
12 $( # main - menu - btn ) . click ( function ( e ) {
13 e . stopPropagation () ;
14 $( this ) . parent () . find ( ul ) . addClass ( expanded ) . slideDown () ;
15 }) ;
16
17 // Trata o evento de clique em qualquer rea da pgina para contrair e
18 // remover a classe expanded do menu principal .
19 $( html ) . click ( function ( e ) {
20 $( # main - header ul . expanded ) . removeClass ( expanded ) . slideUp (400 , function () {
21 $( this ) . removeAttr ( style ) ;
22 }) ;
23 }) ;
24
26 // Utilizando um timeout para evitar chamadas excessivas
27 // funo afterScroll () .
28 clearTimeout ( scrollTimeout ) ;
29 scrollTimeout = setTimeout ( afterScroll , 500) ;
30 }) ;
31
32 // Carregando os artigos assim que a pgina for carregada .
33 loadArticles () ;
34 }) ;
35
36 function afterScroll () {
37 if (! isLoadingArticles && $( # lazy - load - point ) . isOnScreen () ) {
38 loadArticles () ;
39 }
40 }
41
42 function loadArticles () {
43 $. ajax ({
44 url : servico . php ,
45 dataType : html ,
46 beforeSend : function ( jqXHR , settings ) {
47 isLoadingArticles = true ;
48
49 // Exibe o GIF animado que indica o carregamento do contedo .
50 $( # lazy - load - point ) . addClass ( loading ) ;
51 },
52 complete : function () {
53 // O uso do timeout neste ponto desnecessrio . Foi utilizado aqui
54 // para dar tempo do GIF animado ser visualizado em um servidor
55 // local .
432 www.k19.com.br
433 P ROJETO
56 setTimeout ( function () {
57 isLoadingArticles = false ;
58 // Oculta o GIF animado que indica o carregamento do contedo .
59 $( # lazy - load - point ) . removeClass ( loading ) ;
60 } , 1000) ;
61 },
62 success : function ( data , textStatus , jqXHR ) {
63 // O uso do timeout neste ponto desnecessrio . Foi utilizado aqui
64 // para dar tempo do GIF animado ser visualizado em um servidor
65 // local .
66 setTimeout ( function () {
67 $( # articles - container ) . prepend ( data ) ;
68 } , 1000) ;
69 },
70 error : function ( jqXHR , textStatus , errorThrown ) {
71 alert ( errorThrown ) ;
72 }
73 }) ;
74 }
75
76 // Extendendo o jQuery com o mtodo isOnScreen que verifica se um
77 // elemento est na regio visvel da pgina .
78 $. fn . isOnScreen = function () {
79 var win = $( window ) ;
80
81 var viewport = {
82 top : win . scrollTop () ,
83 left : win . scrollLeft ()
84 };
85 viewport . right = viewport . left + win . width () ;
86 viewport . bottom = viewport . top + win . height () ;
87
88 var bounds = this . offset () ;
89 bounds . right = bounds . left + this . outerWidth () ;
90 bounds . bottom = bounds . top + this . outerHeight () ;
91
92 return (!( viewport . right < bounds . left ||
93 viewport . left > bounds . right ||
94 viewport . bottom < bounds . top ||
95 viewport . top > bounds . bottom ) ) ;
96 };
Cdigo Javascript A.1: principal.js
6 Copie o arquivo k02-projeto.zip da pasta K19-Arquivos para a sua rea de trabalho. Descom-
pacte 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.

http://localhost/blog/public_html/index.html.
http://localhost/~<USUARIO>/blog/public_html/index.html.
P ROJETO 434
434 www.k19.com.br
APNDICE
Q UIZZES
B
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 bor-
das em um elemento com largura definida fazemos com que, visualmente, a largura ocupada por
esse elemento seja a soma das propriedades width, padding-left, padding-right, border-
left e border-right. Como utilizamos a propriedade padding com o valor 10px para definir
as margens internas, podemos considerar que temos 10px nas propriedades padding-left e
padding-right. A mesma 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 (border-
left) + 3px (border-right) = 226px
Portanto o espao horizontal visualmente ocupado pelo elemento de 226px.
QUIZZES 436
436 www.k19.com.br
APNDICE
R ESPOSTAS
C
Questo 1.1
Questo 1.2
Questo 1.3
Questo 1.4
Questo 1.5
Questo 1.6
Exerccio Complementar 2.1
1 <! DOCTYPE html >

3 < head >
6 </ head >
7
8 < body >
9 <p >
10 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Suspendisse
11 bibendum pellentesque hendrerit . Aliquam pretium , quam in porttitor
R ESPOSTAS 438
12 vestibulum , massa ligula sodales metus , nec hendrerit nunc purus eu

13 mauris .
14 </ p >
15 </ body >
16 </ html >
Cdigo HTML 2.159: pagina-simples.html
No Windows, utilize o Chrome para acessar o endereo:
http://localhost/html/public_html/pagina-simples.html.
http://localhost/~<USUARIO>/html/public_html/pagina-simples.html.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar1.zip
1 <! DOCTYPE html >

3 < head >
5 < title > Curiosidades do Mundo </ title >
6 </ head >
7
8 < body >
9 < h1 > Curiosidades do Mundo </ h1 >
10
11 < h2 > Europa </ h2 >
12 <p >A Europa o segundo menor continente em superfcie do mundo , cobrindo
13 cerca de 10 180 000 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 2010 , 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 >
20
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 700.000 habitantes em 2012. </ p >
30
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 >
40 <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 R ESPOSTAS
43 Japo . </ p >

44
45 < h5 > Nago </ h5 >
46 <p > De 21 de julho at 23 de julho de 2000 , foi sede do encontro anual do G8 . </ p >
47
48 <p > Fonte : wikipedia . org </ p >
49 </ body >
50 </ html >
Cdigo HTML 2.160: geografia.html
http://localhost/html/public_html/geografia.html.
http://localhost/~<USUARIO>/html/public_html/geografia.html.
1 <! DOCTYPE html >

3 < head >
5 < title > Seguro Treinamento - K19 </ title >
6 </ head >
7
8 < body >
9 < h1 > Na K19 o aluno faz o curso quantas vezes quiser ! </ h1 >
10 <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.
R ESPOSTAS 440
1 <! DOCTYPE html >

3 < head >
5 < title > Caracteres especiais </ title >
6 </ head >
7
8 < body >
9 < h1 > Caracteres especiais </ h1 >
10 <p >
11 & cross ; & sext ; & ofcir ; & check ; & sharp ;
12 </ p >
13 </ body >
14 </ html >
Cdigo HTML 2.162: caracteres-especiais.html
http://localhost/html/public_html/caracteres-especiais.html.
http://localhost/~<USUARIO>/html/public_html/caracteres-especiais.html.
1 <! DOCTYPE html >

3 < head >
5 < title > Texto pr - formatado </ title >
6 </ head >
7
8 < body >
9 < h1 > Texto pr - formatado </ h1 >
10 < pre >
11 A B C D E F G
12
13 1 2 3 4 5 6 7
14
15 a b c d e f g
16 </ pre >
17 </ body >
18 </ html >
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 >

3 < head >
5 < title > Cdigo Java </ title >
6 </ head >
7 < body >
8 < h1 > Cdigo Java </ h1 >
9 < code >
10 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 >

3 < head >
5 < title > Elemento i e elemento b </ title >
6 </ head >
7 < body >
8 < h1 > Elemento i e elemento b </ h1 >
9 < ul >
15 </ ul >
16
17 <p >
22 </ p >
23 </ body >
24 </ html >
Cdigo HTML 2.165: elementos-i-b.html
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 >

3 < head >
5 < title > So Paulo </ title >
6 </ head >
7 < body >
8 < h1 > So Paulo </ h1 >
9 <p >
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 >

3 < head >
5 < title > So Paulo FC </ title >
6 </ head >
7 < body >
8 < h1 > So Paulo FC </ h1 >
9 <p >
10 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 R ESPOSTAS
14 </ body >

15 </ html >
Cdigo HTML 2.167: spfc.html
http://localhost/html/public_html/spfc.html.
http://localhost/~<USUARIO>/html/public_html/spfc.html.
1 <! DOCTYPE html >

3 < head >
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 ) " >
10 <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 2007 , in compliance with the
19 specifications of the Java Community Process , Sun relicensed most
20 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 >
30
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.
R ESPOSTAS 444
http://localhost/~<USUARIO>/html/public_html/mais-citacoes.html.
1 <! DOCTYPE html >

3 < head >
5 < title > Abreviaes </ title >
6 </ head >
7 < body >
8 < h1 > Abreviaes </ h1 >
9 < ul >
10 < 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 >

3 < head >
5 < title > Definies </ title >
6 </ head >
7 < body >
8 < h1 > Definies </ h1 >
9 < dl >
10 < 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 R ESPOSTAS
19 < dt > < dfn > Primeiro pau </ dfn > </ dt >
20 < dd >
21 Trave mais prxima da origem de um cruzamento .
22 </ dd >
23 </ dl >
24 </ body >
25 </ html >
Cdigo HTML 2.170: mais-definicoes.html
http://localhost/html/public_html/mais-definicoes.html.
http://localhost/~<USUARIO>/html/public_html/mais-definicoes.html.
1 <! DOCTYPE html >

3 < head >
6 </ head >
7 < body >
8 < h1 > Alteraes </ h1 >
9 <p >
10 <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 >

R ESPOSTAS 446
3 < head >

5 < title > Datas e horas </ title >
6 </ head >
7 < body >
8 < h1 > Datas e horas </ h1 >
9 < ul >
10 < li >
11 O Brasil foi pentacampeo em < time datetime = " 2002 -06 -30 " > 30 de Junho
12 de 2002 </ time >.
13 </ li >
14 < li >
15 Ele no pode esquecer o < time datetime = " 03 -08 " > Dia das mulheres </ time >.
16 </ li >
17 </ ul >
18 </ body >
19 </ html >
Cdigo HTML 2.172: mais-datas.html
http://localhost/html/public_html/mais-datas.html.
http://localhost/~<USUARIO>/html/public_html/mais-datas.html.
1 <! DOCTYPE html >

3 < head >
5 < title > Texto marcado </ title >
6 </ head >
7 < body >
8 < h1 > Texto marcado </ h1 >
9 <p >
10 < 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 1990 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 >

3 < head >
5 < title > Pontos Tursticos </ title >
6 </ head >
7 < body >
8 < h1 > Pontos Tursticos do Brasil </ h1 >
9
10 < 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 >
20 < 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 >

3 < head >
5 < title > Como instalar o seu XPTO </ title >
6 </ head >
7 < body >
8 < h1 > Como instalar o seu XPTO - K19 Eletronics </ h1 >
9
10 < ol >
11 < li >
12 Verifique se todos os acessrios esto presentes .
13 </ li >
R ESPOSTAS 448
14 < li >
15 Coloque o aparelho na horizontal sobre uma superfcie plana .
16 </ li >
17 < li >
18 Conecte o aparelho ao computador utilizando um cabo USB .
19 </ li >
20 < li >
21 Use o CD - ROM para instalao do software .
22 </ li >
23 < li >
24 Conecte o aparelho fonte de energia com um adaptador AC .
25 </ li >
26 < li >
27 Ligue o aparelho e espere o reconhecimento do computador .
28 </ li >
29 </ ol >
30 </ body >
31 </ html >
Cdigo HTML 2.175: manual-k19.html
http://localhost/html/public_html/manual-k19.html.
http://localhost/~<USUARIO>/html/public_html/manual-k19.html.
1 <! DOCTYPE html >

3 < head >
5 < title > Links </ title >
6 </ head >
7 < body >
8 < h1 > Links </ h1 >
9 < ul >
10 < 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 >

3 < head >
5 < title > Imagens </ title >
6 </ head >
7 < body >
9 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / >
10
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 >
19 K22 - Desenvolvimento Web Avanado com JSF2 , EJB3 .1 e CDI
20 </ li >
21 < li >
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 >

3 < head >
5 < title > Tabelas </ title >
6 </ head >
7 < body >
8 < table >
9 < thead >
10 < tr >
11 < th > Continente / Subcontinente </ th >
R ESPOSTAS 450
12 < th > Cidade </ th >

13 < th > Idioma </ th >
14 </ tr >
15 </ thead >
16 < tfoot >
17 < tr >
19 </ tr >
20 </ tfoot >
21 < tbody >
22 < tr >
23 < td rowspan = " 2 " > Amrica do Sul </ td >
24 < td > So Paulo </ td >
25 < td > Portugus </ td >
26 </ tr >
27 < tr >
28 < td > Cidade do Mxico </ td >
29 < td > Espanhol </ td >
30 </ tr >
31 < tr >
32 < td rowspan = " 3 " > sia </ td >
33 < td > Tquio </ td >
34 < td > Japons </ td >
35 </ tr >
36 < tr >
37 < td > Xangai </ td >
38 < td > Mandarim </ td >
39 </ tr >
40 < tr >
41 < td > Nova Dlhi </ td >
42 < td > Hindi </ td >
43 </ tr >
44 < tr >
45 < td > Amrica do Norte </ td >
46 < td > Nova Iorque </ td >
47 < td > Ingls </ td >
48 </ tr >
49 </ tbody >
50 </ table >
51 </ body >
52 </ html >
Cdigo HTML 2.178: mais-tabelas.html
http://localhost/html/public_html/mais-tabelas.html.
http://localhost/~<USUARIO>/html/public_html/mais-tabelas.html.
1 <! DOCTYPE html >

3 < head >
5 < title > Currculo </ title >
6 </ head >
450 www.k19.com.br
451 R ESPOSTAS
7 < body >

8 < h1 > Cadastro de Currculo </ h1 >
10
11 < fieldset >
12 < legend > Informaes Pessoais </ legend >
13
15 < input
16 id = " nome_id "
17 type = " text "
18 name = " nome "
19 placeholder = " Digite o seu nome "
20 required >
21 < br >
22
24 < input
25 id = " email_id "
26 type = " email "
27 name = " email "
28 placeholder = " Digite o seu email "
29 required >
30 < br >
31
32 < label for = " nascimento_id " > Data de Nascimento : </ label >
33 < input
34 id = " nascimento_id "
35 type = " date "
36 name = " nascimento "
37 required >
38 < br >
39
40 < label for = " altura_id " > Altura ( m ) : </ label >
41 < input
42 id = " altura_id "
43 type = " number "
44 name = " altura "
45 step = " 0.01 "
46 min = " 0 "
47 max = " 2 " >
48 < br >
49
50 < label for = " site_id " > Site : </ label >
51 < input
52 id = " site_id "
53 type = " url "
54 name = " site "
55 placeholder = " Facebook , Linkedin , Twitter " >
56 < br >
57
58 < label for = " estado_civil_id " > Estado Civil : </ label >
59 < select id = " estado_civil_id " name = " estado - civil " >
60 < option value = " -1 " > Selecione </ option >
61 < option value = " S " > Solteiro </ option >
62 < option value = " C " > Casado </ option >
63 < option value = " D " > Divorciado </ option >
64 < option value = " V " > Vivo </ option >
65 </ select >
66 < br >
67
68 < label > Sexo : </ label >
69 < input
70 id = " masculino_id "
71 type = " radio "
72 name = " sexo "
73 value = " masculino " >
74 < label for = " masculino_id " > Masculino </ label >
75 < input
76 id = " feminino_id "
R ESPOSTAS 452
77 type = " radio "

78 name = " sexo "
79 value = " feminino " >
80 < label for = " feminino_id " > Feminino </ label >
81 < br >
82 </ fieldset >
83
84 < fieldset >
85 < legend > Endereo </ legend >
86
87 < label for = " cep_id " > CEP : </ label >
88 < input
89 id = " cep_id "
90 type = " text "
91 name = " cep "
92 required >
93 < br >
94
95 < label for = " endereco_id " > Endereo : </ label >
96 < input
97 id = " endereco_id "
98 type = " text "
99 name = " endereco "
100 required >
101 < br >
102 </ fieldset >
103
104 < fieldset >
105 < legend > Contato </ legend >
106
107 < label for = " telefone_id " > Telefone : </ label >
108 < input
109 id = " telefone_id "
110 type = " tel "
111 name = " telefone " >
112 < br >
113
114 < label for = " celular_id " > Celular : </ label >
115 < input
116 id = " celular_id "
117 type = " tel "
118 name = " celular " >
119 < br >
120 </ fieldset >
121
122 < fieldset >
123 < legend > Conhecimentos </ legend >
124
125 < input
126 id = " html_id "
127 type = " checkbox "
128 name = " conhecimentos "
129 value = " HTML " >
130 < label for = " html_id " > HTML </ label >
131
132 < input
133 id = " css_id "
136 value = " CSS " >
137 < label for = " css_id " > CSS </ label >
138
139 < input
140 id = " js_id "
143 value = " JS " >
144 < label for = " js_id " > JavaScript </ label >
145 < br >
146
452 www.k19.com.br
453 R ESPOSTAS
147 < label for = " mais_conhecimentos_id " > Mais conhecimentos </ label >
148 < textarea
149 id = " mais_conhecimentos_id "
150 rows = " 10 "
151 cols = " 20 "
152 maxlength = " 500 " > Digite os seus conhecimentos </ textarea >
153 </ fieldset >
154
156 </ form >
157 </ body >
158 </ html >
Cdigo HTML 2.179: mais-formularios.html
http://localhost/html/public_html/mais-formularios.html.
http://localhost/~<USUARIO>/html/public_html/mais-formularios.html.
Questo 2.1
Questo 2.2
Questo 2.3
Questo 2.4
Questo 2.5
Questo 2.6
R ESPOSTAS 454
Questo 2.7
Questo 2.8
Questo 2.9
Questo 2.10
Questo 2.11
Questo 2.12
Questo 2.13
Questo 2.14
Questo 2.15
Questo 3.1
Questo 3.2
454 www.k19.com.br
455 R ESPOSTAS
Questo 3.3
Questo 3.4
Questo 3.5
Questo 3.6
Questo 3.7
Questo 3.8
Questo 3.9
Questo 3.10
Questo 3.11
Questo 3.12
R ESPOSTAS 456
Questo 3.13
Questo 3.14
Questo 3.15
Questo 3.16
Questo 3.17
No projeto javascript, adicione um arquivo chamado exibe-numeros-1-50-2x.html e outro cha-

mado exibe-numeros-1-50-2x.js.
1 <! DOCTYPE html >

3 < head >
5 < title > Exibe os nmeros de 1 at 50 duas vezes </ title >
6 < script type = " text / javascript " src = " exibe - numeros -1 -50 -2 x . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.56: exibe-numeros-1-50-2x.html
1 for ( var x = 0; x < 2; x ++) {

2 for ( var y = 1; y <= 50; 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-50-2x.html.
456 www.k19.com.br
457 R ESPOSTAS
http://localhost/~<USUARIO>/javascript/public_html/exibe-numeros-1-50-2x.html.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-complementar1.zip
No projeto javascript, adicione um arquivo chamado exibe-nome-k19.html e outro chamado exibe-

nome-k19.js.
1 <! DOCTYPE html >

3 < head >
5 < title > Exibe nome e K19 </ title >
6 < script type = " text / javascript " src = " exibe - nome - k19 . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.57: exibe-nome-k19.html
1 for ( var x = 0; x < 5; x ++) {

2 console . log ( " Rafael Cosentino " ) ;
3
4 for ( var y = 0; 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.
No projeto javascript, adicione um arquivo chamado multiplos-de-tres.html e outro chamado multiplos-

de-tres.js.
1 <! DOCTYPE html >

3 < head >
5 < title > Mltiplos de trs </ title >
6 < script type = " text / javascript " src = " multiplos - de - tres . js " > </ script >
R ESPOSTAS 458
7 </ head >

8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.58: multiplos-de-tres.html
1 for ( var x = 1; x <= 60; x ++) {

2 if ( x % 3 != 0) {
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.
No projeto javascript, adicione um arquivo chamado multiplos-de-quatro-e-sete.html e outro cha-

mado multiplos-de-quatro-e-sete.js.
1 <! DOCTYPE html >

3 < head >
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 >
10 </ html >
Cdigo HTML 4.59: multiplos-de-quatro-e-sete.html
1 for ( var x = 1; x <= 80; x ++) {

2 var resto4 = x%4;
3 var resto7 = x%7;
4
5 if ( resto4 == 0 || resto7 == 0) {
6 console . log ( " * " ) ;
7 } else {
8 console . log ( x ) ;
9 }
10 }
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.
No projeto javascript, adicione um arquivo chamado exibe-triangulo.html e outro chamado exibe-

triangulo.js.
1 <! DOCTYPE html >

3 < head >
5 < title > Exibe tringulo </ title >
6 < script type = " text / javascript " src = " exibe - triangulo . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.60: exibe-triangulo.html
1 var linha = " * " ;

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.
No projeto javascript, adicione um arquivo chamado exibe-triangulos.html e outro chamado exibe-

triangulos.js.
1 <! DOCTYPE html >
R ESPOSTAS 460

3 < head >
5 < title > Exibe tringulos </ title >
6 < script type = " text / javascript " src = " exibe - triangulos . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.61: exibe-triangulos.html
1 var linha = " * " ;

3 console . log ( linha ) ;
5 if ( resto == 0) {
6 linha = " * " ;
7 } else {
8 linha += " * " ;
9 }
10 }
Cdigo Javascript 4.141: exibe-triangulos.js
http://localhost/javascript/public_html/exibe-triangulos.html.
http://localhost/~<USUARIO>/javascript/public_html/exibe-triangulos.html.
No projeto javascript, adicione um arquivo chamado fibonnaci.html e outro chamado fibonnaci.js.
1 <! DOCTYPE html >

3 < head >
5 < title > Fibonacci </ title >
6 < script type = " text / javascript " src = " fibonnaci . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.62: fibonnaci.html
1 var penultimo = 0;
2 var ultimo = 1;
3
4 console . log ( penultimo ) ;
5 console . log ( ultimo ) ;
6
460 www.k19.com.br
461 R ESPOSTAS
8 var proximo = penultimo + ultimo ;

9 console . log ( proximo ) ;
10
11 penultimo = ultimo ;
12 ultimo = proximo ;
13 }
Cdigo Javascript 4.142: fibonnaci.js
http://localhost/javascript/public_html/fibonnaci.html.
http://localhost/~<USUARIO>/javascript/public_html/fibonnaci.html.
No projeto javascript, adicione um arquivo chamado embaralha.html e outro chamado embara-

lha.js.
1 <! DOCTYPE html >

3 < head >
5 < title > Embaralha </ title >
6 < script type = " text / javascript " src = " embaralha . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.63: embaralha.html
1 var array = new Array (10) ;

2
4 array [ i ] = i ;
5 }
6
8 console . log ( array [ i ]) ;
9 }
10
11 for ( var i = 0; i < 10; i ++) {
12 var posicao1 = Math . floor ( Math . random () * 10) ;
13 var posicao2 = Math . floor ( Math . random () * 10) ;
14 var auxiliar = array [ posicao1 ];
15
16 array [ posicao1 ] = array [ posicao2 ];
17 array [ posicao2 ] = auxiliar ;
18 }
19
20 console . log ( " --------------------" ) ;
21
R ESPOSTAS 462
24 }
Cdigo Javascript 4.143: embaralha.js
http://localhost/javascript/public_html/embaralha.html.
http://localhost/~<USUARIO>/javascript/public_html/embaralha.html.
No projeto javascript, adicione um arquivo chamado ordena.html e outro chamado ordena.js.
1 <! DOCTYPE html >

3 < head >
5 < title > Ordena </ title >
6 < script type = " text / javascript " src = " ordena . js " > </ script >
7 </ head >
8 < body >
9 </ body >
10 </ html >
Cdigo HTML 4.64: ordena.html
1 var array = new Array (10) ;

2
4 array [ i ] = Math . floor ( Math . random () * 10) ;
5 }
6
9 }
10
11 array . sort () ;
12
13 console . log ( " --------------------" ) ;
14
17 }
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
Questo 4.2
Questo 4.3
Questo 4.4
Questo 4.5
Questo 4.6
Questo 4.7
Questo 4.8
Questo 4.9
Questo 4.10
R ESPOSTAS 464
Questo 4.11
Questo 5.1
Questo 5.2
Questo 5.3
a, d
Questo 5.4
Questo 5.5
Questo 5.6
todas as alternativas esto corretas
Questo 5.7
464 www.k19.com.br

k19 k02 Desenvolvimento Web Com HTML Css e Javascript

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

k19 k02 Desenvolvimento Web Com HTML Css e Javascript

Загружено:

Авторское право:

Доступные форматы

TREINAMENTOS

Desenvolvimento Web com

Esta apostila contm:

289 exerccios de fixao.

2.25 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

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

4.11 Funes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

O principal objetivo da K19 oferecer treinamentos de mxima qualidade e relacionados s prin-

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

Sites e Aplicaes Web

Independentemente do critrio de classificao utilizado, os tpicos discutidos nesse treina-

Figura 1.1: Sites

Figura 1.2: Aplicaes Web

Outro problema de compatibilidade importante causado pela grande variedade de dispositivos

Figura 1.4: Design Responsivo

Web Servers e HTTP

Os sites e as aplicaes web so implantados em computadores conectados Internet ou a uma

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

Figura 1.7: Interao entre os navegadores e os Web Servers

Os dispositivos conectados a uma rede so identificados atravs de endereos formados por

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

Os domnios so controlados por organizaes geralmente vinculadas ao governo. Por exemplo,

DNS (Domain Name System)

Figura 1.16: Interao entre os navegadores e os servidores DNS

OpenDNS (208.67.222.222 e 208.67.220.220)

SEO (Search Engine Optimization)

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

Figura 1.17: Robs

No desenvolvimento de um site, podemos aplicar tcnicas que facilitam e melhoram a anlise

Figura 1.18: Diagrama geral da arquitetura web

Ativando o IIS e ASP Classic no Windows 7

No menu Iniciar, clique em Painel de Controle.

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

Abra um terminal e digite os seguintes comandos.

sudo apt - get update

sudo apt - get install apache2