Desenvolvimento para Web PDF

Prof. Dr.
Wagner José Dizeró

wagner@unilins.edu.br
EMENTA:
Funcionamento e histórico da Internet. Elaboração de
páginas web através da linguagem Html. Tags.
Hipertexto. Hiperlink. Uso de folha de estilo (CSS).
Formulários. Javascript.
CRITÉRIOS DE APROVEITAMENTO:
Provas: peso 8.0 (oito)
Trabalhos: peso 2.0 (dois)
Livro Texto:
1. Use a Cabeça – Html com CSS e XHMTL; Freeman, Elisabeth & Freeman,
Eric; Ed. Alta Books; 2ª edição; 2008; 10 exemplares.
2. Padrões de Projeto com CSS e HTML; Bowers, Michael; Ed. Alta Books; 2ª
edição; 2008; 10 exemplares.
3. Construindo Sites com CSS e XHTML; Silva, Maurício Samy; Ed. Novatec; 1ª
Bibliografia Complementar:
4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1ª edição; 2001; 10
exemplares.
5. Estudo Dirigido: Web Javascript; Manzano, José Augusto et al.; Ed. Érica; 1ª
6. Html 4 – Teoria e Prática; Ramalho, José Antônio; Ed. Berkley; 1ª edição;
2000; 5 exemplares.
7. Projetando Websites; Nielsen, Jakob; Ed. Elsevier; 1ª edição; 2000; 14
exemplares.
8. Criando Páginas Web com CSS: Soluções Avançadas para Padrões Web;
Budd, Andy, et al.; Ed. Pearson; 1ª edição; 2006; 5 exemplares.
(1605) Surge o código binário
(1844) Transmissão por telégrafo
(1946) Criado o ENIAC
(1957) Nasce a ARPA
(1961) Transmissão de dados por pacote
(1970) O termo INTERNET é criado
(1971) Idealização do e-mail
(1973) Primeira conexão intercontinental
(1977) Criação do protocolo TCP/IP
(1981) Lançado o PC da IBM
(1987) FAPESP conecta-se a instituições EUA
(1995) No Brasil, chega aos usuários comuns
(2000) Expansão do comércio eletrônico
(2004) Disseminação das redes sociais
(2007) Surgem os primeiros smartphones
5
De acordo com o W3C, a Web é baseada em 3
pilares:
◦ Um esquema de nomes para localização de fontes de
informação na Web, esse esquema chama-se URI.
◦ Um Protocolo de acesso para acessar estas fontes, hoje
o HTTP.
◦ Uma linguagem de Hypertexto, para a fácil navegação
entre as fontes de informação: o HTML.
6
HTML é uma abreviação de Hypertext Markup
Language - Linguagem de Marcação de
Hypertexto.
Resumindo em uma frase: o HTML é uma
linguagem para publicação de conteúdo (texto,
imagem, vídeo, áudio e etc) na Web.
É possível criar páginas utilizando ferramentas
(como Dreamwaver) ou montá-las diretamente
através do uso de TAGs.
TAG = comando
7
Entre 1993 e 1995, o HTML ganhou as versões HTML+,
HTML2.0 e HTML3.0, onde foram propostas diversas
mudanças para enriquecer as possibilidades da linguagem.
Contudo, até aqui o HTML ainda não era tratado como um
padrão.
Apenas em 1997, o grupo de trabalho do W3C responsável
por manter o padrão do código, trabalhou na versão 3.2 da
linguagem, fazendo com que ela fosse tratada como
prática comum.
O HTML 4.0 surgiu em 1997, há mais de uma década. A
estruturação de páginas em HTML 4.0 é basicamente
constituída pelo elemento <div>, com classes e IDs
diferentes.
8
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Uma Página HTML5 Básica</title>
</head>
<body>

Primeiro exemplo de HTML.
</body>
</html>
9
DOCTYPE
◦ para que o navegador reconheça que deve funcionar no “standards
mode”
Tag html
◦ com o atributo lang, para identificar a língua na qual o conteúdo do
documento será escrito
Tag head
◦ Informações de cabeçalho não visíveis da página
Tag meta
◦ Especificando a codificação da página (charset)
Tag title
◦ Título da página
Tag body
◦ Conteúdo da página
10
Comandos Básicos
<!doctype html>
<html lang="pt-BR">
<head>
<title>Quebra de linha</title>
</head>
<body>
Primeira linha. <br />
Segunda linha.
</body>
</html> A tag <br /> pode ser usada
várias vezes, pulando uma
linha a cada comando.
12
<!doctype html>
<html lang="pt-BR">
<head>
<title>Tamanho do Texto</title>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html> A tag <p> não produz
nenhum efeito se usada
mais de uma vez.
13
<!doctype html>
<html lang="pt-BR">
<head>
<title>Cabeçalho de Título</title>
</head>
<body>
<h1>Cabeçalho Tamanho 1</h1>
<hr> 
</body>
</html>
14
<!doctype html>
<html lang="pt-BR">
<head>
<title>Cor de fundo</title>
</head>
<body bgcolor="gray">
Cor de fundo
</body>
</html>
Tabela de cores HTML:

www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
15
<!doctype html>
<html lang="pt-BR">
<head>
<title>Lista Ordenada</title>
</head>
<body>
<ul>
<li>Abacaxi</li>
<li>Laranja</li>
<li>Mamão</li>
<li>Morango</li>
<li>Pera</li>
</ul>
</body>
</html>
16
<!doctype html>
<html lang="pt-BR">
<head>
<title>Lista Ordenada</title>
</head>
<body>
<ol>
<li>Limpar a superficie</li>
<li>Aplicar o produto</li>
<li>Passar nova camada</li>
<li>Aguardar a secagem</li>
<li>Pronto!</li>
</ol>
</body>
</html>
17
<!doctype html>
<html lang="pt-BR">
<head>
<title>Carregar Imagens</title>
</head>
<body>
<img src="logo.png">
</body>
</html>
Atenção para o caminho e nome do arquivo!!!

Se a imagem estiver na mesma pasta, não precisa indicar o path
18
C:\
html 
index.htm
<img src="./imagem.png">
imagem.png
<img src="./image/imagem.gif">
image
<img src="../img/imagem.jpg">
imagem.gif
img
imagem.jpg
Sempre deve-se usar o caminho relativo.

No servidor, será hospedado em outra pasta.
Nunca se deve o caminho físico:
<img src="C:\html\imagem.png">
19
É possível referenciar imagens diretamente de outros sites.
<img src="http://www.google.com.br/images/srpr/logo3w.png">
◦ Vantagem que a imagem é atualizada automaticamente

◦ Desvantagem é que a imagem pode ser removida do site
20
É possível redimensionar uma imagem sem precisar editar
<img src="logo.png" width="300" height="120">
◦ Cuidado para não perder a qualidade da resolução.
21
Um link serve para direcionar o usuário para outra
página do site ou para um site externo.
Veja meu Currículo

<a href="vitae.htm">Currículo</a>
Conheça a Google
<a href="http://www.google.com.br">Google</a>
Para carregar uma nova janela,

use: target="_BLANK" 22
É possível usar uma imagem como âncora de um
link.
Conheça a
<a href="http://www.google.com.br">
<img src="logo.png" border="0">
</a>
23
<table border="1">
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
</tr>
<tr>
<td>1</td>
<td>Pen Drive</td>
<td>45,00</td>
</tr>
<tr>
<td>2</td>
<td>Notebook</td>
<td>2399,99</td>
<table>: cria a tabela
</tr>
<tr>: cria uma linha (table row)
</table>
<th>: cria uma cabeçalho (table head)
<td>: cria uma coluna (table data)
24
<table width="500" border="0">
<tr bgcolor="#36648B">
<td colspan="3" align="center">
<font color="white">Relação de Produtos</font></td>
</tr>
<tr bgcolor="#4682B4">
<th width="60">Código</th>
<th>Preço</th>
</tr>
<tr bgcolor="#B0C4DE">
<td align="center">1</td>
<td>Pen Drive</td>
<td align="right">45,00</td>
</tr>
...
border: define a borda
</table> colspan: expande a coluna
align: alinha o texto
25
1. Crie uma página chamada ‘academico.htm’ com
a seguinte formatação:
a) O cabeçalho deve ter tamanho 2.
b) Após o cabeçalho, incluir uma linha horizontal.
c) Criar uma lista não ordenada com os itens
‘Graduação’, ‘Pós-Graduação’ e ‘Extensão’ com fonte
tamanho 3.
d) Na frente do item ‘Graduação’, usar uma imagem de
lupa para criar um link para a página ‘graduacao.htm’.
e) Criar uma sublista com as opções ‘Mestrado’ e
‘Doutorado’. Os itens devem estar com o type de
marcador quadrado.
26
27
2. Na outra página (graduacao.htm), criar uma tabela com os cursos:
Curso Duração Período

Agronomia 5 anos Integral
Biologia 4 anos Diurno
Direito 5 anos Noturno
Medicina 6 anos Integral
Nutrição 4 anos Noturno
Odontologia 5 anos Diurno
Pedagogia 4 anos Noturno
Após a listagem dos cursos, criar um link com a palavra ‘voltar’, que deve
direcionar o usuário novamente para a página ‘colegiados.htm’.
28
29
W3C é a sigla para World Wide Web Consortium, uma
organização independente que gerencia as normas para
codificação na Internet (isto é, HTML, CSS, XML e
outros).
Microsoft, Fundação Mozilla e muitas outras
organizações são membros do W3C e formam um
consenso sobre o futuro desenvolvimento de normas.
A ideia da normatização é criar um consenso e
encontrar um denominador comum para uso de
tecnologias para a Web.
30
Validador da W3C que faz uma verificação da arquivos
HTML e XML e retorna um relatório com os eventuais
erros e avisos caso seu arquivo não valide.
http://validator.w3.org/
31
TAG Função
HTML Delimita o início e final de uma página
HEAD Define o cabeçalho da página
BODY Contem o conteúdo a se exibido pela página
BR Quebra de linha, equivalente à tecla ENTER
P Parágrafo de texto
H? Cabeçalho de título
OL Lista ordenada
UL Lista não ordenada
IMG Carregar uma imagem
A Âncora para um hiperlink
TABLE Tabela
32
Cascading Style Sheets
(Folha de Estilos)
CSS é uma linguagem de estilo utilizada para
definir a apresentação de documentos escritos em
uma linguagem de marcação, como HTML ou
XML.
Seu principal benefício é prover a separação entre

o formato e o conteúdo de um documento.
Em resumo:
◦ HTML é usado para estruturar conteúdos.
◦ CSS é usado para formatar conteúdos estruturados.
34
CSS controla fontes, cores, margens, linhas, alturas,
larguras, imagens de fundo, posicionamentos e
muito mais.
Vantagens:
◦ Economizar tempo
◦ Diminuir o tamanho do código de uma página
◦ Carregar a página mais rapidamente
◦ Maior facilidade para dar manutenção no site
◦ Mais controle no layout da página
◦ Vários documentos podem compartilhar os estilos
35
Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado será obtido assim:

body {background-color: #FF0000;}
◦ Os códigos HTML e CSS são mais ou menos parecidos.
◦ Em CSS usamos três itens: seletor, propriedade e valor.
36
Método 1: In-line (o atributo style)
◦ O estilo é aplicado diretamente no elemento.
Método 2: Interno (a tag style)

◦ Utiliza-se a tag style para definir o CSS
Método 3: Externo (link para um arquivo separado)

◦ Utiliza um arquivo externo com a extensão .css
37
<!doctype html>
<html lang="pt-BR">
<head>
</head>
<body style="background-color: #FF0000;">
<p>Página com fundo vermelho</p>
</body>
</html>
38
<!doctype html>
<html lang="pt-BR">
<head>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
</body>
</html>
39
<!doctype html>
<html lang="pt-BR">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>


body {background-color:#FF0000;}
40
Propriedades:
◦ color
◦ background-color
◦ background-image
◦ background-size
◦ background-repeat
◦ background-attachment
◦ background-position
◦ background
41
<!doctype html>
<html lang="pt-BR">
<head>
h1 {color: #FF0000;}
</style>
</head>
<body>
<h1>Cabeçalho na cor vermelha</h1>
</body>
</html>
42
<!doctype html>
<html lang="pt-BR">
<head>
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
</style>
</head>
<body>
<h1>Cabeçalho com uma cor de fundo.</h1>
</body>
</html>
43
<!doctype html>
<html lang="pt-BR">
<head>
body {
background-image: url("imagem.png");
}
</style>
</head>
<body>
</body>
</html>
44
<!doctype html>
<html lang="pt-BR">
<head>
body {
background-size: 100%;
}
</style>
</head>
<body>
</body>
</html>
45
body {
background-repeat: no-repeat;
}
Valor Descrição
background-repeat: repeat-x A imagem se repete na horizontal
background-repeat: repeat-y A imagem se repete na vertical
background-repeat: repeat Se repete na horizontal e na vertical
background-repeat: no-repeat A imagem não se repete
46
body {
background-attachment: fixed;
}
Valor Descrição
background-attachment: scroll A imagem rola com a página
background-attachment: fixed A imagem é fixa
47
body {
background-attachment: fixed;
background-position: right bottom;
}
Valor Descrição
2cm 2cm A imagem é posicionada a 2
cm da esquerda e 2 cm
50% 25% A imagem é centrada na
horizontal e 25% para baixo
top right A imagem é posicionada no
canto superior direito
48
A propriedade background é uma
abreviação para todas as propriedades
listadas anteriormente.
background: #FFCC66
url("imagem.png")
no-repeat
fixed right bottom;
Obs.: pode ser feito tudo na mesma linha

49
Propriedades:
◦ font-family
◦ font-style
◦ font-variant
◦ font-weight
◦ font-size
◦ font
50
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
}
Se a primeira fonte da lista

não estiver instalada na
máquina do usuário, deverá
ser usada a segunda e assim
por diante até ser encontrada
uma fonte instalada.
51
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}
A propriedade font-style define

a escolha da fonte em
normal, italic ou oblique.
52
h1 {
font-variant: small-caps;
}
h2 {
font-variant: normal;
}
Usada para escolher as variantes normal ou small-caps.

Abaixo um exemplo de small-caps.
53
p {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}
Uma fonte pode ser normal ou bold
54
h1 {font-size: 30px;}
h2 {font-size: 120%;}
h3 {font-size: 12pt;}
p {font-size: 1em;}
55
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Equivale a:
p {
font: italic bold 30px arial, sans-serif;
}
56
Propriedades:
◦ text-align
◦ text-decoration
◦ text-indent
◦ text-transform
◦ letter-spacing
57
h1 {
text-align: right;
}
h2 {
text-align: left;
}
h3 {
text-align: center;
}
p {
text-align: justify;
}
58
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
p { underline
text-decoration: none;
overline
}
line-through
none
59
p {
text-indent: 30px;
}
Código HTML:
<p>As atualizações dos apps na Play Store, do Google, serão
mais rápidas. Isso porque a loja de aplicativos do Android agora
conta com um sistema de upgrade que baixa arquivos menores
para o smartphone, segundo o Android Police.</p>
Visualização no browser:
As atualizações dos apps na Play Store, do Google, serão
mais rápidas. Isso porque a loja de aplicativos do Android agora
conta com um sistema de upgrade que baixa arquivos menores
para o smartphone, segundo o Android Police.
60
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Propriedade Efeito
capitalize Capitaliza a primeira letra de cada palavra.
Por exemplo: "john doe" transforma-se para "John Doe“.
uppercase Converte todas as letras para maiúscula.

Por exemplo: "john doe" transforma-se para"JOHN DOE“.
lowercase Converte todas as letras para minúscula.
Por exemplo: "JOHN DOE" transforma-se para"john doe“.
none O texto é apresentado como foi escrito no código HTML.

Sem transformações.
61
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
espaçamento 6
espaçamento 3
62
Especifica a altura de uma linha de texto.
p { This example demonstrates different line-

line-height: normal; heights. You can change the line height by
} clicking on one of the line-height properties on
the left. This text is where you will see the result
of the selected line-height property.
p {
This example demonstrates different line-
line-height: 25px;
} heights. You can change the line height by
clicking on one of the line-height properties on
the left. This text is where you will see the result
of the selected line-height property.
63
Define como o elemento será apresentado:
<h1 class= "block">Texto1 </h1>
<h1 class="inline">Texto2 </h1>
<h1 class="inline">Texto3 </h1>
<h1 class= "none">Texto4 </h1>
<h1 class= "block">Texto5 </h1>
h1.block{
display: block;
}
h1.inline{
display: inline;
}
h1.none{
display: none;
}
64
h1.visible {
visibility: visible;
}
h1.hidden {
visibility: hidden;
}
<h1 class="visible">This is a visible heading</h1>

<h1 class="hidden">This is an invisible heading</h1>
<p>Notice that the invisible heading still takes up space.</p>
65
ul.myList {
<ul class="myList">
list-style-type: square;
<li>Café</li> }
<li>Chá</li>
<li>Coca-Cola</li>
</ul>
Opções para listas UL: ul.myList {

circle list-style: url("marcador.png");
disc }
none
square
66
<ol class="myList"> Opções para listas OL:
<li>Café</li> decimal
<li>Chá</li> decimal-leading-zero
<li>Coca-Cola</li> lower-alpha
</ol> lower-greek
lower-latin
lower-roman
none
ol.myList { upper-alpha
list-style-type: decimal; upper-greek
} upper-latin
upper-roman
67
Cursor especifica o tipo de cursor a ser exibido:
◦ auto
◦ crosshair
◦ default
◦ pointer
◦ move
◦ e-resize
◦ ne-resize
◦ nw-resize
◦ n-resize
◦ se-resize
◦ sw-resize
◦ s-resize
◦ w-resize
◦ text
◦ wait h1.cursor {
◦ help cursor: wait;
width: 200px;
background: #75AD45;
}
68
Pseudo-classes:
◦ link
◦ visited
◦ active
◦ hover
69
a {
color: blue;
}
Os links da página ficarão em azul e sem sublinhado.
70
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:active {
color:red;
}
a:hover {
background-color: yellow;
}
link é usada para links não visitados.

visited é usada para links já visitados.
active é usada para links ativos.
hover o ponteiro do mouse está sobre o link
71
a {
background-color: blue;
color: white;
font-family: verdana, arial;
border: solid 1px blue;
}
a:hover {
background-color: yellow;
color: blue;
}
<a href="#">Institucional</a>
<a href="#">Produtos</a>
<a href="#">Serviços</a>
<a href="#">Contatos</a>
72
CLASS e ID são usados para classificar e/ou
identificar elementos dentro de uma página.
O atributo class permite atribuir uma classe para
um grupo particular de elementos.
O atributo id serve para identificar um elemento
de forma única dentro da página.
◦ Assim, quando se deseja referenciar um grupo de
elementos deve-se usar class e o atributo id deve ser
usado quando se deseja identificar um único elemento
na página.
73
ul.whitewine { color: #0000FF;}
ul.redwine { color: #FF0000;}
</style>
<p>Uvas para vinho branco:</p>

<ul class="whitewine">
<li>Riesling</li>
<li>Chardonnay</li>
<li>Pinot Blanc</li>
</ul>
<p>Uvas para vinho tinto:</p>

<ul class="redwine">
<li>Cabernet Sauvignon</li>
<li>Merlot</li>
<li>Pinot Noir</li>
</ul>
74
#c1-2 { color: red; }
</style>
<h1 id="c1">Capítulo 1</h1>

...
<h2 id="c1-1">Capítulo 1.1</h2>
...
...
<h1 id="c2">Capítulo 2</h1>
...
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...
75
Os elementos <span> e <div> são usados para
agrupar e estruturar um documento e são
frequentemente usados em conjunto com os
atributos class e id.
Nesta lição veremos com detalhes o uso dos

elementos HTML <span> e <div> no que se refere
a sua vital importância para as CSS.
76
O elemento <span> é um elemento neutro e que
não adiciona qualquer tipo de semântica ao
documento.
Contudo, <span> pode ser usado pelas CSS para
adicionar efeitos visuais a partes específicas do
texto no seu documento.
◦ Vamos usar a citação abaixo de autoria de Benjamin Franklin:

Dormir cedo e acordar cedo faz o homem saudável,
rico e sábio.
77
<p>Dormir cedo e acordar cedo faz o homem
<span class="benefit">saudável</span>,
<span class="benefit">rico</span> e
<span class="benefit">sábio</span>.</p>
A folha de estilos:
span.benefit { color:red; }
É claro que você pode usar id para estilizar o elemento <span>. Mas,
como você deve estar lembrado, deverá usar uma única id para cada
um os três elementos <span>, conforme foi explicado na lição
anterior.
78
Enquanto <span> é usado dentro de um
elemento nível de bloco como vimos no exemplo
anterior, <div> é usado para agrupar um ou mais
elementos nível de bloco.
O <div> sempre cria um bloco (caixa) com seu
conteúdo.
Diferenças à parte, o agrupamento com <div>
funciona mais ou menos da mesma maneira.
79
<div id="democrats"> <style>
<ul> #democrats { background:blue; }
<li>Franklin D. Roosevelt</li> #republicans { background:red; }
<li>Harry S. Truman</li> </style>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
80
A propriedade width destina-se a definir a
largura de um elemento.
A propriedade height, por sua vez, define a
altura de um elemento.
Você pode usar a propriedade overflow para
criar uma barra de rolagem.
81
<div class="box">
Daqui a apenas alguns anos, as pessoas não precisarão mais
controlar os volantes dos próprios veículos, pois os carros
autodirigíveis – nos quais você define uma rota e se recosta
confortavelmente no banco, sem precisar fazer nada – já estarão
no mercado. A previsão consta em uma pesquisa da consultoria
KPMG e do Center for Automotive Research, e diz respeito ao
mercado norte-americano.
</div>
div.box { div.box {
width: 200px; width: 200px;
border: 1px solid black; height: 200px;
background: orange; overflow-y: scroll;
} border: 1px solid black;
background: orange;
}
82
O box model (modelo das caixas) em CSS, descreve os
boxes (as caixas) geradas pelos elementos HTML.
O box model, detalha ainda, as opções de ajuste de
margens, bordas, padding e conteúdo para cada
elemento.
83
<h1>Article 1:</h1>
<p>All human beings are born free and equal
in dignity and rights. They are endowed with
reason and conscience and should act towards
one another in a spirit of brotherhood</p>
84
h1 { p{
font-family: arial, verdana; font-family: arial, verdana;
color: #000099; color: #DAA520;
margin-top: 10px; margin: 3px 30px 3px 30px;
margin-right: 255px; padding-left: 70px;
margin-bottom: 8px; width: 300px;
margin-left: 30px; }
}
85
Define a distância da margem entre os elementos
vizinhos. No caso do BODY, da margem do browser.
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
86
Define a distância entre a borda e o conteúdo do elemento.
body {
margin: 100px 40px 10px 70px;
}
p {
}
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
87
border-style
border-width
border-color
88
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
89
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
90
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
ou
p { border: 1px solid blue; }
91
<table>
<tr>
<th>Código</th>
<th>Preço</th>
</tr>
<tr>
table{ <td>1</td>
border-collapse:collapse; <td>Pen Drive</td>
} <td>45,00</td>
table, td, th{ </tr>
border:1px solid black; <tr>
} <td>2</td>
<td>Notebook</td>
<td>2399,99</td>
</tr>
</table>
92
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)
93
Se desejamos que um texto seja posicionado em volta
de uma figura, basta flutuarmos a imagem:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates"> #picture {
</div> float: left;
<h1>Uma imagem flutuada</h1> }
<p>causas naturales et antecedentes,
etiam nostrarum voluntatum...</p>
94
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.
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.
95
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et
antecedentes, etiam nostrarum
voluntatum...</p>
#picture {
float: left;
}
.floatstop {
clear: both;
}
96
<div id="column1">
<p>Haec disserens qua de re agatur et in
quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
Quando os elementos tem
<div id="column3"> o mesmo estilo, podem
<p>nam nihil esset in nostra potestate ser declarado juntos.
si res ita se haberet...</p>
</div>
#column1, #column2, #column3 {

float:left;
width: 33%;
}
97
.tabela {
<div class="tabela"> border: 1px solid black;
<div class="celula cabecalho">Código</div> width: 462px;
<div class="celula cabecalho">Descrição</div> height: 96px;
<div class="celula cabecalho">Preço</div> padding: 1px;
<div class="celula"></div> }
<div class="celula"></div> .celula {
<div class="celula"></div> float: left;
<div class="celula"></div> border: 1px solid #008B00;
<div class="celula"></div> width: 150px;
<div class="celula"></div> height: 20px;
<div class="celula"></div> margin: 1px;
<div class="celula"></div> text-align: center;
</div> .cabecalho {
background-color: #90EE90;
}
Uma nova linha é
iniciada ao atingir a
largura da div ‘tabela’.
98
<div class="celula cabecalho">Código</div> .celula {
<div class="celula cabecalho">Descrição</div> float: left;
<div class="celula cabecalho">Preço</div> border: 1px solid #008B00;
<div class="celula newline"></div> width: 150px;
<div class="celula"></div> height: 20px;
<div class="celula"></div> margin: 1px;
<div class="celula newline"></div> text-align: center;
<div class="celula"></div> .cabecalho {
<div class="celula newline"></div> background-color: #90EE90;
<div class="celula"></div> .newline {
clear: both;
}
É possível notar que a quebra de linha é

feita com a propriedade clear, sem
precisar delimitar o tamanho da tabela.
99
Com posicionamento CSS podemos colocar um
elemento em uma posição exata na página.
A posição pode ser absoluta ou relativa.
.headline {
position:absolute;
top: 100px;
left: 200px;
}
100
Existem 4 opções de Position:
◦ Static
◦ Relative
◦ Absolute
◦ Fixed
101
E o valor padrão dos elementos e segue o fluxo
normal dos elementos da página.
Ou seja, se posiciona abaixo do elemento
imediatamente anterior e acima do imediatamente
posterior, quando nenhum destes está
posicionado de outra forma que não a estática.
elemento {
position: static;
}
102
#header {
position: static;
height: 50px;
background-color: #4682B4;
}
#body {
height: 300px;
background-color: #87CEFA;
}
#footer {
height: 30px;
background-color: #1E90FF;
}
<div id="header">Cabeçalho</div>
<div id="body">Corpo</div>
<div id="footer">Rodapé</div>
103
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 (left, right, top, bottom).
Assim, o elemento ocupa um espaço após ser
posicionado.
#relative {
position: relative;
top: 10px;
left: 10px;
...
}
104
#header {
height: 50px;
background-color: #4682B4;
}
#body {
position: relative;
top: 10px;
height: 300px;
background-color: #87CEFA;
}
#footer {
position: relative;
top: 20px;
height: 30px;
background-color: #1E90FF;
}
Note que seria possível ter o mesmo efeito usando margin.
105
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.
106
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
107
O position: fixed; irá fixar a posição do elemento
na coordenada que você definir.
A medida que a página é rolada, o elemento
continua fixo na posição que você definiu e o
conteúdo da página rola normalmente.
Pode ser usado, por exemplo, para criação de
menus suspensos ou avisos sempre visíveis.
◦ O IE6 não suporta position: fixed
108
div#sidebar {
position: fixed;
top: 30px;
right: 30px;
width: 200px;
height: 300px;
background: #75AD45;
border: 2px solid black;
color: white;
padding: 10px;
}
p {
margin-right: 270px;
}
109
<div id="centro">Caixa Centralizada</div>
#centro {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -200px;
border-style: ridge;
border-width: 10px;
border-color: #0033FF;
background: #6495ED;
color: #191970;
line-height: 400px;
text-align: center;
font-family: verdana;
font-size: 40px;
font-weight: bold;
}
110
Camadas significam como os elementos se
sobrepõem uns aos outros.
Para fazer isto definimos para cada elemento um
número índice (z-index).
O comportamento é que elementos com número
índice maior se sobrepõem àqueles com menor
número.
O método é simples, mas as possibilidades são
muitas. Você pode colocar imagens sobre textos,
texto sobre texto, etc.
111
#carta1, #carta2, #carta3 {
position: absolute;
width: 200px;
height: 250px;
<div id="carta1"></div> }
<div id="carta2"></div> #carta1 {
<div id="carta3"></div> background-image: url("dois.png");
top: 50px;
left: 50px;
z-index: 1;
z-index: 1
}
z-index: 2 #carta2 {
background-image: url("oito.png");
z-index: 3 top: 100px;
left: 100px;
z-index: 2;
}
#carta3 {
background-image: url("as.png");
top: 150px;
left: 150px;
z-index: 3;
cursor: pointer;
}
112
O que é <a href="#" class="tooltip">CSS<span>
CSS é uma técnica de projetar páginas Web,
separando conteúdo da apresentação.</span></a>?
a.tooltip{
position:relative; a.tooltip span{
padding:0; display: none;
color:#039; }
text-decoration:none; a.tooltip:hover span{
border-bottom:2px dotted #039; display:block;
z-index:24; position:absolute;
} width:200px;
a.tooltip:hover{ top:3em;
background:transparent; text-align:justify;
color:#f00; left:0;
cursor:help; font: 12px arial, verdana;
z-index:25; padding:5px 10px;
} border:1px solid #999;
background:#e0ffff;
color:#000;
}
113
<a href="#" class="galeria"><img src="foto1.jpg" class="miniatura" />
<span><img src="foto1.jpg" alt="" class="ampliada" /></span></a>
...
a.galeria span{
display: none;
}
a.galeria:hover span{
display:block;
position:absolute;
}
.miniatura {
border: 0px solid;
width: 39px;
height: 26px;
}
.ampliada {
border: 0px solid;
width: 300px;
height: 200px;
} 114
Com o uso de CSS na construção de layouts para
sites, é possível remodelar toda apresentação de um
portal sem alterar seu conteúdo.
<div id="container">
<div id="header">Cabeçalho</div>
<div id="wrapper">
<div id="content">Conteúdo</div>
</div>
<div id="navigation">Navegação</div>
<div id="extra">Extra</div>
<div id="footer">Rodapé</div>
</div>
115
116
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
div#header h1{height:80px; line-height:80px; margin:0;
padding-left:10px; background:#EEE; color:#79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0; padding:5px 10px}
div#wrapper{float:left; width:100%}
div#content{margin: 0 25% 0 25%}
div#navigation{float:left; width:25%; margin-left:-100%}
div#extra{float:left; width:25%; margin-left:-25%}
div#footer{clear:left; width:100%}
117
div#content{margin: 0 50% 0 0}
div#navigation{float:left; width:25%; margin-left:-50%}
div#extra{float:left; width:25%; margin-left:-25%}
118
div#container{width:700px; margin:0 auto}
div#content{margin: 0 150px 0 0}
div#navigation{float:left; width:150px; margin-left:-700px}
div#extra{float:left; width:150px; margin-left:-150px}
119
div#wrapper{float:left; width:100%; margin-left:-200px}
div#content{margin-left:200px}
div#navigation{float:right; width:200px}
div#extra{float:right; clear:right; width:200px}
div#footer{clear:both; width:100%}
120
div#wrapper{float:right; width:70%}
div#navigation{float:left; width:29.9%}
div#extra{clear:both; width:100%}
div#footer{clear:left;width:100%}
121
div#navigation{float:left; width:50%}
div#extra{float:right; width:50%}
div#footer{clear:both; width:100%}
122
123
<!doctype html>
<html lang="pt-BR">
<head>
<link rel="stylesheet" type="text/css" href="./css/global.css" />
</head>
<body>
<div class="fundo">
<div class="barra"></div>
<div class="menu">
<div class="logo"></div>
<span>
<a href="historia.html">História</a>
<a href="cursos.html">Cursos</a>
<a href="alunos.html">Alunos</a>
<a href="contato.html">Contatos</a>
</span>
</div>
<div class="principal">

</div>
</div>
</body>
</html>
Os 4 arquivos do site farão
uso desta mesma estrutura.
124
global.css
body{ .barra{ .menu span {
background: #333333; background: rgb(23,110,164); float: right;
font-family: Arial, Verdana; width: 1002px; }
} height: 50px; .menu a{
h1 { position: absolute; color: rgb(23,110,164);
color: rgb(23,110,164); top: 95px; font-family: verdana;
text-align: center; left: 50%; font-size: 20px;
} margin-left: -501px; float: left;
p{ } width: 100px;
line-height: 25px; .logo { margin-top: 35px;
text-align: justify; position: relative; margin-right: 7px;
padding: 0px 10px 0px 0px; float: left; padding: 5px;
} top: 15px; text-align: center;
.fundo{ left: 15px; text-decoration:none;
position: absolute; width: 235px; }
top: 20px; height: 58px; .menu a:hover{
bottom: 20px; background-image: url("logo.png"); background:
background: #999999; background-repeat: no-repeat; rgb(23,110,164);
border: 1px solid #EEEEEE; background-size: 100%; color:#FFFFFF;
width: 1000px; } }
left: 50%; .menu{ .principal{
margin-left: -500px; position: absolute; position: absolute;
clear:both; width: 980px; top: 120px;
min-height: 300px; height: 100px; bottom: 10px;
} top: 10px; padding: 10px;
left: 10px; background: #F0FFFF;
background: #F0FFFF; width: 960px;
} left: 50%;
overflow-y: auto;
} 125
historia.html
<h1>Nascida da fusão de três tradicionais faculdades</h1>
<img src="./img/portal.jpg" style="float:left; margin:0px 20px 5px 0px;">
<p>Somos um complexo educacional com mais de 45 anos educando e formando
profissionais de liderança no mercado mundial.</p>
<p>A tradição e o conceito da UNILINS são reconhecidos pelas empresas que
buscam não apenas profissionais com boa formação, mas verdadeiros
empreendedores com experiência e vida acadêmica ativa. A UNILINS engloba
três tradicionais escolas superiores: Escola de Engenharia de Lins,
Faculdade de Informática de Lins e Faculdade de Serviço Social de
Lins.</p>
<p>Mantida pela Fundação Paulista de Tecnologia e Educação - o maior pólo
tecnológico do Oeste Paulista.</p>
<p>Além da UNILINS, a Fundação mantém uma escola de Educação Infantil,
Ensino Fundamental e Médio, e Cursos Técnicos na modalidade Pós-Médio
"ETL" e o CETEC - Centro Tecnológico, que conta com cinco respeitados e
modernos laboratórios que atendem aos alunos dos cursos oferecidos pela
UNILINS e prestam serviços nas áreas da construção civil, informática,
química, geoprocessamento, meio ambiente, energia elétrica, entre
outras. Cerca de trezentos alunos da UNILINS realizam estágios nesses
laboratórios. A experiência adquirida com a prática de serviços reais
contratados pelo CETEC lhes garantem maior facilidade de ingresso no
mercado de trabalho.</p>
126
127
cursos.html
.curso { <h1>Cursos de Graduação</h1>
margin-bottom: 30px; <div class="curso">
} <img src="./img/icon_night.gif" />
.curso img { <h3>Administração</h3>
float: left; <p>Forma profissionais capazes de planejar
estratégias e rotinas administrativas.
margin-right: 7px;
Colaborar na definição, análise e
}
cumprimento de metas organizacionais.
.curso h3 { Administrar com eficiêcia e equilíbrio o
color: desenvolvimento econômico empresarial e a
rgb(23,110,164); qualidade de vida.<br />
margin-bottom: -15px; Noturno | 4 anos | 80 vagas</p>
} </div>
.curso p { <div class="curso">
margin-left: 30px; <img src="./img/icon_night.gif" />
line-height: normal; <h3>Análise e Desenvolvimento de Sistemas</h3>
text-align: justify; <p>Formação superior, em tempo mais curto, de
} profissionais aptos a desenvolver e
gerenciar sistemas de informação para as
organizações.<br />
Noturno | 3 anos | 40 vagas</p>
</div>
...
128
129
alunos.html
.aluno { <h1>Relação de Alunos</h1>

float: left; <div class="aluno">
border: 0px solid red; <img src="./img/fotos/aluno01.jpg" />
width: 235px; <span>Aluno 01</span>
height: 300px; </div>
text-align: center; <div class="aluno">
} <img src="./img/fotos/aluno02.jpg" />
.aluno img { <span>Aluno 01</span>
width: 200px; </div>
height: 250px; <div class="aluno">
border: 2px solid rgb(23,110,164); <img src="./img/fotos/aluno03.jpg" />
} <span>Aluno 01</span>
.aluno span { </div>
text-family: Arial, Verdana; ...
color: rgb(23,110,164);
}
130
131
contatos.html
.centro {
<h1>Fale Conosco</h1> position: absolute;
<a href="#" class="contato"> top: 50%;
<img src="address.gif" class="icone" /> left: 50%;
<span> width: 505px;
Centro Universitário de Lins<br /> height: 300px;
Av. Nicolau Zarvos, 1925<br /> margin-left: -250px;
Jardim Aeroporto<br /> margin-top: -180px;
border: 15px inset rgb(23,110,164);
CEP 16.401-371<br />Lins-SP
text-align: center;
</span> background-color: #FFFFFF;
</a> }
... a.contato span{
display: none;
font-size: 25px;
text-align: left;
}
a.contato:hover span{
display:block;
position:absolute;
}
.icone {
border: 0px solid white;
width: 50px;
height: 50px;
} 132
Modificar todo o layout no portal da Unilins sem
alterar seu conteúdo. Ou seja, deve-se
reestruturar o site através do CSS, mas sem
modificar o conteúdo HMTL.
133
Utilizando CSS, criar o layout de um site conforme modelo a seguir:
134
Utilizando CSS, criar o layout de um site conforme modelo a seguir:
135
Validador da W3C que faz uma verificação da folha de
estilos e retorna um relatório com os eventuais erros e
avisos caso sua CSS não valide.
http://jigsaw.w3.org/css-validator/
136
Propriedade Função
Color Define a cor do texto
Background Fundo (color, image, size, repeat, attachment, position.)
Font Define a fonte (family, style, variant, weight, size)
Text Formatação (align, decoration, indenti, transform, spacing)
Display Forma de exibir (block, inline, none)
Visibility Visível (visible, hidden)
Link Define o estilo de links (link, visited, active, hover)
Class e Id Classificar e identificar elementos
Span e Div Agrupar e estruturar um documento
Width e Height Largura e altura dos elementos
Margin Define a margem entre elementos (top, right, bottom, left)
Padding Define o espaço interno do conteúdo (top, right, bottom, left)
Border Define a borda de um elemento (width, style, color)
Float Flutua elementos na página
Clear Equivalente a quebra de linha, mas para objetos
Position Posição na tela (static, relative, absolute, fixed)
Cursor Define a aparência do cursor
Z-index Indica a camada para objetos sobrepostos
137
Elaborar um site completo para uma empresa. O site
deve utilizar o maior número possível de recursos, tais
como fotos, listas, tabelas, links, efeitos, etc.
Sugestões de temas: centro de estética, loja de
automóveis, roupas e acessórios, loja de brinquedos,
eletroeletrônicos, agência de viagens, pet shop,
cultura, artesanato, culinária, dicas de moda,
tecnologia, notícias, esportes, cinema, academia,
imobiliária.
Não será permitido utilizar os modelos de layout
criados durante as aulas.
138
Javascript (JS) é uma linguagem de
programação executada no browser do lado do
cliente.
Com JS é possível realizar tratamentos e criar
efeitos visuais.
Apesar de ser outra linguagem, a sintaxe é
similar a C, C++, C#, Java e PHP.
Por questões de segurança, JS não pode
acessar banco de dados e nem arquivos.
140
Com JS é possível realizar o tratamento e
validação de campos de formulários antes de
submeter os dados.
A grande vantagem é que o processamento será

mais rápido, pois somente depois de validados é
que os dados são enviados ao servidor.
É recomendado fazer as validações via JS. Mas,

não devemos esquecer que o usuário pode
desligar a execução do JS.
141
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
</head>
<body>
<script language="javascript"
type="text/javascript">
document.write('Exemplo Javascript');
</script>
</body>
</html>
142
Todo código Javascript deve estar dentro da tag
<script></script>.
A definição da linguagem utilizada é opcional

(language="javascript"), assim como também é
opcional o tipo (type="text/javascript").
A função document.write é responsável por escrever
no browser.
O código JS será executado no local onde for inserido
dentro da página html.
143
<input type = "button" value = "Google"
onClick = "window.open('http://www.google.com', '',
'width=500,height=400,menubar=no');">
width e height – definem a dimensão da nova janela

menubar – define se a barra de menu deverá aparecer
144
<script language="javascript" type="text/javascript">
alert('Janela de Alerta em Javascript!');
</script>
145
<script>
alert('Você será redirecionado para outro site!');
location='http://www.google.com.br';
</script>
146
<script>
if(confirm('Deseja fazer isso?')==true) {
alert('Confirmado');
}
else {
alert('Cancelado');
}
</script>
A instrução if funciona de
forma similar as linguagens
C, C++, C#, Java, PHP
147
var r, i, n;
n = prompt('Informe o valor da tabuada: ','');
for(i=1; i<=10; i++) {
r = n * i;
document.write(n + ' x ' + i + ' = ' + r + '<br />');
}
var r, i = 1, n;
n = prompt('Informe o valor da tabuada: ','');
while(i<=10) {
r = n * i;
document.write(n + ' x ' + i + ' = ' + r + '<br />');
i++;
}
148
<script type="text/javascript">
var d = new Date();
time = d.getHours();
if (time<12) {
document.write("Bom dia!");
}
else if (time<18){
document.write("Boa tarde!");
}
else{
document.write("Boa noite!");
}
</script>
149
<SCRIPT>
var s = new Array('Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira',
'Quinta-feira', 'Sexta-feira', 'Sábado');
var m = new Array('Janeiro', 'Fevereiro', 'Março', 'Abril',

'Maio', 'Junho', 'Julho', 'Agosto',
'Setembro', 'Outubro', 'Novembro', 'Dezembro');
var agora = new Date();

var ano = agora.getYear();
var mes = m[agora.getMonth()];
var dia = agora.getDate();
var sem = s[agora.getDay()];
var hoje = sem + ", " + dia + " de " + mes + " de " + ano;
document.write(hoje);
</SCRIPT>
Semana: 0 – 6
Mês: 0 – 11
150
<script>
document.write("SCREEN RESOLUTION: ")
document.write(screen.width + "x")
document.write(screen.height + "<br />")
document.write("AVAILABLE VIEW AREA: ")
document.write(window.screen.availWidth + "x")
document.write(window.screen.availHeight + "<br />")
</script>
SCREEN RESOLUTION: 1920x1080

AVAILABLE VIEW AREA: 1920x1032
151
<!doctype html>
<html lang="pt-BR">
<head>
<noscript>
<meta http-equiv="Refresh" content="1; url=http://www.seusite.com/erro.htm">
</noscript>
var userAgent = navigator.userAgent.toLowerCase();
var devices = new Array('nokia', 'iphone', 'blackberry', 'sony', 'lg',
'htc_tattoo', 'samsung', 'symbian', 'SymbianOS',
'elaine', 'palm', 'series60', 'windows ce',
'android', 'obigo', 'netfront', 'openwave',
'mobilexplorer', 'operamini');
noscript – é executado se o browser não tiver javascript

navigator.userAgent – informações do browser utilizado
devices – lista de dispositivos mobiles
152
function mobileDetect(userAgent, devices) {
for(var i = 0; i < devices.length; i++) {
if (userAgent.search(devices[i]) > 0) { return true; }
}
return false;
}
if (mobileDetect(userAgent, devices)) {
location = 'http://www.seusite.com/mobile.html';
}
else {
location = 'http://www.seusite.com/classic.html';
}
</script>
</head>
<body>
</body>
</html>
De acordo com o tipo de dispositivo, é feito o direcionamento.
153
1. Criar um programa em javascript que abra uma
janela de confirmação perguntando: ‘Deseja
informar seu nome?’. Em caso negativo,
apresentar uma janela de alerta com a
mensagem ‘Operação Cancelada!’. Caso
contrário, abrir uma janela de prompt solicitando
um nome. Enquanto o nome informado estiver
em branco, abrir novamente a janela de prompt.
Após informar o nome, apresentá-lo em uma
janela de alerta.
154
Com o Javascript podemos validar dados de um formulário
antes de enviá-los para um servidor. Podemos dizer que é
uma validação do lado cliente.
Algumas das vantagens deste tipo de validação é que

economiza tráfego para o servidor, tem resposta mais
rápida por atuar diretamente na máquina do cliente e envia
os dados para o servidor quando estes já estão validados.
Em contrapartida, é uma validação insegura uma vez que

o código fica visível e pode ser alterado, e, desta forma,
enviar dados inválidos para o servidor. Por isso é sempre
aconselhável validar, também, os dados no servidor.
155
<script>
function mostrar() {
var x = document.cadastro.nome.value;
alert('Seu nome é: ' + x);
}
</script>
<form name="cadastro">
Digite seu e-mail: <input type="text" name="nome">
<input type="button" value="Enviar" onClick="mostrar();">
</form>
156
/* form.js */
var x = document.cadastro.nome.value;
alert('Seu nome é: ' + x);
}

...
<script src="form.js"></script>
</head>
<body>
Digite seu nome: <input type="text" name="nome"><br>
</form>
...
O arquivo externo deve ser a extensão .js
Deve ser carregado dentro do head
157
<script>
var sexo = document.cadastro.sexo;
if(sexo[0].checked)
alert('Sexo MASCULINO');
else if(sexo[1].checked)
alert('Sexo FEMININO');
else
alert('Sexo não selecionado');
}
</script>
Escolha o sexo:<br>
<input type="radio" name="sexo">Masculino<br>
<input type="radio" name="sexo">Feminino<br>
</form>
158
<script>
var uf = document.cadastro.uf.value;
alert('Estado selecionado: ' + uf);
}
</script>
Selecione um estado:
<select name="uf">
<option value="SP">São Paulo</option>
<option value="RJ">Rio de Janeiro</option>
<option value="MG">Minas Gerais</option>
</select>
</form>
159
<script>
if(document.cadastro.uf.selectedIndex==0) {
alert('É preciso selecionar um estado');
}
else {
var uf = document.cadastro.uf.value;
alert('Estado selecionado: ' + uf);
}
}
</script>
Selecione um estado:
<select name="uf">
<option value="">--- Selecione ---</option>
<option value="SP">São Paulo</option>
<option value="RJ">Rio de Janeiro</option>
<option value="MG">Minas Gerais</option>
</select>
</form>
160
<script>
function somar() {
var num1 = document.calc.num1.value;
var resultado = parseInt(num1) + parseInt(num2);
if(isNaN(resultado))
alert('Valores inválidos!');
else
alert('Resultado: ' + resultado);
}
</script>
<form name="calc">
Primeiro valor: <input type="text" name="num1"><br>
Segundo valor: <input type="text" name="num2"><br>
<input type="button" value="Somar" onClick="somar();">
</form>
parseInt – converte para inteiro
parseFloat – converte para real
isNaN – verifica se é um valor numérico
161
<script>
function somar() {
var resultado = parseInt(num1) + parseInt(num2);
document.calc.resultado.value = resultado;
}
</script>
<form name="calc">
Primeiro valor: <input type="text" name="num1">
Segundo valor: <input type="text" name="num2">
Resultado: <input type="text" name="resultado" readonly>
<input type="button" value="Somar" onClick="somar();">
</form>
162
<script>
function validar() {
var email = document.envio.email;
if(email.value=='') {
alert('O campo e-mail é obrigatório!');
email.focus();
}
}
</script>
<form name="envio">
E-mail: <input type="text" name="email">
<input type="button" value="Enviar" onClick="validar();">
</form>
163
function validar() {
var email = document.envio.email;
var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.
[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
if(email.value=='') {
alert('O campo e-mail é obrigatório!');
email.focus();
}
else if(er.test(email.value)==false) {
alert('O campo e-mail não é válido!');
email.value = '';
email.focus();
}
else {
alert('Campo e-mail é válido!');
}
}
164
function PermiteSomenteNumeros(event) {
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
else
return true;
}
</script>
<input type="text"
name="numero"
onkeypress="return PermiteSomenteNumeros(event);" />
165
<!doctype html>
<html lang="pt-BR">
<head>
<title>Título editável com JavaScript</title>
h1 {
font: "times new roman", times, serif;
color:#900;
}
</style>
166
window.onload = function(){
function editTitle(){
var title = document.getElementsByTagName('h1')[0];
var span = title.firstChild;
span.onmouseover = function(){
this.title = 'Clique para editar o texto';
this.style.background = '#f5f5f5';
}
span.onmouseout = function(){
this.title = '';
this.style.background = '';
}
167
span.onclick = function(){
var textoAtual = this.firstChild.nodeValue;
var input = '<input type="text" value="'+textoAtual+'">';
this.innerHTML = input;
var field = this.firstChild;
this.onclick = null;
this.onmouseover = null;
field.focus();
field.select();
field.onblur = function(){
this.parentNode.innerHTML = this.value;
editTitle();
}
field.onkeypress = function(e){
var charCode=(event.which) ?event.which :event.keyCode;
if (charCode == 13) this.blur();
}
168
}
}
editTitle();
}
</script>
</head>
<body>
<h1><span>Edite este título</span></h1>
</body>
</html>
169
1. Elaborar uma calculadora que permita realizar as 4 operações
básicas.
2. Elaborar um programa no qual o sejam informados: o valor da
compra e o valor pago. O programa deve calcular e apresentar o
troco. Se o valor pago não for suficiente, deve-se emitir um aviso.
3. Elaborar um programa no qual seja informado o valor de um
produto em dólar e o valor da cotação do dia. O programa deve
converter e apresentar o valor em reais.
4. Elaborar um programa para ler uma data no formato ‘dd/mm/yyy’ e
retornar se a data é válida.
5. Elaborar um programa para calcular e retornar a diferença de dias
entre duas datas.
170
6. Elaborar um programa para ler uma temperatura em graus
centígrados, converter e apresentar seu valor em fahrenheit.
7. Modifique o programa anterior para que o usuário escolha através
de um radio se deseja converter de °C para °F ou de °F para °C.
8. Apresentar a conversão entre temperatura de graus Centígrados
para graus Fahrenheit, variando de 0 a 100, com escala 5.
9. Modificar o exemplo anterior de forma que a resposta seja exibida
em formato de tabela.
10. Fazer com que as linhas da tabela sejam apresentadas alternando
as cores verde e amarelo (zebrado).
171
O JS permite, também, que manipulemos o
conteúdo exibido do site, além de poder modificar
o próprio visual (layout) da página.
Como o processamento é local, as alterações são

vistas pelo usuário de forma quase instantânea.
Esses efeitos tem permitido a construção de sites

com interfaces tão ricas quanto a de aplicativos
para desktop.
172
<script language=javascript>
function mudaCor(cor){
document.getElementById("corpo").style.backgroundColor = cor;
}
</script>
<body id="corpo">
<h2>Mudar a Cor do Fundo</h2>
<input type="button" value="Verde" onClick="mudaCor('lightGreen');">
<input type="button" value="Azul" onClick="mudaCor('lightblue');">
<input type="button" value="Amarelo" onClick="mudaCor('yellow');">
<input type="button" value="Branco" onClick="mudaCor('white');">
</body>
getElementById obtém as propriedades de

um componente através de seu id.
173
<!doctype html>
<html lang="pt-BR">
<head>
<title>Javascript</title>
</head>
<body>
<div id="conteudo">HTML</div>
<script>
document.getElementById('conteudo').innerHTML = 'Javascript';
</script>
</body>
</html> getElementById obtém as
propriedades de um componente
através de seu id.
innerHTML permite adicionar

conteúdo a um container.
174
<!doctype html>
<html lang="pt-BR">
<head>
<script>
function mudar(b){
document.getElementById('browser').innerHTML = b;
}
</script>
</head>
<body>
<input type='button' onclick="mudar('Firefox');" value='Firefox'/>
<input type='button' onclick="mudar('Chrome');" value='Chrome'/>
<input type='button' onclick="mudar('I.E.');" value='I.E.' />
<div id="browser"></div>
</body>
</html>
175
<!doctype html>
<html lang="pt-BR">
<head>
<script>
function adicionar() {
document.getElementById('conteudo').innerHTML +=
'Javascript<br />';
}
</script>
</head>
<body>
<input type="button" value="Add" onClick="adicionar();">
<div id="conteudo"><div>
</body>
</html>
176
Criar um formulário que tenha um campo de
texto e dois botões. Um botão servirá para
adicionar mensagens no site e outro para limpar
o conteúdo do site.
177
<input type="button"
value="Mostrar"
onclick="document.getElementById('pop').style.display='block';" />
<div id="pop">
<a href="#"
onclick="document.getElementById('pop').style.display='none';">
[Fechar]
</a>
</div>
#pop{
display:none;
padding:10px;
width:300px;
height:200px;
border:3px solid #0033AA;
background: #9999FF;
text-align: center;
}
178
<img src="./img/mais.gif" onClick="Expandir(this,'s1');">
1° SEMESTRE
<div id="s1">
Algoritmos<br />
Laboratório de Algoritmos<br />
Introdução à Tecnologia de Informação<br />
Noções de Lógica<br />
Matemática<br />
Português Instrumental<br /><br />
</div>
179
<style>
#s1 {
display: none;
margin-left: 20px;
}
</style>
<script>
function Expandir(img,id) {
var div = document.getElementById(id);
if(div.style.display == "block") {
div.style.display = 'none';
img.src = "./img/mais.gif";
} else {
div.style.display = 'block';
img.src = "./img/menos.gif";
}
}
</script>
180
function mudar() {
var x = document.getElementById('quadrado');
#quadrado { if(x.offsetHeight==100){
position: absolute; x.style.width='300px';
width: 100px; x.style.height='300px';
height: 100px; x.innerHTML = 'Grande';
background: #0033AA; } else {
} x.style.width='100px';
x.style.height='100px';
x.innerHTML = 'Pequeno';
}
}
<div id="quadrado" onclick="mudar();"></div>
181
#quadrado {
function mudar() {
position: absolute;
width: 200px;
if(x.offsetLeft==50) {
height: 200px;
x.style.left="100%";
top: 50%;
x.style.marginLeft = "-250px";
left: 0%;
} else {
margin-top: -100px;
x.style.left="0%";
margin-left: 50px;
x.style.marginLeft = "50px";
background: #0033AA;
}
border: 5px solid #3F0;
}
color: #FFFFFF;
line-height: 200px;
text-align: center;
font-family: verdana;
font-size: 22px; <div id="quadrado" onMouseOver="mudar();">
font-weight: bold; Clique Aqui!!!
} </div>
182
#quadrado {
function mover(m) {
position: absolute;
width: 100px;
x.style.left = x.offsetLeft + m + 'px';
height: 100px;
}
background: #0033AA;
}
<input type="button" onclick="mover(-10);" value="<<" />

<input type="button" onclick="mover(10);" value=">>" />
<br /><br />
<div id="quadrado"></div>
183
<!doctype html>
<html lang="pt-BR">
<head>
<title>DIV com rolagem automática</title>
<style>
div#painel {
font: 15px Tahoma;
cursor: default;
height: 200px;
width: 200px;
overflow: hidden;
background-color: #DFEDFE;
padding-left: 10px;
padding-right: 10px;
}
</style>
184
i = 0;
tempo = 30;
tamanho = 300;
function Rolar() {
document.getElementById('painel').scrollTop = i;
i++;
t = setTimeout("Rolar();", tempo);
if (i >= tamanho) {
i = 0;
}
}
function Parar() {
clearTimeout(t);
}
</script>
</head>
185
<body onload="Rolar();">
<div id="painel" onmouseover="Parar()" onmouseout="Rolar()">

<br /><br /><br /><br /><br /><br /><br /><br /><br />
Acesse regularmente o site CodigoFonte.net e fique por
dentro do há de melhor no mundo da programação web.
<br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>
</body>
</html>
186
<!doctype html>
<html lang="pt-BR">
<head>
<script>
function ajustar() {
w = screen.width - 300;
var el = document.getElementById('div');
el.style.width = w + "px";
el.style.left = "0%";
el.style.marginLeft = "150px";
}
function dimensoes(){
a = screen.width;
var el = document.getElementById('div');
b = parseInt(el.style.width,'px');
alert('Largura da tela: ' + a + '\n' + 'Largura da DIV: ' + b);
}
</script>
</head>
<body onLoad="ajustar(); dimensoes();">
<div id="div" style="border: 1px solid #f0f; height:50px;"></div>
</body>
</html>
187
<!doctype html>
<html lang="pt-BR">
<head>
</head>
<body>
<img src="imagens/js_pb.png"
onMouseOver="this.src='imagens/js_cor.png'"
onMouseOut="this.src='imagens/js_pb.png'">
</body>
</html>
188
<script>
personagem = new Array("Pernalonga", "Patolino", "Frangolino",
"Papaléguas", "Coiote", "Tasmania");
function mostrar(n){
document.saida.texto.value = personagem[n];
}
function ocultar(){
document.saida.texto.value = "";
}
</script>
<form name=saida><input type="text" name="texto" size="50"></form>
<a href="#" onMouseOver="mostrar(0)" onMouseOut="ocultar()">

<img src="./pernalonga.gif" border="0">
</a>
<a href="#" onMouseOver="mostrar(1)" onMouseOut="ocultar()">
<img src="./patolino.gif" border="0">
</a>
...
189
<script>
Imagens = new Array( "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg" );
var atual = 0;
var qtde = Imagens.length - 1;
function trocarImagem(direcao) {
atual = atual + direcao;
if (atual > qtde) atual = 0;
if (atual < 0) atual = qtde;
document.slideshow.src = Imagens[atual];
}
</script>
<center>
<img src="img1.jpg" name="slideshow" width="300" height="200"> <br />
<a href="javascript:trocarImagem(-1)"><img src="previous.png" border="0"></a>
<a href="javascript:trocarImagem(1)"><img src="next.png" border="0"></a>
</center>
190
<script>
Imagens = new Array( "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg" );
var atual = 0;
var qtde = Imagens.length - 1;
var delay = 3000;
var lock = false;
var run;
function trocarImagem(direcao) {
atual = atual + direcao;
if (atual > qtde) atual = 0;
if (atual < 0) atual = qtde;
document.slideshow.src = Imagens[atual];
}
191
function play() {
if (lock == false) {
lock = true;
document.play.src = 'pause.png';
run = setInterval("trocarImagem(1)", delay);
}
else if (lock == true) {
lock = false;
document.play.src = 'play.png';
window.clearInterval(run);
}
}
</script>
<center>
<img src="img1.jpg" name="slideshow" width="300" height="200"> <br />
<a href="javascript:play();"><img src="play.png" border="0" name="play"></a>
</center>
setInterval – executa uma função a cada ciclo de tempo
clearInterval – cancela a execução da função setInterval
setTimeout – é executada uma única vez
192
CSS JavaScript Descrição
background-attachment backgroundAttachment Define se a imagem de fundo de um elemento ficará fixa ou se irá rolar.
background-color backgroundColor Define a cor de fundo de um elemento.
background-image backgroundImage Define uma imagem como fundo de um elemento.
background-position backgroundPosition Define o alinhamento da imagem de fundo de um elemento.
background-repeat backgroundRepeat Define se a imagem vai repetir ou não e a direção da repetição.
border border Define o formato da borda de um elemento.
border-bottom borderBottom Define o formato da borda inferior de um elemento.
border-left borderLeft Define o formato da borda esquerda de um elemento.
border-right borderRight Define o formato da borda direita de um elemento.
border-top borderTop Define o formato da borda acima de um elemento.
bottom bottom Define a distância à baixo do elemento em relação ao elemento que o contém.
color color Define a cor do texto.
cursor cursor Define o ícone do cursor do mouse quando o mesmo passar sobre o elemento
display display Define se um elemento deve ser apresentado e a forma de sua apresentação.
font-family fontFamily Define o tipo de fonte.
font-size fontSize Define o tamanho da fonte.
font-weight fontWeight Define a espessura do traço da fonte.
height height Definem a altura de um elemento.
left left Define a distância à esquerda do elemento em relação ao elemento que o contém.
margin margin Define o espaçamento entre o elemento e os demais conteúdos da página.
margin-bottom marginBottom Define o espaçamento entre a região abaixo de um elemento e os demais conteúdos
193
CSS JavaScript Descrição
margin-left marginLeft Define o espaçamento entre a região a esquerda e os demais conteúdos da página.
margin-right marginRight Define o espaçamento entre a região a direita e os demais conteúdos da página.
margin-top marginTop Define o espaçamento entre a região superior e os demais conteúdos da página.
overflow overflow Define o que deve ocorrer quando o conteúdo de um elemento excede sua área.
padding padding Define o espaçamento entre o conteúdo de um elemento e sua borda.
padding-bottom paddingBottom Define o espaçamento entre o conteúdo de um elemento e sua borda abaixo.
padding-left paddingLeft Define o espaçamento entre o conteúdo de um elemento e sua borda a esquerda.
padding-right paddingRight Define o espaçamento entre o conteúdo de um elemento e sua borda a direita.
padding-top paddingTop Define o espaçamento entre o conteúdo de um elemento e sua borda superior.
position position Define a posição de um elemento como estática, relativa, absoluta ou fixa.
right right Define a distância à direita do elemento em relação ao elemento que o contém.
text-align textAlign Define o alinhamento do texto.
text-decoration textDecoration Define um efeito decorativo para o texto.
top top Define a distância ao topo do elemento em relação ao elemento que o contém.
width width Definem a largura de um elemento.
z-index zIndex Define a ordem de apresentação de um elemento quando há sobreposição.
http://www.progamacaoweb.com.br/tutoriais/javascript/css.php
Exemplos de uso:
document.getElementById("MinhaDiv").style.color = "#FFFFFF";
document.getElementById("MinhaDiv").style.cursor = "pointer";
document.getElementById("MinhaDiv").style.display = "none"; 194
O HTML5 trouxe consigo novos elementos com o
intuito de melhorar a semântica do código do site.
As principais mudanças se relacionam com novas

tags criadas para simplificar e padronizar a criação de
páginas para Internet.
Suas principais mudanças incluem layout, semântica

de conteúdo, tratamento de áudio e vídeo, além de
recursos para drag & drop (clicar e arrastar)
O HTML 5 ainda está em fase de desenvolvimento.
196
Dentre todas as categorias de modelos de conteúdo,
existem dois tipos de elementos:
◦ elementos de linha
◦ elementos de bloco
Os elementos de linha marcam, na sua maioria das

vezes, texto. Alguns exemplos: a, strong, img, input, span.
Os elementos de blocos são como caixas, que dividem o

conteúdo nas seções do layout. Ex.: div, span, ...
197
Veja algumas premissas que você precisa conhecer:
Os elementos de linha podem conter outros elementos

de linha, dependendo da categoria que ele se encontra.
Os elementos de linha nunca podem conter elementos
de bloco.
Elementos de bloco sempre podem conter elementos de
linha.
Elementos de bloco podem conter elementos de bloco,
dependendo da categoria que ele se encontra.
◦ Por exemplo, um parágrafo não pode conter um DIV. Mas o
contrário é possível.
198
http://www.nintendo.com.au/gamesites/mariokartwii/#home
http://html5gallery.com/
http://www.netmagazine.com/features/top-20-html5-games
http://chrome.angrybirds.com/
http://www.geekproject.com.br/2011/04/html5-impressionantes-exemplos-utilizando-canvas/
http://www.fgestor.com.br/
199
Flow content (Conteúdo de fluxo)
Metadata content (Conteúdo de metadados)
Sectioning content (Conteúdo seccionado)
Heading content (Conteúdo de cabeçalho)
Phrasing content (Conteúdo linguístico)
Embedded content (Conteúdo incorporado)
Interactive content (Conteúdo interativo)
200
201
A maioria dos elementos utilizados no body e
aplicações são categorizados como Flow
Content.
Veremos, a seguir, algumas das principais tags
que formam o Flow Content.
As tags antigas também fazem parte do Flow
Content.
Tags obsoletas devem ser evitadas.
202
Elemento Funcionalidade
article tag define um artigo
aside tag define o conteúdo, além do conteúdo da página
audio tag define o conteúdo de som
canvas Break – quebra de linha
datalist tag define uma lista suspensa
details tag define os detalhes de um elemento
dialog tag define um diálogo (conversa)
embed tag define conteúdo interativo externo ou plugin
figure tag define um grupo de conteúdo de mídia, e sua legenda
footer tag define um rodapé de uma seção ou página
header tag define um cabeçalho de uma seção ou página
hgroup tag define as informações sobre uma seção em um documento
keygen tag define uma chave gerada de forma
203
mark tag define o texto marcado
meter tag define medição dentro de um intervalo pré-definido
nav tag define os links de navegação
output tag define alguns tipos de saída
progress tag define o progresso de uma tarefa de qualquer tipo
rp tag é navegadores que não suportam o elemento de rubi.
rt tag define explicação para anotações de rubi
ruby tag define anotações de rubi
section tag define uma seção
source tag define recursos de mídia
hour tag define uma data / horário
video tag define um vídeo
204
acronym tag define um acrônimo
applet tag define um applet incorporado
basefont tag especifica uma fonte padrão para todo o documento
big tag é usada para formatar o texto em um tamanho maior
center tag é usada para centralizar o texto
dir tag é usado para listar os títulos de diretório
font tag especifica o tipo de letra, tamanho e cor da fonte do texto
frame tag define um quadro dentro de um conjunto de quadros
frameset tag define um conjunto de quadros em arquivos separados
s / strike tags definir o texto tachado
tt usada para tipo de fonte de largura fixa
u tag é usada para sublinhar o texto
205
title Título da página. Aparece na barra de título do browser.
meta São metadados ou "etiquetas" que descrevem o conteúdo do seu

site para os buscadores.
base Permite especificar explicitamente o URI básico de um

documento.
script Conteúdo javascript inline ou em arquivo externo.
noscript Conteúdo a ser exibido caso o browser não tenha suporte a

javascript.
style Permite alterar a formatação dos elementos do documento HTML

utilizando folha de estilo CSS.
link Permite a inclusão de arquivos externos em formato de folha de

estilo CSS.
Este conteúdo vem antes da apresentação, formando uma

relação com o documento e seu conteúdo com outros
documentos que distribuem informação por outros meios.
206
<!doctype html>
<html lang="pt-BR">
<head>
<meta name="author" content="Wagner J. Dizeró">
<meta name="description" content="Aula de Html5">
<meta name="keywords" content="hmtl5, web, site">
</head>
<body>
</body>
</html>
Metadados são usados por
buscadores para indexar um site.
author – autor do site
description – descrição do site
keywords – palavras chaves do site
207
<meta http-equiv="cache control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires"
content="Mon, 22 Jul 2002 11:12:01 GMT">
Os comandos “cache control” e “pragma” tem o mesmo

efeito, mas devem ser usados juntos por questão de
compatibilidade.
A opção “expires” permite definir uma data a partir da
qual o site deverá ser atualizado no cache.
◦ Uma data antiga ou inválida força o navegador a atualizar o
site.
208
Recarregar a mesma página após 10 segundos:
<meta http-equiv="refresh" content="10">
Redirecionar para outro site após 10 segundos:

<meta http-equiv="refresh"
content="10;http://www.google.com.br/">
209
<meta name="robots" content="index, nofollow">
<meta name="robots" content="noarchive">
<meta name="robots" content="all">
<meta name="robots" content="none">
INDEX / NOINDEX
Serve para indicar se deseja ou não permitir a indexação da página inicial do site
pelos motores de busca.
FOLLOW / NOFOLLOW
Com esta diretriz se indica se deve ou não permitir aos motores de busca percorrer
ou seguir percorrendo a web através dos links que encontre no corpo do documento.
ARCHIVE / NOARCHIVE
Isto permite dizer se desejamos ou não que o motor de busca arquive o conteúdo do
website em seu cache interno.
210
<!doctype html>
<html lang="pt-BR">
<head>
<noscript>Sem suporte a Javascript</noscript>
<script src="arquivo.js"></script>
<link href="arquivo.css" rel="stylesheet">
<title>Metadata</title>
<base href="http://www.google.com.br">
</head>
<body>
<img src="./images/srpr/logo3w.png">
</body>
</html>
211
Estes elementos definem a estrutura de uma
página.
◦ section
◦ header
◦ footer
◦ nav
◦ article
◦ aside
Basicamente, são elementos que juntam grupos

de textos no documento.
Substituem o uso da tag DIV.
212
section
◦ A tag section define uma nova seção do site, uma área genérica do site. Por
exemplo a home pode ser dividida em destaque, novidades, chamada para
conteúdo completo.
header
◦ O elemento header representa uma área de introdução. Pode ser utilizado para
agrupar índices de conteúdo, campos de busca, cabeçalho do site com título ou
logo.
footer
◦ A tag footer representa o rodapé do site, ou de uma seção.
nav
◦ O elemento nav é utilizado para representar uma seção da página que contém
links para outras partes do site. Este elemento deve ser utilizado para grupos de
links importantes do site tipicamente menus de navegação.
article
◦ O elemento article é utilizado para representar o conteúdo do site propriamente
dito, como posts, artigos e outros textos em geral.
aside
◦ A tag aside representa um bloco de conteúdo que referência o conteúdo que
envolta do elemento aside.
213
HTML4/XHTML HTML5
214
215
O elemento header especifica o cabeçalho da seção da
página. Ele pode ser utilizado no topo da página
englobando o logotipo da empresa e o menu, e ao
mesmo tempo aparecer no lado direito para intitular a
seção “mais artigos”.
header
216
O elemento nav especifica o menu de navegação.
Identifica os links para navegação seja para outra
página ou seções da mesma página.
nav
217
<header>
<div class="topo-div"></div>
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Marketing">Marketing</a></li>
<li><a href="#" title="Internet">Internet</a></li>
<li><a href="#" title="Granhar Dinheiro">Granhar Dinheiro</a></li>
<li><a href="#" title="Webmaster">Webmaster</a></li>
<li><a href="#" title="Scripts">Scripts</a></li>
<li><a href="#" title="Software">Software</a></li>
<li><a href="#" title="Comércio Eletrônico">Comércio Eletrônico</a></li>
<li><a href="#" title="Downloads">Downloads</a></li>
<li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>
</header>
218
A tag footer basicamente é o rodapé. Seja da página ou de
uma seção.
Esta tag contém informações adicionais sobre o que foi
exposto na seção, como nome do autor, ou um link para o
topo da página.
Use o footer para informações sucintas. Para rodapés mais
complexos, use section.
footer
219
Assim como dividíamos a página em blocos de
conteúdo com divs, faremos o mesmo com o
section, com o diferencial de que a utilização deste
elemento é semântica.
A seção precisa ter um significado como conteúdo: a
section será utilizada quando, por exemplo, você for
dividir o conteúdo entre “web design” e “web master”.
section
section
(subseção)
220
<section class="chamadas">
<h4>Web Design</h4>
<article><h2>Título</h2><p>Texto </p></article>
<section>
<h6>Mais artigos</h6>
<ul class="maisartigos">
<li><a href="#" title="Donec elit">Donec elit</a></li>
<li><a href="#" title="Lorem amet">Lorem amet</a></li>
<li><a href="#" title="Donec elit">Donec elit</a></li>
</ul>
</section>
</section>
221
Para saber quando utilizar o article, isole o texto do
resto da página. Se ele continuar fazendo sentido,
estão use article.
A utilização básica é para notícias, artigos e
comentários. Ela cria seções da página que podem
ser referenciadas via RSS.
article
222
<article>
<h2>Artigo em destaque</h2>
<figure>
<img src="imagem.jpg" alt="imagem">
</figure>
<p>Donec ac elit. Etiam posuere venenatis ante. Nun ullam
corper neque ac justo. Donec id alor purus. Aenean non enim
eget diam aliquam tristique. Mauris pellentesque dui.</p>
<a href="#" title="Mais" class="lmais">leia mais</a>
</article>
223
O article e o section tem um relacionamento que
pode confundir a princípio. Pois assim como é
possível colocar article dentro de um section, o
inverso também é permitido.
Uma forma de diferenciar é pensar que o section
divide a página em blocos de conteúdo,
enquanto o article engloba o conteúdo em si.
Não é permitido aninhar articles, mas é possível
aninhar section.
224
Na tag aside, você engloba informações
adicionais ao conteúdo principal.
◦ Por exemplo, uma citação, anotações e afins.
◦ Publicidade também pode ser colocada nesse elemento.
aside
225
É possível confundir com div, pois visualmente,
não há diferença entre o uso de div e dos novos
elementos do HTML 5.
Porém, o div, o mais genérico de todos, apenas é
aplicado para separar elementos em blocos, por
isso ele não carrega nenhum significado
semântico.
Por exemplo, o elemento article indica que um
determinado bloco leva um conteúdo importante.
Já o section é um bloco de separação de
assuntos diferentes.
226
<!DOCTYPE html>
<html>
<head>
<title>Section em HTML5</title>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div id="main">
<header>header</header>
<nav>nav</nav>
<section>
<header>header section</header>
<article>article</article>
<footer>footer section</footer>
</section>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
</html>
227
section{
width: 500px;
float:left;
background:#F3F3F3;
*{
padding:10px;
margin:0;
}
padding:0;
}
section header{
background:#987654;
body{
height:40px;
background:#CCC;
}
}
section article{
header, footer, article, aside, nav, section {
height:400px;
display:block;
background:#894589;
}
}
section footer{
#main{
background:#9370DB;
margin:10px auto;
height:40px;
width:800px;
}
}
aside{
header{
background:#9ACD32;
height:100px;
height:500px;
background:#D4532E;
width:280px;
}
float:left;
}
nav{
height:30px;
footer {
background:#DEDE45;
background:#123456;
padding:10px;
height:80px;
}
clear:both;
}
228
Vários navegadores, principalmente os mais antigos, não reconhecem
devidamente as novas marcações. Para mantermos a compatibilidade
é necessário estilizar algumas tags usando a seguinte regra CSS.
◦ header, footer, article, aside, nav, section {display:block;}
Para verificar o suporte a HTML5 e CSS3 podemos utilizar a Modernizr

(http://www.modernizr.com/) que é uma biblioteca de detecção que
permite verificar o suporte da maioria das características do HTML5 e
CSS3. O Modernizr roda automaticamente assim que você o adiciona
no head do documento fazendo funcionar as novas tags em
navegadores mais antigos (IE8).
◦ <script src="js/modernizr-1.6.min.js"></script>
Outra biblioteca para browser antigos está disponível no googlecode:

◦ 
229
Os elementos da categoria Heading definem uma
seção de cabeçalhos, que podem estar contidos em
um elemento na categoria Sectioning.
◦ h1, h2, h3, h4, h5, h6, hgroup
O elemento h? já existia nas versões HTML
anteriores.
Foi introduzido o elemento hgroup, que tem a

função de agrupar dois ou mais elementos de h1
até h6.
230
Na estrutura desse <article>, um <hgroup>
contém o título e o subtítulo do artigo, e o
<header> contém o meta-dado e o <hgroup>:
<article>
<header>
<hgroup>
<h1>Title goes here</h1>
<h2>Subtitle of article</h2>
</hgroup>
<p><time datetime="2010-03-20">20th March, 2010</time></p>
</header>
<p>Lorem Ipsum dolor set amet</p>
</article>
231
Fazem parte desta categoria elementos que marcam o texto do
documento, bem como os elementos que marcam este texto dentro
do elemento de parágrafo.
a
audio
img
label
object
span
textarea
video
…
232
Na categoria Embedded, há elementos que importam
outra fonte de informação para o documento.
audio
canvas
embed
iframe
img
math
object
svg
video
233
Interactive Content são elementos que fazem parte da interação de
usuário.
(Incluem elementos Phrasing content e Embedded content)
◦ a
◦ audio (se o atributo control for utilizado)
◦ button
◦ details
◦ embed
◦ iframe
◦ img (se o atributo usemap for utilizado)
◦ input (se o atributo type não tiver o valor hidden)
◦ keygen
◦ label
◦ menu (se o atributo type tiver o valor toolbar)
◦ object (se o atributo usemap for utilizado)
◦ select
◦ textarea
◦ video (se o atributo control for utilizado)
234
O atributo autofocus pode ser especificado nos elementos input (exceto quando há
atributo hidden atribuído), textarea, select e button.
A tag a passa a suportar o atributo media como a tag link.
A tag form ganha um atributo chamado novalidate. Quando aplicado o formulário pode ser
enviado sem validação de dados.
O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado os
indicadores da lista são colocados na ordem inversa, isto é, da forma descendente.
O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de
fieldset são desativados.
O novo atributo placeholder pode ser colocado em inputs e textareas.
O elemento area agora suporta os atributos hreflang e rel como os elementos a e link
O elemento base agora suporta o atributo target assim como o elemento a. O atributo
target também não está mais descontinuado nos elementos a e area porque são úteis
para aplicações web.
Os atributos abaixo foram descontinuados:
◦ O atributo border utilizado na tag img.

◦ O atributo language na tag script.
◦ O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de name.
◦ O atributo summary na tag table.
235
Este atributos foram descontinuados porque modificam a formatação do elemento e
suas funções são melhores controladas pelo CSS:
◦ align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col,
colgroup, tbody, td, tfoot, th, thead e tr.
◦ alink, link, text e vlink como atributos da tag body.
◦ background como atributo da tag body.
◦ bgcolor como atributo da tag table, tr, td, th e body.
◦ border como atributo da tag table e object.
◦ cellpadding e cellspacing como atributos da tag table.
◦ char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
◦ clear como atributo da tag br.
◦ compact como atributo da tag dl, menu, ol e ul.
◦ frame como atributo da tag table.
◦ frameborder como atributo da tag iframe.
◦ height como atributo da tag td e th.
◦ hspace e vspace como atributos da tag img e object.
◦ marginheight e marginwidth como atributos da tag iframe.
◦ noshade como atributo da tag hr.
◦ nowrap como atributo da tag td e th.
◦ rules como atributo da tag table.
◦ scrolling como atributo da tag iframe.
◦ size como atributo da tag hr.
◦ type como atributo da tag li, ol e ul.
◦ valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
◦ width como atributo da tag hr, table, td, th, col, colgroup e pre.
236
rev e charset como atributos da tag link e a.
shape e coords como atributos da tag a.
longdesc como atributo da tag img and iframe.
target como atributo da tag link.
nohref como atributo da tag area.
profile como atributo da tag head.
version como atributo da tag html.
name como atributo da tag img (use id instead).
scheme como atributo da tag meta.
archive, classid, codebase, codetype, declare e standby
como atributos da tag object.
valuetype e type como atributos da tag param.
axis e abbr como atributos da tag td e th.
scope como atributo da tag td.
237
Nessa nova versão da HTML, os formulários
ganharam recursos muito interessantes e
importantes para otimização do trabalho.
Por exemplo, é possível fazer validação de

campos sem o uso de JavaScript, fazer validação
através de ER (expressões regulares) diretamente
no código HTML entre muitas outras.
Em HTML 4, as validações de campos são feitas

através de Javascript.
238
Data
◦ Esse campo abre um calendário para escolher a date.
◦ <input name="calendario" type="date" />
Números
◦ Esse campo permite adicionar somente números como valores, e ainda é
possível limitar os valores mínimo e máximo a serem inseridos, utilizando os
atributos min e max.
◦ <input name="numero" type="number" />
URL
◦ Exibe um campo com validação para a inserção de URLs.
◦ <input name="site" type="url" />
Email
◦ Campo usado para inserir e fazer a validação de um endereço de e-mail.
◦ <input name="email" type="email" />
239
Slider
◦ Exibe uma régua onde é possível setar um valor. Os atributos min e max limitam a
faixa de valores, e o atributo step informa a progressão dos valores,.
◦ <input name="faixa" type="range" min="5" max="50" step="5" />
Pesquisa
◦ Cria um campo para pesquisas.
◦ <input name="pesquisar" type="search" />
Paleta de Cores
◦ Cria uma paleta de cores.
◦ <input name="cores" type="color" />
Telefone
◦ Esse campo permite adicionar um número de telefone
(pode ter problema já que o formato dos telefones não é um padrão mundial).
◦ <input name="telefone" type="tel" />
240
Autofocus
◦ Se informado esse atributo no campo, ele receberá o foco assim que a página for carregada no navegador.
◦ <input name="pesquisar" type="search" autofocus />
Autocomplete
◦ Se esse atributo estiver como "on", então ele habilita um autocompletar para o campo.
◦ <input name="pesquisar" type="search" autocomplete="on" />
Placeholder
◦ Esse atributo oferece uma dica para auxiliar o usuário no preenchimento do campo.
◦ <input name="pesquisar" type="search" placeholder="Pesquisar" />
Pattern
◦ Esse atributo tem a função de fazer uma validação com base em uma expressão regular.
◦ <input name="valor" type="number" pattern="[0-9][a-z]{10}" />
Required
◦ O campo será obrigatório, não sendo executado o submit do formulário enquanto ele não for preenchido.
◦ <input name="pesquisar" type="search" required />
241
<form>
<fieldset>
<legend>Formulário com HTML 5</legend>
<label for="nome">Nome:</label>
<input name="nome" type="text" required autofocus /><br />
<label for="email">Email:</label>
<input name="email" type="email" placeholder="mail@provider.com" /><br />
<label for="nascimento">Data Nasc.:</label>
<input name="nascimento" type="date" /><br />
<label for="site">Site:</label>
<input name="site" type="url" /><br />
<label for="cor">Cor:</label>
<input name="cor" type="color" /><br />
<label for="satisfacao">Satisfação:</label>
<input name="satisfacao" type="range" min="5" max="50" step="5" /><br />
<input name="Salvar" type="submit" value="Salvar"/>
</fieldset>
</form>
242
Até recentemente não existia uma maneira
semântica de marcar, no HTML, o conteúdo de
uma legenda.
<figure>
<img src="../img/HTML5.png" alt="HMTL5">
<figcaption>HTML 5, a nova cara da Internet!</figcaption>
</figure>
figcaption substitui legend, que

também é uma tag nova do HTML5
243
<figure>
<img src="../img/kookaburra.jpg" alt="Kooaburra">
<img src="../img/pelican.jpg" alt="Pelicano na praia">
<img src="../img/lorikeet.jpg" alt="Papagaio">
<figcaption>
Pássaros Australianos. Da esquerda para direita, Kookburra, Pelicano e Papagaio.<br />
Originais por <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a>
</figcaption>
</figure>
244
Com HTML5, usar vídeos ficou ainda mais simples.
<video width="320" height="240" controls="controls">

<source src="../video/movie.ogg" type="video/ogg" />
</video>
É possível colocar um único formato de vídeo, mas ainda não existe um

formato que seja compatível com todos os browsers.
O parâmetro controls determina se os controles do player (com botões
play, pause, ...) deverá ser apresentado.
245
<video width="320" height="240" controls="controls">
<source src="../video/movie.mp4" type="video/mp4" />
<source src="../video/movie.ogg" type="video/ogg" />
<source src="../video/movie.webm" type="video/webm" />
Infelizmente Seu Navegador Não suporta Vídeos na Tecnologia HTML5.
</video>
Apesar do trabalho extra para converter os vídeos em diferentes formatos,

esta ainda é a única forma de garantir que seu vídeo seja exibido para
todos os browsers.
246
Para indicar ao navegador o container e codecs de determinado
arquivo, usa-se o atributo type, no formato:
type= "MIME-type" codecs="codec de vídeo, codec de áudio"
Por exemplo, um vídeo em Ogg, usando os codecs Theora e Vorbis,

terá seu source assim:
<source src="video.ogg" type="video/ogg" codecs="theora, vorbis">
Com MPEG-4 a coisa é um pouco mais complicada, por que é preciso

indicar ao navegador também o profile do codec de vídeo utilizado.
Veja um exemplo:
<source src="video.mp4" type="video/mp4" codecs="mp4v.20.240, mp4a.40.2">
ATENÇÃO: se o codec não estiver instalado, o áudio/vídeo não será ouvido/exibido.
247
Para inserir áudio em uma página web, basta usar o elemento audio:
<audio src="musica.ogg" controls="true" autoplay="true" />
O valor de controls define se um controle de áudio, com botões de play,

pause, volume, barra de progresso, contador de tempo, etc. será exibido na
tela.
Se for setado como “false”, será preciso controlar o player via javascript, com
métodos como play() e pause().
O valor de autoplay define se o áudio vai começar a tocar assim que a página
carregar.
Formatos:
◦ ogg – Firefox e Chrome
◦ mp3 – Internet Explorer e Chrome
248
<audio id="demo" src="../audio/musica.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">
Reproduzir o áudio</button>
<button onclick="document.getElementById('demo').pause()">
Pausar o áudio</button>
<button onclick="document.getElementById('demo').volume+=0.1">
Aumentar o volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">
Diminuir o volume</button>
</div>
249
Todo browser deveria suportar o codec livre
OggVorbis, mas, infelizmente, isso não é a realidade.
Então, é preciso saber como oferecer um formato
alternativo de áudio.
Fazemos assim:
<audio controls="true" autoplay="true">

<source src= "../audio/musica.ogg" />
<source src= "../audio/musica.mp3" />
<source src= "../audio/musica.wma" />
</audio>
250
http://foo.com/video.ogg#t=10,20
◦ Especifica que o intervalo entre 10 e 20 segundos deve ser
reproduzido.
http://foo.com/video.ogg#t=,10.5
◦ Especifica que o vídeo deve ser reproduzido do início até 10,5
segundos.
http://foo.com/video.ogg#t=,02:00:00
◦ Especifica que o vídeo deve ser reproduzido do início até 2
horas.
http://foo.com/video.ogg#t=60,
◦ Especifica que o vídeo deve começar aos 60 segundos e ser
reproduzido até o final.
251
O elemento canvas, novidade do HTML 5, permite que a
informação para a construção de imagens baseadas em pixels seja
inserida diretamente no código do documento.
O elemento canvas apenas delimita em que local da tela isto

acontece. O processo de desenho é controlado por uma API
específica para este elemento que interage com JavaScript.
Por enquanto, as imagens criadas são objetos em duas dimensões

(2D), mas já existem experimentos para construção de objetos 3D
com a API Canvas.
252
fillStyle clearRect
◦ define a cor de fundo do polígono. ◦ apaga uma área retangular.
strokeStyle x, y
◦ define a cor da borda do polígono. ◦ definem a posição no canvas.
fillRect width, height

◦ retângulo com fundo preenchido. ◦ definem o tamanho do retângulo.
strokeRect lineWidth
◦ altera a espessura das bordas.
◦ retângulo com a borda preenchida.
253
CSS:
canvas#figura{
border:#000 medium dashed;
}
JAVASCRIPT:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.fillStyle = '#00FFFF'
context.fillRect(50,50,200, 200);
}
HTML:
<canvas id="figura" width="300" height="300"></canvas>
<br /><button onClick="desenhar()">Desenhar</button>
254
JAVASCRIPT:
context.fillStyle = '#264761';
context.strokeStyle = '#9233A7';
context.lineWidth = 4;
// Ordem dos argumentos: (x, y, width, height)

context.fillRect (100, 100, 100, 25);
context.strokeRect(100, 135, 100, 25);
context.fillRect (100, 170, 100, 25);
context.clearRect (120, 180, 60, 20);
}
255
JAVASCRIPT:
var myGradient = context.createLinearGradient(0, 0, 300, 0);
myGradient.addColorStop(0, "black");
myGradient.addColorStop(1, "white");
context.fillStyle = myGradient;
context.fillRect(0,0,300, 300);
}
(0, 0, 300, 0) (300, 0, 0, 0) (0, 0, 0, 300) (0, 300, 0, 0)
256
beginPath fill
◦ Permite criar formas
personalizadas no canvas. ◦ Preenche o fundo do
polígono (se estiver
moveTo fechado)
◦ Define a posição inicial do
polígono.
stroke
lineTo ◦ Pinta a borda do polígono
◦ Cria uma linha.
closePath
arc ◦ para finalizar nosso path.
◦ Desenha um círculo ou arco.
257
JAVASCRIPT:
context.beginPath();
context.moveTo( 50, 100);
context.lineTo(150, 225);
context.lineTo(250, 100);
context.lineTo( 50, 100);
context.closePath();
context.fillStyle = '#264761';
context.strokeStyle = '#9233A7';
context.fill();
context.stroke();
}
258
JAVASCRIPT:
context.moveTo(150,50);
context.lineTo(220,250)
context.fillStyle='#FFFF00';
context.strokeStyle='#FF0000';
context.fill();
context.stroke();
}
259
JAVASCRIPT:
context.strokeStyle='#FF0000';
for (i=0;i<300;i+=5){
if((i%2)!=0){
context.lineTo(i+5,i);
}else{
context.lineTo(i,i+5);
}
}
context.stroke();
}
260
Desenhar um grid de 300 pixels formado por
quadrados de 15 pixels cada.
261
arc(x, y, raio, angulo_inicio, angulo_final, sentido_anti_horario)
◦ Os parâmetros x, y correspondem às coordenadas do centro do arco.

◦ O parâmetro raio é o número de píxels que tem o arco como raio.
◦ Por sua parte ângulo_início e ângulo_final são os ângulos onde começa e acaba
o raio. Estão tomados como se o eixo da horizontal tivesse o ângulo zero.
◦ Sentido_anti_horario é um parâmetro booleano, onde true significa que o traço vai
desde um ângulo de início ao do fim no sentido contrário dos ponteiros do relógio.
False indica que esse caminho é em direção contrária.
Para conveter graus em radianos, use:

var radians = (Math.PI/180)*degrees;
262
JAVASCRIPT:
context.strokeStyle = '#FF8A00';
context.arc(75,75,45,0,Math.PI*2,true); //Rosto
context.arc(75,75,35,0,Math.PI,false); //Sorriso
context.arc(60,65,5,0,Math.PI*2,true); //Olho Esquerdo
context.arc(90,65,5,0,Math.PI*2,true); //Olho Direito
context.stroke();
}
263
JAVASCRIPT:
context.fillStyle = '#FF8A00';
context.moveTo(10,60)
context.quadraticCurveTo(10,10,60,10);
context.lineTo(120,10);
context.quadraticCurveTo(120,110,60,110);
context.fill();
}
264
Desenhar a bandeira do Brasil.
265
JAVASCRIPT:
context.font = "bold 24px sans-serif";
context.textAlign = "center";
context.fillText("HTML 5", 150, 50);
context.fillStyle='#FF0000';
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("Canvas", 295, 295);
}
266
JAVASCRIPT:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 300;
var rectHeight = 300;
context.translate(canvas.width/2, canvas.height/2);
context.scale(0.75, 0.75);
context.fillStyle = 'blue';
context.fillRect(rectWidth/-2, rectHeight/-2, rectWidth, rectHeight);
context.rotate( (Math.PI / 180) * 45);

context.scale(0.25, 1);
context.fillStyle = 'yellow';
context.fillRect(rectWidth/-2, rectHeight/-2, rectWidth, rectHeight);
}
267
JAVASCRIPT:
function desenhar() {
var canvas = document.getElementById("figura");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "../img/HTML5.png";
img.onload = function() {
context.drawImage(img, 1, 1);
}
}
268
JAVASCRIPT:
function desenhar() {
var canvas = document.getElementById("figura");
var context = canvas.getContext("2d");
var img = document.getElementById("html5");
context.drawImage(img, 1, 1); //imagem tamanho original
context.drawImage(img, 225, 225, 64, 64); //imagem redimensionada
}
HTML:
<img id="html5" src="../img/HTML5.png" style="display:none;">
<canvas id="figura" width="300" height="300"></canvas><br />
<button onClick="desenhar()">Desenhar</button>
269
<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas { border: 1px solid #9C9898; }
</style>
<script>
var run, canvas, content;
var x = 5;
var y = 15;
var dir = 5;
function update() {
x += dir;
if(x <= 0 || x >= 470){
dir = -dir;
}
}
270
function draw() {
context.fillStyle = "#0000FF";
context.clearRect(0, 0, 500, 60);
context.fillRect(x, y, 30, 30);
}
function animate() {
update();
draw();
}
function load() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
draw();
}
function play() {
if(!run) run = setInterval('animate()',10);
} 271
function stop() {
clearInterval(run);
run = null;
}
</script>
</head>
<body onLoad="load();">
<canvas id="myCanvas" width="500" height="60"></canvas>
<br />
<a href="javascript:stop();">Stop</a> |
<a href="javascript:play();">Play</a>
</body>
</html>
272
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
border: 1px solid #CCCCCC;
height: 50px;
width: 50px;
margin-bottom: 5px;
}
#img {
height: 50px;
width: 50px;
}
</style> No exemplo, é possível arrastar
a imagem entre duas DIV’s
273
<script>
function dragover(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="dragover(event)">
<img id="img" src="p.gif" draggable="true" ondragstart="drag(event)"/>
</div>
<div id="div2" ondrop="drop(event)" ondragover="dragover(event)"></div>
</body>
</html>
274
<!doctype html>
<html lang="pt-BR">
<head>
<title>Paint</title>
<script src="paint.js"></script>
</head>
<body>
<canvas id="paint" style="border: 1px solid #CCCCCC;"> </canvas>
</body>
</html>
275
window.onload = function () {
var paint = document.getElementById("paint");
var ctx = paint.getContext("2d");
paint.setAttribute("width", 500);
paint.setAttribute("height", 300);
var desenhando = false;
paint.onmousedown = function (e) {

if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX;
y = e.clientY;
}
ctx.moveTo(x, y);
desenhando = true;
} 276
paint.onmouseup = function () {
desenhando = false;
}
paint.onmousemove = function (e) {

if (desenhando) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX;
y = e.clientY;
}
ctx.lineTo(x,y);
ctx.stroke();
}
}
} 277
Vamos montar uma animação na qual os objetos
irão se movimentar com velocidades diferentes.
Usaremos 4 figuras:
◦ Paisagem
◦ Nuvem
◦ Árvore
◦ Smurf
278
<!DOCTYPE HTML>
<html>
<head>
<style>
div#main {
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
}
</style>
</head>
<body>
<div id="main">
<canvas id="myCanvas" width="500" height="300"></canvas>
<script src="paisagem.js"></script>
</div>
</body>
</html>
279
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var posArvore = 450;
var posNuvem = 150;
var frameX = 0;
var frameY = 0;
var frameSize = 128;
function drawHorizonte() {
img.src = "./horizonte.png";
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
}
function updateNuvem() {
posNuvem--;
if(posNuvem <= -80){
posNuvem = 500;
}
}
280
function drawNuvem() {
img.src = "./nuvem.png";
context.drawImage(img, posNuvem, 15, 200, 85);
}
}
function updateArvore() {
posArvore -= 3;
if(posArvore <= -80){
posArvore = 500;
}
}
function drawArvore() {
img.src = "./arvore.png";
context.drawImage(img, posArvore, 210, 50, 75);
}
}
281
function updateSmurf() {
frameX++;
if(frameX >= 4) {
frameX = 0;
frameY++;
if(frameY >= 4) frameY = 0;
}
}
function drawSmurf() {
img.src = "./smurf.png";
context.drawImage(img,
frameX * frameSize, frameY * frameSize, frameSize, frameSize,
(canvas.width-frameSize)/2, (canvas.height-frameSize)/2+35,
frameSize, frameSize);
}
}
282
function animate() {
drawHorizonte();
updateNuvem();
drawNuvem();
updateSmurf();
drawSmurf();
drawArvore();
updateArvore();
}
setInterval('animate()',30);
283
Clássico Jogo da Velha em HTML5
Usaremos 3 arquivos:
◦ velha.html
◦ velha.css
◦ velha.js
284
<!doctype html>
<html lang="pt-BR">
<head>
<link rel="stylesheet" href="velha.css" />
<script src="velha.js"></script>
</head>
<body onload="startGame();">
<div id="myGame">
<canvas id="myCanvas"></canvas>
<div id="winner"></div>
<div id="newGame">
<a href="javascript:startGame();">New Game</a>
</div>
</div>
</body>
</html>
285
div#myGame { div#winGame {
position: absolute; width: 300px;
width: 300px; line-height: 60px;
height: 300px; text-align: center;
top: 50%; font-size: 32px;
left: 50%; font-family: verdana,
margin-top: -150px; arial;
margin-left: -150px; }
}
a {
div#newGame { color: #AAAAAA;
width: 300px; text-decoration: none;
line-height: 30px; }
text-align: center;
display: none; a:hover {
} color: #0000BB;
}
286
var run, canvas, content, player, winner, count, x, y;
var score = new Array(9);
function loadCanvas() {
canvas = document.getElementById("myCanvas");
canvas.width = 300;
canvas.height= 300;
context = canvas.getContext("2d");
}
function startGame(){
if(!canvas) loadCanvas();
showTab();
newGame();
}
287
function showTab() {
context.fillStyle = '#FFFFFF';
context.clearRect(0,0,300,300);
context.moveTo(100, 0);
context.moveTo(200, 0);
context.moveTo( 0,100);
context.moveTo( 0,200);
context.strokeStyle = '#00000';
context.stroke();
}
288
function newGame() {
player = 'X';
winner = '';
count = 0;
for(i=0; i<9; i++) { score[i] = ''; }
document.getElementById('newGame').style.display='none';
document.getElementById('winGame').innerHTML = '';
}
function drawScore(move) {
context.font = "bold 50px sans-serif";
context.textAlign = "center";
context.textBaseline = "middle";
x = (move%3)*100+50;
y = Math.floor(move/3)*100+50;
context.fillText(player, x, y);
}
289
function updateScore(move) {
score[move] = player;
count++;
}
function nextPlayer() {
if((score[0]!='' && score[0]==score[1] && score[1]==score[2]) ||
(score[3]!='' && score[3]==score[4] && score[4]==score[5]) ||
(score[4]!='' && score[4]==score[6] && score[4]==score[2])) {
winner = player;
}
else {
player = (player=='X') ? 'O' : 'X';
}
}
290
function showWinner() {
var cor = (winner=='X') ? '#FF0000'
: (winner=='O') ? '#009900' : '#000099';
var msg = (winner=='') ? 'Deu Velha!!!' : 'Venceu ' + winner;
document.getElementById('winGame').style.color = cor;
document.getElementById('winGame').innerHTML = msg;
document.getElementById('newGame').style.display='block';
}
function isGameOver() {
return(count>=9 || winner!='');
}
function isValidMove(move) {
return(move in [0,1,2,3,4,5,6,7,8] && score[move]=='');
}
291
function getPosition(x,y) {
px = Math.floor((x+1)/100);
py = Math.floor((y+1)/100);
if(px>=0 && px<3 && py>=0 && py<3)
return px + py*3;
else
return null;
}
function getClickMouse(e) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= document.getElementById("myGame").offsetLeft;
y -= document.getElementById("myGame").offsetTop;
}
292
window.onmousedown = function(e) {
if(!isGameOver()) {
getClickMouse(e);
var move = getPosition(x,y);
if(isValidMove(move)) {
updateScore(move);
drawScore(move);
nextPlayer();
if(isGameOver()) {
showWinner();
}
}
}
}
293
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="q_cabeca.css" />
<script src="q_cabeca.js"></script>
</head>
<body>
294
<div class="tabuleiro">
<div class="pecas sup_esq">
<img src="./img/carros.jpg" id="img1"
draggable="true" ondragstart="drag(event)" />
</div>
<div class="pecas sup_dir">
</div>
<div class="pecas inf_esq">
</div>
<div class="pecas inf_dir">
</div>
</div>
295
<div id="separacao"></div>
<div class="tabuleiro">
<div class="pecas sup_esq" id="div1"
ondrop="drop(event)" ondragover="dragover(event)">
</div>
<div class="pecas sup_dir" id="div2"
</div>
<div class="pecas inf_esq" id="div3"
</div>
<div class="pecas inf_dir" id="div4"
</div>
</div>
</body>
</html>
296
.tabuleiro { .sup_dir img{
width: 502px; margin-left: -250px;
height: 300px; }
border-top: 1px solid #666;
border-left: 1px solid #666; .inf_esq img{
float: left; margin-top: -150px;
} }
.pecas { .inf_dir img{

width: 250px; margin-left: -250px;
height: 150px; margin-top: -150px;
border-right: 1px solid #666; }
border-bottom: 1px solid #666;
float: left; #separacao {
overflow:hidden; width: 10px;
} height: 10px;
float: left;
}
297
var qtde = 0;
var erro = 0;
function dragover(ev) {
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var div = ev.target.getAttribute("id").substring(3);
var img = ev.dataTransfer.getData("Text").substring(3);
if(div==img) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
qtde++;
if(qtde==4) {
alert('Vencedor com ' + erro + ' erros.');
document.location = '';
}
}
else {
erro++;
}
} 298
Criar um site para uma empresa cujo público são
crianças. A empresa comercializa brinquedos,
livros e roupas infantis, realiza festas infantis e
aluga brinquedos infláveis. Ela atende meninos e
meninas, de recém nascidos até 7 anos. Além dos
produtos da empresa, o site pode conter músicas
e filmes infantis, jogos infantis, imagens para
colorir, histórias infantis, opções de passeios para
crianças, seção de dicas para as mães.
299
Livro Texto:
1. Use a Cabeça – Html com CSS e XHMTL; Freeman, Elisabeth & Freeman,
Eric; Ed. Alta Books; 2ª edição; 2008; 10 exemplares.
2. Padrões de Projeto com CSS e HTML; Bowers, Michael; Ed. Alta Books; 2ª
3. Construindo Sites com CSS e XHTML; Silva, Maurício Samy; Ed. Novatec; 1ª
Bibliografia Complementar:
4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1ª edição; 2001; 10
exemplares.
5. Estudo Dirigido: Web Javascript; Manzano, José Augusto et al.; Ed. Érica; 1ª
6. Html 4 – Teoria e Prática; Ramalho, José Antônio; Ed. Berkley; 1ª edição;
2000; 5 exemplares.
7. Projetando Websites; Nielsen, Jakob; Ed. Elsevier; 1ª edição; 2000; 14
exemplares.
8. Criando Páginas Web com CSS: Soluções Avançadas para Padrões Web;
Budd, Andy, et al.; Ed. Pearson; 1ª edição; 2006; 5 exemplares.

Desenvolvimento para Web PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Desenvolvimento para Web PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Prof. Dr.

Wagner José Dizeró

Tabela de cores HTML:

Atenção para o caminho e nome do arquivo!!!

Sempre deve-se usar o caminho relativo.

◦ Vantagem que a imagem é atualizada automaticamente

<img src="logo.png" width="300" height="120">

◦ Cuidado para não perder a qualidade da resolução.

Veja meu Currículo

Para carregar uma nova janela,

Curso Duração Período

Seu principal benefício é prover a separação entre

Com CSS o mesmo resultado será obtido assim:

Método 2: Interno (a tag style)

Método 3: Externo (link para um arquivo separado)

Obs.: pode ser feito tudo na mesma linha

Se a primeira fonte da lista

A propriedade font-style define

Usada para escolher as variantes normal ou small-caps.

Uma fonte pode ser normal ou bold

uppercase Converte todas as letras para maiúscula.

none O texto é apresentado como foi escrito no código HTML.

p { This example demonstrates different line-

<h1 class="visible">This is a visible heading</h1>

Opções para listas UL: ul.myList {

Os links da página ficarão em azul e sem sublinhado.

link é usada para links não visitados.

<p>Uvas para vinho branco:</p>

<p>Uvas para vinho tinto:</p>

<h1 id="c1">Capítulo 1</h1>

Nesta lição veremos com detalhes o uso dos

◦ Vamos usar a citação abaixo de autoria de Benjamin Franklin:

p { border: 1px solid blue; }

#column1, #column2, #column3 {

É possível notar que a quebra de linha é

Note que seria possível ter o mesmo efeito usando margin.

.aluno { <h1>Relação de Alunos</h1>

A grande vantagem é que o processamento será

É recomendado fazer as validações via JS. Mas,

A definição da linguagem utilizada é opcional

width e height – definem a dimensão da nova janela

var m = new Array('Janeiro', 'Fevereiro', 'Março', 'Abril',

var agora = new Date();

SCREEN RESOLUTION: 1920x1080

noscript – é executado se o browser não tiver javascript

De acordo com o tipo de dispositivo, é feito o direcionamento.

Algumas das vantagens deste tipo de validação é que

Em contrapartida, é uma validação insegura uma vez que

Como o processamento é local, as alterações são

Esses efeitos tem permitido a construção de sites

getElementById obtém as propriedades de

innerHTML permite adicionar

<div id="quadrado" onclick="mudar();"></div>

<input type="button" onclick="mover(-10);" value="<<" />

<form name=saida><input type="text" name="texto" size="50"></form>

<a href="#" onMouseOver="mostrar(0)" onMouseOut="ocultar()">

As principais mudanças se relacionam com novas

Suas principais mudanças incluem layout, semântica

O HTML 5 ainda está em fase de desenvolvimento.

Os elementos de linha marcam, na sua maioria das

Os elementos de blocos são como caixas, que dividem o

Os elementos de linha podem conter outros elementos

meta São metadados ou "etiquetas" que descrevem o conteúdo do seu