Aplicações para WEB

Transcrição

Aplicações para WEB

Centro Federal de Educação Tecnológica de Minas Gerais
Técnico em Informática
Professor: Marcelo Corrêa Mussel
Varginha
2016
.
Apostila de Desenvolvimento de Aplicações Web
Prof. Marcelo C. Mussel
Sumário
1 HTML
1.1 Introdução . . . . . . . . . . . . . . . . . .
1.2 Sintaxe HTML . . . . . . . . . . . . . . .
1.3 Elementos HTML . . . . . . . . . . . . . .
1.3.1 html . . . . . . . . . . . . . . . . .
1.3.2 head . . . . . . . . . . . . . . . . .
1.3.3 title . . . . . . . . . . . . . . . . .
1.3.4 meta . . . . . . . . . . . . . . . . .
1.3.5 body . . . . . . . . . . . . . . . . .
1.3.6 h1-h6 . . . . . . . . . . . . . . . .
1.3.7 p . . . . . . . . . . . . . . . . . . .
1.3.8 a . . . . . . . . . . . . . . . . . . .
1.3.9 ul e li . . . . . . . . . . . . . . . .
1.3.10 ol e li . . . . . . . . . . . . . . . .
1.3.11 dl, dt e dd . . . . . . . . . . . . . .
1.3.12 div . . . . . . . . . . . . . . . . . .
1.3.13 span . . . . . . . . . . . . . . . . .
1.3.14 b e strong . . . . . . . . . . . . . .
1.3.15 i e em . . . . . . . . . . . . . . . .
1.3.16 small . . . . . . . . . . . . . . . . .
1.3.17 code . . . . . . . . . . . . . . . . .
1.3.18 hr . . . . . . . . . . . . . . . . . .
1.3.19 br . . . . . . . . . . . . . . . . . .
1.3.20 img . . . . . . . . . . . . . . . . .
1.3.21 article . . . . . . . . . . . . . . . .
1.3.22 section . . . . . . . . . . . . . . . .
1.3.23 header . . . . . . . . . . . . . . . .
1.3.24 footer . . . . . . . . . . . . . . . .
1.3.25 aside . . . . . . . . . . . . . . . . .
1.3.26 nav . . . . . . . . . . . . . . . . . .
1.3.27 main . . . . . . . . . . . . . . . . .
1.3.28 audio . . . . . . . . . . . . . . . .
1.3.29 video . . . . . . . . . . . . . . . . .
1.4 Favicon - Como colocar imagem no title .
1.5 Table . . . . . . . . . . . . . . . . . . . . .
1.5.1 Inserindo um título na tabela . . .
1.5.2 Caption . . . . . . . . . . . . . . .
1.5.3 Criando linhas na tabela - tr . . .
1.5.4 Criando colunas - th, td . . . . . .
1.5.5 Cabeçalho e Rodapé - thead, tfoot
1.5.6 Tag tbody . . . . . . . . . . . . . .
1.5.7 Exemplo . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
6
6
7
9
9
9
9
9
9
9
9
9
9
10
10
11
11
12
12
12
12
13
13
13
14
14
14
15
15
15
16
16
16
16
17
17
17
17
17
17
18
18
2 CSS
2.1 Definição . . . . . . . . . . . . . . . . . . .
2.2 Regra CSS . . . . . . . . . . . . . . . . . . .
2.3 Modelo de formatação CSS . . . . . . . . .
2.3.1 Box Model CSS . . . . . . . . . . . .
2.3.2 Box Model CSS modificado . . . . .
2.3.3 Propriedades CSS para o Box Model
2.4 Categorias de valores CSS . . . . . . . . . .
2.4.1 Palavra-chave . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
20
20
20
21
22
23
24
27
27
2.4.2 Número . . . . . . . . . . . . . . .
2.4.3 Número não negativo . . . . . . . .
2.4.4 Número com unidade de medida .
2.4.5 String . . . . . . . . . . . . . . . .
2.4.6 Notação funcional . . . . . . . . .
2.4.7 Casos especiais . . . . . . . . . . .
2.5 Cores CSS . . . . . . . . . . . . . . . . . .
2.6 Vinculando folhas de estilo a documentos
2.6.1 Estilos inline . . . . . . . . . . . .
2.6.2 Estilos incorporados . . . . . . . .
2.6.3 Estilos externos . . . . . . . . . . .
2.7 Exemplos de utilização das CSS3 . . . . .
2.7.1 Menu Drop-Down . . . . . . . . . .
2.7.2 Abas . . . . . . . . . . . . . . . . .
2.7.3 Botões . . . . . . . . . . . . . . . .
2.8 DOM e seletores CSS . . . . . . . . . . . .
2.8.1 DOM . . . . . . . . . . . . . . . .
2.8.2 Árvore do DOM . . . . . . . . . .
2.8.3 Seletores CSS . . . . . . . . . . . .
2.9 Flutuando elementos (floats) . . . . . . . .
2.9.1 Como isto é feito ? . . . . . . . . .
2.9.2 Outro exemplo : colunas . . . . . .
2.9.3 A propriedade clear . . . . . . . .
2.10 Posicionando elementos . . . . . . . . . .
2.10.1 O princípio de posicionamento CSS
2.10.2 Posicionamento absoluto . . . . . .
2.10.3 Posicionamento relativo . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
27
27
27
29
29
29
30
31
31
31
31
32
32
35
37
39
39
39
42
46
46
46
47
48
48
48
49
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
51
52
54
56
58
4 Javascript
4.1 Variáveis . . . . . . . . . . . . . . . . . . . .
4.2 Tipos . . . . . . . . . . . . . . . . . . . . .
4.3 Iteração . . . . . . . . . . . . . . . . . . . .
4.4 Interatividade na Web . . . . . . . . . . . .
4.5 Validação na busca com JavaScript . . . . .
4.6 Funções temporais . . . . . . . . . . . . . .
4.6.1 Exemplo: Banner rotativo . . . . . .
4.6.2 Desafio 1 . . . . . . . . . . . . . . .
4.6.3 Proposta de solução para o desafio 1
4.6.4 Desafio 2 . . . . . . . . . . . . . . .
4.6.5 Proposta de solução para o desafio 1
4.7 jQuery . . . . . . . . . . . . . . . . . . . . .
4.7.1 Características de execução . . . . .
4.7.2 jQuery Selectors . . . . . . . . . . .
4.7.3 Filtrando elementos com jQuery . .
4.7.4 Efeitos de exibir e esconder conteúdo
4.7.5 Utilitário de iteração do jQuery . . .
4.7.6 Executar somente após carregar . . .
4.8 Exemplos de utilização jQuery . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
62
62
62
63
63
65
67
67
68
68
69
69
71
71
72
74
76
77
77
78
3 Construindo um exemplo
3.1 Arquivo: index.html . .
3.2 Arquivo: sobre.html . .
3.3 Arquivo: contato.html .
3.4 Arquivo: layout.css . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
4.8.1
4.8.2
4.8.3
Exemplo 1 - carregamento de páginas dinâmico . . . . . . . . . . . . . . . . . .
Exemplo 2 - janela modal simples . . . . . . . . . . . . . . . . . . . . . . . . . .
Exemplo 3 - método load() . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5 Bibliografia
78
81
83
89
.
1
HTML
1.1
Introdução
HTML é a sigla em inglês para HyperText Markup Language, que significa linguagem para marcação de hipertexto.
Portanto, HTML não deve ser equivocadamente chamado de linguagem de programação.
Hipertexto é todo texto inserido em um documento para a web e que tem como principal característica
a possibilidade de se interligar a outros documentos da web através da utilização de links.
Quando a HTML foi inventada, em 1992 por Tim Berners-Lee, os conteúdos eram essencialmente
hipertextos, com a hipermídia (imagens, vídeos, gráficos, sons e conteúdos não textuais) surgindo posteriormente. Assim, hoje, a HTML é uma linguagem para marcação de conteúdos web em geral.
Desde a sua invenção a HTML evoluiu por oito versões que são:
• HTML
• HTML+
• HTML 2.0
• HTML 3.0
• HTML 3.2
• HTML 4.0
• HTML 4.01
• HTML5
Tecnicamente, o W3C considera oficialmente somente as versões HTML
2.0, HTML 3.2, HTML 4.0, HTML 4.01 e HTML5. As versões HTML e
HTML+ são anteriores à criação do W3c e a versão 3.0 não chegou
a ser lançada oficialmente, transformando-se na versão 3.2.
O World Wide Web Consortium, ou W3C, é um consórcio internacional com quase 400 membros,
entre eles, empresas, órgãos governamentais e organizações independentes que têm por objetivo definir
padrões destinados à criação de conteúdos para a web.
1.2
Sintaxe HTML
Para iniciar a exploração do HTML, vamos imaginar o seguinte caso: o navegador realizou uma
requisição e recebeu como corpo da resposta o seguinte conteúdo:
Centro Federal de Educação Tecnológica
Bem-vindo ao CEFET-MG unidade Varginha.
Confira os cursos oferecidos em nossa unidade:
Técnico em Informática.
Técnico em Edificações.
Técnico em Mecatrônica.
Engenharia Civil.
Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamos reproduzir esse conteúdo em um arquivo texto comum, que pode ser criado com qualquer editor de texto
puro. Salve o arquivo como index.html e abra-o a partir do navegador à sua escolha.
Figura 1: Documento sem formatação (marcação HTML)
O resultado não foi o esperado. Apesar do navegador ser capaz de exibir texto puro, algumas regras
devem ser seguidas caso desejemos que esse texto seja exibido com alguma formatação, para facilitar
a leitura pelo usuário final.
Para que possamos exibir as informações desejadas com a formatação, é necessário que cada trecho
de texto tenha uma marcação indicando qual é o significado dele. Essa marcação também influencia
a maneira com que cada trecho do texto será exibido. A seguir é listado o texto com uma marcação
correta:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<! D O C T Y P E html >
< html lang = " pt - br " >
< head >
< title > Centro F e d e r a l de E d u c a ç ã o Tecnológica </ title >
< meta c h a r s e t=" utf -8 " >
</ head >
< body >
<h1 > Centro F e d e r a l de E d u c a ç ã o Tecnológica </ h1 >
<h2 > Bem - vindo ao CEFET - MG u n i d a d e V a r g i n h a . </ h2 >
<p > C o n f i r a os cursos o f e r e c i d o s em nossa u n i d a d e : </p >
<ul >
<li > T é c n i c o em I n f o r m á t i c a . </ li >
<li > T é c n i c o em E d i f i c a ç õ e s . </ li >
<li > T é c n i c o em M e c a t r ô n i c a . </ li >
<li > E n g e n h a r i a Civil . </ li >
</ ul >
</ body >
</ html >
Reproduza o código anterior em um novo arquivo de texto puro e salve-o como index-2.html.
Figura 2: Documento formatado (com marcação HTML)
Código comentado:
Linha
Linha 1
Linhas 2 e 18
Linhas 3 e 6
Linha 4
Linha 5
Linhas 7 e 17
Linhas 8 e 9
Linha 10
Linhas 11 a 16
Descrição
Declaração do tipo de documento (doctype). Essa linha
informa ao navegador que a marcação a seguir é do tipo HTML.
A declaração de DOCTYPE não é uma tag HTML.
Tags de abertura e fechamento html. Esse é o chamado
elemento raiz do documento,e é quem engloba toda a marcação HTML. Na tag
de abertura desse elemento, linha 2, existe a declaração lang=”pt-br”.
Isso é o que denominamos par atributo/valor sendo lang o atributo e pt-br o seu valor.
Essa declaração é muito importante para fornecer informação do idioma em que
a página foi escrita para tecnologias assistivas, tal como um leitor de tela que, sabendo
o idioma, poderá ler a tela com a pronúncia adequada.
Tags de abertura e fechamento do elemento head.
Essa é a chamada seção HEAD do documento, e, dentro dela, são admitidos
vários outros elementos HTML, entre eles, no mínimo os dois elementos
conforme descritos a seguir.
Tags de abertura e fechamento do elemento title. Ele
se destina a ter como conteúdo o título do documento, importante
para que mecanismos de busca e indexação, encontrem-na.
Tag meta destina-se a fornecer informações adicionais sobre
o documento. No nosso exemplo, indicamos a codificação utf-8,
e essa declaração é de uso obrigatório na seção HEAD do documento.
Tags de abertura e fechamento do elemento body.
Tudo o que estiver nessa seção será renderizado pelo navegador
e mostrado para o usuário.
As tags de heading são tags de conteúdo e vão de <h1> a <h6>,
seguindo a ordem de importância, sendo <h1> o título principal, o mais importante,
e <h6> o título de menor importância. Utilizamos, por exemplo, a tag <h1> para o
nome, título principal da página, e a tag <h2> como subtítulo ou como título de
seções dentro do documento. A ordem de importância, além de influenciar no tamanho
padrão de exibição do texto, tem impacto nas ferramentas que processam HTML.
As ferramentas de indexação de conteúdo para buscas, como o Google, Bing ou Yahoo!
levam em consideração essa ordem e relevância. Os navegadores especiais para
acessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar
seu conteúdo e facilitar a navegação do usuário pelo documento.
marcação mais indicada para textos comuns é a tag de parágrafo.
Se você tiver vários parágrafos de texto, use várias dessas tags <p> para separá-los.
Criação de uma Lista não Numerada
1.3
1.3.1
Elementos HTML
html
Ele é o elemento raiz do documento que engloba as seções HEAD e BODY.
1.3.2
head
Ele se destina a marcar a seção cabeçalho do documento.
Veremos mais adiante que é nesta seção que definiremos, ou indicaremos o caminho, dos códigos
JavaScript e CSS.
1.3.3
title
Se destina a marcar o título do documento.
1.3.4
meta
Se destina a fornecer informações adicionais sobre o documento, tais como a codificação de caracteres, o nome do autor e outras.
1.3.5
body
Tudo que está dentro dessa seção será renderizado pelo agente de usuário (por exemplo: navegador).
1.3.6
h1-h6
Eles são do tipo nível de bloco e destinam-se a marcaros textos de títulos e subtítulos dos conteúdos
do documento.
1.3.7
p
Ele é do tipo nível de bloco e se destina a marcar parágrafos.
1.3.8
a
Esse elemento é do tipo inline e se destina a marcar links.
Exemplo:
1
<a href = " http :// v a r g i n h a. c e f e t m g. br " > CEFET - MG U n i d a d e Varginha </a >
Essa marcação cria um link para o site da Unidade Varginha do CEFET-MG. O atributo href
possui o valor com o endereço que será carregado quando o usuário clicar no link.
1.3.9
ul e li
Esses elementos são do tipo nível de bloco e se destinam a marcar listas que são chamadas de listas
não ordenadas, ou não numeradas.
Exemplo:
1
2
3
4
5
6
<ul >
<li > Carros </ li >
<li > Cores </ li >
<li > Frutas </ li >
<li > Paises </ li >
</ ul >
Essa marcação cria uma lista com quatro itens. No início de cada item da lista é renderizado, por
padrão, um círculo (bolinha cheia) que se denomina bullet.
Na sintaxe para marcação de listas, o elemento ul é um container para os elementos li que marcam
cada item da lista.
É possível criar listas aninhadas, nas quais um item da lista pode conter subitens e estes seus
subitens e assim indefinidamente em diversos níveis de aninhamento.
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul >
<li > Carros
<ul >
<li > Honda </ li >
<li > Audi </ li >
<li > Ferrari </ li >
</ ul >
</ li >
<li > Cores </ li >
<li > Frutas
<ul >
<li > Abacate </ li >
<li > Laranja </ li >
<ul >
<li > Lima </ li >
<li > Seleta </ li >
<li > Baía </ li >
</ ul >
<li > Uva </ li >
</ ul >
</ li >
<li > Paises </ li >
</ ul >
1.3.10
ol e li
ordenadas ou numeradas. Notar que o container para listas ordenadas é ol e a marcação é semelhante
à mostrada anteriormente. A diferença é que, em lugar dos bullets gráficos, as listas ordenadas são
renderizadas com números ou opcionalmente com outros tipos de marcador de ordenação.
1.3.11
dl, dt e dd
de definição.
Exemplo:
1
2
3
4
5
6
7
8
9
10
<dl >
<dt > Heavy Metal </ dt >
<dd > Iron Maiden </ dd >
<dd > Black Sabbath </ dd >
<dd > Metallica </ dd >
<dt > Progressivo </ dt >
<dd > Jethro Tull </ dd >
<dd > Pink Floyd </ dd >
<dd > Rush </ dd >
<dt > Blues </ dt >
11
12
13
14
<dd > B . B . King </ dd >
<dd > Robert Johnson </ dd >
<dd > Allman Brothers </ dd >
</ dl >
O container geral de uma lista de definição é o elemento dl.
Essa marcação cria uma lista de definição com três itens chamados de termos de definição (elementos
dt) cada um deles com um ou mais termos descritivos (elementos dd).
1.3.12
div
Esse é um elemento do tipo nível de bloco e se destina a criar um container geral para outros
elementos. É um elemento sem destinação específica, ou seja, diferentemente dos elementos h1 e p, por
exemplo, que se destinam a marcar cabeçalhos de nível 1 e parágrafos respectivamente, esse elemento
pode conter (marcar) qualquer outro elemento em qualquer quantidade e até mesmo outros elementos
div.
Elementos com essas características são chamados de elementos sem valor semântico. Semântica
é um aspecto de alta relevância em marcação HTML e diz respeito ao correto uso do elemento para
marcar conteúdo.
Exemplo:
1
2
3
4
< div >
<h3 > Informativo </ h3 >
<p > Este site destina - se a f o r n e c e r d e t a l h e s sobre .... </p >
</ div >
Nesse exemplo, a presença do container div em nada altera a renderização do cabeçalho de nível 3 e
do parágrafo. Para efeito de renderização é como se o elemento div não estivesse presente na marcação.
Então para que serve o div ? Conforme veremos adiante, o div poderá servir, entre outras inúmeras
coisas, para determinar a região do documento que receberá uma formatação específica com o uso da
CSS (bordas, fundo colorido ...).
1.3.13
span
Esse é um elemento do tipo inline e destina-se a criar um container geral para outros elementos
inline. É um elemento sem destinação específica e pode conter (marcar) qualquer outro elemento inline
em qualquer quantidade e até mesmo outros elementos span.
Tal como o elemento div, esse elemento é sem valor semântico. A diferença deste para o elemento
div é que se trata de um elemento inline enquanto div é um elemento nível de bloco.
Exemplo:
1
<p > Texto de um p a r a g r a f o com < span > palavra </ span > m a r c a d a com o e l e m e n t o
SPAN </ p >
Nesse exemplo a presença do container span em nada altera a renderização do texto palavra contido
no parágrafo. Para efeito de renderização é como se o elemento span não estivesse presente na marcação.
Então para que serve span? Conforme veremos adiante, o span poderá servir, entre outras inúmeras
coisas, como uma espécie de caixa para que seu conteúdo seja renderizado em uma cor diferente, ou
com um tamanho de letra diferente. Isso deverá ser feito com o uso das CSS.
1.3.14
b e strong
Estes elementos são do tipo inline e causam o mesmo efeito de renderização, mas têm valor semântico diferente. Quando aplicados a um pequeno trecho de texto ou palavra, ambos causam renderização
em negrito.
Use o elemento b para dar aspecto visual negrito e use o elemento strong para dar forte ênfase.
Para entender a diferença, suponha um internauta com visão normal e um internauta deficiente visual navegando com um leitor de tela. A marcação com o elemento b somente terá efeito (negrito)
para o internauta com visão normal e a marcação com elemento strong terá efeito (negrito e forte
ênfase) para os dois, pois além de negrito, o leitor de tela lerá o conteúdo de strong com voz em forte
ênfase, e o internauta deficiente visual saberá que aquele trecho foi destacado pelo autor do documento.
Exemplo:
1
2
<p > Texto u t i l i z a n d o <b > p a l a v r a em negrito </ b > m a r c a d a com o e l e m e n t o B </p >
<p > Texto u t i l i z a n d o < strong > p a l a v r a com forte enfase </ strong > m a r c a d a com o
e l e m e n t o STRONG </p >
1.3.15
i e em
Esses elementos são do tipo inline e causam o mesmo efeito de renderização, mas têm valor semântico diferente. Quando aplicados a um pequeno trecho de texto ou palavra, ambos causam renderização
em itálico.
Use o elemento i para dar aspecto visual itálico às letras e use o elemento em para dar ênfase.A
justificativa de uso é semelhante àquela descrita para os elementos b e strong no item anterior.
Exemplo:
1
2
<p > Texto u t i l i z a n d o <i > p a l a v r a em italico </ i > m a r c a d a com o e l e m e n t o I </p >
<p > texto u t i l i z a n d o <em > p a l a v r a com enfase </ em > m a r c a d a com o e l e m e n t o EM </p
>
1.3.16
small
Esse é um elemento do tipo inline e se destina a marcar pequenos trechos de texto. A renderização
de textos marcados com esse elemento é feita com tamanho de fonte menor do que o do texto no qual
foram marcados. Notas sobre direitos autorais no rodapé do site e pequenas notas de advertência são
conteúdos para se marcar com o elemento small.
Exemplo:
1
2
3
4
5
6
7
<h3 > V a l o r e s de diarias </ h3 >
<dl >
<dt > Quarto de solteiro </ dt >
<dd > R$320 ,00 < small > cafe da manha incluso </ small > </ dd >
<dt > Quarto de casal </ dt >
<dd > R$490 ,00 < small > cafe da manha incluso </ small > </ dd >
</ dl >
1.3.17
code
Esse é um elemento do tipo inline e se destina a marcar trechos de código de computador ou qualquer string que um computador reconheça. Nomes de arquivo, nome de um programa de computador,
nome de um elemento HTML, trechos de código tais como mostrados nos exemplos são conteúdos para
se marcar com o elemento code. A renderização de textos marcados com esse elemento normalmente é
feita com tipo de fonte monoespaçada, diferente da fonte do texto no qual foram marcados.
Exemplo:
1
<p > Os e l e m e n t o s < code > div </ code > e < code > span </ code > da HTML nao tem valor
s e m a n t i c o . </ p >
1.3.18
hr
Esse elemento é do tipo nível de bloco e destina-se a criar uma linha reta horizontal de 1px. Trata-se
de um elemento vazio, isto é, existe apenas sua tag de abertura <hr>. A simples presença da tag de
abertura é suficiente para criar uma linha horizontal.
Exemplo:
1
2
3
<p > Trecho de um texto qualquer </ p >
<hr > <! - - Cria uma linha h o r i z o n t a l entre os p a r a g r a f o s -->
<p > Trecho de outro texto qualquer </ p >
OBS: As tags <!–
navegador.
1.3.19
–> criam um comentário no documento. Não são renderizadas pelo
br
Esse é um elemento vazio e existe apenas sua tag de abertura <br> e destina-se a criar uma quebra
de linha. Múltiplos elementos br criam múltiplas quebras de linha. A simples presença da tag de
abertura é suficiente para criar uma quebra de linha.
Exemplo:
1
2
3
4
<p > P r i m e i r o Texto </ p >
<p > S e g u n d o Texto </ p >
<br > <br > <! - - cria duas q u e b r a s de linha a d i c i o n a i s entre os p a r a g r a f o s
-->
<p > T e r c e i r o Texto </ p >
Não existe um elemento próprio para criar espaçamentos entre palavras (ou letras) de um texto.
Existe o que chamamos de uma entidade HTML (caractere codificado) para obter tal efeito. Tratam-se
das entidades   e   que, quando colocadas entre palavras (ou letras) de um texto, criam
um espaço em branco.
Exemplo:
1
2
<! - - Insere quatro e s p a c o s em branco entre de e um -->
<p > Texto de & nbsp ;& nbsp ;& nbsp ;& nbsp ; um paragrafo </ p >
ou
1
2
<! - - Insere quatro e s p a c o s em branco entre de e um -->
<p > Texto de & # 1 6 0 ; & # 1 6 0 ; & # 1 6 0 ; & # 1 6 0 ; um paragrafo </ p >
1.3.20
img
Esse é um elemento inline e vazio e destina-se a inserir uma imagem no documento. O uso desse
elemento exige no mínimo a inserção de dois atributos.
Exemplo:
1
< img src = " imagem . jpg " alt = " imagem de uma p a i s a g e m q u a l q u e r" >
Esse exemplo insere uma imagem e o atributo src recebe como valor o endereço onde se encontra a
imagem, e o atributo alt fornece uma descrição sumária da imagem. A descrição destina-se a ser lida
pelos leitores de tela e outros softwares assistivos. Notar que até o leitor, mesmo sem ver a renderização,
é capaz de fazer uma ideia de como seja a imagem.
1.3.21
article
Esse é um elemento do tipo nível de bloco e destina-se a marcar conteúdos que possam ser distribuídos, reutilizados e entendidos isoladamente, como um post em um fórum, um comentário em blog,
um widget interativo ou, finalmente, qualquer conteúdo independente de um documento.
Exemplo:
1
2
3
4
5
< article >
<h1 > C o m p u t a d o r Pessoal </ h1 >
<p > Um c o m p u t a d o r p e s s o a l ou PC ( P e r s o n a l C o m p u t e r) refere - se a um
c o m p u t a d o r de p e q u e n o porte e baixo custo ... </p >
<p > C o n t i n u a o texto em outro p a r a g r a f o .... </p >
</ article >
1.3.22
section
Esse é um elemento do tipo nível de bloco e destina-se a criar um container genérico para conteúdos. Se houver necessidade de um container somente para fins de aplicação de regras de estilo, use o
elemento div e não section. Use section de forma geral, quando o uso de article ou de outro elemento
não for apropriado.
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
< section >
<h1 > E s t a c a o de trabalho </ h1 >
< article >
<h2 > Computador </ h2 >
<p > O c o m p u t a d o r ..... </p >
</ article >
< article >
<h2 > Impressora </ h2 >
<p > A i m p r e s s o r a ..... </p >
</ article >
</ section >
1.3.23
header
Esse é um elemento do tipo nível de bloco e destina-se a marcar conteúdos introdutórios e de
auxílio à navegação. Em geral, esses elementos contêm um cabeçalho dos níveis h1 a h6 e podem incluir também tabela de conteúdo (índice), formulário de busca, informações complementares e logotipo.
Exemplo:
1
2
3
4
5
6
7
8
< article >
< header >
<p > P u b l i c a d o em : 01/02/2016 </ p >
</ header >
</ article >
1.3.24
footer
Esse é um elemento do tipo nível de bloco e destina-se a marcar conteúdos de rodapé. Em geral
esses elementos contêm informações sobre quem escreveu o conteúdo, links para conteúdos relacionados
e informações sobre direitos autorais.
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
< article >
< header >
<p > P u b l i c a d o em : 01/02/2016 </ p >
</ header >
< footer >
<p > C o p y r i g h t 2016 - Todos os d i r e i t o s reservados </ p >
</ footer >
</ article >
1.3.25
aside
Esse é um elemento do tipo nível de bloco e destina-se a marcar conteúdo relacionado a outro
conteúdo. Em geral, esses elementos são usados para marcar barras laterais de conteúdos, blocos de
conteúdos relacionados a outro conteúdo, mas visualmente separados.
Existem dois contextos distintos de uso desse elemento. Quando dentro de um elemento article,
seu conteúdo deve estar relacionado ao conteúdo daquele elemento. Quando fora do elemento article,
seu conteúdo deve estar relacionado ao conteúdo do site ou da página, como um banner de propaganda
ou links de navegação.
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
< article >
< header >
<p > P u b l i c a d o em : 01/02/2016 </ p >
</ header >
< aside > <! - - Dentro de a r t i c l e -->
<! - - C o n t e u d o r e l a c i o n a d o a m a t e r i a c o m p u t a d o r p e s s o a l -->
</ aside >
</ article >
12
13
14
15
< aside > <! - - Fora de a r t i c l e -->
<! - - C o n t e u d o r e l a c i o n a d o a pagina que contem a m a t e r i a C o m pu t a d o r
P e s s o a l -->
</ aside >
1.3.26
nav
Esse é um elemento do tipo nível de bloco e destina-se a marcar o mecanismo principal de navegação da página, contendo links para outras páginas ou para partes da mesma página.
Existem dois contextos distintos de uso desse elemento. Quando dentro de um elemento article,
seu conteúdo deve estar relacionado ao conteúdo daquele elemento. Quando fora do elemento article,
seu conteúdo deve estar relacionado ao conteúdo do site ou da página, como um banner de propaganda
ou links de navegação.
Exemplo:
1
2
3
4
5
6
7
8
< nav >
<ul >
<li > <a
<li > <a
<li > <a
<li > <a
</ ul >
</ nav >
1.3.27
href = " / " > Home </ a > </ li >
href = " / h i s t o r i a. html " > Historia </ a > </ li >
href = " / a r t i g o s. html " > Artigos </a > </ li >
href = " c o n t a t o. html " > Contato </ a > </ li >
main
Esse é um elemento do tipo de nível de bloco e destina-se a marcar a seção do documento que
contém o assunto principal da página. Não devem ser inclusos dentro desse elemento conteúdos tais
como o topo da página, o rodapé da página e os links da navegação.
1.3.28
audio
Esse é um elemento do tipo nível de bloco e destina-se a inserir um som ou stream de áudio.
Exemplo:
1
2
3
4
5
6
7
< audio controls >
< source src = " som . ogg" type =" audio / ogg" >
< source src = " som . mp3" type =" audio / mpeg " >
< source src = " som . wav" type =" audio / wave " >
<p > Seu n a v e g a d o r nao s u p o r t a o e l e m e n t o audio da HTML5 . <br >
Faca <a href =" som. zip " > d o w n l o a d de som . zip </a > </p >
</ audio >
1.3.29
video
Esse é um elemento do tipo nível de bloco e destina-se a inserir um vídeo.
Exemplo:
1
2
3
4
5
6
7
8
< video controls >
< source src = " video . ogv " type = " video / ogg " >
< source src = " video . mp4 " type = " video / mp4 " >
< source src = " video . webm " type = " video / webm " >
<! - - Codigo ( X ) HTML para i n s e r c a o de video com flash -->
<p > Seu n a v e g a d o r nao s u p o r t a o e l e m e n t o video da HTML5 . <br >
Faca <a href = " video . zip " > d o w n l o a d do video </a > </ p >
</ video >
1.4
Favicon - Como colocar imagem no title
• Acesse o site http://tools.dynamicdrive.com/favicon/ (gerador de favicon), escolha o tamanho
32x32 ou 48x48, clique em Selecionar Arquivo, selecione e clique em Creat Icon, clique em Download FavIcon e pronto, só salvar.
• E insira o seguinte código antes da tag </head>
1
< link rel = " s h o r t c u t icon " href = " f a v i c o n. ico " >
1.5
Table
Toda tabela deve ser iniciada com o elemento básico de abertura e fechamento chamado table.
OBS:No HTML5 não precisamos fechar as tags: <tbody>, <thead>, <tfoot>, <tr>, <th>,
<td>, visto a seguir.
1.5.1
Inserindo um título na tabela
A opção summary está obsoleta, portante não devemos utilizar.
Obs.: Ela está obsoleta em XHTML1.1, porém no HTML5 é possível usá-la com algumas restrições.
O W3C indica utilizar apenas o caption, descrito a seguir.
1.5.2
Caption
Esse elemento é responsável pelo título/legenda da tabela. É ela que vai apresentar o que a tabela
tem que transmitir para o usuário.
1.5.3
Criando linhas na tabela - tr
Para criar as linhas na tabela utilizamos o elemento <tr>. Cada linha da tabela precisa ser criada,
porém, cada linha pode ter muitas colunas. Todas as linhas abertas com o elemento <tr> devem ser
fechadas com </tr>.
OBS: Ao criar apenas linha(s) sem coluna(s) não aparecerá nada na página.
1.5.4
Criando colunas - th, td
Para criar colunas em uma linha podemos utilizar 2 (dois) elementos, são eles: th e td.
Mas quando utilizar o elemento TH e/ou TD?
A principal diferença entre estes elementos é a seguinte: Geralmente as colunas da primeira linha e
última linha utilizamos as tags TH, isso devido ao fato que estas tags deixam o conteúdo em negrito.
A primeira linha e a última são marcadas pelos elementos THEAD(cabeçalho) e TFOOT(rodapé), respectivamente. Essa é a principal diferença entre elas. Serve como diferenciação do resto do conteúdo
da tabela, onde utilizamos os elementos TD.
1.5.5
Cabeçalho e Rodapé - thead, tfoot
Um conceito novo é a utilização de cabeçalho e rodapé na tabela. Essas tags devem ser utilizadas
em conjunto com a tag TH para deixar as letras destacadas.
thead: Esse elemento é extremamente importante. Ele é o cabeçalho da tabela. É ele que vai
mostrar o que a coluna ou linha tem que apresentar ao usuário. Você deve criar cada linha com tr e
th para as células dentro.
tfoot: Usado bastante em tabelas grandes, essa tag deve conter as mesmas informações do thead,
assim o usuário, ao chegar no final, não se perderá com as informações.
Obs: Ela não precisa ser o último elemento dentro do elemento ”table”, tal como seu nome indica,
mas no entanto deve ser colocado logo após o thead.
Mas porque inserir um rodapé na tabela? Ao fazer uma tabela dinâmica (montada automaticamente com dados provenientes de uma base de dados) não sabemos quantas linhas essa tabela terá.
Ok, mas no que isso implicará? O usuário ao navegar em um site com uma tabela gigantesca terá que
voltar sempre ao topo do site para visualizar qual é o cabeçalho correspondente a coluna que ele está
visualizando. Inserindo um rodapé ele pode recorrer também ao rodapé.
1.5.6
Tag tbody
Nesse novo conceito de tabela utilizamos um elemento específico para o corpo da tabela, no caso
o TBODY. Todas as linhas que forem linhas de conteúdo devem ficar entre os elementos TBODY e
/TBODY.
É dentro dessa tag que ficará o conteúdo, o corpo, da sua tabela, onde irá as famosas tr e td, que
serve para criar linha e célula, respectivamente.
Obs.: Você pode, e deve quando necessário, usar th dentro do tbody para colocar a primeira célula
como sendo responsável para dizer o conteúdo relacionado à linha.
1.5.7
Exemplo
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< head >
< title > Tabelas </ title >
</ head >
< body >
< table >
< caption > C a t a l o g o da Metal & amp ; Cia </ caption >
< thead >
<tr > < th c o l s p a n=" 4 " > Tabela de precos </ th > </ tr >
</ thead >
< tfoot >
<tr > < td c o l s p a n=" 4 " > Visite nossa loja </ td > </ tr >
</ tfoot >
< tbody >
<tr >
< td r o w s p a n= " 2 " > Seminovos </ td >
<td > Trompete </ td >
<td > Trombone </ td >
<td > Trompa </ td >
</ tr >
<tr >
<td > $500 </ td >
<td > $640 </ td >
<td > $650 </ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
css
1
2
3
4
5
6
7
table , td , th , tfoot {
border : solid 1 px # 000;
p a d d i n g :5 px ;
}
th {
background - color :# 999;
}
8
9
10
11
12
13
caption {
font - size :x - large ;
}
colgroup {
b a c k g r o u n d: # F60;
}
Figura 3: Tabela com estilização
2
CSS
2.1
Definição
CSS é a abreviação para o termo Cascading Style Sheet, traduzido como folha de estilo em cascata.
Folha de estilo em cascata é um mecanismo simples para adicionar formatação (por exemplo: fontes, cores, espaçamentos) aos documentos web.[site do W3C].
A HTML foi criada para ser uma linguagem exclusivamente de marcação e estruturação de conteúdos. Segundo seus idealizadores, não compete à HTML fornecer informações ao navegador sobre a
apresentação dos elementos, por exemplo: cores de fontes, tamanhos de textos, posicionamentos e todo
o aspecto visual de um documento não devem ser funções da HTML. Cabem à CSS todas as funções
de apresentação de um documento, e essa é sua finalidade maior.
”HTML para estruturar os conteúdos e CSS para apresentá-los”.
2.2
Regra CSS
Regra CSS (ou regra de estilo ou de estilização) é a unidade básica de uma folha de estilo. Uma
regra CSS é composta de duas partes : o seletor e a declaração. A declaração compreende uma propriedade e um valor.
Exemplo:
1
s e l e t o r { p r o p r i e d a d e : valor ; }
• Seletor - É o elemento ou elementos da marcação HTML nos quais a regra CSS será aplicada.
• Declaração - Determina os parâmetros de estilização. Compreende a propriedade e o valor.
• Propriedade - Define qual será a característica do seletor a ser estilizada.
• Valor - É a quantificação ou a qualificação da estilização da propriedade.
Uma regra CSS, escrita conforme a sintaxe mostrada, poderá conter várias declarações separadas
por ponto-e-vírgula.
Exemplo:
1
p {
color : white ;
background - color : black ;
font - size : 14 px ;
2
3
4
5
}
• Seletor - É o elemento p (parágrafo).
• Declarações
– Propriedades - São três: color, que define a cor dos textos; background-color, que define a
cor de fundo; e font-size, que define o tamanho da fonte.
– Valores - São três: white, que define a cor branca; black, que definea cor preta; e 14px, que
define o tamanho da fonte igual a 14 pixels.
Ocorre com frequência a necessidade de estilizar vários seletores com as mesmas declarações de
estilos. Nesses casos, a sintaxe CSS permite que os seletores sejam agrupados. Para criar um agrupamento de seletores, separamos um do outro através de vírgula.
Exemplo:
1
h2 , p , ul , em { font - size : 18 px ; }
A regra acima define um tamanho de fonte igual a 18 pixels para os conteúdos textuais dos elementos h2, p, ul e em.
Quando o valor de uma propriedade for uma palavra composta, separada por espaços , deve-se usar
sinais de aspas duplas (” ”) ou, alternativamente, de aspas simples (’ ’), conforme mostrado no exemplo
a seguir:
1
2
3
p {
font - family : " Times New Roman " ;
}
ou
1
2
3
p {
font - family : ’ Times New Roman ’;
}
Não se usam aspas em palavras compostas separadas por hífen:
1
2
3
p {
font - family : Sans - serif ;
}
Um componente facultativo, mas de grande utilidade, é a inserção de comentários.
Comentário em uma linha:
1
/* C o m e n t a r i o em uma linha */
Bloco de comentário
1
2
3
4
/* Bloco de c o m e n t a r i o c o n t e n d o
varias linhas para e x p l i c a r
as f u n c i o n a l i d a d e s d e f i n i d a s
na regra CSS */
2.3
Modelo de formatação CSS
No modelo CSS cada elemento cria um caixa, dentro da qual está inserido o conteúdo do elemento.
Se o elemento for nível de bloco, a caixa tem a largura igual à linha (ocupa toda a largura da tela) e
altura suficiente para acomodar o conteúdo. Se inline, a caixa tem a largura do conteúdo.
2.3.1
Box Model CSS
O Box Model CSS descreve os boxes criados pelos elementos da marcação HTML.
Figura 4: Diagrama do Box Model CSS
No diagrama destacamos uma área mais interior, denominada área dos conteúdos, cujas dimensões
(largura e altura) são definidas pelas propriedades CSS width e height. Segue uma área chamada de
enchimento, cuja espessura é definida pela propriedade CSS padding. Em volta do enchimento, temos
uma borda cuja espessura, cor e tipo são definidos por border. Finalmente, um espaço denominado
margem com espessura definida pela propriedade margin.
A área da margem é sempre transparente. As dimensões da área de conteúdos dependem de uma série de fatores, entre eles a definição explícita de dimensões, natureza do conteúdo e o tipo do conteúdo.
A propriedade CSS background define o fundo a ser aplicado nas áreas de conteúdo, de enchimento e
da borda.
Exemplo:
HTML
1
2
3
4
5
...
< body >
<p > Lorem ipsum dolor sit amet ... </p >
</ body >
...
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
margin : 0;
p a d d i n g: 0;
}
p {
width : 400 px ;
text - align : j u s t i f y;
line - height : 1;
b a c k g r o u n d: # f6f6f6 ;
margin : 20 px 80 px 100 px 40 px ;
border : solid # ccc ;
border - width : 10 px 30 px 50 px 15 px ;
p a d d i n g: 35 px 50 px 20 px 0;
}
Na imagem abaixo apresentamos a renderização do código conforme o Box Model CSS.
Figura 5: Box Model CSS
2.3.2
Box Model CSS modificado
A propriedade width refere-se à largura do conteúdo do box, o que ocorre é que a largura total do box
acaba sendo variável em relação à propriedade width, já que a ela são acrescidas as larguras de padding
e border (que são variáveis) para se obter a largura total. O mesmo ocorre com relação à altura do box.
As CSS3 criaram uma nova propriedade denominada box-sizing, capaz de alterar esse comportamento padrão do Box Model, fazendo com que as larguras de padding e border sejam incluídas na
largura width declarada por regra CSS.
Para modificar o comportamento do Box Model para todos os boxes, inclua na folha de estilo do
seu projeto a seguinte regra CSS.
1
2
3
4
5
6
html {
box - sizing : border - box ;
}
* , *: before , *: after {
box - sizing : i n h e r i t;
}
OBS: O símbolo * é chamado de seletor universal e representa todos os elementos da marcação.
A imagem abaixo mostra a renderização do mesmo box do exemplo anterior com a inclusão da
regra modificadora do Box Model.
Figura 6: Box Model CSS modificado
Observe que a largura do conteúdo no Box Model tradicional é igual ao valor declarado para width
(400px), já no Box Model modificado passa a ser igual ao valor declarado para width (400px) menos
as larguras de border (15px + 30px) e padding (0 + 50px).
2.3.3
Propriedades CSS para o Box Model
O box criado no modelo é um quadrilátero em que cada um dos lados é identificado, ver figura 4.
Ao definirmos a regra CSS para margin, border-width ou padding começamos com o lado superior e
seguimos no sentido horário (top, right, bottom e left).
Propriedade margin
A propriedade margin define as dimensões das margens de um box. Pode-se definir cada uma das
margens individualmente:
1
2
3
4
margin - top : 20 px ;
margin - right : 30 px ;
margin - bottom : 5 px ;
margin - left : 10 px ;
ou usar a sintaxe abreviada:
1
margin : 20 px 30 px 5 px 10 px ; /* na ordem d e s c r i t a a n t e r i o r m e n t e */
A declaração abreviada admite ainda as seguintes variações:
• Se as quatro margens são iguais, declare um valor:
1
margin : 20 px ; /* margem de 20 px nos quatro lados */
• Se as quatro margens são iguais duas a duas, declare dois valores:
1
margin : 15 px 10 px ; /* m a r g e n s s u p e r i o r e i n f e r i o r de 15 px e d i r e i t a e
e s q u e r d a de 10 px */
• Ou apenas direita e esquerda iguais, declare três valores:
1
margin : 20 px 10 px 15 px ; /* margem s u p e r i o r de 20 px m a r g e n s d i r e i t a e
e s q u e r d a de 10 px e margem i n f e r i o r de 15 px */
Propriedade padding
A propriedade padding define as dimensões do enchimento (ou espessura) entre o conteúdo e a
borda. Pode-se definir cada um dos quatro enchimentos individualmente: padding-top, padding-right,
padding-bottom, padding-left ou utilizar a sintaxe abreviada conforme descrito na propriedade margin.
Propriedade border
A propriedade border define a espessura, o estilo e a cor das bordas do box.
border-width: Define a espessura da borda.
1
2
3
4
border - top - width : 2 px ;
border - right - width : 3 px ;
border - bottom - width : 4 px ;
border - left - width : 1 px ;
1
Define-se a espessura da borda declarando uma medida CSS de comprimento ou usando as palavraschave thin, medium e thick, obtendo as espessuras de bordas fina, média e grossa.
border-color: Define a cor da borda
1
2
3
4
border - top - color : red ;
border - right - color : yellow ;
border - bottom - color : black ;
border - left - color : cyan ;
1
border - color : red yellow black cyan
Para declarar a cor da borda, usa-se um dos valores CSS para cores ou o valor transparent.
border-style: Define o estilo da borda.
1
2
3
4
border - top - style : solid ;
border - right - style : ridge ;
border - bottom - style : double ;
border - left - style : inset ;
1
border - style : solid ridge double inset ;
Pode-se aplicar nove estilos para bordas ou declarar o valor none para definir ausência de bordas.
Na prática, a declaração none é muito usada para retirar bordas colocadas por padrão ou declaradas
anteriormente em elementos específicos da marcação ou, ainda, retirar a borda-padrão colocada em
imagens que são links.
Estilo
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Descrição
Define espessura 0 para a borda.
O mesmo efeito de none, mas com precedência na
resolução de bordas conflitantes.
Borda pontilhada.
Borda tracejada.
Borda contínua ou sólida.
Borda constituída de duas linhas contínuas. A soma das espessuras
das linhas com a do espaço que as separa é igual ao valor de
border-width.
Borda com aparência entalhada.
Borda com aparência de ressalto.
Borda em baixo relevo.
Borda em alto relevo.
border: Define abreviadamente a borda.
1
2
3
4
border - top : 1 px solid red ;
border - right : 2 px ridge yellow ;
border - bottom : 4 px double black ;
border - left : 6 px inset cyan ;
ou usar a sintaxe abreviada para bordas que sejam iguais nos quatro lados:
1
border : 2 px dotted white ;
Ao usar a declaração abreviada border, não é obrigatório declarar os três valores, assim as regras
CSS mostradas abaixo são válidas:
1
2
3
4
5
6
border :
border :
border :
border :
border :
border :
5 px ;
dotted ;
red ;
2 px double ;
solid red ;
4 px blue ;
Os valores não declarados são interpretados pelo navegador como sendo o valor inicial da propriedade:
1
2
3
border - width : medium ;
border - style : none ;
border - color : /* o mesmo valor da p r o p r i e d a d e color do e l e m e n t o em que se
aplica a borda */
Como o valor inicial para o estilo da borda é none (nenhum), concluímos que declarações abreviadas
que omitem o estilo da borda, como as mostradas a seguir, isoladamente, não produzem nenhum efeito.
1
2
3
border : 5 px ;
border : red ;
border : 4 px blue ;
Podemos combinar essas declarações com outras, obtendo um interessante método de estilização:
1
2
border : 4 px blue ;
border - style : solid dotted groove double ;
ou ainda:
1
2
border : solid blue ;
2.4
Categorias de valores CSS
Os valores CSS podem ser definidos através de valores absolutos (ex: medida em pixels) ou valores
relativos (ex: medidas em porcentagem), que irão depender de um valor de referência.
Os valores CSS podem ser agrupados em oito categorias, conforme descrito a seguir:
2.4.1
Palavra-chave
Um valor CSS é do tipo palavra-chave quando expresso por uma string, predefinida nas especificações. Um exemplo desse caso é quando se utiliza palavras-chave para definir cores:
1
2
3
4
5
p{
color : red ;
background - color : acqua ;
border - color : teal ;
}
Os valores red, acqua e teal são palavras-chave para cores, previstas nas especificações para as CSS3.
Outros exemplos de palavras-chave para expressar valores CSS são:
Palavra-chave
inherit
collapse
italic
uppercase
2.4.2
utilização
para definir
para definir
para definir
para definir
uma propriedade que deverá ser herdada.
bordas de células de tabelas que devem ser unidas.
fonte em itálico.
texto em caixa-alta.
Número
Pose ser expresso por um número inteiro ou real. A especificação adota a sintaxe <integer > para
designar números inteiros e <number > para designar números reais.
Tal como na matemática, em CSS, números podem ser precedidos dos sinais ”+” e ”-” para indicar
o sinal positivo ou negativo do número.
2.4.3
Número não negativo
Muitas propriedades CSS fazem restrição quanto à faixa de números admitidos. Como exemplo, a
propriedade width, destinada a definir a largura de um elemento, não admite números negativos.
2.4.4
Número com unidade de medida
Comprimento
Refere-se as medidas horizontal e vertical. Um valor CSS que usa uma medida de comprimento é
formado por um número seguido da abreviatura para uma unidade de medida. Por exemplo: 14px,
12em, 18pt. Se o número for zero recomenda-se não utilizar a unidade de medida. A única exceção a
essa grafia é na sintaxe quando utilizamos porcentagem, sendo obrigatório indicar o sinal (0%).
Medida relativa
É aquela cujo valor é determinado em função de outro valor de uma propriedade que lhe serve de
referência. Definir medidas relativas facilita o escalonamento e possibilita servi-la para diferentes tipos
de mídia, por exemplo: para uma tela de computador ou para uma tela de um smartphone.
Unidade
em
ex
px
gd
rem
vw
vh
vm
ch
Relativa
à font-size do elemento (ou do elemento-pai). Elemento-pai é o
elemento no qual um elemento está contido.
ao valor x-height (altura da letra x minúscula) da fonte do elemento.
ao dispositivo gráfico (tela, por exemplo) de renderização.
ao grid definido pelo ”layout-grid”, descrito no Módulo Texto da CSS3.
à font-size do elemento raiz do documento (html).
à largura da viewport (área de renderização).
à altura da viewport.
à largura ou altura da viewport (a menor das duas).
à largura do número ”0”, renderizado de acordo com font-size. Se não
existir ”0” na fonte especificada, a largura média dos caracteres deverá ser usada.
As unidades de medida relativas nas CSS3 são mostradas a seguir:
Medida absoluta
Aquela cujo valor é determinado e fixo. São úteis para uso quando as dimensões físicas da mídia
(tela, impressora etc.) são conhecidas.
Unidade
in
cm
mm
pt
pc
Descrição
polegada; 1 polegada = 2,54cm
centímetro
milímetro
ponto; 1 ponto = 1/72 polegada
pica; 1 pica = 12 pontos
Porcentagem
As propriedades CSS que admitem valores em porcentagem também definem qual o valor de referência a considerar para cálculo da porcentagem. O valor de referência pode ser o valor de outra
propriedade do mesmo elemento ao qual a porcentagem foi aplicada, o de um elemento ancestral (no
qual o elemento está contido) ou o valor de um contexto de formatação, como a largura de um bloco
de conteúdo.
Ângulo
O formato para definir um valor CSS em medida angular é um número imediatamente seguido por
uma unidade de medida angular, e são usados, por exemplo, para definir propriedades destinadas à
mídia speech (mídia falada, tal como leitores de tela) ou às transformações previstas nas CSS3.
Unidade
deg
grad
rad
turn
Descrição
Graus
Grados
Radianos
Volta
Hora
Valores expressos em medidas de tempo são usados, por exemplo, para definir propriedades destinadas à mídia speech (mídia falada, tal como leitores de tela) ou duração de animações e transições
previstas nas CSS3.
frequência
Unidade
ms
s
Descrição
Milissegundo
Segundo
Valores expressos em medidas de frequência são usados, por exemplo, para definir propriedades
destinadas à mídia speech.
Unidade
Hz
kHz
2.4.5
Descrição
Hertz
Quilohertz
String
Valores CSS expressos com strings devem ser grafados com aspas simples ou duplas. Sendo da
mesma grafia, uma não pode ocorrer dentro de outra, a menos que seja escapada com uma barra
invertida (\).
Uma string não pode conter uma quebra de linha, a menos que se use o caractere \A, que representa
uma nova linha em CSS.
Para fins de legibilidade, é possível quebrar uma string em substrings com uso do caractere barra
invertida (\).
Observe os exemplos a seguir:
1
2
3
4
" Esta
’ Esta
" Esta
’ Esta
e
e
e
e
uma
uma
uma
uma
’ string ’. " /* aspas s i m p l e s dentro de aspas duplas */
" string ". ’ /* aspas duplas dentro de aspas s i m p l e s */
\" string \". " /* aspas duplas e s c a p a d a s dentro de aspas duplas */
\ ’ string \ ’. ’ /* aspas s i m p l e s e s c a p a d a s dentro de aspas s i m p l e s */
5
6
" Esta string esta na p r i m e i r a linha . \ A E esta na s e g u n d a"
7
8
9
10
" Esta e uma string longa \
que foi q u e b r a d a para \
fins de l e g i b i l i d a d e. "
2.4.6
Notação funcional
Em CSS3 valores funcionais são usados para definir cores, atributos e URIs (Uniform Resource
Identifier - endereço web).
A sintaxe para escrita de um valor funcional é: nome da função seguido de uma lista de argumentos
entre parênteses.
1
2
3
p { background - color : rgb (255 , 0 , 0) ; }
img { margin - top : attr ( height , px ) ; }
div { background - image : url ( http : // u m s i t e q u a l q u e r . com / figura . gif ) ; }
Nos três exemplos acima, os valores das propriedades CSS, em destaque no código, são do tipovalor
funcional, e as respectivas funções CSS rgb, attr e url retornam um valor a ser aplicado nas propriedades
definidas pelos seletores (elementos) p, img e div, respectivamente.
2.4.7
Casos especiais
Valores CSS que não se enquadram em nenhuma das categorias anteriores pertencem a uma categoria denominada ”casos especiais”. Os valores CSS enquadrados nessa categoria são os valores para
definição de famílias de fontes e valores para definição de cores em sintaxe hexadecimal.
1
2
p { background - color : # f00 ; } ou p { background - color : # ff0000 ; }
h1 { font - family : Arial , Verdana , Sans - serif ; }
2.5
Cores CSS
Para definir cores em CSS, são possíveis os seguintes tipos de valores: hexadecimal, as palavraschave: transparent, currentColor e outras palavras-chave que são o nome de algumas cores (ex: blue,
red, grey, green, black ...), valores RGB, RGBA, HSL, HSLA.
Exemplos
1
2
3
4
5
6
7
8
9
10
11
12
color :
color :
color :
color :
color :
color :
color :
color :
color :
color :
color :
color :
# ff0000 ; /* h e x a d e c i m a l m i n ú s c u l a s */
# FF0000 ; /* h e x a d e c i m a l m a i ú s c u l a s */
# f00 ; /* h e x a d e c i m a l a b r e v i a d a */
pink ; /* palavra - chave */
rgb (255 , 200 , 32) ; /* RGB i n t e i r o s */
rgb (100% , 26% , 47%) ; /* RGB p o r c e n t a g e m */
rgba (200 , 100 , 57 , 0.4) ; /* RGB i n t e i r o s com o p a c i d a d e */
rgba (90% , 86% , 37% , 0.6) ; /* RGB p o r c e n t a g e m com o p a c i d a d e */
hsl (120 , 75% , 50%) ; /* HSL */
hsla (120 , 75% , 50% , 0.8) ; /* HSL com o p a c i d a d e */
t r a n s p a r e n t ; /* palavra - chave */
c u r r e n t C o l o r; /* criada nas CSS3 */
currentColor: Esse valor declara que a cor a ser aplicada a uma determinada propriedade CSS em
um elemento é igual à cor declarada para a propriedade color de seu elemento ancestral mais próximo.
Exemplo:
1
2
div { color : red ; }
p { border : 1 px solid c u r r e n t C o l o r ; }
Todos os parágrafos contidos no div terão uma borda na cor vermelha.
HSL: Criada a partir da CSS3, permite que você declare as cores com o uso de três parâmetros:
(hue, saturation, lightness).
O primeiro valor é para o tom (hue) da cor. O seu valor é um número que representa a medida de
um ângulo (varia de 0 a 360 graus) apontando para um tom de cor na roda de cores.
Ângulo
0
60
120
180
240
300
360
Tons de cor
vermelho
amarelo
verde
ciano
azul
púrpura
vermelho
Exemplos:
1
2
3
4
color :
color :
color :
color :
hsl (120 ,
hsl (120 ,
hsl (120 ,
hsl (120 ,
100% , 50%) ; /* cor verde */
100% , 25%) ; /* cor verde - escura */
100% , 75%) ; /* cor verde - clara */
75% , 75%) ; /* cor verde pastel */
HSLA: Os três primeiros parâmetros têm o mesmo significado de HSL, e o quarto (opacidade) é
um valor compreendido entre 0 e 1, onde 0 representa a transparência total, e o valor 1, opacidade
total. Assim, um valor igual 0.6 significa 60% opaco ou 40% transparente.
2.6
Vinculando folhas de estilo a documentos
As folhas de estilo podem ser escritas no próprio documento HTML ao qual serão aplicadas, ou em
arquivos externos independentes.
2.6.1
Estilos inline
O método direto e simples de aplicar estilos a um elemento da marcação é com o emprego do
atributo style da HTML. Escreve-se as regras de estilo diretamente dentro da tag de abertura do
elemento a estilizar:
1
2
3
<p style = " width : 200 px ; color : white ; b a c k g r o u n d: red ; font - size : 1.8 em ; " >
<! - - P a r a g r a f o com a p l i c a c a o de e s t i l o s inline -->
</p >
Este método dificulta a manutenção e retira a possibilidade do controle centralizado da apresentação. Toda vez que for preciso alterar a apresentação, será necessário percorrer todo o código de
marcação do documento à procura das regras de estilo inline.
2.6.2
Estilos incorporados
Outro método de escrever a folha de estilos no próprio documento HTML é com o emprego do
elemento style. Você escreve as regras de estilo dentro das tags <style></style>, declaradas na seção
HEAD do documento:
1
2
3
4
5
6
7
8
9
10
11
12
< head >
...
< style rel = " s t y l e s h e e t" type =" text / css " media =" all " >
body {
margin : 0;
p a d d i n g: 0;
font - size : 80%;
color : black ;
b a c k g r o u n d: white ;
}
</ style >
</ head >
Desta forma, as regras de estilização serão aplicadas somente ao documento em que estiver incorporada. Uma boa escolha para uso desse método é para o caso de aplicação de estilos específicos a um,
e somente um, documento do site. Em HTML5 o uso de atributos no elemento style é facultativo.
2.6.3
Estilos externos
Trata-se de um arquivo de texto contendo as regras de estilo e os comentários CSS e deve ser
gravado com a extensão .css e pode ser vinculado a um documento HTML de duas maneiras distintas:
Folhas de estilos lincadas: Vincula-se uma folha de estilo externa a um documento empregando
o elemento link. Este elemento deve estar contido na seção HEAD do documento.
1
2
3
4
5
< head >
...
< link rel = " s t y l e s h e e t" type = " text / css" href =" e s t i l o s. css " media = " all" >
...
</ head >
O atributo href aponta para o endereço no qual se encontra o arquivo da folha de estilos.
Folhas de estilos importadas: Nesse método, vincula-se uma folha de estilo externa a outra
folha de estilo externa usando a diretiva @import dentro da folha de estilo.
1
2
3
4
5
@ i m p o r t " main . css"
body {
margin : 0;
font : 62.5% Arial , Sans - serif ;
}
A diretiva @import deve preceder todas as demais regras de estilo para o documento. Havendo
necessidade de vincular outras folhas de estilo ao documento, elas deverão ser importadas uma após a
outra.
A declaração de importação de uma folha de estilos dentro de outra deve ocupar a primeira linha
da folha, exceto no caso em que se une uma declaração de codificação de caracteres da folha de estilo.
A diretiva @charset destina-se a declarar a codificação de caracteres de uma folha de estilos e deve
ocupar a primeira linha da folha de estilo.
1
2
3
4
5
6
@ c h a r s e t " utf -8 "
@ i m p o r t " main . css"
body {
margin : 0;
font : 62.5% Arial , Sans - serif ;
}
2.7
Exemplos de utilização das CSS3
Veremos a seguir alguns exemplos de aplicação das estilizações através das CSS3.
2.7.1
Menu Drop-Down
Marcação HTML para criação do menu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
< head >
< title > E x e m p l o Menu DropDown </ title >
< link rel = " s t y l e s h e e t" type = " text / css" href =" menu . css " media = " all " >
</ head >
< body >
< nav >
<ul >
<li > <a href = " # " > Home </ a > </ li >
<li > <a href = " # " > Tutoriais </a >
<ul >
<li > < a href = " # " > LP2 </ a > </ li >
<li > < a href = " # " > PTI </ a > </ li >
<li > < a href = " # " > A p l i c a c o e s Web </ a >
<ul >
<li > <a href =" # " > HTML </ a > </ li >
<li > <a href =" # " >CSS </a > </ li >
</ ul >
</ li >
</ ul >
</ li >
<li > <a href = " # " > Artigos </ a >
<ul >
<li > < a href =" # " > Web Design </ a > </ li >
<li > < a href =" # " > Programacao </a > </ li >
</ ul >
29
30
31
32
33
34
</ li >
<li > <a href = " # " > Extras </ a > </ li >
</ ul >
</ nav >
</ body >
</ html >
Figura 7: Menu sem a estilização CSS
Código CSS para estilização do Menu
1
2
3
4
5
nav ul ul {
d i s p l a y: none ;
b a c k g r o u n d: # 5 f6975 ; border - radius : 0 px ; p a d d i n g: 0;
p o s i t i o n: a b s o l u t e; top : 100%;
}
6
7
8
9
nav ul li : hover > ul {
d i s p l a y: block ;
}
10
11
12
13
14
15
16
17
18
19
20
21
22
nav ul {
b a c k g r o u n d: # efefef ;
b a c k g r o u n d: linear - g r a d i e n t( top , # efefef 0% , # bbbbbb 100%) ;
b a c k g r o u n d: - moz - linear - g r a d i e n t( top , # efefef 0% , # bbbbbb 100%) ;
b a c k g r o u n d: - webkit - linear - g r a d i e n t( top , # efefef 0% ,# bbbbbb 100%) ;
box - shadow : 0 px 0 px 9 px rgba (0 ,0 ,0 ,0.15);
p a d d i n g: 0 20 px ;
border - radius : 10 px ;
list - style : none ;
p o s i t i o n: r e l a t i v e;
d i s p l a y: inline - table ;
}
23
24
25
26
nav ul : after {
c o n t e n t: " " ; clear : both ; d i s p l a y: block ;
}
27
28
29
30
nav ul li {
float : left ;
}
31
32
33
nav ul li : hover {
b a c k g r o u n d: # 4 b545f ;
b a c k g r o u n d: linear - g r a d i e n t( top , # 4 f5964 0% , #5 f6975 40%) ;
b a c k g r o u n d: - moz - linear - g r a d i e n t( top , # 4 f5964 0% , #5 f6975 40%) ;
b a c k g r o u n d: - webkit - linear - g r a d i e n t( top , # 4 f5964 0% ,#5 f6975 40%) ;
34
35
36
37
}
38
39
40
41
nav ul li : hover a {
color : # fff ;
}
42
43
44
45
46
nav ul li a {
d i s p l a y: block ; p a d d i n g: 25 px 40 px ;
color : # 7 5 7 5 7 5 ; text - d e c o r a t i o n: none ;
}
47
48
49
50
51
52
53
nav ul ul li {
float : none ;
border - top : 1 px solid # 6 b727c ;
border - bottom : 1 px solid # 575 f6a ;
}
54
55
56
57
58
nav ul ul li a {
p a d d i n g: 15 px 40 px ;
color : # fff ;
}
59
60
61
62
nav ul ul li a : hover {
b a c k g r o u n d: # 4 b545f ;
}
63
64
65
66
nav ul ul ul {
p o s i t i o n: a b s o l u t e; left : 100%; top :0;
}
Figura 8: Menu Drop-Down com estilização CSS
2.7.2
Abas
Marcação HTML
1
2
3
4
5
6
7
8
9
< head >
< title > E x e m p l o Abas </ title >
< link rel = " s t y l e s h e e t" type = " text / css" href =" abas . css " media = " all " >
</ head >
< body >
< a r t i c l e class =" tabs " >
10
< s e c t i o n id =" tab1 " >
<h2 > < a href = " # tab1 " > Aba 1 </ a > </ h2 >
<p > Aqui esta o c o n t e u d o da p r i m e i r a aba . </p >
</ section >
11
12
13
14
15
<h2 > < a href = " # tab2 " > Aba 2 </ a > </ h2 >
<p > Aqui esta o c o n t e u d o da s e g u n d a aba . </ p >
</ section >
16
17
18
19
20
<h2 > < a href = " # tab3 " > Aba 3 </ a > </ h2 >
<p > Aqui esta o c o n t e u d o da t e r c e i r a aba . </p >
</ section >
21
22
23
24
25
</ article >
26
27
28
</ body >
</ html >
Figura 9: Página em abas sem a estilização CSS
Código CSS para estilização das abas
1
2
3
4
5
6
a r t i c l e. tabs
{
width : 40 em ;
height : 15 em ;
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
margin : 2 em auto ;
}
a r t i c l e. tabs s e c t i o n
{
p o s i t i o n: a b s o l u t e;
top : 1.8 em ;
left : 0;
height : 12 em ;
p a d d i n g: 10 px 20 px ;
background - color : # ddd ;
box - shadow : 0 3 px 3 px rgba (0 ,0 ,0 ,0.1) ;
z - index : 0;
}
a r t i c l e. tabs s e c t i o n: first - child
{
z - index : 1;
}
a r t i c l e. tabs s e c t i o n h2
{
font - size : 1 em ;
font - weight : normal ;
width : 120 px ;
height : 1.8 em ;
top : -1.8 em ;
left : 10 px ;
p a d d i n g: 0;
margin : 0;
color : # 999;
background - color : # ddd ;
border - radius : 5 px 5 px 0 0;
}
41
42
43
44
45
a r t i c l e. tabs s e c t i o n: nth - child (2) h2
{
left : 132 px ;
}
46
47
48
49
50
a r t i c l e. tabs s e c t i o n: nth - child (3) h2
{
left : 254 px ;
}
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
a r t i c l e. tabs s e c t i o n h2 a
{
width : 100%;
line - height : 1.8 em ;
text - align : center ;
text - d e c o r a t i o n: none ;
color : i n h e r i t;
o u t l i n e: 0 none ;
}
a r t i c l e. tabs s e c t i o n: target ,
a r t i c l e. tabs s e c t i o n: target h2
{
color : # 333;
background - color : # fff ;
z - index : 2;
68
69
70
71
72
73
74
75
76
77
}
a r t i c l e. tabs section ,
a r t i c l e. tabs s e c t i o n h2
{
- webkit - t r a n s i t i o n: all 500 ms ease ;
- moz - t r a n s i t i o n: all 500 ms ease ;
-ms - t r a n s i t i o n: all 500 ms ease ;
-o - t r a n s i t i o n : all 500 ms ease ;
t r a n s i t i o n: all 500 ms ease ;
}
Figura 10: Página em abas com estilização CSS
2.7.3
Botões
Marcação HTML para criação de botões
1
2
3
4
5
6
7
8
9
< head >
< title > E x e m p l o Botoes </ title >
< link rel = " s t y l e s h e e t" type = " text / css" href =" botoes . css " media = " all " >
</ head >
< body >
< button class =" btn btn - green " > Salvar </ button >
10
<a href = " # " class = " btn btn - purple " > Acessar </ a >
11
12
< input type = " submit "
13
14
15
16
</ body >
</ html >
class = " btn btn - red" value = " OK " >
Figura 11: Página com botões sem a estilização CSS
Código CSS para estilização dos botões
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
. btn : focus , . btn :: - moz - focus - inner {
o u t l i n e: none ;
border : none ;
}
. btn {
font - family : arial ;
font - size :14 px ;
text - t r a n s f o r m: u p p e r c a s e;
font - weight :700;
border : none ;
cursor : p o i n t e r;
d i s p l a y: inline - block ;
text - d e c o r a t i o n : none ;
}
. btn - green {
b a c k g r o u n d: green ;
color : # fff ;
box - shadow :0 5 px 0 # 0 0 6 0 0 0 ;
}
. btn - green : hover {
b a c k g r o u n d: # 0 0 6 0 0 0 ;
box - shadow :0 5 px 0 # 003 f00 ;
}
. btn - purple {
b a c k g r o u n d: purple ;
color : # fff ;
box - shadow :0 5 px 0 # 6 7 0 1 6 7 ;
}
. btn - purple : hover {
b a c k g r o u n d: # 6 7 0 1 6 7 ;
box - shadow :0 5 px 0 # 4 7 0 0 4 7 ;
}
. btn - red {
b a c k g r o u n d: red ;
color : # fff ;
box - shadow :0 5 px 0 # d20000 ;
}
. btn - red : hover {
b a c k g r o u n d: # d20000 ;
box - shadow :0 5 px 0 # b00000 ;
}
. btn - green : active , . btn - purple : active , . btn - red : active {
top :5 px ;
box - shadow : none ;
}
Figura 12: Página com botões com estilização CSS
2.8
2.8.1
DOM e seletores CSS
DOM
DOM é a sigla em inglês para Document Object Model (Modelo de objeto de documento), e trata-se
de uma convenção que, no contexto da marcação HTML, destina-se representar os componentes da
marcação como objetos capazes de serem estilizados, acessados por programas e scripts e manipulados
de formas variadas.
O DOM é constituído de nós denominados nós do DOM. Os elementos da marcação, os atributos, os
conteúdos e o próprio documento como um topo são considerados nós.
2.8.2
Árvore do DOM
É uma representação gráfica da marcação do documento, mostrando o interrelacionamento entre
os nós do DOM.
No DOM o relacionamento entre os componentes da marcação, descrito na árvore do documento, usa
também denominações adotadas em árvores genealógicas, tais como, elemento-pai, elementos irmãos,
elementos descendentes, elementos ancestrais e assim por diante.
Vamos elaborar o esboço de um site sobre uma banda de Rock n’Roll para exemplificar o relacionamento
entre os componentes da árvore DOM e dos seletores CSS.
Para este exemplo, serão criadas cinco páginas, como descrito a seguir:
• Página principal do site (Página de apresentação)
– index.html
• Discografia (página contendo a discografia da banda)
– discos.html
• Agenda (página contendo agenda de shows)
– agenda.html
• Notícias (página contendo informações e curiosidades)
– noticias.html
• Contato (página com dados para enviar mensagens)
– contato.html
Abaixo a marcação HTML do esboço do site. Nesse rascunho teremos um topo contendo banner,
título e a barra de navegação, uma coluna com o conteúdo principal da página e um rodapé.
Abra um editor e salve esse arquivo como topoSite.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
< head >
< title > Iron Maiden Fans </ title >
</ head >
< body class = " home " >
< header class = " topo " >
< hgroup >
<h1 > < a href =" / " > Site sobre o Iron Maiden </ a > </ h1 >
<h2 > Página não o f i c i a l d e s t i n a d a a d i v u l g a r a maior banda de
heavy metal do mundo </ h2 >
</ hgroup >
<nav >
<ul >
<li > < a class =" c o r r e n t e" href = " home . html " > home </ a > </ li >
<li > < a href = " discos . html " > Discografia </a > </ li >
<li > < a href = " agenda . html " > Shows </ a > </ li >
<li > < a href = " n o t i c i a s. html " > Notícias </ a > </ li >
<li > < a href = " c o n t a t o. html " > Contato </ a > </ li >
< div class = " clear " > </ div > <! - - " limpar " floats -->
</ ul >
</ nav >
</ header >
24
<! - - mais c o n t e u d o -->
25
26
27
28
29
30
31
< footer class =" rodape " >
<! - - c o n t e u d o do rodape do site -->
</ footer >
</ body >
</ html >
Observe que dentro da seção body existem os elementos header e footer. Diretamente dentro do
elemento header existem os elementos hgroup e nav e assim por diante com os demais elementos.
Observando esta marcação, veremos a árvore do documento cujo diagrama é mostrada na figura
13:
Figura 13: Árvore do documento
Da árvore do documento verificamos os graus de parentesco conforme alguns exemplos descritos a
seguir:
Elemento
html
hgroup e nav
a
h1
header
li
Descrição
Elemento-pai de head e body e elemento-ancestral
de todos os elementos da marcação.
Elementos-filho do elemento header, logo, elementos-irmãos.
Elementos-descendentes de ul.
Elemento-irmão-adjacente do elemento h2.
Não é elemento-irmão de meta.
Não é elemento-descendente de hgroup, mas é descendente dos elementos
nav, header, body e html.
Arquivo para estilização topoSite.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
* {
margin : 0;
p a d d i n g: 0;
}
body {
font - family : arial , sans - serif ;
line - height : 1.4;
}
hgroup > h1 {
}
hgroup a {
color : # c30 ;
}
h1 ~ h2 {
color : # 090;
}
nav > ul {
margin - left : 50 px ;
}
nav > ul > li : first - child > a {
color : # c60 ;
}
nav > ul > li : first - child > a : hover {
color : # 555;
text - d e c o r a t i o n: u n d e r l i n e ;
}
nav > ul > li : last - child {
list - style - type : square ;
}
nav > ul > li : nth - child (3) {
b a c k g r o u n d: # ccc ;
}
2.8.3
Seletores CSS
CLASSES E IDS
Para possibilitar uma organização melhor da página e da seleção de elementos por CSS, podemos
utilizar classes e/ou ids para identificar tags.
Uma id, como o nome diz, é uma identificação única: só pode ser utilizada uma vez no documento
inteiro. Normalmente é utilizada para identificar elementos estruturais da página.
Uma classe é reutilizável: pode se repetir na página e também combinar-se com outras (podemos pôr
mais de uma classe em um elemento).
É perfeitamente possível fazer um site apenas com ids, apenas com classes, com uma combinação das
duas, ou sem nenhuma das duas. Tudo irá depender do seu estilo de fazer o código das páginas. O
importante é definir um padrão e segui-lo.
SELETORES
Muito do poder da linguagem CSS está nos seletores. Com os seletores, conseguimos escolher qualquer elemento (ou elementos) na página para aplicar estilos.
Vejamos primeiro os principais tipos de seletores:
• Seletor de tipo: Com este seletor, selecionamos todas as tags de um mesmo tipo. Por exemplo,
se digitamos h1 estaremos selecionando todas as tags h1 da página e poderemos aplicar estilos
a elas. Útil para estilos gerais, mas para maior especificidade utilizamos outros seletores.
• Seletor descendente: Com este seletor, podemos escolher um ou mais elementos que estão
dentro de outro, ou seja, que são descendentes do elemento principal. Exemplo: p strong. Com
isso, selecionamos apenas tags strong que estão dentro de parágrafos. Podemos selecionar com
ainda mais especificidade, escrevendo mais elementos, como: div p strong a. Neste exemplo,
selecionamos links que estão dentro de tags strong que estão dentro de parágrafos que estão
dentro de tags div.
• Seletor de classe: Seleciona elementos com uma classe específica aplicada. Exemplo: .destaque seleciona todos os elementos com a classe ”destaque”.
• Seletor de id: Seleciona o elemento com a id especificada. Exemplo: #cabecalho irá selecionar
o elemento com a id ”cabecalho”. Cada id é única e não pode ser repetida no mesmo documento.
• > Seletor filho: Seleciona o elemento filho. No nosso exemplo (linha 10), estiliza o elemento
h1 filho de hgroup.
• Seletor irmão adjacente: No nosso exemplo (linha 19), estliiza o elemento h2 irmão adjacente
de h1.
COMBINANDO SELETORES
Podemos também combinar os seletores que aprendemos acima, para conseguir diferentes elementos
e partes mais específicas de nossos sites. Alguns exemplos:
• p.destaque seleciona apenas os parágrafos que possuem a classe ”destaque”.
• div#cabecalho h1 seleciona tags h1 que estejam dentro da div com a id ”cabecalho”.
• #conteudo ul li a seleciona links (tag a) dentro de itens de lista dentro de tags ul que estejam
dentro de um elemento com a id ”conteudo”.
• #conteudo p.destaque strong seleciona elementos strong dentro de parágrafos com a classe
”destaque” que estejam dentro de um elemento com a id ”conteudo”.
• .mensagem.destaque seleciona apenas elementos que tenham a classe ”mensagem” e a classe
”destaque”.
• Separando itens por vírgulas, como p.destaque, h1, a.saiba-mais seleciona todos os respectivos
elementos para as regras. Muito útil para diminuir a repetição de regras no arquivo CSS.
• Linha 28 do exemplo: Seletor composto. Estiliza o elemento a filho do primeiro elemento li
que é filho de ul que por sua vez é filho de nav.
• Linha 40 do exemplo: Seletor composto. Essa regra estiliza o terceiro elemento li filho do
elemento ul que por sua vez é filho de nav.
PSEUDO-CLASSES
Pseudo-classes são tipos de classes especiais que não são definidas pelo desenvolvedor (já são prédefinidas). A sua maior utilização é com links (tags a) para definir estilos diversos para quando o link
é novo, visitado, etc. O seletor de pseudo-classe é escrito com o nome do elemento + dois pontos +
nome da pseudo-classe.
Para começar, vamos nos familiarizar com as pseudo-classes de links:
• Com o seletor a:link, estilizamos apenas os links não-visitados, ou seja, links no seu estado
normal.
• Com o seletor a:visited, estilizamos apenas links visitados, ou seja, que já foram clicados.
• Com o seletor a:hover, estilizamos links quando o mouse está em cima do mesmo. Com esta
pseudo-classe podemos fazer diversos efeitos interessantes. Esta pseudo-classe pode ser aplicada
a qualquer elemento, não apenas links, o que a torna ainda mais útil.
• Com o seletor a:focus, estilizamos links quando os selecionamos com o teclado, através da tecla
Tab. Esta pseudo-classe é útil para estilizar links para pessoas que possuem habilidade limitada
e não conseguem utilizar o mouse, por exemplo.
• Com o seletor a:active, estilizamos um link quando o mouse está sendo clicado ou pressionamos
Enter, ativando o link.
CASCATA (E HERANÇA)
A cascata é outra das características importantes das CSS. Tão importante, que está até no nome:
Cascading Style Sheets. O que ”Cascading” quer dizer é que a maioria das propriedades que aplicamos
a um elemento, irá passar aos seus ”herdeiros”, ou seja, os elementos que estão contidos naquele.
Vejamos um exemplo:
1
2
3
4
5
6
<! - - HTML -->
< div class = " texto " >
<p >
Texto e x e m p l o < strong > com um destaque </ strong >.
</p >
</ div >
1
2
3
4
/* CSS */
. texto {
color : # F00 ;
}
Perceba que, apesar da propriedade color ter sido aplicada à div ”texto”, esta propriedade passou
para o parágrafo e para o destaque também. Isto parece óbvio neste exemplo, mas é importante se
familiarizar com este conceito.
Uma utilização comum da cascata é definir uma fonte para a página inteira. Exemplo:
1
2
3
body {
font - family : Arial , sans - serif ;
}
Com esta regra, todos os elementos que estão dentro de body (ou seja, todo o conteúdo do site) irá
usar a fonte Arial ou, se não estiver disponível, a fonte sans-serif padrão do sistema operacional.
ESPECIFICIDADE E PRECEDÊNCIA
As CSS também obedecem algumas regras de precedência. Quando várias regras se aplicam a um
mesmo elemento, o navegador precisa decidir qual delas tem precedência. Vamos criar uma div:
1
2
3
4
5
< div id = " s i d e b a r" >
<p class = " d e s c r i c a o" >
Texto e x e m p l o.
</p >
</ div >
Vamos supor que temos duas regras aplicadas à div:
1
2
3
# sidebar {
color : # F00 ;
}
4
5
6
7
div # s i d e b a r p {
color : # F0F ;
}
Qual delas será aplicada? Se você pensou a ”mais específica”, acertou.
O seletor div.sidebar p tem precedência. Por que ele é mais específico? Para termos uma ideia melhor
de especificidade, há algumas regras gerais:
• Regras em tags style tem precedência sobre regras em arquivos externos CSS;
• Regras em linha (atributo style) tem precedência sobre regras em tags style ou arquivos externos
CSS;
• Seletores de elemento (por exemplo, p) tem a menor precedência (podemos dizer que, numa
escala, este tipo de seletor vale ”1”);
• Seletores de classe (por exemplo, .destaque) tem mais precedência (vale ”10”);
• Seletores de id (por exemplo, #conteudo) tem maior precedência (vale ”100”).
Tendo isto, se há duas regras (usando a mesma estrutura anterior):
1
2
div p . d e s c r i c a o {}
# s i d e b a r p {}
O segundo seletor tem precedência (apesar de não parecer inicialmente) pois o seletor de id tem
muito mais ”peso” e isso o torna mais específico para o navegador na hora de renderizar a página.
Se utilizarmos a nossa escala, veremos que o primeiro seletor, div p.descricao, vale 12 (dois seletores
de elemento, mais um de classe); enquanto o segundo seletor vale 101 (um seletor de id mais um seletor
de elemento).
Figura 14: Tabela de Seletores
2.9
Flutuando elementos (floats)
Um elemento pode ser flutuado à esquerda ou à direita com uso da propriedade float. Isto significa
que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco
container). A figura 15 a seguir ilustra o princípio de float:
Figura 15: Princípio de funcionamento da propriedade float
Se desejamos que um texto seja posicionado em volta de uma imagem como mostrado na figura 16,
basta flutuarmos a imagem:
Figura 16: Princípio de funcionamento da propriedade float
2.9.1
Como isto é feito ?
O HTML para o exemplo acima é mostrado a seguir:
1
2
3
< div id = " p i c t u r e" >
< img src = " bill . jpg " alt = " Bill Gates " >
</ div >
4
5
6
<p > causas n a t u r a l e s et antecedentes ,
idciro etiam n o s t r a r u m v o l u n t a t u m ... </ p >
Para conseguir o efeito mostrado, basta definir uma largura para o box que o contém e declarar
para ele float: left;
1
2
3
4
# picture {
float : left ;
width : 100 px ;
}
2.9.2
Outro exemplo : colunas
Floats podem ser usados para construir colunas em um documento. Para criá-las, estruturamos no
código HTML usando <div> como mostrado a seguir:
1
2
3
4
< div id = " c o l u m n 1" >
<p > Haec d i s s e r e n s qua de re agatur
et in quo causa c o n s i s t a t non videt ... </ p >
</ div >
5
6
7
8
9
< div id = " c o l u m n 2" >
<p > causas n a t u r a l e s et antecedentes ,
</ div >
10
11
12
13
14
< div id = " c o l u m n 3" >
<p > nam nihil esset in nostra
p o t e s t a t e si res ita se h a b e r e t ... </ p >
</ div >
A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left; para cada
uma das colunas:
1
2
3
4
# column1 {
float : left ;
width : 33%;
}
5
6
7
8
9
# column2 {
float : left ;
width : 33%;
}
10
11
12
13
14
# column3 {
float : left ;
width : 33%;
}
float pode ser declarado left, right ou none.
2.9.3
A propriedade clear
A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos
elementos floats no documento.
Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado.
Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates.
A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear,
for por exemplo definido both para um box, a margem superior deste box será posicionada sempre
abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.
1
2
3
< div id = " p i c t u r e" >
< img src = " bill . jpg " alt = " Bill Gates " >
</ div >
4
5
<h1 > Bill Gates </ h1 >
6
7
8
<p class = " f l o a t s t o p" > causas n a t u r a l e s et antecedentes ,
Para evitar que o texto se posicione no espaço livre deixado pela foto do Bill Gates basta adicionar
a seguinte regra CSS:
1
2
3
4
# picture {
float : left ;
width : 100 px ;
}
5
6
7
8
. floatstop {
clear : both ;
}
2.10
Posicionando elementos
Com posicionamento CSS podemos colocar um elemento em uma posição exata na página. Combinado com floats, o posicionamento abre muitas possibilidades para criação de layouts precisos e
avançados.
2.10.1
O princípio de posicionamento CSS
Considere a janela do navegador como um sistema de coordenadas:
Figura 17: Janela do navegador
O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer
lugar na tela usando um sistema de coordenadas.
2.10.2
Posicionamento absoluto
Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa que
não deixa nenhum espaço vazio após ser posicionado.
Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas
e posicionar o elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos
da página:
1
2
3
4
5
# box1 {
top : 50 px ;
left : 50 px ;
}
6
7
8
9
10
11
12
# box2 {
top : 50 px ;
right : 50 px ;
}
13
14
15
16
17
# box3 {
bottom : 50 px ;
right : 50 px ;
}
18
19
20
21
22
23
# box4 {
bottom : 50 px ;
left : 50 px ;
}
2.10.3
Posicionamento relativo
Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado.
O posicionamento para posição relativa é calculado com base na posição original do elemento
no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para
cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as
suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições
originais no documento:
1
2
3
4
5
6
7
<! D O C T Y P E HTML >
< html >
< head >
< title > P o s i c i o n a m e n t o com CSS </ title >
< link rel = " s t y l e s h e e t" href = " p o s i c a o R e l a t i v a . css " type = " text / css " >
</ head >
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< body >
< div id = " dog1 " >
< img src = " P l u t o _ 1. png " / >
</ div >
< div id = " dog2 " >
< img src = " P l u t o _ 1. png " / >
</ div >
< div id = " dog3 " >
< img src = " P l u t o _ 1. png " / >
</ div >
</ body >
</ html >
# dog1 {
left : 50 px ;
top : 0;
}
# dog2 {
left : 350 px ;
top : 0;
}
# dog3 {
left : 50 px ;
top : 0;
15
}
Figura 18: Exemplo posicionamento relativo
3
Construindo um exemplo
Para aplicarmos o que foi aprendido até o momento, nosso objetivo será criar um site, conforme a
figura 19 abaixo:
Figura 19: Página de exemplo
Como ainda não aprendemos javascript e os conceitos de AJAX, criaremos um arquivo para cada
opção do nosso menu:
• Página Principal = index.html
• Sobre = sobre.html
• Contato = contato.html
• Estilização = layout.css
A arvore de diretórios para o nosso site, ficará conforme figura 20:
Figura 20: Diretórios do site de exemplo
3.1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Arquivo: index.html
< html >
< head >
< title > C E F E T M G - Aplica & ccedil ;& otilde ; es WEB </ title >
<! - - I m p o r t a n d o a folha de estilo CSS para o HTML -->
< link rel = " s t y l e s h e e t" type = " text / css " href = " css / layout . css " >
</ head >
< body >
< div class = " c o n t a i n e r" >
<! - - MENU -->
< div class = " menu " >
< ul class = " menu - top" >
<li > < a href = " # " > IN & iacute ; CIO </ a > </ li >
<li > < a href = " sobre . html " > SOBRE </ a > </ li >
<li > < a href = " c o n t a t o. html " > CONTATO </ a > </ li >
</ ul >
</ div >
<! - - P R I N C I P A L -->
< div class = " main " >
<! - - Box para as i m a g e n s -->
< div class = " box - left " >
< img src = " img / logo1 . jpg " / >
</ div >
< div class = " box - right " >
< img src = " img / logo2 . jpg " / >
</ div >
< div class = " box - text1 " >
<p >
Lorem ipsum dolor sit amet , c o n s e c t e t u e r a d i p i s c i n g elit , sed diam
n o n u m m y nibh
e u i s m o d t i n c i d u n t ut l a o r e e t dolore magna a l i q u a m erat v o l ut p a t. Ut
wisi enim ad
minim veniam , quis n o s t r u d exerci tation u l l a m c o r p e r s u s c ip i t
l o b o r t i s nisl ut
a l i q u i p ex ea c o m m o d o c o n s e q u a t. Duis autem vel eum iriure dolor in
h e n d r e r i t in
v u l p u t a t e velit esse m o l e s t i e consequat , vel illum dolore eu f e u g i a t
nulla
f a c i l i s i s at vero eros et a c c u m s a n et iusto ...
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
</p >
<! - - Botão de leia mais -->
<a href = " # " id = " leia " > Leia mais ... </ a >
</ div >
< div class = " box - text2 " >
<p >
Lorem ipsum dolor sit amet , c o n s e c t e t u e r a d i p i s c i n g elit , sed diam
n o n u m m y nibh
wisi enim ad
nulla
f a c i l i s i s at vero eros et a c c u m s a n et iusto ...
</p >
<! - - Botão de leia mais -->
<a href = " # " id = " leia " > Leia mais ... </ a >
</ div >
</ div >
<! - - RODAPÉ -->
< div class = " footer " >
< div class = " footer - box " >
<ul >
<li > < h4 > MENU </ h4 > </ li >
<li > < a href = " # " > In & iacute ; cio </ a > </ li >
<li > < a href = " # " > Sobre </a > </ li >
<li > < a href = " # " > Contato </ a > </ li >
</ ul >
</ div >
<ul >
<li > < h4 > QUEM SOMOS </ h4 > </ li >
<li > < a href = " # " > Onde estamos </a > </ li >
<li > < a href = " # " > Parceiros </ a > </ li >
<li > < a href = " # " > T r a b a l h e conosco </ a > </ li >
</ ul >
</ div >
<ul >
<li > < h4 > REDES SOCIAIS </ h4 > </ li >
<li > < a href = " # " > Twitter </ a > </ li >
<li > < a href = " # " > Facebook </a > </ li >
<li > < a href = " # " > Youtube </ a > </ li >
</ ul >
</ div >
< div class = " c o p y r i g h t" >
<h5 > C E F E T M G - Aplica & ccedil ;& otilde ; es WEB & copy ; C o p y r i g h t 2016 Todos os d i r e i t o s reservados </ h5 >
</ div >
</ div >
</ div >
84
85
86
</ body >
</ html >
3.2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Arquivo: sobre.html
< html >
< head >
</ head >
< body >
<! - - MENU -->
<li > < a href = " index . html " > IN & iacute ; CIO </a > </ li >
<li > < a href = " # " > SOBRE </a > </ li >
<li > < a href = " c o n t a t o. html " > CONTATO </ a > </ li >
</ ul >
</ div >
<! - - P R I N C I P A L -->
< div class = " sobre " >
<h2 > SOBRE N & Oacute ;S </ h2 >
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<p > Lorem ipsum dolor sit amet , c o n s e c t e t u e r a d i p i s c i n g elit , sed diam
n o n u m m y nibh
wisi enim ad
nulla
f a c i l i s i s at vero eros et a c c u m s a n et iusto . </p >
n o n u m m y nibh
wisi enim ad
nulla
n o n u m m y nibh
wisi enim ad
nulla
</ div >
<! - - RODAPÉ -->
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<ul >
<li > < h4 > MENU </ h4 > </ li >
</ ul >
</ div >
<ul >
</ ul >
</ div >
<ul >
</ ul >
</ div >
</ div >
</ div >
</ div >
74
75
76
</ body >
</ html >
3.3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Arquivo: contato.html
< html >
< head >
</ head >
< body >
<! - - MENU -->
<li > < a href = " index . html " > IN & iacute ; CIO </a > </ li >
<li > < a href = " sobre . html " > SOBRE </ a > </ li >
<li > < a href = " # " > CONTATO </ a > </ li >
</ ul >
</ div >
<! - - P R I N C I P A L -->
< div class = " c o n t a t o" >
<h2 > CONTATO </ h2 >
<hr >
24
25
26
27
< form >
< label for = " nome " >* Nome : </ label > < br >
< input type = " text " name = " nome " / > <br >
28
29
30
< label for = " email " >* Email : </ label > <br >
< input type = " text " name = " email " / > <br >
31
32
33
< label for = " a s s u n t o" > A s s u n t o: </ label > <br >
< input type = " text " name = " a s s u n t o" / > <br >
34
35
36
< label for = " msg " > M e n s a g e m : </ label > <br >
< t e x t a r e a name =" msg " cols = " 35 " rows = " 4 " id = " msg" > </ textarea > < br >
37
38
39
< input type = " submit " name = " enviar " value = " Enviar M e n s a g e m" id = "
enviar " ><br >
</ form >
40
41
42
43
< div class = " c o n t a c t" >
<h2 > T e l e f o n e : </ h2 >
<h4 >(099) 9999 -9999 </h4 >
44
45
46
<h2 > Onde E s t a m o s : </ h2 >
<h4 > Avn . das Ac & aacute ; cias , 22 </ h4 >
47
48
49
50
<h2 > Cidade / Estado </ h2 >
<h4 > Algum lugar , Estado , Brasil </ h4 >
</ div >
51
52
53
54
55
56
57
58
< div class = " campo " >
<hr >
<i > Os campos com * s & atilde ; o o b r i g a t& oacute ; rios </ i >
</ div >
</ div >
</ div >
<! - - RODAPÉ -->
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<ul >
<li > < h4 > MENU </ h4 > </ li >
</ ul >
</ div >
<ul >
</ ul >
</ div >
<ul >
</ ul >
</ div >
</ div >
</ div >
</ div >
89
90
91
</ body >
</ html >
3.4
1
2
3
4
5
6
7
8
Arquivo: layout.css
body {
b a c k g r o u n d : # E5E5E5 ;
margin : 0;
p a d d i n g: 0;
font - family : Tahoma , arial , v e r d a n a;
color : # 000;
}
9
10
a{
color : # 000;
11
12
13
}
14
15
ul {
list - style : none ;
margin : 0;
p a d d i n g: 0;
16
17
18
19
}
20
21
22
23
24
25
. c o n t a i n e r{
margin : 0 auto ;
width : 750 px ;
height : auto ;
}
26
27
28
29
30
31
32
33
/* Menu */
. menu {
b a c k g r o u n d : # ccc ;
width : 751 px ;
height : 35 px ;
margin : 70 px 0 0 0;
p a d d i n g: 0;
34
box - shadow : 1 px 1 px 3 px # 8 8 8 8 8 8 ;
- moz - box - shadow : 1 px 1 px 3 px # 8 8 8 8 8 8 ;
- webkit - box - shadow : 1 px 1 px 3 px # 8 8 8 8 8 8 ;
text - shadow : 0 px 2 px 3 px # 666;
35
36
37
38
39
40
}
41
42
. menu li { d i s p l a y: inline ; }
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
. menu - top li a {
width : 50 px ;
height : 15 px ;
p a d d i n g: 8 px 40 px ;
float : left ;
/* text - shadow : 0 px 2 px 3 px #666; */
}
. menu - top li a : hover {
background: # 393939;
color : # fff ;
border - bottom : solid 4 px # FF8C00 ;
text - shadow : 1 px 0 px 1 px # fff ;
}
58
59
/* Main */
60
61
62
63
64
65
. main {
width : 750 px ;
height : auto ;
float : left ;
margin : 15 px 0 15 px 0;
}
66
67
68
69
70
71
72
. main . box - left {
width : 350 px ;
height : 190 px ;
float : left ;
b a c k g r o u n d : # FFFFF0 ;
}
73
74
75
76
77
78
79
80
. main . box - right {
width : 350 px ;
height : 190 px ;
float : right ;
margin - right : 15 px ;
}
81
82
83
84
85
86
87
88
89
90
. main . box - text1 {
width : 335 px ;
height : 170 px ;
float : left ;
p a d d i n g: 15 px ;
}
91
92
93
94
95
96
97
98
99
100
. main . box - text2 {
width : 335 px ;
height : 170 px ;
float : right ;
}
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
# leia {
width : 70 px ;
height : auto ;
color : # FFF ;
border - top : 0 px ;
border - left : 0 px ;
border - right : 0 px ;
float : left ;
}
116
117
# leia : hover { text - shadow : 0 px 2 px 3 px #666; }
118
119
120
/* FOOTER */
121
122
123
124
125
126
127
128
. footer {
width : 750 px ;
height : 160 px ;
float : left ;
b a c k g r o u n d: # 3 9 3 9 3 9 ;
color : # FFFFE0 ;
}
129
130
131
132
133
134
. footer - box {
width : 245 px ;
height : 130 px ;
float : left ;
}
135
136
. footer - box ul { margin - left : 50 px ; }
137
138
. footer - box li a { color : # fff ; }
139
140
141
142
143
144
145
. footer - box li a : hover {
color : # fff ;
b a c k g r o u n d : # 1 C1C1C ;
}
146
147
148
149
150
. footer - box h4 {
text - shadow : 1 px 0 px 1 px # 1 C1C1C ;
font - style : i n h e r i t;
}
151
152
153
154
155
156
157
158
159
. footer . c o p y r i g h t{
width : 100%;
height : 30 px ;
float : left ;
b a c k g r o u n d : # 1 C1C1C ;
border - top : solid 2 px # FF8C00 ;
}
160
161
. footer . c o p y r i g h t h5 { margin - top : 8 px ; }
162
163
/* PAGINA SOBRE */
164
165
166
167
168
169
170
171
172
173
. sobre {
width : 720 px ;
height : auto :
float : left ;
b a c k g r o u n d : # FFFFFF ;
}
174
175
/* C o n t a t o */
176
177
178
179
180
181
. c o n t a t o{
width : 720 px ;
height : auto ;
float : left ;
182
183
184
185
186
187
188
189
190
b a c k g r o u n d : # FFFFFF ;
}
input {
width : 302 px ;
height : 20 px ;
color : # 3 9 3 9 3 9 ;
font - weight : bold ;
}
191
192
193
194
195
196
197
198
label {
width : 250 px ;
height : 20 px :
color : # 2 2 2 2 2 2 ;
}
199
200
t e x t a r e a{ width : 302 px ; }
201
202
203
204
205
206
form {
width : 350 px ;
height : auto ;
float : left ;
}
207
208
209
210
211
212
213
. c o n t a c t{
width : 350 px ;
height : 255 px ;
float : right ;
color : # 2 2 2 2 2 2 ;
}
214
215
216
217
218
219
220
. campo {
width : 100%;
float : left ;
color : # 2 2 2 2 2 2 ;
}
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
# enviar {
width : 150 px ;
height : auto ;
color : # FFF ;
border - top : 0 px ;
border - left : 0 px ;
border - right : 0 px ;
float : left ;
margin : 10 px 0 0 157 px ;
}
4
Javascript
Para rodar JavaScript em uma página Web, precisamos ter em mente que a execução do código é
instantânea. Para inserirmos um código JavaScript em uma página, é necessário utilizar a tag <script>
:
1
2
3
< script >
alert ( " Hello World ! ") ;
</ script >
O exemplo acima é um hello world em JavaScript utilizando uma função do navegador, a função
alert. É possível adicionar essa tag em qualquer local do documento que a sua renderização ficará
suspensa até o término dessa execução.
Experimente criando essa tag em um HTML e reposicionando-a, verifique os elementos que já foram
renderizados na página antes do aparecimento da caixa de diálogo e o que acontece após clicar em ”OK”.
Também é possível executar código que está em um arquivo externo, por exemplo:
No arquivo HTML
1
< script src = " s c r i p t s/ hello . js " > </ script >
Arquivo externo script/hello.js
1
alert ( " Hello World ! ") ;
Com a separação do script em arquivo externo é possível reaproveitar alguma funcionalidade em
mais de uma página.
4.1
Variáveis
Para armazenarmos um valor para uso posterior, podemos criar uma variável:
1
var curso = " WD -43 " ;
2
3
alert ( curso ) ;
No exemplo acima, guardamos o valor WD-43 na variável curso . A partir desse ponto, é possível
utilizar a variável para obter o valor que guardamos nela. No JavaScript, também é possível alterar
o valor da variável a qualquer momento, inclusive por valores de tipos diferentes (por exemplo, um
número) sem problemas, coisa que não é possível de se fazer em algumas outras linguagens de programação.
4.2
Tipos
O JavaScript dá suporte aos tipos String (letras e palavras), Number (números inteiros, decimais),
Boolean (verdadeiro ou falso) entre outros.
1
2
3
var texto = " Uma String deve ser e n v o l v i d a em aspas s i m p l e s ou duplas . ";
var numero = 2012;
var v e r d a d e = true ;
Outro tipo de informação que é considerado um tipo no JavaScript é o Array, onde podemos
armazenar uma série de informações de tipos diferentes:
1
var p e s s o a s = [" I z a b e l i t a" , " S a b r i n a" , " Willl " , " Lucas " ];
4.3
Iteração
Quando utilizamos o JavaScript para interagir com os elementos da página é muito comum obtermos
cole- ções. Para fazer alguma coisa com cada elemento de uma coleção é necessário efetuar uma iteração.
A mais comum é utilizando o for:
1
var p e s s o a s = [" I z a b e l i t a" , " S a b r i n a" , " Willl " , " Lucas " ];
2
3
4
5
for ( var i = 0; i < p e s s o a s. length ; i ++) {
alert ( p e s s o a s[ i ]) ;
}
4.4
Interatividade na Web
Observe o exemplo a seguir:
1
var titulo = d o c u m e n t. q u e r y S e l e c t o r (" # titulo " ) ;
2
3
titulo . t e x t C o n t e n t = " Agora o texto do e l e m e n t o mudou ! ";
No exemplo anterior, nós selecionamos um elemento do documento e alteramos sua propriedade
textContent. Existem diversas maneiras de selecionarmos elementos de um documento e de alterarmos
suas propriedades. Inclusive é possível selecionar elementos de maneira similar ao CSS, através de
seletores CSS:
1
var p a i n e l N o v i d a d e s = d o c u m e n t. q u e r y S e l e c t o r (" . painel # n o v i d a d e s") ;
2
3
p a i n e l N o v i d a d e s . style . color = " red " ;
querySelector vs querySelectorAll
A função querySelector sempre retorna um elemento, mesmo que o seletor
potencialmente traga mais de um elemento, neste caso, apenas o primeiro
elemento será retornado.
A função querySelectorAll retorna uma lista de elementos compatíveis com
o seletor CSS passado como argumento. Sendo assim, para acessarmos cada
elemento retornado, precisaremos passar o seu índice conforme o exemplo
abaixo:
1
2
3
var p a r a g r a f o s = d o c u m e n t. q u e r y S e l e c t o r A l l (" div p " ) ;
p a r a g r a f o s [0]. t e x t C o n t e n t = " P r i m e i r o p a r a g r a f o da s e l e c a o" ;
p a r a g r a f o s [1]. t e x t C o n t e n t = " S e g u n d o p a r a g r a f o da s e l e c a o";
Apesar de ser interessante a possibilidade de alterar o documento todo por meio do JavaScript,
existe um problema com a característica de execução imediata do código. O mais comum é que as alterações sejam feitas quando o usuário executa alguma ação, como por exemplo, clicar em um elemento.
Para suprir essa necessidade, é necessário utilizar de dois recursos do JavaScript no navegador. O
primeiro é a criação de funções:
1
2
3
f u n c t i o n m o s t r a A l e r t a () {
alert ( " F u n c i o n a! ") ;
}
Ao criarmos uma função, a execução do código simplesmente guarda o que estiver dentro da função,
e esse código guardado só será executado quando chamarmos a função. Para exemplificar a necessidade
citada acima, vamos utilizar o segundo recurso, os eventos:
1
2
3
4
< head >
< title > T e s t a n d o JavaScript </ title >
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< script l a n g u a g e=" J a v a s c r i p t" >
alert ( " F u n c i o n a! " ) ;
}
</ script >
</ head >
< body >
< div class = " Topo " >
<P > Clique aqui para testar o javascript </p >
< input type =" button " name = " enviar " value = " Testar " o n c l i c k= "
m o s t r a A l e r t a () " >
</ div >
</ body >
</ html >
Também podemos executar uma função, através de uma chamada executada em outra função.
Observe o exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
< head >
alert ( " F u n c i o n a! " ) ;
}
f u n c t i o n e x e c u t a r () {
var botao = d o c u m e n t. q u e r y S e l e c t o r (" # enviar " ) ;
botao . o n c l i c k = m o s t r a A l e r t a;
}
</ script >
</ head >
< body >
< span hidden =" hidden " > e x e c u t a r () </ span >
m o s t r a A l e r t a () " >
</ div >
</ body >
</ html >
Também é possível determinar, por meio de seus argumentos, que a função vai ter algum valor
variável que vamos definir quando quisermos executá-la:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< head >
f u n c t i o n m o s t r a A l e r t a ( texto ) {
alert ( texto ) ;
}
</ script >
</ head >
< body >
m o s t r a A l e r t a ( ’ F u n c i o n a com a r g u m e n t o !! ’)" >
16
17
18
19
<! - - OBS : USO DAS ASPAS S I M P L E S NA P A S S A G E M DO A R G U M E N T O -->
</ div >
</ body >
</ html >
Existem diversos eventos que podem ser utilizados para que a interação do usuário com a página
seja o ponto de disparo de funções que alteram os elementos da própria página:
• onclick: clica com o mouse
• ondblclick: clica duas vezes com o mouse
• onmousemove: mexe o mouse
• onmousedown: aperta o botão do mouse
• onmouseup: solta o botão do mouse (útil com os dois acima para gerenciar drag?n?drop)
• onkeypress: ao pressionar e soltar uma tecla
• onkeydown: ao pressionar uma tecla.
• onkeyup: ao soltar uma tecla. Mesmo acima.
• onblur: quando um elemento perde foco
• onfocus: quando um elemento ganha foco
• onchange: quando um input, select ou textarea tem seu valor alterado
• onload: quando a página é carregada
• onunload: quando a página é fechada
• onsubmit: disparado antes de submeter o formulário. Útil para realizar validações
Existem também uma série de outros eventos mais avançados que permitem a criação de interações
para drag-and-drop, e até mesmo a criação de eventos customizados.
4.5
Validação na busca com JavaScript
Vamos criar um formulário e utilizar o Google como mecanismo de busca, apenas como ilustração.
Para isso, crie o arquivo html conforme abaixo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< head >
</ head >
< body >
<P > I n f o r m e o texto para r e a l i z a r a busca : </ p >
< form action =" http :// www . google . com . br / search " id = " form - busca " >
< input type =" search " name = " q " id = " q " >
< input type =" submit " name = " enviar " value = " P e s q u i s a r" >
</ div >
</ body >
</ html >
Repare que colocamos também um id . Ele será útil para depois manipularmos esse elemento via
JavaScript.
Além disso, o <input> com o texto a ser buscado deve ter o nome de q para ser compatível com o
Google.
Teste a página e submeta uma busca simples para o Google com o nosso formulário.
Vamos agora fazer uma validação, para verificar se o valor foi preenchido, quando o usuário clicar
em submeter. Caso contrário nosso site irá mostrar uma mensagem de erro em um alert .
A validação será escrita em JavaScript. Assim, crie um arquivo pesquisa.js na pasta do projeto.
Referencie esse arquivo no seu html usando a tag <script> no final da página, logo antes de fechar
o </body>:
1
< script src = " p e s q u i s a. js " > </ script >
A validação em si será feita por uma função JavaScript a ser acionada no momento que o usuário
tentar submeter o formulário.
A função deve ser definida dentro do arquivo pesquisa.js criado antes. Seu papel é verificar se o
elemento com id=q (o campo de busca) está vazio. Se estiver, mostramos um alert e abortamos a
submissão do formulário com return false:
1
2
3
4
5
6
7
8
f u n c t i o n v a l i d a B u s c a () {
if ( d o c u m e n t. q u e r y S e l e c t o r ( ’# q ’) . value == ’ ’) {
alert ( ’ Nao podia ter d e i x a d o em branco !!! ’) ;
return false ;
}
}
// f a z e n d o a a s s o c i a c a o da funcao com o evento
d o c u m e n t. q u e r y S e l e c t o r ( ’# form - busca ’) . o n s u b m i t = v a l i d a B u s c a;
Desta forma verificamos se o <input type=’text’> está vazio, deixando que o navegador chame a
função quando acontecer o evento onsubmit.
Se ao invés de enviar um alerta de erro você desejar, por exemplo, chamar a atenção modificando
a cor do formulário, o código da função deverá ser ajustado assim:
1
2
3
4
5
6
7
8
f u n c t i o n v a l i d a B u s c a () {
d o c u m e n t. q u e r y S e l e c t o r ( ’# form - busca ’) . style . b a c k g r o u n d = ’ red ’;
return false ;
}
}
// f a z e n d o a a s s o c i a ç ã o da função com o evento
d o c u m e n t. q u e r y S e l e c t o r ( ’# form - busca ’) . o n s u b m i t = v a l i d a B u s c a;
No exemplo anterior criamos uma função JavaScript com nome validaBusca e a referenciamos no
onsubmit do formulário. Mas repare que o único uso dessa função é nessa situação.
Nesses casos, podemos usar um recurso do JavaScript chamado de funções anônimas que nos
permite definir a função diretamente na definição do onsubmit. Veja como fica nosso exemplo:
1
2
3
4
5
6
d o c u m e n t. q u e r y S e l e c t o r ( ’# form - busca ’) . o n s u b m i t = f u n c t i o n () {
d o c u m e n t. q u e r y S e l e c t o r ( ’# form - busca ’) . style . b a c k g r o u n d = ’ red ’;
return false ;
}
};
4.6
Funções temporais
Em JavaScript, podemos criar um timer para executar um trecho de código após um certo tempo,
ou ainda executar algo de tempos em tempos.
A função setTimeout permite que agendemos alguma função para execução no futuro e recebe o
nome da função a ser executada e o número de milissegundos a esperar:
1
2
// e x e c u t a a m i n h a F u n c a o daqui um s e g u n d o
s e t T i m e o u t ( minhaFuncao , 1000) ;
Se for um código recorrente, podemos usar o setInterval que recebe os mesmos argumentos mas
executa a função indefinidamente de tempos em tempos:
1
2
// e x e c u t a a m i n h a F u n c a o de um em um s e g u n d o
s e t I n t e r v a l ( minhaFuncao , 1000) ;
uma função útil para, por exemplo, implementar um banner rotativo.
clearInterval
As funções temporais devolvem um objeto que representa o agendamento que
foi feito. É possível usá-lo para cancelar a execução no futuro. É especialmente interessante para o caso do interval que pode ser cancelado de sua
execução infinita:
1
2
3
4
// agenda uma e x e c u c a o q u a l q u e r
var timer = s e t I n t e r v a l ( minhaFuncao , 1000) ;
// c a n c e l a e x e c u c a o
c l e a r I n t e r v a l ( timer ) ;
4.6.1
Exemplo: Banner rotativo
Temos duas imagens, a imagem1.jpg e a imagem2.jpg que queremos trocar a cada 3 segundos. Há
várias formas de implementar essa troca de imagens. Uma sugestão é manter um array com os valores
possíveis para a imagem e um inteiro que guarda qual é o banner atual.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< head >
< style rel = " s t y l e s h e e t" type = " text / css " media = " all " >
. Topo img {
max - width : 700 px ;
max - height : 230 px ;
width : auto ;
height : auto ;
}
</ style >
</ head >
< body >
< img src = " i m a g e m 1. jpg" >
</ div >
var b a n n e r s = [" i m a g e m 1. jpg " , " i m a g e m 2. jpg " ];
var b a n n e r A t u a l = 0;
f u n c t i o n t r o c a B a n n e r () {
b a n n e r A t u a l = ( b a n n e r A t u a l + 1) % 2;
d o c u m e n t. q u e r y S e l e c t o r ( ’. Topo img ’) . src = b a n n e r s[ b a n n e r A t u a l ];
}
26
27
28
29
s e t I n t e r v a l( trocaBanner , 3000) ;
</ script >
</ body >
</ html >
4.6.2
Desafio 1
1. Faça um botão de pause que pare a troca do banner.
Dica: use o clearInterval para interromper a execução.
2. Faça um botão de play para reativar a troca dos banners.
4.6.3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Proposta de solução para o desafio 1
< head >
< style rel = " s t y l e s h e e t" type = " text / css " media = " all " >
. Topo img {
float : left ;
max - width : 700 px ;
max - height : 230 px ;
width : auto ;
height : auto ;
}
. pause , . play {
float : left ;
}
. pause {
border - left : 10 px solid # 900;
border - right : 10 px solid # 900;
height : 30 px ;
width : 5 px ;
}
. play {
border - left : 25 px solid # 900;
border - bottom : 15 px solid t r a n s p a r e n t;
border - top : 15 px solid t r a n s p a r e n t;
}
</ style >
</ head >
< body >
< img src = " i m a g e m 1. jpg" >
<a href = " # " class = " pause " > </a >
</ div >
var b a n n e r s = [" i m a g e m 1. jpg " , " i m a g e m 2. jpg " ];
var b a n n e r A t u a l = 0;
f u n c t i o n t r o c a B a n n e r () {
b a n n e r A t u a l = ( b a n n e r A t u a l + 1) % 2;
d o c u m e n t. q u e r y S e l e c t o r ( ’. Topo img ’) . src = b a n n e r s[ b a n n e r A t u a l ];
}
43
44
45
46
var timer = s e t I n t e r v a l ( trocaBanner , 3000) ;
var c o n t r o l e = d o c u m e n t. q u e r y S e l e c t o r ( ’. pause ’) ;
c o n t r o l e. o n c l i c k = f u n c t i o n () {
if ( c o n t r o l e. c l a s s N a m e == ’ pause ’) {
c l e a r I n t e r v a l ( timer ) ;
c o n t r o l e. c l a s s N a m e = ’ play ’;
} else {
timer = s e t I n t e r v a l ( trocaBanner , 3000) ;
c o n t r o l e. c l a s s N a m e = ’ pause ’;
}
return false ;
47
48
49
50
51
52
53
54
55
56
57
58
};
</ script >
</ body >
</ html >
4.6.4
Desafio 2
Faça um script que receba uma data no formato ”dd/mm/aaaa” e escreva a data por extenso.
Exemplo: Para a entrada ”04/03/2016” deve ser escrito ”04 de março de 2016”.
4.6.5
1
2
3
4
5
6
7
8
9
Proposta de solução para o desafio 1
< head >
< title > Desafio </ title >
< script >
f u n c t i o n v e r i f i c a r () {
data = d o c u m e n t. q u e r y S e l e c t o r ( ’. d a t a I n f o ’) . value ;
// data = window . d o c u m e n t. formul . d a t a I n f o r m a d a . value ;
10
11
12
13
14
15
16
17
dt = data . split ( ’/ ’) ;
dia = dt [0];
mes = dt [1];
ano = dt [2];
mes = p a r s e I n t( mes ) ;
m e s E x t e n s o = [" j a n e i r o" , " f e v e r e i r o" , " março " , " abril " , " maio " , " junho " , "
julho " , " agosto " , " s e t e m b r o" , " o u t u b r o" , " n o v e m b r o" , " d e z e m b r o" ];
mesExt = m e s E x t e n s o[ mes -1];
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
d o c u m e n t. q u e r y S e l e c t o r ( ’# r e s u l t a d o ’) . i n n e r H T M L = dia + " de " + mesExt + " de
" + ano ;
// d o c u m e n t. g e t E l e m e n t B y I d (" r e s u l t a d o ") . i n n e r H T M L = dia + " de "+ m e s E x t e n s o
+" de "+ ano ;
}
</ script >
</ head >
< body >
<h1 > Data por extenso </ h1 > </ br >
<hr >
< form name = formul >
< table border =0 >
<tr >
<td > < label for = " Data " > Data : </ label > </ td >
</ tr >
<tr >
<td > < input type =" text " name = " d a t a I n f o r m a d a " class = " d a t a I n f o" / > </
td >
<td > < input type = button value = V e r i f i c a r o n c l i c k=" v e r i f i c a r () " > </
td >
</ tr >
</ table >
37
38
39
40
41
</ form >
<hr >
<h3 > < span id =" r e s u l t a d o" > </ span > </ h3 >
</ body >
</ html >
4.7
jQuery
O jQuery é uma grande biblioteca que contém diversas funções que facilitam a vida do programador. A mais importante delas, que inicia a maioria dos códigos, é a função $.
Com ela é possível selecionar elementos com maior facilidade, maior compatibilidade, e com menos
código. Por exemplo:
1
2
// J a v a S c r i p t " puro "
var c a b e c a l h o = d o c u m e n t. g e t E l e m e n t B y I d (" c a b e c a l h o" ) ;
3
4
5
6
7
8
9
10
11
12
if ( c a b e c a l h o . a t t a c h E v e n t) {
c a b e c a l h o. a t t a c h E v e n t (" o n c l i c k" , f u n c t i o n ( event ) {
alert ( " Você clicou no cabeçalho , u s u á r i o do IE ! " ) ;
}) ;
} else if ( c a b e c a l h o . a d d E v e n t L i s t e n e r ) {
c a b e c a l h o. a d d E v e n t L i s t e n e r (" click " , f u n c t i o n ( event ) {
alert ( " Você clicou no c a b e ç a l h o! ")
} , false ) ;
}
13
14
15
16
17
// jQuery
$ ( " # c a b e c a l h o" ) . click ( f u n c t i o n ( event ) {
alert ( " Você clicou no c a b e ç a l h o! " ) ;
}) ;
Note como a sintaxe do jQuery é bem menor, e a biblioteca se encarrega de encontrar o modo mais
compatível possível para adicionar o evento ao elemento cujo id é cabecalho.
Existem diversas funções que o jQuery permite que utilizemos para alterar os elementos que selecionamos pela função $, e essas funções podem ser encadeadas, por exemplo:
1
2
$ ( " # c a b e c a l h o" ) . css ({ " margin - top " : " 20 px " , " color " : " # 3 3 3 3 3 3" })
. a d d C l a s s( " s e l e c i o n a d o ") ;
No código acima, primeiramente chamamos a função $ e passamos como argumento uma String
idêntica ao seletor CSS que utilizaríamos para selecionar o elemento de id cabecalho. Na sequência
chamamos a função css e passamos um objeto como argumento, essa função adicionará ou alterará
as informações desse objeto como propriedades de estilo do elemento que selecionamos com a função
$. Em seguida chamamos mais uma função, a addClass, que vai adicionar o valor ”selecionado” ao
atributo class do elemento com o id ”cabecalho”.
Dessa maneira, é possível fazer muito mais com muito menos código, e ainda por cima de uma
maneira que funciona em diversos navegadores.
4.7.1
Características de execução
Para utilizarmos o jQuery em nossos projetos com maior segurança, devemos tomar alguns cuidados.
Importação
Antes de mais nada é necessário incluir o jQuery em nossa página. Só assim o navegador executará
seu código para que possamos utilizar suas funcionalidades em nosso código.
Por isso é necessário que a tag <script> do jQuery seja a primeira de todas na ordem de nosso
documento:
1
2
3
4
< script
<! - - só
< script
< script
src = " s c r i p t s/ jquery . js " > </ script >
p o d e m o s u t i l i z a r o jQuery após sua i m p o r t a ç ã o -->
src = " s c r i p t s/ m e u s c r i p t. js " > </ script >
src = " s c r i p t s/ m e u o u t r o s c r i p t . js " </ script >
Para utilizar a biblioteca jQuery, pode-se fazer o download:
• através do site: http://jquery.com/download/
• via Git: git clone git://github.com/jquery/jquery.git
• utilizar o link para a versão online:
1
4.7.2
< script src = " // code . jquery . com / jquery - 1 . 1 2 . 0 . min . js " > </ script >
jQuery Selectors
Um dos maiores poderes do jQuery está na sua capacidade de selecionar elementos a partir de
seletores CSS.
Como já aprendemos, exitem diversas formas de selecionarmos quais elementos ganharão determinado estilo. Infelizmente muitos desses seletores não funcionam em todos os navegadores. Contudo,
no jQuery, os temos todos à nossa disposição.
Por exemplo, se quisermos esconder todas as tags <td> filhas de um <tbody>, basta:
1
$ ( ’ tbody td ’) . hide () ;
Seletores mais comuns:
1
2
// pinta o fundo do f o r m u l a r i o com id " form " de preto
$ ( ’# form ’) . css ( ’ b a c k g r o u n d ’, ’ black ’) ;
3
4
5
// e s c o n d e todos os e l e m e n t o s com o a t r i b u t o " class " igual a " h e a d l i n e"
$ ( ’. h e a d l i n e ’) . hide () ;
6
7
8
// muda o texto de todos os p a r á g r a f o s
$ ( ’p ’) . text ( ’ alo : D ’) ;
Mais exemplos:
1
$ ( ’ div > p : first ’) ; // o p r i m e i r o e l e m e n t o <p > i m e d i a t a m e n t e filho de um <
div >
2
3
$ ( ’ input : hidden ’) ; // todos os inputs i n v i s i v e i s
4
5
$ ( ’ input : s e l e c t e d ’) ; // todas as c h e c k b o x e s s e l e c i o n a d a s
6
7
$ ( ’ input [ type = button ] ’) ; // todos os inputs com type =" button "
8
9
$ ( ’td , th ’) ; // todas as tds e ths
Lembre-se de que a função que chamamos após o seletor é aplicada para todos os elementos retornados. Veja:
1
2
// forma i n e f i c i e n t e
alert ( $ ( ’ div ’) . text () + $ ( ’p ’) . text () + $ ( ’ ul li ’) . text () ) ;
3
4
5
// forma e f i c i e n t e : D
alert ( $ ( ’div , p , ul li ’) . text () ) ;
A função text() é chamada para todos os <div>s, <p>s, e <li>s filhos de <ul>s.
Tabela 1: Seleção Básica
Descrição
Seleciona o elemento com determinado id
Exemplo: $(”#primDiv”).css(”background-color”,”black”);
elemento
Seleção pelo elemento html
Exemplo: $(”div”).css(”border”,”9px double red”);
.classe
Elementos de detrminada classe
Exemplo: $(”.destaque”).css(”fontWeight”,”bolder”);
.classe.classe Elementos que pertençam a ambas classes.
Exemplo: $(”.destaque.especial”).css(”color”,”red”);
*.
Todos elementos
Exemplo: $(”*”).css(”color”,”black”);
Combinação dos anteriores com vírgula
Exemplo: $(”div,span,p.olho”).css(”margin”,”3px 0 0 0”);
Seleção
#id
Seleção
Ascendente Descente
Pai > Filho
Anterior + Seguinte
Anterior Irmãos
Tabela 2: Seleção Hierárquica
Descrição
Seleção de descendentes de determinado elemento.
Exemplo: $(”form label”).css(”color”,”gray”);
Seleção de elementos-filho de um determinado elemento.
Exemplo: $(”#conteudo > *”).css(”border”,”2px solid green”);
Seleção de elemento que segue-se a um determinado elemento.
Exemplo: $(”label + input”).css(”border”,”1px dotted blue”);
Seleção de elementos-irmãos após determinado elemento.
Exemplo: $(”#inicio div”).css(”color”,”aquamarine”);
4.7.3
Filtrando elementos com jQuery
Quando trabalhamos com a biblioteca jQuery, por vezes temos a necessidade de filtrar certos elementos da página com características específicas. Apesar de ser possível utilizar seletores CSS para
realizar boa parte desses filtros, existem funções nativas de sintaxe mais simples que podem tornar
esta tarefa ainda mais fácil.
A seguir, cada função será apresentada individualmente, juntamente com um exemplo de uso e
discussão dos resultados obtidos. Para facilitar a compreensão, apenas uma estrutura HTML será
usada para todas as funções. Salve o conteúdo da Listagem abaixo como um arquivo de extensão html
e, no local indicado, inserir o código das listagens de cada exemplo para teste.
Estrutura HTML utilizada
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
< head >
< title > T e s t a n d o jQuery </ title >
< meta c h a r s e t=" utf -8 " / >
< script type =" text / j a v a s c r i p t" src = " js / jquery - 2 . 1 . 1 . min . js " > </ script >
< style type = " text / css " >
# div1 {
border : solid 1 px ;
width :100 px ;
height :20 px ;
}
# p1 {
border : solid 2 px green ;
width :150 px ;
height :20 px ;
}
# div2 {
border : solid 1 px red ;
width :200 px ;
height :20 px ;
}
. d e s t a q u e{
background - color : yellow ;
}
</ style >
</ head >
< body >
< div id = " c o n t a i n e r" >
< div id = " div1 " >
< span > div1 </ span >
</ div >
<p id = " p1 " >
p1
</p >
< div id = " div2 " > div2 </ div >
</ div >
</ body >
</ html >
Observe que foram aplicados estilos simples aos elementos no interior da div container apenas para
diferenciá-los uns dos outros visualmente. Vamos então às funções.
eq
A função eq() seleciona um único elemento em uma lista de acordo com seu índice. Existem duas
possibilidades de chamada: passando um índice positivo ou negativo. Com a passagem de um valor
positivo como parâmetro, o elemento é selecionado pelo seu índice real na lista, já com parâmetro
negativo, a contagem para seleção é feita de trás para frente. Por exemplo, passando o valor -1, o
elemento selecionado seria o último.
Observação 2: apesar de a contagem começar em zero, o último elemento em contagem negativa é
o -1, pois não faz sentido usar o zero com valor negativo.
Na listagem a seguir, selecionamos o elemento filho da div container que tenha o índice 1, ou seja,
o segundo elemento, e adicionamos a ele a classe CSS destaque.
1
$ ( " # c o n t a i n e r" ) . c h i l d r e n () . eq (1) . a d d C l a s s(" d e s t a q u e" ) ;
Abrindo o arquivo no browser, o parágrafo p1 deve ter a cor do plano de fundo alterada para
amarelo.
first
De nome sugestivo, a função first() não requer nenhum parâmetro e seleciona o primeiro elemento
de uma lista. Por exemplo, no caso dos elementos filhos da div container , o elemento selecionado com
o uso dessa função seria a div div1. Na listagem a seguir vemos esse exemplo na prática, onde o plano
de fundo da div1 será alterado para amarelo.
1
$ ( " # c o n t a i n e r" ) . c h i l d r e n () . first () . a d d C l a s s(" d e s t a q u e" ) ;
last
Semelhante à função anterior, mas retorna o último elemento da lista filtrada. No caso, aplicando
esta função aos elementos filhos da div container , o resultado seria a div div2, a última da lista.
1
$ ( " # c o n t a i n e r" ) . c h i l d r e n () . last () . a d d C l a s s(" d e s t a q u e" ) ;
Com isso a div2 deve ter seu background alterado para amarelo.
is
Esta função, diferente das apresentadas até agora, não seleciona um elemento, ela retorna true ou
false caso uma condição seja atendida. Esta condição indica se o elemento filtrado possui ou não certa
característica.
Como parâmetro é passado um filtro que identifique o elemento, por exemplo, pelo tipo de tag.
Na próxima Listagem, filtramos o primeiro elemento filho da div container e verificamos se é uma
div e, dependendo do resultado, adicionamos a ela classe destaque. É de se esperar que o resultado
seja verdadeiro.
1
2
3
var e l e m e n t o = $ (" # c o n t a i n e r") . c h i l d r e n () . first () ;
if ( $ ( " # c o n t a i n e r") . c h i l d r e n () . is (" div " ) )
e l e m e n t o. a d d C l a s s(" d e s t a q u e" ) ;
not
A função not() é utilizada para excluir certo grupo de elementos de uma lista, de acordo com um
filtro definido. Por exemplo, a lista de elementos filhos da div container é composta por duas divs e
um parágrafo. Se aplicarmos o filtro div, na função not, obteremos a lista com os elementos do tipo
div removidos, ou seja, apenas o parágrafo.
Vejamos então esse exemplo na prática, facilitando a compreensão.
1
2
3
$ ( f u n c t i o n () {
$ ( " # c o n t a i n e r") . c h i l d r e n () . not (" div " ) . a d d C l a s s( " d e s t a q u e" ) ;
}) ;
Como se vê no código acima, a partir da lista de elementos filhos da div container filtramos aqueles
que não atendem ao filtro div, ou seja, que não são desse tipo, e adicionamos a eles a classe CSS
destaque.
Abrindo o arquivo no browser, verificaremos que o parágrafo (elemento central) teve a cor do plano
de fundo definida como amarelo.
has
A nomenclatura dessa função é bastante sugestiva. Do termo em inglês has ou tem em português,
indica que a função retorna os elementos de uma lista que TÊM/POSSUEM um determinado elemento
filho.
Para exemplificar, poderíamos filtrar os elementos filhos da div container que contém um filho do
tipo span. Facilmente percebemos que o único elemento selecionado seria a primeira div, a div1. O
código a seguir mostra esse exemplo na prática.
1
2
3
$ ( f u n c t i o n () {
$ ( " # c o n t a i n e r") . c h i l d r e n () . has (" span " ) . a d d C l a s s( " d e s t a q u e" ) ;
}) ;
Nesse caso, somente a primeira div terá a cor do background alterada.
4.7.4
Efeitos de exibir e esconder conteúdo
O exemplo abaixo mostra as funções fadeIn e fadeOut da biblioteca jQuery.
arquivo html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< head >
< title > T e s t a n d o jQuery </ title >
< script type =" text / j a v a s c r i p t" src = " js / meujs . js " > </ script >
</ head >
< body >
<h1 > E x e r c í c i o com jQuery </ h1 >
< button type =" button " id = " btn1 " name = " button " > Show div </ button >
< button type =" button " id = " btn2 " name = " button " > E s c o n d e r div </ button >
< div class = " texto " >
<p > Caixa de texto que a p a r e c e r á e d e s a p a r e c e r á com as f u n ç õ es do
jQuery ! </p >
</ div >
</ body >
</ html >
meujs.js
1
2
3
4
5
6
7
8
$ ( d o c u m e n t) . ready ( f u n c t i o n () {
$ ( " # btn1 " ) . click ( f u n c t i o n () {
$ ( " . texto " ) . fadeIn () ;
}) ;
$ ( " # btn2 " ) . click ( f u n c t i o n () {
$ ( " . texto " ) . f a d e O u t () ;
}) ;
}) ;
4.7.5
Utilitário de iteração do jQuery
O jQuery traz também entre suas diversas funcionalidades, uma função que facilita a iteração em
elementos de um Array com uma sintaxe mais agradável:
1
2
3
$ ( " # menu - d e p a r t a m e n t o s li ") . each ( f u n c t i o n ( index , item ) {
alert ( item . text () ) ;
}) ;
A função each chamada logo após um seletor executa a função que passamos como argumento para
cada um dos itens encontrados. Essa função precisa de dois argumentos. O primeiro será o ”índice” do
elemento atual na coleção (0 para o primeiro, 1 para o segundo e assim por diante), e o segundo será
o próprio elemento.
Também é possível utilizar a função each do jQuery com qualquer Array:
1
var p e s s o a s = [" João " , " José " , " Maria " , " A n t ô n i o" ];
2
3
4
5
$ . each ( pessoas , f u n c t i o n( index , item ) {
alert ( item ) ;
})
Nesse caso, chamamos a função each diretamente após o $, pois essa implementação é um método
do próprio objeto $. Passamos dois argumentos, o primeiro é o Array que queremos percorrer e o
segundo a função que desejamos executar para cada um dos itens do Array.
4.7.6
Executar somente após carregar
Como estamos constantemente selecionando elementos do documento e alterando suas características, é importante garantir que os elementos que pretendemos utilizar já tenham sido carregados pelo
navegador.
A melhor maneira de garantir isso é somente executar nosso script após o término do carregamento
total da página com a função $ dessa maneira:
1
2
3
$ ( f u n c t i o n () {
$ ( " # c a b e c a l h o") . css ({ " background - color ": " # 0 0 0 0 0 0" }) ;
})
Essa função $ que recebe uma função anônima como argumento garante que o código dentro dela
só será executado ao fim do carregamento de todos os elementos da página.
4.8
4.8.1
Exemplos de utilização jQuery
Exemplo 1 - carregamento de páginas dinâmico
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< head >
< title > Avalia & ccedil ;& atilde ; o Aplica & ccedil ;& otilde ; es Web </ title >
< meta c h a r s e t= utf -8 " / >
< script type = " text / j a v a s c r i p t" src = " jquery - 2 . 1 . 1 . min . js " > </ script >
< script type = " text / j a v a s c r i p t" >
$ ( d o c u m e n t) . ready ( f u n c t i o n( e ) {
$ ( " # menu - top a ") . click ( f u n c t i o n( e ) {
e . p r e v e n t D e f a u l t () ;
var href = $ ( this ) . attr ( ’ href ’) ;
$ ( " # p r i n c i p a l") . load ( href + " # p r i n c i p a l" ) ;
}) ;
}) ;
</ script >
</ head >
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
< body >
< div id = " menu " >
< ul id = " menu - top " >
<li > < a href = " inicio . html " > IN & iacute ; CIO </ a > </ li >
<li > < a href = " h i s t o r i a. html " > HIST & Oacute ; RIA </ a > </ li >
<li > < a href = " dicas . html " > DICAS </ a > </ li >
</ ul >
</ div >
< div id = " topo - p r i n c i p a l" >
<h3 > Principal </ h3 >
</ div >
< div id = " p r i n c i p a l" >
<p > Essa & eacute ; a home do site </p >
<p > D i s c i p l i n a: L a b o r a t& oacute ; rio de Aplica & ccedil ;& otilde ; es WEB </p
>
<p > C E F E T M G - U n i d a d e Varginha </ p >
<br >
< img id = " img1 " src =" logo1 . jpg" >
</ div >
< div id = " rodape " >
</ div >
</ div >
</ body >
44
45
</ html >
inicio.html
1
2
3
4
5
6
7
< head >
< meta c h a r s e t= utf -8 " / >
8
9
</ head >
10
11
12
13
14
15
16
17
18
19
< body >
<p > Essa & eacute ; a home do site </p >
<p > D i s c i p l i n a: L a b o r a t& oacute ; rio de Aplica & ccedil ;& otilde ; es WEB </p
>
<br >
< img id = " img1 " src = " logo1 . jpg " >
</ div >
</ body >
20
21
</ html >
historia.html
1
2
3
4
5
6
7
< head >
< meta http - equiv =" content - type " c o n t e n t= " text / html ; c h a r s e t= utf -8 " / >
< link rel = " s t y l e s h e e t" type = " text / css" href =" css / layout . css " >
8
9
</ head >
10
11
12
13
14
15
16
17
18
19
20
21
22
< body >
<p > Essa & eacute ; a p & aacute ; gina hist & oacute ; ria </p >
<p > Aqui bl & aacute ; bl & aacute ; bl & aacute ; bl & aacute ; bl & aacute ; bl &
aacute ; </p >
aacute ; </p >
aacute ; </p >
<p > S e g u n d o bimestre </ p >
<br >
< img id = " img2 " src =" ajax . jpg " >
</ div >
</ body >
23
24
</ html >
dicas.html
1
2
3
4
5
6
7
< head >
< meta http - equiv =" content - type " c o n t e n t= " text / html ; c h a r s e t= utf -8 " / >
< link rel = " s t y l e s h e e t" type = " text / css" href =" css / layout . css " >
8
9
</ head >
10
11
12
13
14
< body >
<p > Essa & eacute ; a p & aacute ; gina de dicas </p >
aacute ; </p >
aacute ; </p >
aacute ; </p >
<p > S e g u n d o bimestre </ p >
15
16
17
18
19
20
21
</ div >
</ body >
22
23
</ html >
css/layout.css
body {
b a c k g r o u n d : # E5E5E5 ;
margin : 0;
p a d d i n g: 0;
font - family : Tahoma , arial , v e r d a n a;
color : # 000;
1
2
3
4
5
6
7
8
}
9
10
11
12
13
14
. c o n t a i n e r{
margin : 0 auto ;
width : 750 px ;
height : auto ;
}
15
16
17
18
19
20
21
22
# menu {
b a c k g r o u n d : # ccc ;
width : 750 px ;
height : 35 px ;
margin : 70 px 0 0 0;
p a d d i n g: 0;
float : left ;
23
box - shadow : 1 px 1 px 3 px # 8 8 8 8 8 8 ;
- moz - box - shadow : 1 px 1 px 3 px # 8 8 8 8 8 8 ;
- webkit - box - shadow : 1 px 1 px 3 px # 8 8 8 8 8 8 ;
text - shadow : 0 px 2 px 3 px # 666;
24
25
26
27
28
29
}
30
31
# menu li { d i s p l a y: inline ; }
32
33
34
35
36
37
38
# menu - top li a {
width : 50 px ;
height : 15 px ;
float : left ;
}
39
40
41
42
43
44
45
# p r i n c i p a l{
width : 750 px ;
height : auto ;
float : left ;
}
46
47
48
# topo - p r i n c i p a l h3 {
width : 750 px ;
height : auto ;
float : left ;
49
50
51
52
53
54
}
55
56
57
58
# principal p{
}
59
60
61
62
63
64
65
66
# img1 {
width : 120 px ;
height : 90 px ;
left : 320 px ;
bottom : 10 px ;
}
67
68
69
70
71
72
73
74
# img2 {
width : 120 px ;
height : 90 px ;
left : 320 px ;
bottom : 10 px ;
}
75
76
77
78
# rodape {
}
4.8.2
Exemplo 2 - janela modal simples
index.html
1
2
3
4
5
6
7
8
9
10
11
12
< head >
< title > E x e m p l o Janela Modal </ title >
< link rel = " s t y l e s h e e t" type = " text / css" href =" layout . css " >
< script >
$ ( " a [ rel = modal ] ") . click ( f u n c t i o n( ev ) {
ev . p r e v e n t D e f a u l t () ;
13
14
var id = $ ( this ) . attr (" href " ) ;
15
16
17
var a l t u r a T e l a = $ ( d o c u m e n t) . height () ;
var l a r g u r a T e l a = $ ( window ) . width () ;
18
19
20
21
22
// c o l o c a n d o o fundo preto
$ ( ’# m a s c a r a ’) . css ({ ’ width ’: larguraTela , ’ height ’: a l t u r a T e l a }) ;
$ ( ’# m a s c a r a ’) . fadeIn (1000) ;
$ ( ’# m a s c a r a ’) . fadeTo ( " slow " ,0.8) ;
23
24
25
26
var left = ( $ ( window ) . width () /2) - ( $ ( id ) . width () / 2 ) ;
var top = ( $ ( window ) . height () / 2) - ( $ ( id ) . height () / 2 ) ;
$ ( id ) . css ({ ’ top ’: top , ’ left ’: left }) ;
$ ( id ) . show () ;
27
28
29
}) ;
30
31
32
33
34
$ ( " # m a s c a r a" ) . click ( f u n c t i o n () {
$ ( this ) . hide () ;
$ ( " . window " ) . hide () ;
}) ;
35
36
37
38
39
40
41
42
43
$ ( ’. fechar ’) . click ( f u n c t i o n( ev ) {
ev . p r e v e n t D e f a u l t () ;
$ ( " # m a s c a r a" ) . hide () ;
$ ( " . window " ) . hide () ;
}) ;
}) ;
</ script >
</ head >
44
45
46
< body >
<a href = " # j a n e l a 1" rel = " modal " > Janela modal </a >
47
48
49
50
51
52
53
< div class = " window " id = " j a n e l a 1" >
<a href = " # " class = " fechar " >X Fechar </a >
<h4 > P r i m e i r a janela moda </ h4 >
<p > Lorem ipsum dolor sit amet , c o n s e c t e t u r a d i p i s c i n g elit . Etiam
v e n e n a t i s auctor tempus . Lorem ipsum dolor sit amet , </p >
<p > Morbi dui lacus , p l a c e r a t eget p r e t i u m vehicula , mollis id ligula .
Nulla f a c i l i s i. </p >
</ div >
54
55
56
57
58
<! - - m a s c a r a para cobrir o site -->
< div id = " m a s c a r a" > </ div >
</ body >
59
60
</ html >
layout.css
1
2
3
4
5
6
7
8
9
10
11
12
. window {
width :300 px ;
height :300 px ;
left :0;
top :0;
b a c k g r o u n d: # FFF ;
z - index :9900;
border - radius :10 px ;
}
13
14
15
16
17
18
19
20
21
# m a s c a r a{
left :0;
top :0;
z - index :9000;
background - color :# 000;
}
22
23
. fechar { d i s p l a y: block ; text - align : right ;}
4.8.3
Exemplo 3 - método load()
index.html
1
2
3
4
5
6
7
8
9
10
11
< head >
< title > M & eacute ; todo load () da jQuery para r e q u i s i& ccedil ;& otilde ; es AJAX </
title >
< link rel = " s t y l e s h e e t" type = " text / css " href = " layout . css" >
< script type =" text / j a v a s c r i p t" src = " js / jquery - 2 . 1 . 1 . min. js " > </ script >
< script type =" text / j a v a s c r i p t" >
var c a r r e g a n d o = $ ( ’# c a r r e g a n d o ’)
var c o n t e u d o A j a x = $ ( ’# conteudo - ajax ’)
12
13
14
15
f u n c t i o n m o s t r a r C a r r e g a n d o () {
c a r r e g a n d o. css ( ’ d i s p l a y ’ , ’ block ’) . fadeIn (1000) ;
};
16
17
18
19
20
21
22
23
f u n c t i o n a p o s C a r r e g a m e n t o () {
c a r r e g a n d o. f a d e O u t (1000) ;
c o n t e u d o A j a x. s l i d e D o w n () ;
$ ( ’. fechar ’) . click ( f u n c t i o n () {
c o n t e u d o A j a x . s l i d e U p( ’ slow ’) ;
}) ;
};
24
25
$ ( c o n t e u d o A j a x) . css ( ’ o p a c i t y ’ , .94) ;
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
$ ( ’# ajax a ’) . click ( f u n c t i o n( event ) {
event . p r e v e n t D e f a u l t () ;
m o s t r a r C a r r e g a n d o () ;
switch ( this . id ) {
case ’ m1 ’:
c o n t e u d o A j a x . s l i d e U p () ;
c o n t e u d o A j a x . load ( ’ arquivo - html . html # t x 2 0 0 0 b r ’, a p o s C a r r e g a m e n t o ) ;
break ;
case ’ m2 ’:
c o n t e u d o A j a x . load ( ’ arquivo - html . html # d v 3 0 0 0 b r ’, a p o s C a r r e g a m e n t o ) ;
break ;
case ’ m3 ’:
c o n t e u d o A j a x . load ( ’ arquivo - html . html # dv4 ’ , a p o s C a r r e g a m e n t o ) ;
break ;
d e f a u l t:
a p o s C a r r e g a m e n t o () ;
break ;
}
}) ;
})
</ script >
</ head >
< body >
< div id = " tudo " >
<h1 > < img src =" i m a g e n s/ hp . gif " alt = " Logo HP " / > N o t e b o o k s para casa </ h1 >
< div id = " c a r r e g a n d o" >
< img src = " i m a g e n s/ c a r r e g a n d o. gif" alt = " C a r r e g a n d o ... " / >
</ div >
57
58
59
60
61
62
63
64
< div id = " ajax " >
< div id = " n1 " >
< img src = " i m a g e n s/ n1 . jpg " alt = " N o t e b o o k P a v i l i o n série t x 2 0 0 0 B R"
width = " 218 " height = " 160 " / >
<h2 > Fam & iacute ; lia P a v i l i o n Notebook </ h2 >
<h3 >& raquo ; HP P a v i l i o n s & eacute ; rie tx2000BR </ h3 >
<p > D e s c u b r a um mundo onde voc & ecirc ; pode e x p l o r a r sua c r i at i v i d a d e e
viver um novo u n i v e r s o de experi & ecirc ; ncias d i g i t a i s para deixar
seus dias mais divertidos , produtivos , pr & aacute ; ticos e in e s q u e c&
iacute ; veis . < br / >
<a href = " # " id = " m1 " > Mais & raquo ; </a > </ p >
</ div >
65
66
67
68
69
70
71
72
< div id = " n2 " >
< img src = " i m a g e n s/ n2 . jpg " alt = " N o t e b o o k P a v i l i o n série dv3500 " width
= " 218 " height = " 160 " / >
<h3 >& raquo ; HP P a v i l i o n s & eacute ; rie dv3500 </ h3 >
<p > Para quem p r o c u r a por r e c u r s o s de e n t r e t e n i m e n t o d i g i t al e as &
uacute ; ltimas t e c n o l o g i a s m & oacute ; veis em um design inovador , a s &
eacute ; rie de n o t e b o o k s HP P a v i l i o n dv3500 & eacute ; a solu & ccedil ;&
atilde ; o p e r f e i t a! < br / >
</ div >
73
74
75
76
77
78
79
80
81
82
< div id = " n3 " >
< img src = " i m a g e n s/ n3 . jpg " alt = " N o t e b o o k P a v i l i o n série dv4 " width = "
218 " height = " 160" / >
<h3 >& raquo ; HP P a v i l i o n s & eacute ; rie dv4 </ h3 >
<p > E x p a n d i n d o a eleg & acirc ; ncia s o f i s t i c a d a da linha atual , a nova s &
eacute ; rie dv & eacute ; d e f i n i d a por linhas m o d e r n a s e f l u i da s e
a c a b a m e n t o s met & aacute ; licos com inova & ccedil ;& otilde ; es
s u r p r e e n d e n t e s dentro e fora . < br / >
</ div >
</ div > <! - - fim div# ajax -->
<p id = " nota " > Os textos e i m a g e n s c o n s t a n t e s desta d e m o n s t r a& ccedil ;& atilde ; o
foram r e t i r a d o s e s & atilde ; o p r o p r i e d a d e do <a href = " http :// www . hp . com /
latam / br / lar / p r o d u t o s/ n o t e b o o k s. html " > site da HP do Brasil </a >. </p >
83
84
< div id = " conteudo - ajax " > </ div >
85
86
87
88
</ div > <! - - fim div# tudo -->
</ body >
</ html >
arquivo-html.html
1
2
3
4
5
6
7
8
9
10
11
< div id = " t x 2 0 0 0 b r" >
< span class = " fechar " >[ X ] FECHAR </ span >
<h2 > hp P a v i l i o n s & eacute ; rie tx2000BR </ h2 >
<h3 >& raquo ; HP P a v i l i o n t x 2 5 4 0 B R N o t e b o o k PC </ h3 >
< small >( LABR - F Q 7 2 4 L A) </ small >
<ul >
<li > W i n d o w s Vista & reg ; B u s i n e s s <a href =" http :// www . hp . com . br /
a u t e n t i c o" title = " Aut & ecirc ; ntico " > Aut & ecirc ; ntico </ a > </ li >
<li > P r o c e s s a d o r AMD Turion &# 8482; X2 Dual - Core RM -70 , 2.00 GHz </ li >
<li >2048 MB (2 x 1 0 2 4 M B) 800 MHz DDR2 , expans & iacute ; vel at & eacute ; 4 GB
</ li >
<li > Disco R & iacute ; gido 160 GB 5400 rpm SATA </ li >
</ ul >
12
13
14
15
16
17
18
19
20
21
22
<h3 >& raquo ; HP P a v i l i o n t x 2 5 7 0 B R N o t e b o o k PC </ h3 >
< small >( LABR - F Q 7 2 5 L A) </ small >
<ul >
<li > W i n d o w s Vista & reg ; B u s i n e s s <a href =" http :// www. hp . com . br / a u t e n t i c o"
title = " Aut & ecirc ; ntico " > Aut & ecirc ; ntico </ a > </ li >
<li > P r o c e s s a d o r AMD Turion # 8482; X2 Dual - Core RM -70 , 2.00 GHz </ li >
<li >3072 MB (1024 MB +2048 MB ) 800 MHz DDR2 , expans & iacute ; vel at & eacute ; 4 GB
</ li >
<li > Disco R & iacute ; gido 250 GB 5400 rpm SATA </ li >
</ ul >
<p > < strong > Nota : </ strong > < br / > A HP do Brasil r e s e r v a o d i r e i t o de a l t e r a r
q u a i s q u e r i n f o r m a& ccedil ;& atilde ; o ou e s p e c i f i c a & ccedil ;& atilde ; o sem pr &
eacute ; vio aviso . </ p >
</ div >
23
24
25
26
27
28
29
30
31
32
33
34
35
36
< div id = " d v 3 0 0 0 b r" >
<h2 > HP P a v i l i o n s & eacute ; rie dv3000BR </ h2 >
<h3 > HP P a v i l i o n d v 3 5 0 8 B R E n t e r t a i n m e n t N o t e b o o k PC </ h3 >
< small >& nbsp ;( LABR - J A 7 1 1 L A) </ small >
<ul >
<li > W i n d o w s Vista & reg ; U l t i m a t e 64 bits <a href =" http :// www . hp . com . br /
<li > P r o c e s s a d o r Intel & reg ; Core & trade ;2 Duo P7350 , 2.0 GHz </ li >
<li >4096 MB (2 x 2 0 4 8 M B) 800 MHz DDR2 , s u p o r t e p / Canal Duplo ( Dual C h a n n e l) ,
expans & iacute ; vel at & eacute ; 8 GB (3.2 GB p / S . O 32 bits ) </ li >
<li >250 GB 5400 rpm SATA ; T e c n o l o g i a HP P r o t e c t S m a r t ( d e t e ct a q u a l q u e r
m o v i m e n t o brusco e a u t o m a t i c a m e n t e trava seu disco r & iacute ; gido p /
evitar perda de dados ) </ li >
</ ul >
</ div >
37
38
39
40
41
42
43
44
45
46
47
48
< div id = " dv4 " >
<h2 > HP P a v i l i o n s & eacute ; rie dv4 </ h2 >
<h3 > HP P a v i l i o n dv4 -1190 BR N o t e b o o k PC </ h3 >
< small >( LABR - F Z 8 1 5 L A) </ small >
<ul >
<li > W i n d o w s Vista & reg ; Home P r e m i u m (64 bits ) <a href =" http :// www . hp . com
. br / a u t e n t i c o" title = " Aut & ecirc ; ntico " > Aut & ecirc ; ntico </ a > </ li >
<li > P r o c e s s a d o r Intel & reg ; Core & trade ;2 Duo T5900 , 2.2 GHz </ li >
</ ul >
49
50
51
52
53
54
55
56
< small >( LABR - F W 8 6 9 L A) </ small >
<ul >
<li > W i n d o w s Vista & reg ; U l t i m a t e <a href =" http :// www. hp . com . br / a u t e n t i c o"
<li > P r o c e s s a d o r Intel & reg ; Core & trade ;2 Duo P7350 , 2.0 GHz </ li >
57
</ ul >
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<ul >
<li >3072 MB (1024 MB +2048 MB ) 800 MHz DDR2 , s u p o r t e p / Canal Duplo ( Dual
C h a n n e l) , expans & iacute ; vel at & eacute ; 8 GB (3.2 GB p / S . O 32 bits ) </ li
>
</ ul >
<ul >
>
</ ul >
75
76
77
78
79
80
81
82
83
< small >( LABR - N C 9 7 6 L A) </ small >
<ul >
<li > W i n d o w s Vista & reg ; Home P r e m i u m <a href =" http :// www . hp . com . br /
</ ul >
84
85
86
87
88
89
90
91
92
<ul >
</ ul >
93
94
95
96
97
< small > LABR - N G 8 5 1 L A) </ small >
<ul >
98
99
100
101
>
</ ul >
102
103
104
105
106
107
108
109
110
111
112
< small > LABR - F W 8 6 5 L A) </ small >
<ul >
<li > W i n d o w s Vista & reg ; Home Basic <a href =" http :// www . hp . com . br /
<li > P r o c e s s a d o r Intel & reg ; P e n t i u m& reg ; Dual - Core T3200 , 2.0 GHz </ li >
</ ul >
</ div >
layout.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body {
margin :0;
p a d d i n g :0;
font : 7 5 % / 1 . 4 Arial , Helvetica , sans - serif ;
b a c k g r o u n d: # f6f6f6 ;
color : # 333;
}
# tudo {
width :750 px ;
b a c k g r o u n d: # fff ;
margin :0 auto ;
text - align : left ;
border - color :# ccc ;
border - width :1 px ;
border - style : solid dotted ;
}
# ajax {
width :720 px ;
o v e r f l o w: hidden ;
margin :0 0 20 px 15 px ;
}
# n2 { margin :0 30 px ;}
h1 , h2 , h3 { margin :0;}
h1 img { vertical - align : middle ;}
h1 {
font - size :1.6 em ;
b a c k g r o u n d: # eee ;
border - bottom :1 px solid # ccc ;
}
h2 {
}
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
h3 {
border - bottom :1 px dotted # 333;
}
# ajax div {
width :220 px ;
float : left ;
d i s p l a y: inline ;
}
# ajax p a {
color : # 036;
}
# carregando {
v i s i b i l i t y: hidden ;
}
# conteudo - ajax {
width :400 px ;
max - height :400 px ;
o v e r f l o w: auto ;
border :1 px dotted # ccc ;
p a d d i n g :10 px 20 px ;
top :100 px ;
left :154 px ;
}
# conteudo - ajax h2 {
b a c k g r o u n d: # 393;
font - size :1 em ;
}
# conteudo - ajax h3 {
font - size :1 em ;
}
# conteudo - ajax . fechar {
text - align : right ;
color : # 080;
}
# nota {
font - size :.9 em ;
margin :0;
p a d d i n g :5 px 0;
border - top :1 px solid # ccc ;
}
5
Bibliografia
Silva, Maurício Samy. Fundamentos de HTML5 e CSS3. Novatec, São Paulo, 2015
Silva, Maurício Samy. Criando Sites com HTML. Novatec, São Paulo, 2008
Castro, Elizabeth. HTML, XHTML e CSS. Alta Books, Rio de Janeiro, 2010
Dall’Oglio, Pablo. PHP Programando com Orientação a Objetos. Novatec, São Paulo, 2007
Dall’Oglio, Pablo. Criando Relatórios com PHP. Novatec, São Paulo, 2013
Gabardo, Ademir C. Criando um E-Commerce com CodeIgniter, Novatec, São Paulo, 2015

Aplicações para WEB

Transcrição

Documentos relacionados

Língua Inglesa - 2º ano - Elements of day and night: Sun, Moon

arweb sistemas

Layouts de páginas com HTML e CSS

Folha de Estilos em Cascata Cascading Style Sheet

LaTeX: onde encontrar

Correcção Teste_3

Inteligência de negócios Geo

auto de apreensão de bens móveis

Código Fonte

Web Design: Responsivo e Adaptativo