Prof. Dr. Wagner José Dizeró Prof. Dr.

Wagner José Dizeró
wagner@unilins.edu.br wagner@unilins.edu.br
EMENTA:
Funcionamento e histórico da Internet. Elaboração de
páginas web através da linguagem Html. Tags.
Hipertexto. Hiperlink. Uso de folha de estilo (CSS).
Formulários. Javascript.
CRITÉRIOS DE APROVEITAMENTO:
Provas: peso 8.0 (oito)
Trabalhos: peso 2.0 (dois)
Livro Texto:
1. Use a Cabeça – Html com CSS e XHMTL; Freeman, Elisabeth & Freeman,
Eric; Ed. Alta Books; 2ª edição; 2008; 10 exemplares.
2. Padrões de Projeto com CSS e HTML; Bowers, Michael; Ed. Alta Books; 2ª
edição; 2008; 10 exemplares.
3. Construindo Sites com CSS e XHTML; Silva, Maurício Samy; Ed. Novatec; 1ª
edição; 2008; 10 exemplares.
Bibliografia Complementar:
4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1ª edição; 2001; 10 4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1ª edição; 2001; 10
exemplares.
5. Estudo Dirigido: Web Javascript; Manzano, José Augusto et al.; Ed. Érica; 1ª
edição; 2001; 4 exemplares.
6. Html 4 – Teoria e Prática; Ramalho, José Antônio; Ed. Berkley; 1ª edição;
2000; 5 exemplares.
7. Projetando Websites; Nielsen, Jakob; Ed. Elsevier; 1ª edição; 2000; 14
exemplares.
8. Criando Páginas Web com CSS: Soluções Avançadas para Padrões Web;
Budd, Andy, et al.; Ed. Pearson; 1ª edição; 2006; 5 exemplares.
(1605) Surge o código binário
(1844) Transmissão por telégrafo
(1946) Criado o ENIAC
(1957) Nasce a ARPA
(1961) Transmissão de dados por pacote
(1970) O termo INTERNET é criado
(1971) Idealização do e-mail
(1973) Primeira conexão intercontinental (1973) Primeira conexão intercontinental
(1977) Criação do protocolo TCP/IP
(1981) Lançado o PC da IBM
(1987) FAPESP conecta-se a instituições EUA
(1995) No Brasil, chega aos usuários comuns
(2000) Expansão do comércio eletrônico
(2004) Disseminação das redes sociais
(2007) Surgem os primeiros smartphones
5
De acordo com o W3C, a Web é baseada em 3
pilares:
◦ Um esquema de nomes para localização de fontes de
informação na Web, esse esquema chama-se URI.
◦ Um Protocolo de acesso para acessar estas fontes, hoje
o HTTP. o HTTP.
◦ Uma linguagem de Hypertexto, para a fácil navegação
entre as fontes de informação: o HTML.
6
HTML é uma abreviação de Hypertext Markup
Language - Linguagem de Marcação de
Hypertexto.
Resumindo em uma frase: o HTML é uma
linguagem para publicação de conteúdo (texto, linguagem para publicação de conteúdo (texto,
imagem, vídeo, áudio e etc) na Web.
É possível criar páginas utilizando ferramentas
(como Dreamwaver) ou montá-las diretamente
através do uso de TAGs.
TAG = comando
7
Entre 1993 e 1995, o HTML ganhou as versões HTML+,
HTML2.0 e HTML3.0, onde foram propostas diversas
mudanças para enriquecer as possibilidades da linguagem.
Contudo, até aqui o HTML ainda não era tratado como um
padrão.
Apenas em 1997, o grupo de trabalho do W3C responsável
por manter o padrão do código, trabalhou na versão 3.2 da
Apenas em 1997, o grupo de trabalho do W3C responsável
por manter o padrão do código, trabalhou na versão 3.2 da
linguagem, fazendo com que ela fosse tratada como
prática comum.
O HTML 4.0 surgiu em 1997, há mais de uma década. A
estruturação de páginas em HTML 4.0 é basicamente
constituída pelo elemento <div>, com classes e IDs
diferentes.
8
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Uma Página HTML5 Básica</title> <title>Uma Página HTML5 Básica</title>
</head>
<body>
<!-- conteúdo da página -->
Primeiro exemplo de HTML.
</body>
</html>
9
DOCTYPE
◦ para que o navegador reconheça que deve funcionar no “standards
mode”
Tag html
◦ com o atributo lang, para identificar a língua na qual o conteúdo do
documento será escrito
Tag head Tag head
◦ Informações de cabeçalho não visíveis da página
Tag meta
◦ Especificando a codificação da página (charset)
Tag title
◦ Título da página
Tag body
◦ Conteúdo da página
10
Comandos Básicos
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Quebra de linha</title>
</head>
<body>
Primeira linha.
Segunda linha.
</body>
</html>
<br />
A tag <br /> pode ser usada
várias vezes, pulando uma
linha a cada comando.
12
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Tamanho do Texto</title>
</head> </head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html>
A tag <p> não produz
nenhum efeito se usada
mais de uma vez.
13
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Cabeçalho de Título</title>
</head>
<body>
<h1>Cabeçalho Tamanho 1</h1> <h1>Cabeçalho Tamanho 1</h1>
<h2>Cabeçalho Tamanho 1</h2>
<h3>Cabeçalho Tamanho 1</h3>
<h4>Cabeçalho Tamanho 1</h4>
<h5>Cabeçalho Tamanho 1</h5>
<h6>Cabeçalho Tamanho 1</h6>
<hr> <!-- barra horizontal -->
</body>
</html>
14
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<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>
<meta charset="UTF-8" />
<title>Lista Ordenada</title>
</head>
<body>
<ul> <ul>
<li>Abacaxi</li>
<li>Laranja</li>
<li>Mamão</li>
<li>Morango</li>
<li>Pera</li>
</ul>
</body>
</html>
16
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<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>
<meta charset="UTF-8" />
<title>Carregar Imagens</title>
</head>
<body>
<img src="logo.png">
</body>
</html>
Atenção para o caminho e nome do arquivo!!!
Se a imagem estiver na mesma pasta, não precisa indicar o path
18
C:\
html
index.htm
imagem.png
image
imagem.gif
img
<!-- index.htm -->
<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 físico:
<img src="C:\html\imagem.png">
19
É possível referenciar imagens diretamente de outros sites.
<img src="http://www.google.com.br/images/srpr/logo3w.png">
◦ Vantagem que a imagem é atualizada automaticamente
◦ Desvantagem é que a imagem pode ser removida do site
20
É possível redimensionar uma imagem sem precisar editar
<img src="logo.png" width="300" height="120"> <img src="logo.png" width="300" height="120">
◦ Cuidado para não perder a qualidade da resolução.
21
Um link serve para direcionar o usuário para outra
página do site ou para um site externo.
Veja meu Currículo
<a href="vitae.htm">Currículo</a> <a href="vitae.htm">Currículo</a>
Conheça a Google
<a href="http://www.google.com.br">Google</a>
Para carregar uma nova janela,
use: target="_BLANK"
22
É possível usar uma imagem como âncora de um
link.
Conheça a
<a href="http://www.google.com.br"> <a href="http://www.google.com.br">
<img src="logo.png" border="0">
</a>
23
<table border="1">
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
</tr>
<tr>
<td>1</td>
<td>Pen Drive</td>
<td>45,00</td>
</tr>
<tr>
<td>2</td>
<td>Notebook</td>
<td>2399,99</td>
</tr>
</table>
<table>: cria a tabela
<tr>: cria uma linha (table row)
<th>: cria uma cabeçalho (table head)
<td>: cria uma coluna (table data)
24
<table width="500" border="0">
<tr bgcolor="#36648B">
<td colspan="3" align="center">
<font color="white">Relação de Produtos</font></td>
</tr> </tr>
<tr bgcolor="#4682B4">
<th width="60">Código</th>
<th>Descrição</th>
<th>Preço</th>
</tr>
<tr bgcolor="#B0C4DE">
<td align="center">1</td>
<td>Pen Drive</td>
<td align="right">45,00</td>
</tr>
...
</table>
border: define a borda
colspan: expande a coluna
align: alinha o texto
25
1. Crie uma página chamada ‘academico.htm’ com
a seguinte formatação:
a) O cabeçalho deve ter tamanho 2.
b) Após o cabeçalho, incluir uma linha horizontal.
c) Criar uma lista não ordenada com os itens
‘Graduação’, ‘Pós-Graduação’ e ‘Extensão’ com fonte ‘Graduação’, ‘Pós-Graduação’ e ‘Extensão’ com fonte
tamanho 3.
d) Na frente do item ‘Graduação’, usar uma imagem de
lupa para criar um link para a página ‘graduacao.htm’.
e) Criar uma sublista com as opções ‘Mestrado’ e
‘Doutorado’. Os itens devem estar com o type de
marcador quadrado.
26
27
2. Na outra página (graduacao.htm), criar uma tabela com os cursos:
Curso Duração Período
Agronomia 5 anos Integral
Biologia 4 anos Diurno
Direito 5 anos Noturno
Medicina 6 anos Integral
Nutrição 4 anos Noturno
Odontologia 5 anos Diurno
Pedagogia 4 anos Noturno
Após a listagem dos cursos, criar um link com a palavra ‘voltar’, que deve
direcionar o usuário novamente para a página ‘colegiados.htm’.
28
29
W3C é a sigla para World Wide Web Consortium, uma
organização independente que gerencia as normas para
codificação na Internet (isto é, HTML, CSS, XML e
outros).
Microsoft, Fundação Mozilla e muitas outras
organizações são membros do W3C e formam um organizações são membros do W3C e formam um
consenso sobre o futuro desenvolvimento de normas.
A ideia da normatização é criar um consenso e
encontrar um denominador comum para uso de
tecnologias para a Web.
30
Validador da W3C que faz uma verificação da arquivos
HTML e XML e retorna um relatório com os eventuais
erros e avisos caso seu arquivo não valide.
http://validator.w3.org/
31
TAG Função
HTML Delimita o início e final de uma página
HEAD Define o cabeçalho da página
BODY Contem o conteúdo a se exibido pela página
BR Quebra de linha, equivalente à tecla ENTER
P Parágrafo de texto P Parágrafo de texto
H? Cabeçalho de título
OL Lista ordenada
UL Lista não ordenada
IMG Carregar uma imagem
A Âncora para um hiperlink
TABLE Tabela
32
Cascading Style Sheets
(Folha de Estilos)
CSS é uma linguagem de estilo utilizada para
definir a apresentação de documentos escritos em
uma linguagem de marcação, como HTML ou
XML.
Seu principal benefício é prover a separação entre Seu principal benefício é prover a separação entre
o formato e o conteúdo de um documento.
Em resumo:
◦ HTML é usado para estruturar conteúdos.
◦ CSS é usado para formatar conteúdos estruturados.
34
CSS controla fontes, cores, margens, linhas, alturas,
larguras, imagens de fundo, posicionamentos e
muito mais.
Vantagens:
◦◦ Economizar tempo
◦ Diminuir o tamanho do código de uma página
◦ Carregar a página mais rapidamente
◦ Maior facilidade para dar manutenção no site
◦ Mais controle no layout da página
◦ Vários documentos podem compartilhar os estilos
35
Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado será obtido assim:
body {background-color: #FF0000;}
◦ Os códigos HTML e CSS são mais ou menos parecidos. ◦ Os códigos HTML e CSS são mais ou menos parecidos.
◦ Em CSS usamos três itens: seletor, propriedade e valor.
36
Método 1: In-line (o atributo style)
◦ O estilo é aplicado diretamente no elemento.
Método 2: Interno (a tag style) Método 2: Interno (a tag style)
◦ Utiliza-se a tag style para definir o CSS
Método 3: Externo (link para um arquivo separado)
◦ Utiliza um arquivo externo com a extensão .css
37
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
</head> </head>
<body style="background-color: #FF0000;">
<p>Página com fundo vermelho</p>
</body>
</html>
38
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<style type="text/css">
body {background-color: #FF0000;}
</style> </style>
</head>
<body>
<p>Página com fundo vermelho</p>
</body>
</html>
39
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head> </head>
<body>
<p>Página com fundo vermelho</p>
</body>
</html>
<!-- style.css -->
<!-- não usar a tag style -->
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>
<meta charset="UTF-8" />
<style type="text/css">
h1 {color: #FF0000;} h1 {color: #FF0000;}
</style>
</head>
<body>
<h1>Cabeçalho na cor vermelha</h1>
</body>
</html>
42
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<style type="text/css">
body {
background-color: #FFCC66;
}
h1 { h1 {
color: #990000;
background-color: #FC9804;
}
</style>
</head>
<body>
<h1>Cabeçalho com uma cor de fundo.</h1>
</body>
</html>
43
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<style type="text/css">
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>
<meta charset="UTF-8" />
<style type="text/css">
body {
background-image: url("imagem.png"); background-image: url("imagem.png");
background-size: 100%;
}
</style>
</head>
<body>
</body>
</html>
45
body {
background-color: #FFCC66;
background-image: url("imagem.png");
background-repeat: no-repeat;
}
Valor Descrição
background-repeat: repeat-x A imagem se repete na horizontal
background-repeat: repeat-y A imagem se repete na vertical
background-repeat: repeat Se repete na horizontal e na vertical
background-repeat: no-repeat A imagem não se repete
46
body {
background-color: #FFCC66;
background-image: url("imagem.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
Valor Descrição
background-attachment: scroll
A imagem rola com a página
background-attachment: fixed
A imagem é fixa
47
body {
background-color: #FFCC66;
background-image: url("imagem.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
Valor Descrição
2cm 2cm A imagem é posicionada a 2
cm da esquerda e 2 cm
50% 25% A imagem é centrada na
horizontal e 25% para baixo
top right A imagem é posicionada no
canto superior direito
48
A propriedade background é uma
abreviação para todas as propriedades
listadas anteriormente.
background: #FFCC66 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
não estiver instalada na
máquina do usuário, deverá
ser usada a segunda e assim
por diante até ser encontrada
uma fonte instalada.
51
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}
A propriedade font-style define
a escolha da fonte em
normal, italic ou oblique.
52
h1 {
font-variant: small-caps;
}
h2 {
font-variant: normal;
}
Usada para escolher as variantes normal ou small-caps.
Abaixo um exemplo de small-caps.
53
p {
font-family: arial, verdana, sans-serif;
font-weight: bold; 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 atualizações dos apps na Play Store, do Google, serão
mais rápidas. Isso porque a loja de aplicativos do Android agora
Código HTML:
mais rápidas. Isso porque a loja de aplicativos do Android agora
conta com um sistema de upgrade que baixa arquivos menores
para o smartphone, segundo o Android Police.</p>
As atualizações dos apps na Play Store, do Google, serão
mais rápidas. Isso porque a loja de aplicativos do Android agora
conta com um sistema de upgrade que baixa arquivos menores
para o smartphone, segundo o Android Police.
Visualização 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 maiúscula.
Por exemplo: "john doe" transforma-se para"JOHN DOE“.
lowercase
Converte todas as letras para minúscula.
Por exemplo: "JOHN DOE" transforma-se para"john doe“.
none
O texto é apresentado como foi escrito no código HTML.
Sem transformações.
61
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px; letter-spacing: 3px;
}
e s p a ç a m e n t o 6
espaçamento 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;
}
of the selected line-height property.
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.
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;
}
Opções 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>
Opções 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;
text-decoration: none;
}
Os links da página ficarão 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 não visitados.
visited é usada para links já visitados.
active é usada para links ativos.
hover o ponteiro do mouse está sobre o link
71
a {
background-color: blue;
color: white;
font-family: verdana, arial;
border: solid 1px blue;
text-decoration: none;
}
a:hover { a:hover {
background-color: yellow;
color: blue;
}
<a href="#">Institucional</a>
<a href="#">Produtos</a>
<a href="#">Serviços</a>
<a href="#">Contatos</a>
72
CLASS e ID são usados para classificar e/ou
identificar elementos dentro de uma página.
O atributo class permite atribuir uma classe para
um grupo particular de elementos.
O atributo id serve para identificar um elemento
de forma única dentro da página.
◦ Assim, quando se deseja referenciar um grupo de
elementos deve-se usar class e o atributo id deve ser
usado quando se deseja identificar um único elemento
na página.
73
<style type="text/css">
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
<style type="text/css">
#c1-2 { color: red; }
</style>
<h1 id="c1">Capítulo 1</h1>
...
<h2 id="c1-1">Capítulo 1.1</h2>
... ...
<h2 id="c1-2">Capítulo 1.2</h2>
...
<h1 id="c2">Capítulo 2</h1>
...
<h2 id="c2-1">Capítulo 2.1</h2>
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...
75
Os elementos <span> e <div> são usados para
agrupar e estruturar um documento e são
frequentemente usados em conjunto com os
atributos class e id.
Nesta lição veremos com detalhes o uso dos
elementos HTML <span> e <div> no que se refere
a sua vital importância para as CSS.
76
O elemento <span> é um elemento neutro e que
não adiciona qualquer tipo de semântica ao
documento.
Contudo, <span> pode ser usado pelas CSS para
adicionar efeitos visuais a partes específicas do adicionar efeitos visuais a partes específicas do
texto no seu documento.
◦ Vamos usar a citação abaixo de autoria de Benjamin Franklin:
Dormir cedo e acordar cedo faz o homem saudável,
rico e sábio.
77
<p>Dormir cedo e acordar cedo faz o homem
<span class="benefit">saudável</span>,
<span class="benefit">rico</span> e
<span class="benefit">sábio</span>.</p>
A folha de estilos: A folha de estilos:
span.benefit { color:red; }
É claro que você pode usar id para estilizar o elemento <span>. Mas,
como você deve estar lembrado, deverá usar uma única id para cada
um os três elementos <span>, conforme foi explicado na lição
anterior.
78
Enquanto <span> é usado dentro de um
elemento nível de bloco como vimos no exemplo
anterior, <div> é usado para agrupar um ou mais
elementos nível de bloco.
O <div> sempre cria um bloco (caixa) com seu O <div> sempre cria um bloco (caixa) com seu
conteúdo.
Diferenças à parte, o agrupamento com <div>
funciona mais ou menos da mesma maneira.
79
<div id="democrats">
<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 não precisarão mais
controlar os volantes dos próprios veículos, pois os carros
autodirigíveis – nos quais você define uma rota e se recosta
confortavelmente no banco, sem precisar fazer nada – já estarão
no mercado. A previsão consta em uma pesquisa da consultoria
KPMG e do Center for Automotive Research, e diz respeito ao
mercado norte-americano.
</div>
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
</div>
div.box {
width: 200px;
height: 200px;
overflow-y: scroll;
border: 1px solid black;
background: orange;
}
82
O box model (modelo das caixas) em CSS, descreve os
boxes (as caixas) geradas pelos elementos HTML.
O box model, detalha ainda, as opções de ajuste de
margens, bordas, padding e conteúdo para cada
elemento.
83
<h1>Article 1:</h1>
<p>All human beings are born free and equal
in dignity and rights. They are endowed with
reason and conscience and should act towards
one another in a spirit of brotherhood</p>
84
h1 {
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 distância 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 distância entre a borda e o conteúdo do elemento.
body {
margin: 100px 40px 10px 70px;
}
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>Código</th>
<th>Descrição</th>
<th>Preço</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 conteúdo são
deslocados para a direita ou para a esquerda do
documento (ou do bloco container)
93
Se desejamos que um texto seja posicionado em volta
de uma figura, basta flutuarmos a imagem:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</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 padrão, o elemento subsequente a um float,
ocupa o espaço livre ao lado do elemento flutuado.
A propriedade clear pode assumir os valores left, A propriedade clear pode assumir os valores left,
right, both ou none.
A regra geral é: se clear for, por exemplo, definido
both para um box, a margem superior deste box será
posicionada sempre abaixo da margem inferior dos
boxes flutuados que estejam antes dele no código.
95
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et
antecedentes, etiam nostrarum
voluntatum...</p>
#picture {
float: left;
}
.floatstop {
clear: both;
}
96
<div id="column1">
<p>Haec disserens qua de re agatur et in
quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
<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">Código</div>
<div class="celula cabecalho">Descrição</div>
<div class="celula cabecalho">Preço</div>
<div class="celula"></div>
<div class="celula"></div>
<div class="celula"></div>
<div class="celula"></div>
<div class="celula"></div>
.tabela {
border: 1px solid black;
width: 462px;
height: 96px;
padding: 1px;
}
.celula {
float: left;
border: 1px solid #008B00;
width: 150px;
<div class="celula"></div>
<div class="celula"></div>
<div class="celula"></div>
<div class="celula"></div>
</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">Código</div>
<div class="celula cabecalho">Descrição</div>
<div class="celula cabecalho">Preço</div>
<div class="celula newline"></div>
<div class="celula"></div>
<div class="celula"></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>
<div class="celula"></div>
<div class="celula"></div>
<div class="celula newline"></div>
<div class="celula"></div>
<div class="celula"></div>
text-align: center;
}
.cabecalho {
background-color: #90EE90;
}
.newline {
clear: both;
}
É possível notar que a quebra de linha é
feita com a propriedade clear, sem
precisar delimitar o tamanho da tabela.
99
Com posicionamento CSS podemos colocar um
elemento em uma posição exata na página.
A posição pode ser absoluta ou relativa.
.headline {
position:absolute;
top: 100px;
left: 200px;
}
100
Existem 4 opções de Position:
◦ Static
◦ Relative ◦ Relative
◦ Absolute
◦ Fixed
101
E o valor padrão dos elementos e segue o fluxo
normal dos elementos da página.
Ou seja, se posiciona abaixo do elemento
imediatamente anterior e acima do imediatamente
posterior, quando nenhum destes está
posicionado de outra forma que não a estática.
elemento {
position: static;
}
102
#header {
position: static;
height: 50px;
background-color: #4682B4;
}
#body {
height: 300px;
background-color: #87CEFA; background-color: #87CEFA;
}
#footer {
height: 30px;
background-color: #1E90FF;
}
<div id="header">Cabeçalho</div>
<div id="body">Corpo</div>
<div id="footer">Rodapé</div>
103
O posicionamento para posição relativa é
calculado com base na posição original do
elemento no documento.
Isto significa uma movimentação do elemento
para a esquerda, para a direita, para cima ou para
baixo (left, right, top, bottom).
Assim, o elemento ocupa um espaço após ser
posicionado.
#relative {
position: relative;
top: 10px;
left: 10px;
...
}
104
#header {
height: 50px;
background-color: #4682B4;
}
#body {
position: relative;
top: 10px;
height: 300px; height: 300px;
background-color: #87CEFA;
}
#footer {
position: relative;
top: 20px;
height: 30px;
background-color: #1E90FF;
}
Note que seria possível ter o mesmo efeito usando margin.
105
Um elemento posicionado absolutamente não cria
nenhum espaço no documento. Isto significa que
não deixa nenhum espaço vazio após ser
posicionado.
Para posicionar um elemento de forma absoluta a Para posicionar um elemento de forma absoluta a
propriedade position deve ser definida para
absolute.
Você pode então usar as propriedades left, right,
top, e bottom para definir as coordenadas e
posicionar o elemento.
106
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
107
O position: fixed; irá fixar a posição do elemento
na coordenada que você definir.
A medida que a página é rolada, o elemento
continua fixo na posição que você definiu e o continua fixo na posição que você definiu e o
conteúdo da página rola normalmente.
Pode ser usado, por exemplo, para criação de
menus suspensos ou avisos sempre visíveis.
◦ O IE6 não suporta position: fixed
108
div#sidebar {
position: fixed;
top: 30px;
right: 30px;
width: 200px;
height: 300px;
background: #75AD45;
border: 2px solid black; 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
sobrepõem uns aos outros.
Para fazer isto definimos para cada elemento um
número índice (z-index).
O comportamento é que elementos com número O comportamento é que elementos com número
índice maior se sobrepõem àqueles com menor
número.
O método é simples, mas as possibilidades são
muitas. Você pode colocar imagens sobre textos,
texto sobre texto, etc.
111
#carta1, #carta2, #carta3 {
position: absolute;
width: 200px;
height: 250px;
}
#carta1 {
background-image: url("dois.png");
top: 50px;
left: 50px;
z-index: 1;
}
#carta2 {
z-index: 1
z-index: 2
<div id="carta1"></div>
<div id="carta2"></div>
<div id="carta3"></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 técnica de projetar páginas Web,
separando conteúdo da apresentação.</span></a>?
a.tooltip{
position:relative;
padding:0;
color:#039;
text-decoration:none;
a.tooltip span{
display: none;
}
a.tooltip:hover span{
text-decoration:none;
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 construção de layouts para
sites, é possível remodelar toda apresentação de um
portal sem alterar seu conteúdo.
<div id="container">
<div id="header">Cabeçalho</div> <div id="header">Cabeçalho</div>
<div id="wrapper">
<div id="content">Conteúdo</div>
</div>
<div id="navigation">Navegação</div>
<div id="extra">Extra</div>
<div id="footer">Rodapé</div>
</div>
115
116
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
div#header h1{height:80px; line-height:80px; margin:0;
padding-left:10px; background:#EEE; color:#79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539} div#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#wrapper{float:left; width:100%}
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%}
div#footer{clear:left; width:100%}
118
div#container{width:700px; margin:0 auto}
div#wrapper{float:left; width:100%}
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}
div#footer{clear:left; width:100%}
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>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/global.css" />
</head>
<body>
<div class="fundo">
<div class="barra"></div>
<div class="menu">
<div class="logo"></div>
<span>
<a href="historia.html">História</a>
<a href="cursos.html">Cursos</a> <a href="cursos.html">Cursos</a>
<a href="alunos.html">Alunos</a>
<a href="contato.html">Contatos</a>
</span>
</div>
<div class="principal">
<!-- colocar o conteúdo das páginas aqui! -->
</div>
</div>
</body>
</html>
124
Os 4 arquivos do site farão
uso desta mesma estrutura.
body{
background: #333333;
font-family: Arial, Verdana;
}
h1 {
color: rgb(23,110,164);
text-align: center;
}
p{
line-height: 25px;
text-align: justify;
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-family: verdana;
font-size: 20px;
float: left;
width: 100px;
margin-top: 35px;
margin-right: 7px;
padding: 5px;
text-align: center;
text-decoration:none;
} position: absolute;
top: 20px;
bottom: 20px;
background: #999999;
border: 1px solid #EEEEEE;
width: 1000px;
left: 50%;
margin-left: -500px;
clear:both;
min-height: 300px;
}
125
width: 235px;
height: 58px;
background-image: url("logo.png");
background-repeat: no-repeat;
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%;
margin-left: -490px;
overflow-y: auto;
}
<h1>Nascida da fusão de três tradicionais faculdades</h1>
<img src="./img/portal.jpg" style="float:left; margin:0px 20px 5px 0px;">
<p>Somos um complexo educacional com mais de 45 anos educando e formando
profissionais de liderança no mercado mundial.</p>
<p>A tradição e o conceito da UNILINS são reconhecidos pelas empresas que
buscam não apenas profissionais com boa formação, mas verdadeiros
empreendedores com experiência e vida acadêmica ativa. A UNILINS engloba
três tradicionais escolas superiores: Escola de Engenharia de Lins,
Faculdade de Informática de Lins e Faculdade de Serviço Social de
Lins.</p>
<p>Mantida pela Fundação Paulista de Tecnologia e Educação - o maior pólo
tecnológico do Oeste Paulista.</p>
historia.html
tecnológico do Oeste Paulista.</p>
<p>Além da UNILINS, a Fundação mantém uma escola de Educação Infantil,
Ensino Fundamental e Médio, e Cursos Técnicos na modalidade Pós-Médio
"ETL" e o CETEC - Centro Tecnológico, que conta com cinco respeitados e
modernos laboratórios que atendem aos alunos dos cursos oferecidos pela
UNILINS e prestam serviços nas áreas da construção civil, informática,
química, geoprocessamento, meio ambiente, energia elétrica, entre
outras. Cerca de trezentos alunos da UNILINS realizam estágios nesses
laboratórios. A experiência adquirida com a prática de serviços reais
contratados pelo CETEC lhes garantem maior facilidade de ingresso no
mercado de trabalho.</p>
126
127
.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 Graduação</h1>
<div class="curso">
<img src="./img/icon_night.gif" />
<h3>Administração</h3>
<p>Forma profissionais capazes de planejar
estratégias e rotinas administrativas.
Colaborar na definição, análise e
cumprimento de metas organizacionais.
Administrar com eficiêcia e equilíbrio o
desenvolvimento econômico empresarial e a
qualidade de vida.<br />
margin-bottom: -15px;
}
.curso p {
margin-left: 30px;
line-height: normal;
text-align: justify;
}
128
Noturno | 4 anos | 80 vagas</p>
</div>
<div class="curso">
<img src="./img/icon_night.gif" />
<h3>Análise e Desenvolvimento de Sistemas</h3>
<p>Formação superior, em tempo mais curto, de
profissionais aptos a desenvolver e
gerenciar sistemas de informação para as
organizações.<br />
Noturno | 3 anos | 40 vagas</p>
</div>
...
129
.aluno {
float: left;
border: 0px solid red;
width: 235px;
height: 300px;
text-align: center;
}
.aluno img {
width: 200px;
alunos.html
<h1>Relação de Alunos</h1>
<div class="aluno">
<img src="./img/fotos/aluno01.jpg" />
<span>Aluno 01</span>
</div>
<div class="aluno">
<img src="./img/fotos/aluno02.jpg" />
<span>Aluno 01</span>
</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">
<img src="./img/fotos/aluno03.jpg" />
<span>Aluno 01</span>
</div>
...
131
.centro {
position: absolute;
top: 50%;
left: 50%;
width: 505px;
height: 300px;
margin-left: -250px;
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 Universitário 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;
margin: 25px 25px 25px 25px;
font-size: 25px;
text-align: left;
}
a.contato:hover span{
display:block;
position:absolute;
}
.icone {
border: 0px solid white;
width: 50px;
height: 50px;
margin: 10px 5px 10px 10px;
}
132
...
Modificar todo o layout no portal da Unilins sem
alterar seu conteúdo. Ou seja, deve-se
reestruturar o site através do CSS, mas sem
modificar o conteúdo HMTL.
133
Utilizando CSS, criar o layout de um site conforme modelo a seguir:
134
Utilizando CSS, criar o layout de um site conforme modelo a seguir:
135
Validador da W3C que faz uma verificação da folha de
estilos e retorna um relatório com os eventuais erros e
avisos caso sua CSS não valide.
http://jigsaw.w3.org/css-validator/
136
Propriedade Função
Color Define a cor do texto
Background Fundo (color, image, size, repeat, attachment, position.)
Font Define a fonte (family, style, variant, weight, size)
Text Formatação (align, decoration, indenti, transform, spacing)
Display Forma de exibir (block, inline, none)
Visibility Visível (visible, hidden)
Link Define o estilo de links (link, visited, active, hover)
Class e Id Classificar e identificar elementos Class e Id Classificar e identificar elementos
Span e Div Agrupar e estruturar um documento
Width e Height Largura e altura dos elementos
Margin Define a margem entre elementos (top, right, bottom, left)
Padding Define o espaço interno do conteúdo (top, right, bottom, left)
Border Define a borda de um elemento (width, style, color)
Float Flutua elementos na página
Clear Equivalente a quebra de linha, mas para objetos
Position Posição na tela (static, relative, absolute, fixed)
Cursor Define a aparência do cursor
Z-index Indica a camada para objetos sobrepostos
137
Elaborar um site completo para uma empresa. O site
deve utilizar o maior número possível de recursos, tais
como fotos, listas, tabelas, links, efeitos, etc.
Sugestões de temas: centro de estética, loja de
automóveis, roupas e acessórios, loja de brinquedos,
eletroeletrônicos, agência de viagens, pet shop, eletroeletrônicos, agência de viagens, pet shop,
cultura, artesanato, culinária, dicas de moda,
tecnologia, notícias, esportes, cinema, academia,
imobiliária.
Não será permitido utilizar os modelos de layout
criados durante as aulas.
138
Javascript (JS) é uma linguagem de
programação executada no browser do lado do
cliente.
Com JS é possível realizar tratamentos e criar
efeitos visuais. efeitos visuais.
Apesar de ser outra linguagem, a sintaxe é
similar a C, C++, C#, Java e PHP.
Por questões de segurança, JS não pode
acessar banco de dados e nem arquivos.
140
Com JS é possível realizar o tratamento e
validação de campos de formulários antes de
submeter os dados.
A grande vantagem é que o processamento será
mais rápido, pois somente depois de validados é mais rápido, pois somente depois de validados é
que os dados são enviados ao servidor.
É recomendado fazer as validações via JS. Mas,
não devemos esquecer que o usuário pode
desligar a execução do JS.
141
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
</head>
<body>
<script language="javascript"
type="text/javascript">
document.write('Exemplo Javascript');
</script>
</body>
</html>
142
Todo código Javascript deve estar dentro da tag
<script></script>.
A definição da linguagem utilizada é opcional
(language="javascript"), assim como também é
opcional o tipo (type="text/javascript").
A função document.write é responsável por escrever
no browser.
O código JS será executado no local onde for inserido
dentro da página html.
143
<input type = "button" value = "Google"
onClick = "window.open('http://www.google.com', '',
'width=500,height=400,menubar=no');"> 'width=500,height=400,menubar=no');">
144
width e height – definem a dimensão 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 instrução 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', 'Terça-feira', 'Quarta-feira',
'Quinta-feira', 'Sexta-feira', 'Sábado');
var m = new Array('Janeiro', 'Fevereiro', 'Março', 'Abril',
'Maio', 'Junho', 'Julho', 'Agosto',
'Setembro', 'Outubro', 'Novembro', 'Dezembro');
var agora = new Date();
var ano = agora.getYear();
var mes = m[agora.getMonth()];
var dia = agora.getDate();
var sem = s[agora.getDay()];
var hoje = sem + ", " + dia + " de " + mes + " de " + ano;
document.write(hoje);
</SCRIPT>
150
Semana: 0 – 6
Mês: 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>
<meta charset="UTF-8">
<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 não tiver javascript
navigator.userAgent – informações 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 confirmação perguntando: ‘Deseja
informar seu nome?’. Em caso negativo,
apresentar uma janela de alerta com a
mensagem ‘Operação Cancelada!’. Caso
contrário, abrir uma janela de prompt solicitando contrário, abrir uma janela de prompt solicitando
um nome. Enquanto o nome informado estiver
em branco, abrir novamente a janela de prompt.
Após informar o nome, apresentá-lo em uma
janela de alerta.
154
Com o Javascript podemos validar dados de um formulário
antes de enviá-los para um servidor. Podemos dizer que é
uma validação do lado cliente.
Algumas das vantagens deste tipo de validação é que
economiza tráfego para o servidor, tem resposta mais
rápida por atuar diretamente na máquina do cliente e envia rápida por atuar diretamente na máquina do cliente e envia
os dados para o servidor quando estes já estão validados.
Em contrapartida, é uma validação insegura uma vez que
o código fica visível e pode ser alterado, e, desta forma,
enviar dados inválidos para o servidor. Por isso é sempre
aconselhável validar, também, os dados no servidor.
155
<script>
function mostrar() {
var x = document.cadastro.nome.value;
alert('Seu nome é: ' + x);
}
</script>
<form name="cadastro">
Digite seu e-mail: <input type="text" name="nome">
<input type="button" value="Enviar" onClick="mostrar();">
</form>
156
/* form.js */
function mostrar() {
var x = document.cadastro.nome.value;
alert('Seu nome é: ' + x);
}
<!-- form.html -->
...
157
<script src="form.js"></script>
</head>
<body>
<form name="cadastro">
Digite seu nome: <input type="text" name="nome"><br>
<input type="button" value="Enviar" onClick="mostrar();">
</form>
...
O arquivo externo deve ser a extensão .js
Deve ser carregado dentro do head
<script>
function mostrar() {
var sexo = document.cadastro.sexo;
if(sexo[0].checked)
alert('Sexo MASCULINO');
else if(sexo[1].checked)
alert('Sexo FEMININO');
else
alert('Sexo não selecionado'); alert('Sexo não selecionado');
}
</script>
<form name="cadastro">
Escolha o sexo:<br>
<input type="radio" name="sexo">Masculino<br>
<input type="radio" name="sexo">Feminino<br>
<input type="button" value="Enviar" onClick="mostrar();">
</form>
158
<script>
function mostrar() {
var uf = document.cadastro.uf.value;
alert('Estado selecionado: ' + uf);
}
</script>
<form name="cadastro">
Selecione um estado: Selecione um estado:
<select name="uf">
<option value="SP">São Paulo</option>
<option value="RJ">Rio de Janeiro</option>
<option value="MG">Minas Gerais</option>
</select>
<input type="button" value="Enviar" onClick="mostrar();">
</form>
159
<script>
function mostrar() {
if(document.cadastro.uf.selectedIndex==0) {
alert('É preciso selecionar um estado');
}
else {
var uf = document.cadastro.uf.value;
alert('Estado selecionado: ' + uf);
}
}
</script> </script>
<form name="cadastro">
Selecione um estado:
<select name="uf">
<option value="">--- Selecione ---</option>
<option value="SP">São Paulo</option>
<option value="RJ">Rio de Janeiro</option>
<option value="MG">Minas Gerais</option>
</select>
<input type="button" value="Enviar" onClick="mostrar();">
</form>
160
<script>
function somar() {
var num1 = document.calc.num1.value;
var num2 = document.calc.num2.value;
var resultado = parseInt(num1) + parseInt(num2);
if(isNaN(resultado))
alert('Valores inválidos!');
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 numérico
<script>
function somar() {
var num1 = document.calc.num1.value;
var num2 = document.calc.num2.value;
var resultado = parseInt(num1) + parseInt(num2);
document.calc.resultado.value = resultado;
}}
</script>
<form name="calc">
Primeiro valor: <input type="text" name="num1">
Segundo valor: <input type="text" name="num2">
Resultado: <input type="text" name="resultado" readonly>
<input type="button" value="Somar" onClick="somar();">
</form>
162
<script>
function validar() {
var email = document.envio.email;
if(email.value=='') {
alert('O campo e-mail é obrigatório!');
email.focus();
}}
}
</script>
<form name="envio">
E-mail: <input type="text" name="email">
<input type="button" value="Enviar" onClick="validar();">
</form>
163
function validar() {
var email = document.envio.email;
var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.
[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
if(email.value=='') {
alert('O campo e-mail é obrigatório!');
email.focus();
}
else if(er.test(email.value)==false) {
alert('O campo e-mail não é válido!');
email.value = '';
email.focus();
}
else {
alert('Campo e-mail é válido!');
}
}
164
<script type="text/javascript">
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>
<meta charset="UTF-8">
<title>Título editável com JavaScript</title>
<style type="text/css">
h1 { h1 {
font: "times new roman", times, serif;
color:#900;
}
</style>
166
<script type="text/javascript">
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 título</span></h1> <h1><span>Edite este título</span></h1>
</body>
</html>
169
1. Elaborar uma calculadora que permita realizar as 4 operações
básicas.
2. Elaborar um programa no qual o sejam informados: o valor da
compra e o valor pago. O programa deve calcular e apresentar o
troco. Se o valor pago não for suficiente, deve-se emitir um aviso.
3. Elaborar um programa no qual seja informado o valor de um
produto em dólar e o valor da cotação do dia. O programa deve produto em dólar e o valor da cotação do dia. O programa deve
converter e apresentar o valor em reais.
4. Elaborar um programa para ler uma data no formato ‘dd/mm/yyy’ e
retornar se a data é válida.
5. Elaborar um programa para calcular e retornar a diferença de dias
entre duas datas.
170
6. Elaborar um programa para ler uma temperatura em graus
centígrados, converter e apresentar seu valor em fahrenheit.
7. Modifique o programa anterior para que o usuário escolha através
de um radio se deseja converter de °C para °F ou de °F para °C.
8. Apresentar a conversão entre temperatura de graus Centígrados
para graus Fahrenheit, variando de 0 a 100, com escala 5.
9. Modificar o exemplo anterior de forma que a resposta seja exibida
em formato de tabela.
10. Fazer com que as linhas da tabela sejam apresentadas alternando
as cores verde e amarelo (zebrado).
171
O JS permite, também, que manipulemos o
conteúdo exibido do site, além de poder modificar
o próprio visual (layout) da página.
Como o processamento é local, as alterações são
vistas pelo usuário de forma quase instantânea. vistas pelo usuário de forma quase instantânea.
Esses efeitos tem permitido a construção de sites
com interfaces tão ricas quanto a de aplicativos
para desktop.
172
<script language=javascript>
function mudaCor(cor){
document.getElementById("corpo").style.backgroundColor = cor;
}
</script>
<body id="corpo">
<h2>Mudar a Cor do Fundo</h2>
<input type="button" value="Verde" onClick="mudaCor('lightGreen');">
<input type="button" value="Azul" onClick="mudaCor('lightblue');">
<input type="button" value="Amarelo" onClick="mudaCor('yellow');">
<input type="button" value="Branco" onClick="mudaCor('white');">
</body>
173
getElementById obtém as propriedades de
um componente através de seu id.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<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 obtém as
propriedades de um componente
através de seu id.
innerHTML permite adicionar
conteúdo a um container.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<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>
<meta charset="UTF-8">
<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 formulário que tenha um campo de
texto e dois botões. Um botão servirá para
adicionar mensagens no site e outro para limpar
o conteúdo do site.
177
<input type="button"
value="Mostrar"
onclick="document.getElementById('pop').style.display='block';" />
<div id="pop">
<a href="#"
onclick="document.getElementById('pop').style.display='none';">
[Fechar]
#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 />
Laboratório de Algoritmos<br />
Introdução à Tecnologia de Informação<br />
Noções de Lógica<br />
Matemática<br />
179
Matemática<br />
Português 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() {
var x = document.getElementById('quadrado');
if(x.offsetLeft==50) {
x.style.left="100%";
x.style.marginLeft = "-250px";
} else {
x.style.left="0%";
x.style.marginLeft = "50px";
background: #0033AA;
border: 5px solid #3F0;
color: #FFFFFF;
line-height: 200px;
text-align: center;
font-family: verdana;
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;
background: #0033AA;
}
function mover(m) {
var x = document.getElementById('quadrado');
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>
<meta charset="UTF-8">
<title>DIV com rolagem automática</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
<script type="text/javascript">
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()">
<!-- INÍCIO DO CONTEÚDO DA DIV -->
<br /><br /><br /><br /><br /><br /><br /><br /><br />
Acesse regularmente o site CodigoFonte.net e fique por
dentro do há de melhor no mundo da programação web.
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- FIM DO CONTEÚDO DA DIV --> <!-- FIM DO CONTEÚDO DA DIV -->
</div>
</body>
</html>
186
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<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>
<meta charset="UTF-8">
</head> </head>
<body>
<img src="imagens/js_pb.png"
onMouseOver="this.src='imagens/js_cor.png'"
onMouseOut="this.src='imagens/js_pb.png'">
</body>
</html>
188
<script>
personagem = new Array("Pernalonga", "Patolino", "Frangolino",
"Papaléguas", "Coiote", "Tasmania");
function mostrar(n){
document.saida.texto.value = personagem[n];
}
function ocultar(){
document.saida.texto.value = "";
}}
</script>
<form name=saida><input type="text" name="texto" size="50"></form>
<a href="#" onMouseOver="mostrar(0)" onMouseOut="ocultar()">
<img src="./pernalonga.gif" border="0">
</a>
<a href="#" onMouseOver="mostrar(1)" onMouseOut="ocultar()">
<img src="./patolino.gif" border="0">
</a>
...
189
<script>
Imagens = new Array( "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg" );
var atual = 0;
var qtde = Imagens.length - 1;
function trocarImagem(direcao) {
atual = atual + direcao;
if (atual > qtde) atual = 0;
if (atual < 0) atual = qtde; 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 função a cada ciclo de tempo
clearInterval – cancela a execução da função setInterval
setTimeout – é executada uma única vez
CSS JavaScript Descrição
background-attachment backgroundAttachment Define se a imagem de fundo de um elemento ficará fixa ou se irá rolar.
background-color backgroundColor Define a cor de fundo de um elemento.
background-image backgroundImage Define uma imagem como fundo de um elemento.
background-position backgroundPosition Define o alinhamento da imagem de fundo de um elemento.
background-repeat backgroundRepeat Define se a imagem vai repetir ou não e a direção da repetição.
border border Define o formato da borda de um elemento.
border-bottom borderBottom Define o formato da borda inferior de um elemento.
border-left borderLeft Define o formato da borda esquerda de um elemento.
border-right borderRight Define o formato da borda direita de um elemento.
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 distância à baixo do elemento em relação ao elemento que o contém.
color color Define a cor do texto.
cursor cursor Define o ícone do cursor do mouse quando o mesmo passar sobre o elemento
display display Define se um elemento deve ser apresentado e a forma de sua apresentação.
font-family fontFamily Define o tipo de fonte.
font-size fontSize Define o tamanho da fonte.
font-weight fontWeight Define a espessura do traço da fonte.
height height Definem a altura de um elemento.
left left Define a distância à esquerda do elemento em relação ao elemento que o contém.
margin margin Define o espaçamento entre o elemento e os demais conteúdos da página.
margin-bottom marginBottom Define o espaçamento entre a região abaixo de um elemento e os demais conteúdos
CSS JavaScript Descrição
margin-left marginLeft Define o espaçamento entre a região a esquerda e os demais conteúdos da página.
margin-right marginRight Define o espaçamento entre a região a direita e os demais conteúdos da página.
margin-top marginTop Define o espaçamento entre a região superior e os demais conteúdos da página.
overflow overflow Define o que deve ocorrer quando o conteúdo de um elemento excede sua área.
padding padding Define o espaçamento entre o conteúdo de um elemento e sua borda.
padding-bottom paddingBottom Define o espaçamento entre o conteúdo de um elemento e sua borda abaixo.
padding-left paddingLeft Define o espaçamento entre o conteúdo de um elemento e sua borda a esquerda.
padding-right paddingRight Define o espaçamento entre o conteúdo de um elemento e sua borda a direita.
194
padding-right paddingRight Define o espaçamento entre o conteúdo de um elemento e sua borda a direita.
padding-top paddingTop Define o espaçamento entre o conteúdo de um elemento e sua borda superior.
position position Define a posição de um elemento como estática, relativa, absoluta ou fixa.
right right Define a distância à direita do elemento em relação ao elemento que o contém.
text-align textAlign Define o alinhamento do texto.
text-decoration textDecoration Define um efeito decorativo para o texto.
top top Define a distância ao topo do elemento em relação ao elemento que o contém.
width width Definem a largura de um elemento.
z-index zIndex Define a ordem de apresentação de um elemento quando há sobreposição.
http://www.progamacaoweb.com.br/tutoriais/javascript/css.php
Exemplos de uso:
document.getElementById("MinhaDiv").style.color = "#FFFFFF";
document.getElementById("MinhaDiv").style.cursor = "pointer";
document.getElementById("MinhaDiv").style.display = "none";
O HTML5 trouxe consigo novos elementos com o
intuito de melhorar a semântica do código do site.
As principais mudanças se relacionam com novas
tags criadas para simplificar e padronizar a criação de
páginas para Internet. páginas para Internet.
Suas principais mudanças incluem layout, semântica
de conteúdo, tratamento de áudio e vídeo, além de
recursos para drag & drop (clicar e arrastar)
O HTML 5 ainda está em fase de desenvolvimento.
196
Dentre todas as categorias de modelos de conteúdo,
existem dois tipos de elementos:
◦ elementos de linha
◦ elementos de bloco
Os elementos de linha marcam, na sua maioria das
vezes, texto. Alguns exemplos: a, strong, img, input, span.
Os elementos de blocos são como caixas, que dividem o
conteúdo nas seções do layout. Ex.: div, span, ...
197
Veja algumas premissas que você precisa conhecer:
Os elementos de linha podem conter outros elementos
de linha, dependendo da categoria que ele se encontra.
Os elementos de linha nunca podem conter elementos
de bloco. de bloco.
Elementos de bloco sempre podem conter elementos de
linha.
Elementos de bloco podem conter elementos de bloco,
dependendo da categoria que ele se encontra.
◦ Por exemplo, um parágrafo não pode conter um DIV. Mas o
contrário é possível.
198
http://www.nintendo.com.au/gamesites/mariokartwii/#home
http://html5gallery.com/
http://www.netmagazine.com/features/top-20-html5-games
http://chrome.angrybirds.com/
http://www.geekproject.com.br/2011/04/html5-impressionantes-exemplos-utilizando-canvas/
http://www.fgestor.com.br/
199
Flow content (Conteúdo de fluxo)
Metadata content (Conteúdo de metadados)
Sectioning content (Conteúdo seccionado)
Heading content (Conteúdo de cabeçalho) Heading content (Conteúdo de cabeçalho)
Phrasing content (Conteúdo linguístico)
Embedded content (Conteúdo incorporado)
Interactive content (Conteúdo interativo)
200
201
A maioria dos elementos utilizados no body e
aplicações são categorizados como Flow
Content.
Veremos, a seguir, algumas das principais tags
que formam o Flow Content. que formam o Flow Content.
As tags antigas também fazem parte do Flow
Content.
Tags obsoletas devem ser evitadas.
202
Elemento Funcionalidade
article
tag define um artigo
aside
tag define o conteúdo, além do conteúdo da página
audio
tag define o conteúdo de som
canvas
Break – quebra de linha
datalist
tag define uma lista suspensa
details
tag define os detalhes de um elemento
dialog
tag define um diálogo (conversa)
dialog
tag define um diálogo (conversa)
embed
tag define conteúdo interativo externo ou plugin
figure
tag define um grupo de conteúdo de mídia, e sua legenda
footer
tag define um rodapé de uma seção ou página
header
tag define um cabeçalho de uma seção ou página
hgroup
tag define as informações sobre uma seção em um documento
keygen
tag define uma chave gerada de forma
203
Elemento Funcionalidade
mark
tag define o texto marcado
meter
tag define medição dentro de um intervalo pré-definido
nav
tag define os links de navegação
output
tag define alguns tipos de saída
progress
tag define o progresso de uma tarefa de qualquer tipo
rp
tag é navegadores que não suportam o elemento de rubi.
rt
tag define explicação para anotações de rubi
rt
tag define explicação para anotações de rubi
ruby
tag define anotações de rubi
section
tag define uma seção
source
tag define recursos de mídia
hour
tag define uma data / horário
video
tag define um vídeo
204
Elemento Funcionalidade
acronym
tag define um acrônimo
applet
tag define um applet incorporado
basefont
tag especifica uma fonte padrão para todo o documento
big
tag é usada para formatar o texto em um tamanho maior
center
tag é usada para centralizar o texto
dir
tag é usado para listar os títulos de diretório
font
tag especifica o tipo de letra, tamanho e cor da fonte do texto
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
Elemento Funcionalidade
title
Título da página. Aparece na barra de título do browser.
meta
São metadados ou "etiquetas" que descrevem o conteúdo do seu
site para os buscadores.
base
Permite especificar explicitamente o URI básico de um
documento.
script
Conteúdo javascript inline ou em arquivo externo.
script
Conteúdo javascript inline ou em arquivo externo.
noscript
Conteúdo a ser exibido caso o browser não tenha suporte a
javascript.
style
Permite alterar a formatação dos elementos do documento HTML
utilizando folha de estilo CSS.
link
Permite a inclusão de arquivos externos em formato de folha de
estilo CSS.
Este conteúdo vem antes da apresentação, formando uma
relação com o documento e seu conteúdo com outros
documentos que distribuem informação por outros meios.
206
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<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 são usados por
buscadores para indexar um site.
author – autor do site
description – descrição 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 questão de
compatibilidade.
A opção “expires” permite definir uma data a partir da
qual o site deverá ser atualizado no cache.
◦ Uma data antiga ou inválida força o navegador a atualizar o
site.
208
Recarregar a mesma página após 10 segundos:
<meta http-equiv="refresh" content="10">
Redirecionar para outro site após 10 segundos:
<meta http-equiv="refresh"
content="10;http://www.google.com.br/">
209
<meta name="robots" content="index, nofollow">
<meta name="robots" content="noarchive">
<meta name="robots" content="all">
<meta name="robots" content="none">
INDEX / NOINDEX
Serve para indicar se deseja ou não permitir a indexação da página inicial do site
pelos motores de busca. pelos motores de busca.
FOLLOW / NOFOLLOW
Com esta diretriz se indica se deve ou não permitir aos motores de busca percorrer
ou seguir percorrendo a web através dos links que encontre no corpo do documento.
ARCHIVE / NOARCHIVE
Isto permite dizer se desejamos ou não que o motor de busca arquive o conteúdo do
website em seu cache interno.
210
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<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
página.
◦ section
◦ header
◦ footer
◦ nav ◦ nav
◦ article
◦ aside
Basicamente, são elementos que juntam grupos
de textos no documento.
Substituem o uso da tag DIV.
212
section
◦ A tag section define uma nova seção do site, uma área genérica do site. Por
exemplo a home pode ser dividida em destaque, novidades, chamada para
conteúdo completo.
header
◦ O elemento header representa uma área de introdução. Pode ser utilizado para
agrupar índices de conteúdo, campos de busca, cabeçalho do site com título ou
logo.
footer
◦ A tag footer representa o rodapé do site, ou de uma seção. ◦ A tag footer representa o rodapé do site, ou de uma seção.
nav
◦ O elemento nav é utilizado para representar uma seção da página que contém
links para outras partes do site. Este elemento deve ser utilizado para grupos de
links importantes do site tipicamente menus de navegação.
article
◦ O elemento article é utilizado para representar o conteúdo do site propriamente
dito, como posts, artigos e outros textos em geral.
aside
◦ A tag aside representa um bloco de conteúdo que referência o conteúdo que
envolta do elemento aside.
213
HTML4/XHTML HTML5
214
215
O elemento header especifica o cabeçalho da seção da
página. Ele pode ser utilizado no topo da página
englobando o logotipo da empresa e o menu, e ao
mesmo tempo aparecer no lado direito para intitular a
seção “mais artigos”.
216
header
O elemento nav especifica o menu de navegação.
Identifica os links para navegação seja para outra
página ou seções da mesma página.
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="Comércio Eletrônico">Comércio Eletrônico</a></li>
<li><a href="#" title="Downloads">Downloads</a></li>
<li><a href="#" title="Contato">Contato</a></li> <li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>
</header>
218
A tag footer basicamente é o rodapé. Seja da página ou de
uma seção.
Esta tag contém informações adicionais sobre o que foi
exposto na seção, como nome do autor, ou um link para o
topo da página.
Use o footer para informações sucintas. Para rodapés mais
complexos, use section.
219
footer
Assim como dividíamos a página em blocos de
conteúdo com divs, faremos o mesmo com o
section, com o diferencial de que a utilização deste
elemento é semântica.
A seção precisa ter um significado como conteúdo: a
section será utilizada quando, por exemplo, você for
dividir o conteúdo entre “web design” e “web master”. dividir o conteúdo entre “web design” e “web master”.
220
section
section
(subseção)
<section class="chamadas">
<h4>Web Design</h4>
<article><h2>Título</h2><p>Texto </p></article>
<section>
<h6>Mais artigos</h6>
<ul class="maisartigos">
<li><a href="#" title="Donec elit">Donec elit</a></li>
<li><a href="#" title="Lorem amet">Lorem amet</a></li>
<li><a href="#" title="Donec elit">Donec elit</a></li> <li><a href="#" title="Donec elit">Donec elit</a></li>
</ul>
</section>
</section>
221
Para saber quando utilizar o article, isole o texto do
resto da página. Se ele continuar fazendo sentido,
estão use article.
A utilização básica é para notícias, artigos e
comentários. Ela cria seções da página que podem
ser referenciadas via RSS.
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 princípio. Pois assim como é
possível colocar article dentro de um section, o
inverso também é permitido.
Uma forma de diferenciar é pensar que o section
divide a página em blocos de conteúdo,
enquanto o article engloba o conteúdo em si.
Não é permitido aninhar articles, mas é possível
aninhar section.
224
Na tag aside, você engloba informações
adicionais ao conteúdo principal.
◦ Por exemplo, uma citação, anotações e afins.
◦ Publicidade também pode ser colocada nesse elemento.
225
aside
É possível confundir com div, pois visualmente,
não há diferença entre o uso de div e dos novos
elementos do HTML 5.
Porém, o div, o mais genérico de todos, apenas é
aplicado para separar elementos em blocos, por
isso ele não carrega nenhum significado
semântico.
Por exemplo, o elemento article indica que um
determinado bloco leva um conteúdo importante.
Já o section é um bloco de separação de
assuntos diferentes.
226
<!DOCTYPE html>
<html>
<head>
<title>Section em HTML5</title>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div id="main">
<header>header</header>
<nav>nav</nav> <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;
}
Vários navegadores, principalmente os mais antigos, não reconhecem
devidamente as novas marcações. Para mantermos a compatibilidade
é necessário estilizar algumas tags usando a seguinte regra CSS.
◦ header, footer, article, aside, nav, section {display:block;}
Para verificar o suporte a HTML5 e CSS3 podemos utilizar a Modernizr
(http://www.modernizr.com/) que é uma biblioteca de detecção que
permite verificar o suporte da maioria das características do HTML5 e permite verificar o suporte da maioria das características do HTML5 e
CSS3. O Modernizr roda automaticamente assim que você o adiciona
no head do documento fazendo funcionar as novas tags em
navegadores mais antigos (IE8).
◦ <script src="js/modernizr-1.6.min.js"></script>
Outra biblioteca para browser antigos está disponível no googlecode:
◦ <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
229
Os elementos da categoria Heading definem uma
seção de cabeçalhos, que podem estar contidos em
um elemento na categoria Sectioning.
◦ h1, h2, h3, h4, h5, h6, hgroup
O elemento h? já existia nas versões HTML O elemento h? já existia nas versões HTML
anteriores.
Foi introduzido o elemento hgroup, que tem a
função de agrupar dois ou mais elementos de h1
até h6.
230
Na estrutura desse <article>, um <hgroup>
contém o título e o subtítulo do artigo, e o
<header> contém o meta-dado e o <hgroup>:
<article>
<header> <header>
<hgroup>
<h1>Title goes here</h1>
<h2>Subtitle of article</h2>
</hgroup>
<p><time datetime="2010-03-20">20th March, 2010</time></p>
</header>
<p>Lorem Ipsum dolor set amet</p>
</article>
231
Fazem parte desta categoria elementos que marcam o texto do
documento, bem como os elementos que marcam este texto dentro
do elemento de parágrafo.
a
audio
img
label
object
span
textarea
video

232
Na categoria Embedded, há elementos que importam
outra fonte de informação para o documento.
audio
canvas
embed embed
iframe
img
math
object
svg
video
233
Interactive Interactive Content Content são elementos que fazem parte da interação de
usuário.
(Incluem elementos Phrasing content e Embedded content)
◦ a
◦ audio (se o atributo control for utilizado)
◦ button
◦ details
◦ embed ◦ embed
◦ iframe
◦ img (se o atributo usemap for utilizado)
◦ input (se o atributo type não tiver o valor hidden)
◦ keygen
◦ label
◦ menu (se o atributo type tiver o valor toolbar)
◦ object (se o atributo usemap for utilizado)
◦ select
◦ textarea
◦ video (se o atributo control for utilizado)
234
O atributo autofocus pode ser especificado nos elementos input (exceto quando há
atributo hidden atribuído), textarea, select e button.
A tag a passa a suportar o atributo media como a tag link.
A tag form ganha um atributo chamado novalidate. Quando aplicado o formulário pode ser
enviado sem validação de dados.
O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado os
indicadores da lista são colocados na ordem inversa, isto é, da forma descendente.
O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de
fieldset são desativados.
O novo atributo placeholder pode ser colocado em inputs e textareas. O novo atributo placeholder pode ser colocado em inputs e textareas.
O elemento area agora suporta os atributos hreflang e rel como os elementos a e link
O elemento base agora suporta o atributo target assim como o elemento a. O atributo
target também não está mais descontinuado nos elementos a e area porque são úteis
para aplicações web.
Os atributos abaixo foram descontinuados:
◦ O atributo border utilizado na tag img.
◦ O atributo language na tag script.
◦ O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de name.
◦ O atributo summary na tag table.
235
Este atributos foram descontinuados porque modificam a formatação do elemento e
suas funções são melhores controladas pelo CSS:
◦ align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col,
colgroup, tbody, td, tfoot, th, thead e tr.
◦ alink, link, text e vlink como atributos da tag body.
◦ background como atributo da tag body.
◦ bgcolor como atributo da tag table, tr, td, th e body.
◦ border como atributo da tag table e object.
◦ cellpadding e cellspacing como atributos da tag table.
◦ char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
◦ clear como atributo da tag br.
◦ compact como atributo da tag dl, menu, ol e ul.
◦◦ frame como atributo da tag table.
◦ frameborder como atributo da tag iframe.
◦ height como atributo da tag td e th.
◦ hspace e vspace como atributos da tag img e object.
◦ marginheight e marginwidth como atributos da tag iframe.
◦ noshade como atributo da tag hr.
◦ nowrap como atributo da tag td e th.
◦ rules como atributo da tag table.
◦ scrolling como atributo da tag iframe.
◦ size como atributo da tag hr.
◦ type como atributo da tag li, ol e ul.
◦ valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
◦ width como atributo da tag hr, table, td, th, col, colgroup e pre.
236
rev e charset como atributos da tag link e a.
shape e coords como atributos da tag a.
longdesc como atributo da tag img and iframe.
target como atributo da tag link.
nohref como atributo da tag area.
profile como atributo da tag head.
version como atributo da tag html. version como atributo da tag html.
name como atributo da tag img (use id instead).
scheme como atributo da tag meta.
archive, classid, codebase, codetype, declare e standby
como atributos da tag object.
valuetype e type como atributos da tag param.
axis e abbr como atributos da tag td e th.
scope como atributo da tag td.
237
Nessa nova versão da HTML, os formulários
ganharam recursos muito interessantes e
importantes para otimização do trabalho.
Por exemplo, é possível fazer validação de
campos sem o uso de JavaScript, fazer validação campos sem o uso de JavaScript, fazer validação
através de ER (expressões regulares) diretamente
no código HTML entre muitas outras.
Em HTML 4, as validações de campos são feitas
através de Javascript.
238
Data
◦ Esse campo abre um calendário para escolher a date.
◦ <input name="calendario" type="date" />
Números
◦ Esse campo permite adicionar somente números como valores, e ainda é
possível limitar os valores mínimo e máximo a serem inseridos, utilizando os
atributos min e max.
◦ <input name="numero" type="number" /> ◦ <input name="numero" type="number" />
URL
◦ Exibe um campo com validação para a inserção de URLs.
◦ <input name="site" type="url" />
Email
◦ Campo usado para inserir e fazer a validação de um endereço de e-mail.
◦ <input name="email" type="email" />
239
Slider
◦ Exibe uma régua onde é possível setar um valor. Os atributos min e max limitam a
faixa de valores, e o atributo step informa a progressão dos valores,.
◦ <input name="faixa" type="range" min="5" max="50" step="5" />
Pesquisa
◦ Cria um campo para pesquisas.
◦ <input name="pesquisar" type="search" />
Paleta de Cores
◦ Cria uma paleta de cores.
◦ <input name="cores" type="color" />
Telefone
◦ Esse campo permite adicionar um número de telefone
(pode ter problema já que o formato dos telefones não é um padrão mundial).
◦ <input name="telefone" type="tel" />
240
Autofocus
◦ Se informado esse atributo no campo, ele receberá o foco assim que a página for carregada no navegador.
◦ <input name="pesquisar" type="search" autofocus />
Autocomplete
◦ Se esse atributo estiver como "on", então ele habilita um autocompletar para o campo.
◦ <input name="pesquisar" type="search" autocomplete="on" />
Placeholder
◦ Esse atributo oferece uma dica para auxiliar o usuário no preenchimento do campo.
◦ <input name="pesquisar" type="search" placeholder="Pesquisar" />
Pattern
◦ Esse atributo tem a função de fazer uma validação com base em uma expressão regular.
◦ <input name="valor" type="number" pattern="[0-9][a-z]{10}" />
Required
◦ O campo será obrigatório, não sendo executado o submit do formulário enquanto ele não for preenchido.
◦ <input name="pesquisar" type="search" required />
241
<form>
<fieldset>
<legend>Formulário com HTML 5</legend>
<label for="nome">Nome:</label>
<input name="nome" type="text" required autofocus /><br />
<label for="email">Email:</label>
<input name="email" type="email" placeholder="mail@provider.com" /><br />
<label for="nascimento">Data Nasc.:</label>
<input name="nascimento" type="date" /><br />
<label for="site">Site:</label>
<input name="site" type="url" /><br />
<label for="cor">Cor:</label>
<input name="cor" type="color" /><br />
<label for="satisfacao">Satisfação:</label>
<input name="satisfacao" type="range" min="5" max="50" step="5" /><br />
<input name="Salvar" type="submit" value="Salvar"/>
</fieldset>
</form>
242
Até recentemente não existia uma maneira
semântica de marcar, no HTML, o conteúdo de
uma legenda.
<figure>
<img src="../img/HTML5.png" alt="HMTL5">
243
<figcaption>HTML 5, a nova cara da Internet!</figcaption>
</figure>
figcaption substitui legend, que
também é 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>
Pássaros Australianos. Da esquerda para direita, Kookburra, Pelicano e Papagaio.<br />
Originais por <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a>
</figcaption>
</figure>
244
Com HTML5, usar vídeos ficou ainda mais simples.
<video width="320" height="240" controls="controls">
<source src="../video/movie.ogg" type="video/ogg" />
</video>
É possível colocar um único formato de vídeo, mas ainda não existe um É possível colocar um único formato de vídeo, mas ainda não existe um
formato que seja compatível com todos os browsers.
O parâmetro controls determina se os controles do player (com botões
play, pause, ...) deverá ser apresentado.
245
<video width="320" height="240" controls="controls">
<source src="../video/movie.mp4" type="video/mp4" />
<source src="../video/movie.ogg" type="video/ogg" />
<source src="../video/movie.webm" type="video/webm" />
Infelizmente Seu Navegador Não suporta Vídeos na Tecnologia HTML5.
</video>
Apesar do trabalho extra para converter os vídeos em diferentes formatos,
esta ainda é a única forma de garantir que seu vídeo seja exibido para
todos os browsers.
246
Para indicar ao navegador o container e codecs de determinado
arquivo, usa-se o atributo type, no formato:
type= "MIME-type" codecs="codec de vídeo, codec de áudio"
Por exemplo, um vídeo em Ogg, usando os codecs Theora e Vorbis,
terá seu source assim:
<source src="video.ogg" type="video/ogg" codecs="theora, vorbis"> <source src="video.ogg" type="video/ogg" codecs="theora, vorbis">
Com MPEG-4 a coisa é um pouco mais complicada, por que é preciso
indicar ao navegador também o profile do codec de vídeo utilizado.
Veja um exemplo:
<source src="video.mp4" type="video/mp4" codecs="mp4v.20.240, mp4a.40.2">
ATENÇÃO: se o codec não estiver instalado, o áudio/vídeo não será ouvido/exibido.
247
Para inserir áudio em uma página web, basta usar o elemento audio:
<audio src="musica.ogg" controls="true" autoplay="true" />
O valor de controls define se um controle de áudio, com botões de play,
pause, volume, barra de progresso, contador de tempo, etc. será exibido na
tela.
Se for setado como “false”, será preciso controlar o player via javascript, com
248
Se for setado como “false”, será preciso controlar o player via javascript, com
métodos como play() e pause().
O valor de autoplay define se o áudio vai começar a tocar assim que a página
carregar.
Formatos:
◦ ogg – Firefox e Chrome
◦ mp3 – Internet Explorer e Chrome
<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 não é a realidade.
Então, é 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 vídeo deve ser reproduzido do início até 10,5
segundos.
http://foo.com/video.ogg#t=,02:00:00
◦ Especifica que o vídeo deve ser reproduzido do início até 2
horas.
http://foo.com/video.ogg#t=60,
◦ Especifica que o vídeo deve começar aos 60 segundos e ser
reproduzido até o final.
251
O elemento canvas, novidade do HTML 5, permite que a
informação para a construção de imagens baseadas em pixels seja
inserida diretamente no código do documento.
O elemento canvas apenas delimita em que local da tela isto
acontece. O processo de desenho é controlado por uma API
específica para este elemento que interage com JavaScript.
Por enquanto, as imagens criadas são objetos em duas dimensões
(2D), mas já existem experimentos para construção de objetos 3D
com a API Canvas.
252
fillStyle
◦ define a cor de fundo do polígono.
strokeStyle
◦ define a cor da borda do polígono.
clearRect
◦ apaga uma área retangular.
x, y
◦ definem a posição no canvas.
fillRect
◦ retângulo com fundo preenchido.
strokeRect
◦ retângulo com a borda preenchida.
width, height
◦ definem o tamanho do retângulo.
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:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
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:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
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 posição inicial do
polígono.
fill
◦ Preenche o fundo do
polígono (se estiver
fechado)
stroke
lineTo
◦ Cria uma linha.
arc
◦ Desenha um círculo ou arco.
stroke
◦ Pinta a borda do polígono
closePath
◦ para finalizar nosso path.
257
JAVASCRIPT:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
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.lineWidth = 4;
context.fill();
context.stroke();
}
258
JAVASCRIPT:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.beginPath();
context.moveTo(150,50);
context.lineTo(220,250)
context.lineTo(50,125)
context.lineTo(250,125) context.lineTo(250,125)
context.lineTo(80,250)
context.lineTo(150,50)
context.closePath();
context.fillStyle='#FFFF00';
context.strokeStyle='#FF0000';
context.fill();
context.stroke();
}
259
JAVASCRIPT:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.strokeStyle='#FF0000';
context.beginPath();
context.moveTo(1,1);
for (i=0;i<300;i+=5){
if((i%2)!=0){
context.lineTo(i+5,i);
}else{
context.lineTo(i,i+5);
}
}
context.stroke();
context.closePath();
}
260
Desenhar um grid de 300 pixels formado por
quadrados de 15 pixels cada.
261
arc(x, y, raio, angulo_inicio, angulo_final, sentido_anti_horario)
◦ Os parâmetros x, y correspondem às coordenadas do centro do arco.
◦ O parâmetro raio é o número de píxels que tem o arco como raio.
◦ Por sua parte ângulo_início e ângulo_final são os ângulos onde começa e acaba
o raio. Estão tomados como se o eixo da horizontal tivesse o ângulo zero.
◦ Sentido_anti_horario é um parâmetro booleano, onde true significa que o traço vai
desde um ângulo de início ao do fim no sentido contrário dos ponteiros do relógio. desde um ângulo de início ao do fim no sentido contrário dos ponteiros do relógio.
False indica que esse caminho é em direção contrária.
262
Para conveter graus em radianos, use:
var radians = (Math.PI/180)*degrees;
JAVASCRIPT:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.strokeStyle = '#FF8A00';
context.lineWidth = 4;
context.beginPath();
context.arc(75,75,45,0,Math.PI*2,true); //Rosto
context.moveTo(110,75);
context.arc(75,75,35,0,Math.PI,false); //Sorriso
context.moveTo(65,65);
context.arc(60,65,5,0,Math.PI*2,true); //Olho Esquerdo
context.moveTo(95,65);
context.arc(90,65,5,0,Math.PI*2,true); //Olho Direito
context.stroke();
context.closePath();
}
263
JAVASCRIPT:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.fillStyle = '#FF8A00';
context.beginPath();
context.moveTo(10,60)
context.quadraticCurveTo(10,10,60,10);
context.lineTo(120,10);
context.lineTo(120,50);
context.quadraticCurveTo(120,110,60,110);
context.lineTo(10,110);
context.fill();
}
264
Desenhar a bandeira do Brasil.
265
JAVASCRIPT:
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
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:
function desenhar(){
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, é possível arrastar
a imagem entre duas DIV’s
<script>
function dragover(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
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>
<meta charset="UTF-8">
<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) {
if (e.pageX || e.pageY) {
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 animação na qual os objetos
irão 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;
margin-left: -250px;
}
</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() {
var img = new Image();
img.src = "./horizonte.png";
img.onload = function() {
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
}
function updateNuvem() {
posNuvem--;
if(posNuvem <= -80){
posNuvem = 500;
}
}
280
function drawNuvem() {
var img = new Image();
img.src = "./nuvem.png";
img.onload = function() {
context.drawImage(img, posNuvem, 15, 200, 85);
}
}
function updateArvore() { function updateArvore() {
posArvore -= 3;
if(posArvore <= -80){
posArvore = 500;
}
}
function drawArvore() {
var img = new Image();
img.src = "./arvore.png";
img.onload = function() {
context.drawImage(img, posArvore, 210, 50, 75);
}
}
281
function updateSmurf() {
frameX++;
if(frameX >= 4) {
frameX = 0;
frameY++;
if(frameY >= 4) frameY = 0;
}
} }
function drawSmurf() {
var img = new Image();
img.src = "./smurf.png";
img.onload = function() {
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
Clássico Jogo da Velha em HTML5
Usaremos 3 arquivos:
◦ velha.html
◦ velha.css
◦ velha.js
284
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<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;
margin-left: -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;
text-decoration: none;
}
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.beginPath();
context.moveTo(100, 0);
context.lineTo(100,300);
context.moveTo(200, 0);
context.lineTo(200,300); context.lineTo(200,300);
context.moveTo( 0,100);
context.lineTo(300,100);
context.moveTo( 0,200);
context.lineTo(300,200);
context.closePath();
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[6]!='' && score[6]==score[7] && score[7]==score[8]) ||
(score[0]!='' && score[0]==score[3] && score[3]==score[6]) || (score[0]!='' && score[0]==score[3] && score[3]==score[6]) ||
(score[1]!='' && score[1]==score[4] && score[4]==score[7]) ||
(score[2]!='' && score[2]==score[5] && score[5]==score[8]) ||
(score[4]!='' && score[4]==score[0] && score[4]==score[8]) ||
(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) {
if (e.pageX || e.pageY) {
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">
<img src="./img/carros.jpg" id="img4"
draggable="true" ondragstart="drag(event)" /> draggable="true" ondragstart="drag(event)" />
</div>
<div class="pecas inf_esq">
<img src="./img/carros.jpg" id="img2"
draggable="true" ondragstart="drag(event)" />
</div>
<div class="pecas inf_dir">
<img src="./img/carros.jpg" id="img3"
draggable="true" ondragstart="drag(event)" />
</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"
ondrop="drop(event)" ondragover="dragover(event)">
</div>
<div class="pecas inf_dir" id="div4"
ondrop="drop(event)" ondragover="dragover(event)">
</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{
margin-left: -250px;
}
.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-left: -250px;
margin-top: -150px;
}
#separacao {
width: 10px;
height: 10px;
float: left;
}
var qtde = 0;
var erro = 0;
function dragover(ev) {
ev.preventDefault();
}
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 público são
crianças. A empresa comercializa brinquedos,
livros e roupas infantis, realiza festas infantis e
aluga brinquedos infláveis. Ela atende meninos e
meninas, de recém nascidos até 7 anos. Além dos meninas, de recém nascidos até 7 anos. Além dos
produtos da empresa, o site pode conter músicas
e filmes infantis, jogos infantis, imagens para
colorir, histórias infantis, opções de passeios para
crianças, seção de dicas para as mães.
299
Livro Texto:
1. Use a Cabeça – Html com CSS e XHMTL; Freeman, Elisabeth & Freeman,
Eric; Ed. Alta Books; 2ª edição; 2008; 10 exemplares.
2. Padrões de Projeto com CSS e HTML; Bowers, Michael; Ed. Alta Books; 2ª
edição; 2008; 10 exemplares.
3. Construindo Sites com CSS e XHTML; Silva, Maurício Samy; Ed. Novatec; 1ª
edição; 2008; 10 exemplares.
Bibliografia Complementar:
4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1ª edição; 2001; 10 4. Javascript 1.5; Oliveira, Adelize G. de; Ed. Relativa; 1ª edição; 2001; 10
exemplares.
5. Estudo Dirigido: Web Javascript; Manzano, José Augusto et al.; Ed. Érica; 1ª
edição; 2001; 4 exemplares.
6. Html 4 – Teoria e Prática; Ramalho, José Antônio; Ed. Berkley; 1ª edição;
2000; 5 exemplares.
7. Projetando Websites; Nielsen, Jakob; Ed. Elsevier; 1ª edição; 2000; 14
exemplares.
8. Criando Páginas Web com CSS: Soluções Avançadas para Padrões Web;
Budd, Andy, et al.; Ed. Pearson; 1ª edição; 2006; 5 exemplares.