Desenvolvimento para Web PDF

Prof. Dr. Wagner Jos Dizer Prof. Dr.
Wagner Jos Dizer

wagner@unilins.edu.br wagner@unilins.edu.br
EMENTA:
Funcionamento e histrico da Internet. Elaborao de
pginas web atravs da linguagem Html. Tags.
Hipertexto. Hiperlink. Uso de folha de estilo (CSS).
Formulrios. Javascript.
CRITRIOS DE APROVEITAMENTO:
Provas: peso 8.0 (oito)
Trabalhos: peso 2.0 (dois)
Livro Texto:
1. Use a Cabea Html com CSS e XHMTL; Freeman, Elisabeth & Freeman,
Eric; Ed. Alta Books; 2 edio; 2008; 10 exemplares.
2. Padres de Projeto com CSS e HTML; Bowers, Michael; Ed. Alta Books; 2
edio; 2008; 10 exemplares.
3. Construindo Sites com CSS e XHTML; Silva, Maurcio Samy; Ed. Novatec; 1
Bibliografia Complementar:
4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1 edio; 2001; 10 4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1 edio; 2001; 10
exemplares.
5. Estudo Dirigido: Web Javascript; Manzano, Jos Augusto et al.; Ed. rica; 1
6. Html 4 Teoria e Prtica; Ramalho, Jos Antnio; Ed. Berkley; 1 edio;
2000; 5 exemplares.
7. Projetando Websites; Nielsen, Jakob; Ed. Elsevier; 1 edio; 2000; 14
exemplares.
8. Criando Pginas Web com CSS: Solues Avanadas para Padres Web;
Budd, Andy, et al.; Ed. Pearson; 1 edio; 2006; 5 exemplares.
(1605) Surge o cdigo binrio
(1844) Transmisso por telgrafo
(1946) Criado o ENIAC
(1957) Nasce a ARPA
(1961) Transmisso de dados por pacote
(1970) O termo INTERNET criado
(1971) Idealizao do e-mail
(1973) Primeira conexo intercontinental (1973) Primeira conexo intercontinental
(1977) Criao do protocolo TCP/IP
(1981) Lanado o PC da IBM
(1987) FAPESP conecta-se a instituies EUA
(1995) No Brasil, chega aos usurios comuns
(2000) Expanso do comrcio eletrnico
(2004) Disseminao 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 localizao de fontes de
informao na Web, esse esquema chama-se URI.
Um Protocolo de acesso para acessar estas fontes, hoje
o HTTP. o HTTP.
Uma linguagem de Hypertexto, para a fcil navegao
entre as fontes de informao: o HTML.
6
HTML uma abreviao de Hypertext Markup
Language - Linguagem de Marcao de
Hypertexto.
Resumindo em uma frase: o HTML uma
linguagem para publicao de contedo (texto, linguagem para publicao de contedo (texto,
imagem, vdeo, udio e etc) na Web.
possvel criar pginas utilizando ferramentas
(como Dreamwaver) ou mont-las diretamente
atravs do uso de TAGs.
TAG = comando
7
Entre 1993 e 1995, o HTML ganhou as verses HTML+,
HTML2.0 e HTML3.0, onde foram propostas diversas
mudanas para enriquecer as possibilidades da linguagem.
Contudo, at aqui o HTML ainda no era tratado como um
padro.
Apenas em 1997, o grupo de trabalho do W3C responsvel
por manter o padro do cdigo, trabalhou na verso 3.2 da
Apenas em 1997, o grupo de trabalho do W3C responsvel
por manter o padro do cdigo, trabalhou na verso 3.2 da
linguagem, fazendo com que ela fosse tratada como
prtica comum.
O HTML 4.0 surgiu em 1997, h mais de uma dcada. A
estruturao de pginas em HTML 4.0 basicamente
constituda pelo elemento <div>, com classes e IDs
diferentes.
8
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Uma Pgina HTML5 Bsica</title> <title>Uma Pgina HTML5 Bsica</title>
</head>
<body>

Primeiro exemplo de HTML.
</body>
</html>
9
DOCTYPE
para que o navegador reconhea que deve funcionar no standards
mode
Tag html
com o atributo lang, para identificar a lngua na qual o contedo do
documento ser escrito
Tag head Tag head
Informaes de cabealho no visveis da pgina
Tag meta
Especificando a codificao da pgina (charset)
Tag title
Ttulo da pgina
Tag body
Contedo da pgina
10
Comandos Bsicos
<!doctype html>
<html lang="pt-BR">
<head>
<title>Quebra de linha</title>
</head>
<body>
Primeira linha.
Segunda linha.
</body>
</html>
<br />
A tag <br /> pode ser usada
vrias vezes, pulando uma
linha a cada comando.
12
<!doctype html>
<html lang="pt-BR">
<head>
<title>Tamanho do Texto</title>
</head> </head>
<body>
<p>Primeiro pargrafo</p>
<p>Segundo pargrafo</p>
<p>Terceiro pargrafo</p>
</body>
</html>
A tag <p> no produz
nenhum efeito se usada
mais de uma vez.
13
<!doctype html>
<html lang="pt-BR">
<head>
<title>Cabealho de Ttulo</title>
</head>
<body>
<h1>Cabealho Tamanho 1</h1> <h1>Cabealho Tamanho 1</h1>
<h2>Cabealho Tamanho 1</h2>
<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> <ul>
<li>Abacaxi</li>
<li>Laranja</li>
<li>Mamo</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> <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>
Ateno para o caminho e nome do arquivo!!!
Se a imagem estiver na mesma pasta, no precisa indicar o path
18
C:\
html
index.htm
imagem.png
image
imagem.gif
img

<img src="./imagem.png">
<img src="./image/imagem.gif">
<img src="../img/imagem.jpg">
img
imagem.jpg
Sempre deve-se usar o caminho relativo.
No servidor, ser hospedado em outra pasta.
Nunca se deve o caminho fsico:
<img src="C:\html\imagem.png">
19
possvel 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
possvel redimensionar uma imagem sem precisar editar
<img src="logo.png" width="300" height="120"> <img src="logo.png" width="300" height="120">
Cuidado para no perder a qualidade da resoluo.
21
Um link serve para direcionar o usurio para outra
pgina do site ou para um site externo.
Veja meu Currculo
<a href="vitae.htm">Currculo</a> <a href="vitae.htm">Currculo</a>
Conhea a Google
<a href="http://www.google.com.br">Google</a>
Para carregar uma nova janela,
use: target="_BLANK"
22
possvel usar uma imagem como ncora de um
link.
Conhea a
<a href="http://www.google.com.br"> <a href="http://www.google.com.br">
<img src="logo.png" border="0">
</a>
23
<table border="1">
<tr>
<th>Cdigo</th>
<th>Descrio</th>
<th>Preo</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>
</tr>
</table>
<table>: cria a tabela
<tr>: cria uma linha (table row)
<th>: cria uma cabealho (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">Relao de Produtos</font></td>
</tr> </tr>
<tr bgcolor="#4682B4">
<th width="60">Cdigo</th>
<th>Descrio</th>
<th>Preo</th>
</tr>
<tr bgcolor="#B0C4DE">
<td align="center">1</td>
<td>Pen Drive</td>
<td align="right">45,00</td>
</tr>
...
</table>
border: define a borda
colspan: expande a coluna
align: alinha o texto
25
1. Crie uma pgina chamada academico.htm com
a seguinte formatao:
a) O cabealho deve ter tamanho 2.
b) Aps o cabealho, incluir uma linha horizontal.
c) Criar uma lista no ordenada com os itens
Graduao, Ps-Graduao e Extenso com fonte Graduao, Ps-Graduao e Extenso com fonte
tamanho 3.
d) Na frente do item Graduao, usar uma imagem de
lupa para criar um link para a pgina graduacao.htm.
e) Criar uma sublista com as opes Mestrado e
Doutorado. Os itens devem estar com o type de
marcador quadrado.
26
27
2. Na outra pgina (graduacao.htm), criar uma tabela com os cursos:
Curso Durao Perodo
Agronomia 5 anos Integral
Biologia 4 anos Diurno
Direito 5 anos Noturno
Medicina 6 anos Integral
Nutrio 4 anos Noturno
Odontologia 5 anos Diurno
Pedagogia 4 anos Noturno
Aps a listagem dos cursos, criar um link com a palavra voltar, que deve
direcionar o usurio novamente para a pgina colegiados.htm.
28
29
W3C a sigla para World Wide Web Consortium, uma
organizao independente que gerencia as normas para
codificao na Internet (isto , HTML, CSS, XML e
outros).
Microsoft, Fundao Mozilla e muitas outras
organizaes so membros do W3C e formam um organizaes so membros do W3C e formam um
consenso sobre o futuro desenvolvimento de normas.
A ideia da normatizao criar um consenso e
encontrar um denominador comum para uso de
tecnologias para a Web.
30
Validador da W3C que faz uma verificao da arquivos
HTML e XML e retorna um relatrio com os eventuais
erros e avisos caso seu arquivo no valide.
http://validator.w3.org/
31
TAG Funo
HTML Delimita o incio e final de uma pgina
HEAD Define o cabealho da pgina
BODY Contem o contedo a se exibido pela pgina
BR Quebra de linha, equivalente tecla ENTER
P Pargrafo de texto P Pargrafo de texto
H? Cabealho de ttulo
OL Lista ordenada
UL Lista no 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 apresentao de documentos escritos em
uma linguagem de marcao, como HTML ou
XML.
Seu principal benefcio prover a separao entre Seu principal benefcio prover a separao entre
o formato e o contedo de um documento.
Em resumo:
HTML usado para estruturar contedos.
CSS usado para formatar contedos estruturados.
34
CSS controla fontes, cores, margens, linhas, alturas,
larguras, imagens de fundo, posicionamentos e
muito mais.
Vantagens:
Economizar tempo
Diminuir o tamanho do cdigo de uma pgina
Carregar a pgina mais rapidamente
Maior facilidade para dar manuteno no site
Mais controle no layout da pgina
Vrios 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 cdigos HTML e CSS so mais ou menos parecidos. Os cdigos HTML e CSS so mais ou menos parecidos.
Em CSS usamos trs itens: seletor, propriedade e valor.
36
Mtodo 1: In-line (o atributo style)
O estilo aplicado diretamente no elemento.
Mtodo 2: Interno (a tag style) Mtodo 2: Interno (a tag style)
Utiliza-se a tag style para definir o CSS
Mtodo 3: Externo (link para um arquivo separado)
Utiliza um arquivo externo com a extenso .css
37
<!doctype html>
<html lang="pt-BR">
<head>
</head> </head>
<body style="background-color: #FF0000;">
<p>Pgina com fundo vermelho</p>
</body>
</html>
38
<!doctype html>
<html lang="pt-BR">
<head>
<style type="text/css">
body {background-color: #FF0000;}
</style> </style>
</head>
<body>
</body>
</html>
39
<!doctype html>
<html lang="pt-BR">
<head>
<link rel="stylesheet" href="style.css" />
</head> </head>
<body>
</body>
</html>


body {background-color:#FF0000;}
40
Propriedades:
color
background-color
background-image
background-size background-size
background-repeat
background-attachment
background-position
background
41
<!doctype html>
<html lang="pt-BR">
<head>
h1 {color: #FF0000;} h1 {color: #FF0000;}
</style>
</head>
<body>
<h1>Cabealho na cor vermelha</h1>
</body>
</html>
42
<!doctype html>
<html lang="pt-BR">
<head>
body {
background-color: #FFCC66;
}
h1 { h1 {
color: #990000;
background-color: #FC9804;
}
</style>
</head>
<body>
<h1>Cabealho com uma cor de fundo.</h1>
</body>
</html>
43
<!doctype html>
<html lang="pt-BR">
<head>
body {
background-color: #FFCC66; background-color: #FFCC66;
background-image: url("imagem.png");
}
</style>
</head>
<body>
</body>
</html>
44
<!doctype html>
<html lang="pt-BR">
<head>
body {
background-image: url("imagem.png"); background-image: url("imagem.png");
background-size: 100%;
}
</style>
</head>
<body>
</body>
</html>
45
body {
background-repeat: no-repeat;
}
Valor Descrio
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 no se repete
46
body {
background-attachment: fixed;
}
Valor Descrio
background-attachment: scroll
A imagem rola com a pgina
background-attachment: fixed
A imagem fixa
47
body {
background-attachment: fixed;
background-position: right bottom;
}
Valor Descrio
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
abreviao para todas as propriedades
listadas anteriormente.
background: #FFCC66 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-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
no estiver instalada na
mquina do usurio, 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; font-weight: bold;
}
Uma fonte pode ser normal ou bold
54
h1 {font-size: 30px;}
h2 {font-size: 120%;}
h3 {font-size: 12pt;} 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-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 {
text-decoration: none;
}
underline
overline
line-through
none
59
p {
text-indent: 30px;
}
<p>As atualizaes dos apps na Play Store, do Google, sero
mais rpidas. Isso porque a loja de aplicativos do Android agora
Cdigo HTML:
conta com um sistema de upgrade que baixa arquivos menores
para o smartphone, segundo o Android Police.</p>
As atualizaes dos apps na Play Store, do Google, sero
conta com um sistema de upgrade que baixa arquivos menores
para o smartphone, segundo o Android Police.
Visualizao no browser:
60
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Propriedade Efeito 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 maiscula.
Por exemplo: "john doe" transforma-se para"JOHN DOE.
lowercase
Converte todas as letras para minscula.
Por exemplo: "JOHN DOE" transforma-se para"john doe.
none
O texto apresentado como foi escrito no cdigo HTML.
Sem transformaes.
61
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px; letter-spacing: 3px;
}
e s p a a m e n t o 6
espaamento 3
62
Especifica a altura de uma linha de texto.
p {
line-height: normal;
}
This example demonstrates different line-
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 {
line-height: 25px;
}
This example demonstrates different line-
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
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 class="myList">
<li>Caf</li>
<li>Ch</li>
<li>Coca-Cola</li>
</ul>
ul.myList {
list-style-type: square;
}
Opes para listas UL:
circle
disc
none
square
ul.myList {
list-style: url("marcador.png");
}
66
<ol class="myList">
<li>Caf</li>
<li>Ch</li>
<li>Coca-Cola</li>
</ol>
Opes para listas OL:
decimal
decimal-leading-zero
lower-alpha
lower-greek
lower-latin
ol.myList {
list-style-type: decimal;
}
lower-latin
lower-roman
none
upper-alpha
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 nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
h1.cursor {
cursor: wait;
width: 200px;
background: #75AD45;
}
68
Pseudo-classes:
link
visited
active active
hover
69
a {
color: blue;
}
Os links da pgina ficaro em azul e sem sublinhado.
70
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:active { a:active {
color:red;
}
a:hover {
background-color: yellow;
}
link usada para links no 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 { a:hover {
background-color: yellow;
color: blue;
}
<a href="#">Institucional</a>
<a href="#">Produtos</a>
<a href="#">Servios</a>
<a href="#">Contatos</a>
72
CLASS e ID so usados para classificar e/ou
identificar elementos dentro de uma pgina.
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 pgina.
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 pgina.
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>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">Captulo 1</h1>
...
<h2 id="c1-1">Captulo 1.1</h2>
... ...
...
<h1 id="c2">Captulo 2</h1>
...
...
<h3 id="c2-1-2">Captulo 2.1.2</h3>
...
75
Os elementos <span> e <div> so usados para
agrupar e estruturar um documento e so
frequentemente usados em conjunto com os
atributos class e id.
Nesta lio veremos com detalhes o uso dos
elementos HTML <span> e <div> no que se refere
a sua vital importncia para as CSS.
76
O elemento <span> um elemento neutro e que
no adiciona qualquer tipo de semntica ao
documento.
Contudo, <span> pode ser usado pelas CSS para
adicionar efeitos visuais a partes especficas do adicionar efeitos visuais a partes especficas do
texto no seu documento.
Vamos usar a citao abaixo de autoria de Benjamin Franklin:
Dormir cedo e acordar cedo faz o homem saudvel,
rico e sbio.
77
<p>Dormir cedo e acordar cedo faz o homem
<span class="benefit">saudvel</span>,
<span class="benefit">rico</span> e
<span class="benefit">sbio</span>.</p>
A folha de estilos: 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 trs elementos <span>, conforme foi explicado na lio
anterior.
78
Enquanto <span> usado dentro de um
elemento nvel de bloco como vimos no exemplo
anterior, <div> usado para agrupar um ou mais
elementos nvel de bloco.
O <div> sempre cria um bloco (caixa) com seu O <div> sempre cria um bloco (caixa) com seu
contedo.
Diferenas parte, o agrupamento com <div>
funciona mais ou menos da mesma maneira.
79
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<style>
#democrats { background:blue; }
#republicans { background:red; }
</style>
</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. 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 no precisaro mais
controlar os volantes dos prprios veculos, pois os carros
autodirigveis nos quais voc define uma rota e se recosta
confortavelmente no banco, sem precisar fazer nada j estaro
no mercado. A previso consta em uma pesquisa da consultoria
KPMG e do Center for Automotive Research, e diz respeito ao
mercado norte-americano.
</div>
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
</div>
div.box {
width: 200px;
height: 200px;
overflow-y: scroll;
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 opes de ajuste de
margens, bordas, padding e contedo 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 {
font-family: arial, verdana;
color: #000099;
margin-top: 10px;
margin-right: 255px;
margin-bottom: 8px;
margin-left: 30px;
}
p{
font-family: arial, verdana;
color: #DAA520;
margin: 3px 30px 3px 30px;
padding-left: 70px;
width: 300px;
}
}
85
Define a distncia da margem entre os elementos
vizinhos. No caso do BODY, da margem do browser.
body {
margin-top: 100px;
margin-right: 40px; margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
86
Define a distncia entre a borda e o contedo do elemento.
body {
}
p {
margin: 5px 50px 5px 50px; margin: 5px 50px 5px 50px;
}
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
87
border-width
border-style
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-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{
<table>
<tr>
<th>Cdigo</th>
<th>Descrio</th>
<th>Preo</th>
</tr>
<tr>
<td>1</td>
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid black;
}
92
<td>1</td>
<td>Pen Drive</td>
<td>45,00</td>
</tr>
<tr>
<td>2</td>
<td>Notebook</td>
<td>2399,99</td>
</tr>
</table>
Um elemento pode ser 'flutuado' esquerda ou
direita com uso da propriedade float.
Isto significa que o box e seu contedo so
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">
</div>
<h1>Uma imagem flutuada</h1>
<p>causas naturales et antecedentes,
etiam nostrarum voluntatum...</p>
#picture {
float: left;
}
94
A propriedade clear usada para controlar o
comportamento dos elementos que se seguem aos
elementos floats no documento.
Por padro, o elemento subsequente a um float,
ocupa o espao livre ao lado do elemento flutuado.
A propriedade clear pode assumir os valores left, 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 cdigo.
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>
<div id="column3">
Quando os elementos tem
o mesmo estilo, podem
<div id="column3">
<p>nam nihil esset in nostra potestate
si res ita se haberet...</p>
</div>
#column1, #column2, #column3 {
float:left;
width: 33%;
}
o mesmo estilo, podem
ser declarado juntos.
97
<div class="tabela">
<div class="celula cabecalho">Cdigo</div>
<div class="celula cabecalho">Descrio</div>
<div class="celula cabecalho">Preo</div>
<div class="celula"></div>
.tabela {
width: 462px;
height: 96px;
padding: 1px;
}
.celula {
float: left;
border: 1px solid #008B00;
width: 150px;
</div>
height: 20px;
margin: 1px;
text-align: center;
}
.cabecalho {
background-color: #90EE90;
}
Uma nova linha
iniciada ao atingir a
largura da div tabela.
98
<div class="celula cabecalho">Cdigo</div>
<div class="celula cabecalho">Descrio</div>
<div class="celula cabecalho">Preo</div>
<div class="celula newline"></div>
.celula {
float: left;
border: 1px solid #008B00;
width: 150px;
height: 20px;
margin: 1px;
text-align: center; <div class="celula newline"></div>
text-align: center;
}
.cabecalho {
background-color: #90EE90;
}
.newline {
clear: both;
}
possvel 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 posio exata na pgina.
A posio pode ser absoluta ou relativa.
.headline {
position:absolute;
top: 100px;
left: 200px;
}
100
Existem 4 opes de Position:
Static
Relative Relative
Absolute
Fixed
101
E o valor padro dos elementos e segue o fluxo
normal dos elementos da pgina.
Ou seja, se posiciona abaixo do elemento
imediatamente anterior e acima do imediatamente
posterior, quando nenhum destes est
posicionado de outra forma que no a esttica.
elemento {
position: static;
}
102
#header {
position: static;
height: 50px;
background-color: #4682B4;
}
#body {
height: 300px;
background-color: #87CEFA; background-color: #87CEFA;
}
#footer {
height: 30px;
background-color: #1E90FF;
}
<div id="header">Cabealho</div>
<div id="body">Corpo</div>
<div id="footer">Rodap</div>
103
O posicionamento para posio relativa
calculado com base na posio original do
elemento no documento.
Isto significa uma movimentao do elemento
para a esquerda, para a direita, para cima ou para
baixo (left, right, top, bottom).
Assim, o elemento ocupa um espao aps ser
posicionado.
#relative {
position: relative;
top: 10px;
left: 10px;
...
}
104
#header {
height: 50px;
background-color: #4682B4;
}
#body {
position: relative;
top: 10px;
height: 300px; height: 300px;
background-color: #87CEFA;
}
#footer {
position: relative;
top: 20px;
height: 30px;
background-color: #1E90FF;
}
Note que seria possvel ter o mesmo efeito usando margin.
105
Um elemento posicionado absolutamente no cria
nenhum espao no documento. Isto significa que
no deixa nenhum espao vazio aps ser
posicionado.
Para posicionar um elemento de forma absoluta a Para posicionar um elemento de forma absoluta a
propriedade position deve ser definida para
absolute.
Voc pode ento 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 posio do elemento
na coordenada que voc definir.
A medida que a pgina rolada, o elemento
continua fixo na posio que voc definiu e o continua fixo na posio que voc definiu e o
contedo da pgina rola normalmente.
Pode ser usado, por exemplo, para criao de
menus suspensos ou avisos sempre visveis.
O IE6 no suporta position: fixed
108
div#sidebar {
position: fixed;
top: 30px;
right: 30px;
width: 200px;
height: 300px;
background: #75AD45;
border: 2px solid black; 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-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
sobrepem uns aos outros.
Para fazer isto definimos para cada elemento um
nmero ndice (z-index).
O comportamento que elementos com nmero O comportamento que elementos com nmero
ndice maior se sobrepem queles com menor
nmero.
O mtodo simples, mas as possibilidades so
muitas. Voc pode colocar imagens sobre textos,
texto sobre texto, etc.
111
#carta1, #carta2, #carta3 {
position: absolute;
width: 200px;
height: 250px;
}
#carta1 {
background-image: url("dois.png");
top: 50px;
left: 50px;
z-index: 1;
}
#carta2 {
z-index: 1
z-index: 2
<div id="carta1"></div>
background-image: url("oito.png");
top: 100px;
left: 100px;
z-index: 2;
}
#carta3 {
background-image: url("as.png");
top: 150px;
left: 150px;
z-index: 3;
cursor: pointer;
}
z-index: 3
112
O que <a href="#" class="tooltip">CSS<span>
CSS uma tcnica de projetar pginas Web,
separando contedo da apresentao.</span></a>?
a.tooltip{
position:relative;
padding:0;
color:#039;
text-decoration:none;
a.tooltip span{
display: none;
}
a.tooltip:hover span{
border-bottom:2px dotted #039;
z-index:24;
}
a.tooltip:hover{
background:transparent;
color:#f00;
cursor:help;
z-index:25;
}
a.tooltip:hover span{
display:block;
position:absolute;
width:200px;
top:3em;
text-align:justify;
left:0;
font: 12px arial, verdana;
padding:5px 10px;
border:1px solid #999;
background:#e0ffff;
color:#000;
}
113
a.galeria span{
display: none;
}
a.galeria:hover span{
display:block;
<a href="#" class="galeria"><img src="foto1.jpg" class="miniatura" />
<span><img src="foto1.jpg" alt="" class="ampliada" /></span></a>
...
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 construo de layouts para
sites, possvel remodelar toda apresentao de um
portal sem alterar seu contedo.
<div id="container">
<div id="header">Cabealho</div> <div id="header">Cabealho</div>
<div id="wrapper">
<div id="content">Contedo</div>
</div>
<div id="navigation">Navegao</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#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">Histria</a>
<a href="cursos.html">Cursos</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>
124
Os 4 arquivos do site faro
uso desta mesma estrutura.
body{
background: #333333;
font-family: Arial, Verdana;
}
h1 {
color: rgb(23,110,164);
text-align: center;
}
p{
line-height: 25px;
padding: 0px 10px 0px 0px;
}
.fundo{
position: absolute;
.barra{
background: rgb(23,110,164);
width: 1002px;
height: 50px;
position: absolute;
top: 95px;
left: 50%;
margin-left: -501px;
}
.logo {
position: relative;
float: left;
top: 15px;
left: 15px;
width: 235px;
global.css
.menu span {
float: right;
}
.menu a{
color: rgb(23,110,164);
font-size: 20px;
float: left;
width: 100px;
margin-top: 35px;
margin-right: 7px;
padding: 5px;
text-align: center;
} position: absolute;
top: 20px;
bottom: 20px;
background: #999999;
border: 1px solid #EEEEEE;
width: 1000px;
left: 50%;
clear:both;
min-height: 300px;
}
125
width: 235px;
height: 58px;
background-image: url("logo.png");
background-size: 100%;
}
.menu{
position: absolute;
width: 980px;
height: 100px;
top: 10px;
left: 10px;
background: #F0FFFF;
}
}
.menu a:hover{
background:
rgb(23,110,164);
color:#FFFFFF;
}
.principal{
position: absolute;
top: 120px;
bottom: 10px;
padding: 10px;
background: #F0FFFF;
width: 960px;
left: 50%;
overflow-y: auto;
}
<h1>Nascida da fuso de trs 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 liderana no mercado mundial.</p>
<p>A tradio e o conceito da UNILINS so reconhecidos pelas empresas que
buscam no apenas profissionais com boa formao, mas verdadeiros
empreendedores com experincia e vida acadmica ativa. A UNILINS engloba
trs tradicionais escolas superiores: Escola de Engenharia de Lins,
Faculdade de Informtica de Lins e Faculdade de Servio Social de
Lins.</p>
<p>Mantida pela Fundao Paulista de Tecnologia e Educao - o maior plo
tecnolgico do Oeste Paulista.</p>
historia.html
tecnolgico do Oeste Paulista.</p>
<p>Alm da UNILINS, a Fundao mantm uma escola de Educao Infantil,
Ensino Fundamental e Mdio, e Cursos Tcnicos na modalidade Ps-Mdio
"ETL" e o CETEC - Centro Tecnolgico, que conta com cinco respeitados e
modernos laboratrios que atendem aos alunos dos cursos oferecidos pela
UNILINS e prestam servios nas reas da construo civil, informtica,
qumica, geoprocessamento, meio ambiente, energia eltrica, entre
outras. Cerca de trezentos alunos da UNILINS realizam estgios nesses
laboratrios. A experincia adquirida com a prtica de servios reais
contratados pelo CETEC lhes garantem maior facilidade de ingresso no
mercado de trabalho.</p>
126
127
.curso {
margin-bottom: 30px;
}
.curso img {
float: left;
margin-right: 7px;
}
.curso h3 {
color:
rgb(23,110,164);
margin-bottom: -15px;
cursos.html
<h1>Cursos de Graduao</h1>
<div class="curso">
<img src="./img/icon_night.gif" />
<h3>Administrao</h3>
<p>Forma profissionais capazes de planejar
estratgias e rotinas administrativas.
Colaborar na definio, anlise e
cumprimento de metas organizacionais.
Administrar com eficicia e equilbrio o
desenvolvimento econmico empresarial e a
qualidade de vida.<br />
margin-bottom: -15px;
}
.curso p {
margin-left: 30px;
line-height: normal;
}
128
Noturno | 4 anos | 80 vagas</p>
</div>
<div class="curso">
<img src="./img/icon_night.gif" />
<h3>Anlise e Desenvolvimento de Sistemas</h3>
<p>Formao superior, em tempo mais curto, de
profissionais aptos a desenvolver e
gerenciar sistemas de informao para as
organizaes.<br />
Noturno | 3 anos | 40 vagas</p>
</div>
...
129
.aluno {
float: left;
border: 0px solid red;
width: 235px;
height: 300px;
text-align: center;
}
.aluno img {
width: 200px;
alunos.html
<h1>Relao de Alunos</h1>
<div class="aluno">
<img src="./img/fotos/aluno01.jpg" />
<span>Aluno 01</span>
</div>
<div class="aluno">
</div>
width: 200px;
height: 250px;
border: 2px solid rgb(23,110,164);
}
.aluno span {
text-family: Arial, Verdana;
color: rgb(23,110,164);
}
130
</div>
<div class="aluno">
</div>
...
131
.centro {
position: absolute;
top: 50%;
left: 50%;
width: 505px;
height: 300px;
margin-top: -180px;
border: 15px inset rgb(23,110,164);
text-align: center;
background-color: #FFFFFF;
}
a.contato span{
contatos.html
<h1>Fale Conosco</h1>
<a href="#" class="contato">
<img src="address.gif" class="icone" />
<span>
Centro Universitrio de Lins<br />
Av. Nicolau Zarvos, 1925<br />
Jardim Aeroporto<br />
CEP 16.401-371<br />Lins-SP
</span>
</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 contedo. Ou seja, deve-se
reestruturar o site atravs do CSS, mas sem
modificar o contedo 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 verificao da folha de
estilos e retorna um relatrio com os eventuais erros e
avisos caso sua CSS no valide.
http://jigsaw.w3.org/css-validator/
136
Propriedade Funo
Color Define a cor do texto
Background Fundo (color, image, size, repeat, attachment, position.)
Font Define a fonte (family, style, variant, weight, size)
Text Formatao (align, decoration, indenti, transform, spacing)
Display Forma de exibir (block, inline, none)
Visibility Visvel (visible, hidden)
Link Define o estilo de links (link, visited, active, hover)
Class e Id Classificar e identificar elementos 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 espao interno do contedo (top, right, bottom, left)
Border Define a borda de um elemento (width, style, color)
Float Flutua elementos na pgina
Clear Equivalente a quebra de linha, mas para objetos
Position Posio na tela (static, relative, absolute, fixed)
Cursor Define a aparncia do cursor
Z-index Indica a camada para objetos sobrepostos
137
Elaborar um site completo para uma empresa. O site
deve utilizar o maior nmero possvel de recursos, tais
como fotos, listas, tabelas, links, efeitos, etc.
Sugestes de temas: centro de esttica, loja de
automveis, roupas e acessrios, loja de brinquedos,
eletroeletrnicos, agncia de viagens, pet shop, eletroeletrnicos, agncia de viagens, pet shop,
cultura, artesanato, culinria, dicas de moda,
tecnologia, notcias, esportes, cinema, academia,
imobiliria.
No ser permitido utilizar os modelos de layout
criados durante as aulas.
138
Javascript (JS) uma linguagem de
programao executada no browser do lado do
cliente.
Com JS possvel realizar tratamentos e criar
efeitos visuais. efeitos visuais.
Apesar de ser outra linguagem, a sintaxe
similar a C, C++, C#, Java e PHP.
Por questes de segurana, JS no pode
acessar banco de dados e nem arquivos.
140
Com JS possvel realizar o tratamento e
validao de campos de formulrios antes de
submeter os dados.
A grande vantagem que o processamento ser
mais rpido, pois somente depois de validados mais rpido, pois somente depois de validados
que os dados so enviados ao servidor.
recomendado fazer as validaes via JS. Mas,
no devemos esquecer que o usurio pode
desligar a execuo 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 cdigo Javascript deve estar dentro da tag
<script></script>.
A definio da linguagem utilizada opcional
(language="javascript"), assim como tambm
opcional o tipo (type="text/javascript").
A funo document.write responsvel por escrever
no browser.
O cdigo JS ser executado no local onde for inserido
dentro da pgina html.
143
<input type = "button" value = "Google"
onClick = "window.open('http://www.google.com', '',
'width=500,height=400,menubar=no');"> 'width=500,height=400,menubar=no');">
144
width e height definem a dimenso da nova janela
menubar define se a barra de menu dever aparecer
<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';
146
location='http://www.google.com.br';
</script>
<script>
if(confirm('Deseja fazer isso?')==true) {
alert('Confirmado');
}
else {
alert('Cancelado'); alert('Cancelado');
}
</script>
147
A instruo if funciona de
forma similar as linguagens
C, C++, C#, Java, PHP
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 />');
}
148
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++;
}
<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', 'Tera-feira', 'Quarta-feira',
'Quinta-feira', 'Sexta-feira', 'Sbado');
var m = new Array('Janeiro', 'Fevereiro', 'Maro', '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>
150
Semana: 0 6
Ms: 0 11
<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>
151
SCREEN RESOLUTION: 1920x1080
AVAILABLE VIEW AREA: 1920x1032
<!doctype html>
<html lang="pt-BR">
<head>
<noscript>
<meta http-equiv="Refresh" content="1; url=http://www.seusite.com/erro.htm">
</noscript>
<script type="text/javascript"> <script type="text/javascript">
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');
152
noscript executado se o browser no tiver javascript
navigator.userAgent informaes do browser utilizado
devices lista de dispositivos mobiles
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'; location = 'http://www.seusite.com/mobile.html';
}
else {
location = 'http://www.seusite.com/classic.html';
}
</script>
</head>
<body>
</body>
</html>
153
De acordo com o tipo de dispositivo, feito o direcionamento.
1. Criar um programa em javascript que abra uma
janela de confirmao perguntando: Deseja
informar seu nome?. Em caso negativo,
apresentar uma janela de alerta com a
mensagem Operao Cancelada!. Caso
contrrio, abrir uma janela de prompt solicitando contrrio, abrir uma janela de prompt solicitando
um nome. Enquanto o nome informado estiver
em branco, abrir novamente a janela de prompt.
Aps informar o nome, apresent-lo em uma
janela de alerta.
154
Com o Javascript podemos validar dados de um formulrio
antes de envi-los para um servidor. Podemos dizer que
uma validao do lado cliente.
Algumas das vantagens deste tipo de validao que
economiza trfego para o servidor, tem resposta mais
rpida por atuar diretamente na mquina do cliente e envia rpida por atuar diretamente na mquina do cliente e envia
os dados para o servidor quando estes j esto validados.
Em contrapartida, uma validao insegura uma vez que
o cdigo fica visvel e pode ser alterado, e, desta forma,
enviar dados invlidos para o servidor. Por isso sempre
aconselhvel validar, tambm, 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);
}

...
157
<script src="form.js"></script>
</head>
<body>
Digite seu nome: <input type="text" name="nome"><br>
</form>
...
O arquivo externo deve ser a extenso .js
Deve ser carregado dentro do head
<script>
var sexo = document.cadastro.sexo;
if(sexo[0].checked)
alert('Sexo MASCULINO');
else if(sexo[1].checked)
alert('Sexo FEMININO');
else
alert('Sexo no selecionado'); alert('Sexo no 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: Selecione um estado:
<select name="uf">
<option value="SP">So 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> </script>
Selecione um estado:
<select name="uf">
<option value="">--- Selecione ---</option>
<option value="SP">So 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 invlidos!');
else 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>
161
parseInt converte para inteiro
parseFloat converte para real
isNaN verifica se um valor numrico
<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 obrigatrio!');
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 obrigatrio!');
email.focus();
}
else if(er.test(email.value)==false) {
alert('O campo e-mail no vlido!');
email.value = '';
email.focus();
}
else {
alert('Campo e-mail vlido!');
}
}
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>Ttulo editvel com JavaScript</title>
h1 { 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(){ 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.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 ttulo</span></h1> <h1><span>Edite este ttulo</span></h1>
</body>
</html>
169
1. Elaborar uma calculadora que permita realizar as 4 operaes
bsicas.
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 no for suficiente, deve-se emitir um aviso.
3. Elaborar um programa no qual seja informado o valor de um
produto em dlar e o valor da cotao do dia. O programa deve produto em dlar e o valor da cotao 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 vlida.
5. Elaborar um programa para calcular e retornar a diferena de dias
entre duas datas.
170
6. Elaborar um programa para ler uma temperatura em graus
centgrados, converter e apresentar seu valor em fahrenheit.
7. Modifique o programa anterior para que o usurio escolha atravs
de um radio se deseja converter de C para F ou de F para C.
8. Apresentar a converso entre temperatura de graus Centgrados
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, tambm, que manipulemos o
contedo exibido do site, alm de poder modificar
o prprio visual (layout) da pgina.
Como o processamento local, as alteraes so
vistas pelo usurio de forma quase instantnea. vistas pelo usurio de forma quase instantnea.
Esses efeitos tem permitido a construo de sites
com interfaces to 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>
173
getElementById obtm as propriedades de
um componente atravs de seu id.
<!doctype html>
<html lang="pt-BR">
<head>
<title>Javascript</title>
</head>
<body>
<div id="conteudo">HTML</div> <div id="conteudo">HTML</div>
<script>
document.getElementById('conteudo').innerHTML = 'Javascript';
</script>
</body>
</html>
174
getElementById obtm as
propriedades de um componente
atravs de seu id.
innerHTML permite adicionar
contedo a um container.
<!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 />'; 'Javascript<br />';
}
</script>
</head>
<body>
<input type="button" value="Add" onClick="adicionar();">
<div id="conteudo"><div>
</body>
</html>
176
Criar um formulrio que tenha um campo de
texto e dois botes. Um boto servir para
adicionar mensagens no site e outro para limpar
o contedo 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]
#pop{
display:none;
padding:10px;
width:300px;
height:200px;
border:3px solid #0033AA;
background: #9999FF;
text-align: center;
}
178
[Fechar]
</a>
</div>
<img src="./img/mais.gif" onClick="Expandir(this,'s1');">
1 SEMESTRE
<div id="s1">
Algoritmos<br />
Laboratrio de Algoritmos<br />
Introduo Tecnologia de Informao<br />
Noes de Lgica<br />
Matemtica<br />
179
Matemtica<br />
Portugus Instrumental<br /><br />
</div>
<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
#quadrado {
position: absolute;
width: 100px;
height: 100px;
background: #0033AA;
}
function mudar() {
var x = document.getElementById('quadrado');
if(x.offsetHeight==100){
x.style.width='300px';
x.style.height='300px';
x.innerHTML = 'Grande';
} else {
x.style.width='100px'; }
181
x.style.width='100px';
x.style.height='100px';
x.innerHTML = 'Pequeno';
}
}
<div id="quadrado" onclick="mudar();"></div>
#quadrado {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 0%;
margin-top: -100px;
margin-left: 50px;
function mudar() {
if(x.offsetLeft==50) {
x.style.left="100%";
x.style.marginLeft = "-250px";
} else {
x.style.left="0%";
x.style.marginLeft = "50px";
border: 5px solid #3F0;
color: #FFFFFF;
line-height: 200px;
text-align: center;
font-size: 22px;
font-weight: bold;
}
182
x.style.marginLeft = "50px";
}
}
<div id="quadrado" onMouseOver="mudar();">
Clique Aqui!!!
</div>
#quadrado {
position: absolute;
width: 100px;
height: 100px;
}
function mover(m) {
x.style.left = x.offsetLeft + m + 'px';
}
183
<input type="button" onclick="mover(-10);" value="<<" />
<input type="button" onclick="mover(10);" value=">>" />
<br /><br />
<div id="quadrado"></div>
<!doctype html>
<html lang="pt-BR">
<head>
<title>DIV com rolagem automtica</title>
<style>
div#painel {
font: 15px Tahoma; 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); 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 programao 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> </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",
"Papalguas", "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; 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) { 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'; 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>
192
setInterval executa uma funo a cada ciclo de tempo
clearInterval cancela a execuo da funo setInterval
setTimeout executada uma nica vez
CSS JavaScript Descrio
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 no e a direo da repetio.
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.
193
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 distncia baixo do elemento em relao ao elemento que o contm.
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 apresentao.
font-family fontFamily Define o tipo de fonte.
font-size fontSize Define o tamanho da fonte.
font-weight fontWeight Define a espessura do trao da fonte.
height height Definem a altura de um elemento.
left left Define a distncia esquerda do elemento em relao ao elemento que o contm.
margin margin Define o espaamento entre o elemento e os demais contedos da pgina.
margin-bottom marginBottom Define o espaamento entre a regio abaixo de um elemento e os demais contedos
CSS JavaScript Descrio
margin-left marginLeft Define o espaamento entre a regio a esquerda e os demais contedos da pgina.
margin-right marginRight Define o espaamento entre a regio a direita e os demais contedos da pgina.
margin-top marginTop Define o espaamento entre a regio superior e os demais contedos da pgina.
overflow overflow Define o que deve ocorrer quando o contedo de um elemento excede sua rea.
padding padding Define o espaamento entre o contedo de um elemento e sua borda.
padding-bottom paddingBottom Define o espaamento entre o contedo de um elemento e sua borda abaixo.
padding-left paddingLeft Define o espaamento entre o contedo de um elemento e sua borda a esquerda.
padding-right paddingRight Define o espaamento entre o contedo de um elemento e sua borda a direita.
194
padding-right paddingRight Define o espaamento entre o contedo de um elemento e sua borda a direita.
padding-top paddingTop Define o espaamento entre o contedo de um elemento e sua borda superior.
position position Define a posio de um elemento como esttica, relativa, absoluta ou fixa.
right right Define a distncia direita do elemento em relao ao elemento que o contm.
text-align textAlign Define o alinhamento do texto.
text-decoration textDecoration Define um efeito decorativo para o texto.
top top Define a distncia ao topo do elemento em relao ao elemento que o contm.
width width Definem a largura de um elemento.
z-index zIndex Define a ordem de apresentao de um elemento quando h sobreposio.
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";
O HTML5 trouxe consigo novos elementos com o
intuito de melhorar a semntica do cdigo do site.
As principais mudanas se relacionam com novas
tags criadas para simplificar e padronizar a criao de
pginas para Internet. pginas para Internet.
Suas principais mudanas incluem layout, semntica
de contedo, tratamento de udio e vdeo, alm 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 contedo,
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 so como caixas, que dividem o
contedo nas sees 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. 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 pargrafo no pode conter um DIV. Mas o
contrrio possvel.
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 (Contedo de fluxo)
Metadata content (Contedo de metadados)
Sectioning content (Contedo seccionado)
Heading content (Contedo de cabealho) Heading content (Contedo de cabealho)
Phrasing content (Contedo lingustico)
Embedded content (Contedo incorporado)
Interactive content (Contedo interativo)
200
201
A maioria dos elementos utilizados no body e
aplicaes so categorizados como Flow
Content.
Veremos, a seguir, algumas das principais tags
que formam o Flow Content. que formam o Flow Content.
As tags antigas tambm fazem parte do Flow
Content.
Tags obsoletas devem ser evitadas.
202
Elemento Funcionalidade
article
tag define um artigo
aside
tag define o contedo, alm do contedo da pgina
audio
tag define o contedo 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 dilogo (conversa)
dialog
tag define um dilogo (conversa)
embed
tag define contedo interativo externo ou plugin
figure
tag define um grupo de contedo de mdia, e sua legenda
footer
tag define um rodap de uma seo ou pgina
header
tag define um cabealho de uma seo ou pgina
hgroup
tag define as informaes sobre uma seo em um documento
keygen
tag define uma chave gerada de forma
203
mark
tag define o texto marcado
meter
tag define medio dentro de um intervalo pr-definido
nav
tag define os links de navegao
output
tag define alguns tipos de sada
progress
tag define o progresso de uma tarefa de qualquer tipo
rp
tag navegadores que no suportam o elemento de rubi.
rt
tag define explicao para anotaes de rubi
rt
tag define explicao para anotaes de rubi
ruby
tag define anotaes de rubi
section
tag define uma seo
source
tag define recursos de mdia
hour
tag define uma data / horrio
video
tag define um vdeo
204
acronym
tag define um acrnimo
applet
tag define um applet incorporado
basefont
tag especifica uma fonte padro 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 ttulos de diretrio
font
tag especifica o tipo de letra, tamanho e cor da fonte do texto
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
Ttulo da pgina. Aparece na barra de ttulo do browser.
meta
So metadados ou "etiquetas" que descrevem o contedo do seu
site para os buscadores.
base
Permite especificar explicitamente o URI bsico de um
documento.
script
Contedo javascript inline ou em arquivo externo.
script
Contedo javascript inline ou em arquivo externo.
noscript
Contedo a ser exibido caso o browser no tenha suporte a
javascript.
style
Permite alterar a formatao dos elementos do documento HTML
utilizando folha de estilo CSS.
link
Permite a incluso de arquivos externos em formato de folha de
estilo CSS.
Este contedo vem antes da apresentao, formando uma
relao com o documento e seu contedo com outros
documentos que distribuem informao 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"> <meta name="keywords" content="hmtl5, web, site">
</head>
<body>
</body>
</html>
207
Metadados so usados por
buscadores para indexar um site.
author autor do site
description descrio do site
keywords palavras chaves do site
<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 Os comandos cache control e pragma tem o mesmo
efeito, mas devem ser usados juntos por questo de
compatibilidade.
A opo expires permite definir uma data a partir da
qual o site dever ser atualizado no cache.
Uma data antiga ou invlida fora o navegador a atualizar o
site.
208
Recarregar a mesma pgina aps 10 segundos:
<meta http-equiv="refresh" content="10">
Redirecionar para outro site aps 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 no permitir a indexao da pgina inicial do site
pelos motores de busca. pelos motores de busca.
FOLLOW / NOFOLLOW
Com esta diretriz se indica se deve ou no permitir aos motores de busca percorrer
ou seguir percorrendo a web atravs dos links que encontre no corpo do documento.
ARCHIVE / NOARCHIVE
Isto permite dizer se desejamos ou no que o motor de busca arquive o contedo 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"> <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
pgina.
section
header
footer
nav nav
article
aside
Basicamente, so elementos que juntam grupos
de textos no documento.
Substituem o uso da tag DIV.
212
section
A tag section define uma nova seo do site, uma rea genrica do site. Por
exemplo a home pode ser dividida em destaque, novidades, chamada para
contedo completo.
header
O elemento header representa uma rea de introduo. Pode ser utilizado para
agrupar ndices de contedo, campos de busca, cabealho do site com ttulo ou
logo.
footer
A tag footer representa o rodap do site, ou de uma seo. A tag footer representa o rodap do site, ou de uma seo.
nav
O elemento nav utilizado para representar uma seo da pgina que contm
links para outras partes do site. Este elemento deve ser utilizado para grupos de
links importantes do site tipicamente menus de navegao.
article
O elemento article utilizado para representar o contedo do site propriamente
dito, como posts, artigos e outros textos em geral.
aside
A tag aside representa um bloco de contedo que referncia o contedo que
envolta do elemento aside.
213
HTML4/XHTML HTML5
214
215
O elemento header especifica o cabealho da seo da
pgina. Ele pode ser utilizado no topo da pgina
englobando o logotipo da empresa e o menu, e ao
mesmo tempo aparecer no lado direito para intitular a
seo mais artigos.
216
header
O elemento nav especifica o menu de navegao.
Identifica os links para navegao seja para outra
pgina ou sees da mesma pgina.
217
nav
<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="Comrcio Eletrnico">Comrcio Eletrnico</a></li>
<li><a href="#" title="Downloads">Downloads</a></li>
<li><a href="#" title="Contato">Contato</a></li> <li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>
</header>
218
A tag footer basicamente o rodap. Seja da pgina ou de
uma seo.
Esta tag contm informaes adicionais sobre o que foi
exposto na seo, como nome do autor, ou um link para o
topo da pgina.
Use o footer para informaes sucintas. Para rodaps mais
complexos, use section.
219
footer
Assim como dividamos a pgina em blocos de
contedo com divs, faremos o mesmo com o
section, com o diferencial de que a utilizao deste
elemento semntica.
A seo precisa ter um significado como contedo: a
section ser utilizada quando, por exemplo, voc for
dividir o contedo entre web design e web master. dividir o contedo entre web design e web master.
220
section
section
(subseo)
<section class="chamadas">
<h4>Web Design</h4>
<article><h2>Ttulo</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> <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 pgina. Se ele continuar fazendo sentido,
esto use article.
A utilizao bsica para notcias, artigos e
comentrios. Ela cria sees da pgina que podem
ser referenciadas via RSS.
222
article
<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> <a href="#" title="Mais" class="lmais">leia mais</a>
</article>
223
O article e o section tem um relacionamento que
pode confundir a princpio. Pois assim como
possvel colocar article dentro de um section, o
inverso tambm permitido.
Uma forma de diferenciar pensar que o section
divide a pgina em blocos de contedo,
enquanto o article engloba o contedo em si.
No permitido aninhar articles, mas possvel
aninhar section.
224
Na tag aside, voc engloba informaes
adicionais ao contedo principal.
Por exemplo, uma citao, anotaes e afins.
Publicidade tambm pode ser colocada nesse elemento.
225
aside
possvel confundir com div, pois visualmente,
no h diferena entre o uso de div e dos novos
elementos do HTML 5.
Porm, o div, o mais genrico de todos, apenas
aplicado para separar elementos em blocos, por
isso ele no carrega nenhum significado
semntico.
Por exemplo, o elemento article indica que um
determinado bloco leva um contedo importante.
J o section um bloco de separao 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> <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
*{
margin:0;
padding:0;
}
body{
background:#CCC;
}
header, footer, article, aside, nav, section {
display:block;
}
section{
width: 500px;
float:left;
background:#F3F3F3;
padding:10px;
}
section header{
background:#987654;
height:40px;
}
section article{
height:400px;
background:#894589;
}
}
#main{
margin:10px auto;
width:800px;
}
header{
height:100px;
background:#D4532E;
}
nav{
height:30px;
background:#DEDE45;
padding:10px;
}
228
}
section footer{
background:#9370DB;
height:40px;
}
aside{
background:#9ACD32;
height:500px;
width:280px;
float:left;
}
footer {
background:#123456;
height:80px;
clear:both;
}
Vrios navegadores, principalmente os mais antigos, no reconhecem
devidamente as novas marcaes. Para mantermos a compatibilidade
necessrio 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 deteco que
permite verificar o suporte da maioria das caractersticas do HTML5 e permite verificar o suporte da maioria das caractersticas 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 disponvel no googlecode:

229
Os elementos da categoria Heading definem uma
seo de cabealhos, que podem estar contidos em
um elemento na categoria Sectioning.
h1, h2, h3, h4, h5, h6, hgroup
O elemento h? j existia nas verses HTML O elemento h? j existia nas verses HTML
anteriores.
Foi introduzido o elemento hgroup, que tem a
funo de agrupar dois ou mais elementos de h1
at h6.
230
Na estrutura desse <article>, um <hgroup>
contm o ttulo e o subttulo do artigo, e o
<header> contm o meta-dado e o <hgroup>:
<article>
<header> <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 pargrafo.
a
audio
img
label
object
span
textarea
video
232
Na categoria Embedded, h elementos que importam
outra fonte de informao para o documento.
audio
canvas
embed embed
iframe
img
math
object
svg
video
233
Interactive Interactive Content Content so elementos que fazem parte da interao de
usurio.
(Incluem elementos Phrasing content e Embedded content)
a
audio (se o atributo control for utilizado)
button
details
embed embed
iframe
img (se o atributo usemap for utilizado)
input (se o atributo type no 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 atribudo), 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 formulrio pode ser
enviado sem validao de dados.
O elemento ol ganhou um atributo chamado reversed. Quando ele aplicado os
indicadores da lista so colocados na ordem inversa, isto , da forma descendente.
O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de
fieldset so desativados.
O novo atributo placeholder pode ser colocado em inputs e textareas. 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 tambm no est mais descontinuado nos elementos a e area porque so teis
para aplicaes 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 formatao do elemento e
suas funes so 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. 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 verso da HTML, os formulrios
ganharam recursos muito interessantes e
importantes para otimizao do trabalho.
Por exemplo, possvel fazer validao de
campos sem o uso de JavaScript, fazer validao campos sem o uso de JavaScript, fazer validao
atravs de ER (expresses regulares) diretamente
no cdigo HTML entre muitas outras.
Em HTML 4, as validaes de campos so feitas
atravs de Javascript.
238
Data
Esse campo abre um calendrio para escolher a date.
<input name="calendario" type="date" />
Nmeros
Esse campo permite adicionar somente nmeros como valores, e ainda
possvel limitar os valores mnimo e mximo a serem inseridos, utilizando os
atributos min e max.
<input name="numero" type="number" /> <input name="numero" type="number" />
URL
Exibe um campo com validao para a insero de URLs.
<input name="site" type="url" />
Email
Campo usado para inserir e fazer a validao de um endereo de e-mail.
<input name="email" type="email" />
239
Slider
Exibe uma rgua onde possvel setar um valor. Os atributos min e max limitam a
faixa de valores, e o atributo step informa a progresso 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 nmero de telefone
(pode ter problema j que o formato dos telefones no um padro mundial).
<input name="telefone" type="tel" />
240
Autofocus
Se informado esse atributo no campo, ele receber o foco assim que a pgina for carregada no navegador.
<input name="pesquisar" type="search" autofocus />
Autocomplete
Se esse atributo estiver como "on", ento ele habilita um autocompletar para o campo.
<input name="pesquisar" type="search" autocomplete="on" />
Placeholder
Esse atributo oferece uma dica para auxiliar o usurio no preenchimento do campo.
<input name="pesquisar" type="search" placeholder="Pesquisar" />
Pattern
Esse atributo tem a funo de fazer uma validao com base em uma expresso regular.
<input name="valor" type="number" pattern="[0-9][a-z]{10}" />
Required
O campo ser obrigatrio, no sendo executado o submit do formulrio enquanto ele no for preenchido.
<input name="pesquisar" type="search" required />
241
<form>
<fieldset>
<legend>Formulrio 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">Satisfao:</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 no existia uma maneira
semntica de marcar, no HTML, o contedo de
uma legenda.
<figure>
<img src="../img/HTML5.png" alt="HMTL5">
243
<figcaption>HTML 5, a nova cara da Internet!</figcaption>
</figure>
figcaption substitui legend, que
tambm uma tag nova do HTML5
<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>
Pssaros 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 vdeos ficou ainda mais simples.
<video width="320" height="240" controls="controls">
<source src="../video/movie.ogg" type="video/ogg" />
</video>
possvel colocar um nico formato de vdeo, mas ainda no existe um possvel colocar um nico formato de vdeo, mas ainda no existe um
formato que seja compatvel com todos os browsers.
O parmetro controls determina se os controles do player (com botes
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 No suporta Vdeos na Tecnologia HTML5.
</video>
Apesar do trabalho extra para converter os vdeos em diferentes formatos,
esta ainda a nica forma de garantir que seu vdeo 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 vdeo, codec de udio"
Por exemplo, um vdeo em Ogg, usando os codecs Theora e Vorbis,
ter seu source assim:
<source src="video.ogg" type="video/ogg" codecs="theora, vorbis"> <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 tambm o profile do codec de vdeo utilizado.
Veja um exemplo:
<source src="video.mp4" type="video/mp4" codecs="mp4v.20.240, mp4a.40.2">
ATENO: se o codec no estiver instalado, o udio/vdeo no ser ouvido/exibido.
247
Para inserir udio em uma pgina 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 botes 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
248
Se for setado como false, ser preciso controlar o player via javascript, com
mtodos como play() e pause().
O valor de autoplay define se o udio vai comear a tocar assim que a pgina
carregar.
Formatos:
ogg Firefox e Chrome
mp3 Internet Explorer e Chrome
<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> 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 no a realidade.
Ento, preciso saber como oferecer um formato
alternativo de udio.
Fazemos assim:
<audio controls="true" autoplay="true"> <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 vdeo deve ser reproduzido do incio at 10,5
segundos.
http://foo.com/video.ogg#t=,02:00:00
Especifica que o vdeo deve ser reproduzido do incio at 2
horas.
http://foo.com/video.ogg#t=60,
Especifica que o vdeo deve comear aos 60 segundos e ser
reproduzido at o final.
251
O elemento canvas, novidade do HTML 5, permite que a
informao para a construo de imagens baseadas em pixels seja
inserida diretamente no cdigo do documento.
O elemento canvas apenas delimita em que local da tela isto
acontece. O processo de desenho controlado por uma API
especfica para este elemento que interage com JavaScript.
Por enquanto, as imagens criadas so objetos em duas dimenses
(2D), mas j existem experimentos para construo de objetos 3D
com a API Canvas.
252
fillStyle
define a cor de fundo do polgono.
strokeStyle
define a cor da borda do polgono.
clearRect
apaga uma rea retangular.
x, y
definem a posio no canvas.
fillRect
retngulo com fundo preenchido.
strokeRect
retngulo com a borda preenchida.
width, height
definem o tamanho do retngulo.
lineWidth
altera a espessura das bordas.
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);
}
256
(0, 0, 300, 0) (0, 0, 0, 300) (0, 300, 0, 0) (300, 0, 0, 0)
beginPath
Permite criar formas
personalizadas no canvas.
moveTo
Define a posio inicial do
polgono.
fill
Preenche o fundo do
polgono (se estiver
fechado)
stroke
lineTo
Cria uma linha.
arc
Desenha um crculo ou arco.
stroke
Pinta a borda do polgono
closePath
para finalizar nosso path.
257
JAVASCRIPT:
context.beginPath();
context.moveTo( 50, 100);
context.lineTo(150, 225);
context.lineTo(250, 100); 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.lineTo(250,125) context.lineTo(250,125)
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 parmetros x, y correspondem s coordenadas do centro do arco.
O parmetro raio o nmero de pxels que tem o arco como raio.
Por sua parte ngulo_incio e ngulo_final so os ngulos onde comea e acaba
o raio. Esto tomados como se o eixo da horizontal tivesse o ngulo zero.
Sentido_anti_horario um parmetro booleano, onde true significa que o trao vai
desde um ngulo de incio ao do fim no sentido contrrio dos ponteiros do relgio. desde um ngulo de incio ao do fim no sentido contrrio dos ponteiros do relgio.
False indica que esse caminho em direo contrria.
262
Para conveter graus em radianos, use:
var radians = (Math.PI/180)*degrees;
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); context.drawImage(img, 1, 1);
}
}
268
JAVASCRIPT:
function desenhar() {
var canvas = document.getElementById("figura");
var context = canvas.getContext("2d");
var img = document.getElementById("html5"); 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(); 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; width: 50px;
margin-bottom: 5px;
}
#img {
height: 50px;
width: 50px;
}
</style>
273
No exemplo, possvel arrastar
a imagem entre duas DIVs
<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) { 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; x = e.pageX;
y = e.pageY;
} else {
x = e.clientX;
y = e.clientY;
}
ctx.lineTo(x,y);
ctx.stroke();
}
}
}
277
Vamos montar uma animao na qual os objetos
iro se movimentar com velocidades diferentes.
Usaremos 4 figuras:
Paisagem
Nuvem
rvore
Smurf Smurf
278
<!DOCTYPE HTML>
<html>
<head>
<style>
div#main {
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px; 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() { 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() { 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(); updateArvore();
}
setInterval('animate()',30);
283
Clssico 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"> <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 {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
div#winGame {
width: 300px;
line-height: 60px;
text-align: center;
font-size: 32px;
font-family: verdana,
arial;
}
}
div#newGame {
width: 300px;
line-height: 30px;
text-align: center;
display: none;
}
286
a {
color: #AAAAAA;
}
a:hover {
color: #0000BB;
}
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.lineTo(200,300); context.lineTo(200,300);
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[0]!='' && score[0]==score[3] && score[3]==score[6]) || (score[0]!='' && score[0]==score[3] && score[3]==score[6]) ||
(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) { 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">
draggable="true" ondragstart="drag(event)" /> draggable="true" ondragstart="drag(event)" />
</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"
ondrop="drop(event)" ondragover="dragover(event)"> ondrop="drop(event)" ondragover="dragover(event)">
</div>
<div class="pecas inf_esq" id="div3"
</div>
<div class="pecas inf_dir" id="div4"
</div>
</div>
</body>
</html>
296
.tabuleiro {
width: 502px;
height: 300px;
border-top: 1px solid #666;
border-left: 1px solid #666;
float: left;
}
.sup_dir img{
}
.inf_esq img{
margin-top: -150px;
}
.pecas {
width: 250px;
height: 150px;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
float: left;
overflow:hidden;
}
297
.inf_dir img{
margin-top: -150px;
}
#separacao {
width: 10px;
height: 10px;
float: left;
}
var qtde = 0;
var erro = 0;
function dragover(ev) {
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault(); ev.preventDefault();
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 pblico so
crianas. A empresa comercializa brinquedos,
livros e roupas infantis, realiza festas infantis e
aluga brinquedos inflveis. Ela atende meninos e
meninas, de recm nascidos at 7 anos. Alm dos meninas, de recm nascidos at 7 anos. Alm dos
produtos da empresa, o site pode conter msicas
e filmes infantis, jogos infantis, imagens para
colorir, histrias infantis, opes de passeios para
crianas, seo de dicas para as mes.
299
Livro Texto:
1. Use a Cabea Html com CSS e XHMTL; Freeman, Elisabeth & Freeman,
Eric; Ed. Alta Books; 2 edio; 2008; 10 exemplares.
2. Padres de Projeto com CSS e HTML; Bowers, Michael; Ed. Alta Books; 2
3. Construindo Sites com CSS e XHTML; Silva, Maurcio Samy; Ed. Novatec; 1
Bibliografia Complementar:
4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1 edio; 2001; 10 4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1 edio; 2001; 10
exemplares.
5. Estudo Dirigido: Web Javascript; Manzano, Jos Augusto et al.; Ed. rica; 1
6. Html 4 Teoria e Prtica; Ramalho, Jos Antnio; Ed. Berkley; 1 edio;
2000; 5 exemplares.
7. Projetando Websites; Nielsen, Jakob; Ed. Elsevier; 1 edio; 2000; 14
exemplares.
8. Criando Pginas Web com CSS: Solues Avanadas para Padres Web;
Budd, Andy, et al.; Ed. Pearson; 1 edio; 2006; 5 exemplares.

Desenvolvimento para Web PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Desenvolvimento para Web PDF

Uploaded by

Copyright:

Available Formats

Prof. Dr. Wagner Jos Dizer Prof. Dr.

Wagner Jos Dizer

You might also like