Você está na página 1de 300
Prof.Prof. Dr.Dr. WagnerWagner JoséJosé DizeróDizeró wagner@unilins.edu.brwagner@unilins.edu.br
Prof.Prof. Dr.Dr. WagnerWagner JoséJosé DizeróDizeró wagner@unilins.edu.brwagner@unilins.edu.br
Prof.Prof. Dr.Dr. WagnerWagner JoséJosé DizeróDizeró wagner@unilins.edu.brwagner@unilins.edu.br
Prof.Prof. Dr.Dr. WagnerWagner JoséJosé DizeróDizeró wagner@unilins.edu.brwagner@unilins.edu.br
Prof.Prof. Dr.Dr. WagnerWagner JoséJosé DizeróDizeró wagner@unilins.edu.brwagner@unilins.edu.br
Prof.Prof. Dr.Dr. WagnerWagner JoséJosé DizeróDizeró wagner@unilins.edu.brwagner@unilins.edu.br
Prof.Prof. Dr.Dr. WagnerWagner JoséJosé DizeróDizeró
wagner@unilins.edu.brwagner@unilins.edu.br
EMENTA: Funcionamento e histórico da Internet. Elaboração de páginas web através da linguagem Html. Tags.

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)

(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

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 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.

Web com CSS: Soluções Avançadas para Padrões Web ; Budd, Andy, et al.; Ed. Pearson; 1ª
(1605) Surge o código binário (1844) Transmissão por telégrafo (1946) Criado o ENIAC (1957) Nasce

(1605) Surge o código binário (1844) Transmissão por telégrafo (1946) Criado o ENIAC (1957) Nasce a ARPA (1961) Transmissão de dados por pacote (1970) O termo INTERNET é criado (1971) Idealização do e-mail (1973) Primeira conexão intercontinental (1977) Criação do protocolo TCP/IP (1981) Lançado o PC da IBM (1987) FAPESP conecta-se a instituições EUA (1995) No Brasil, chega aos usuários comuns (2000) Expansão do comércio eletrônico (2004) Disseminação das redes sociais (2007) Surgem os primeiros smartphones

Expansão do comércio eletrônico (2004) Disseminação das redes sociais (2007) Surgem os primeiros smartphones 5
Expansão do comércio eletrônico (2004) Disseminação das redes sociais (2007) Surgem os primeiros smartphones 5

5

De acordo com o W3C, a Web é baseada em 3 pilares: ◦ Um esquema

De acordo com o W3C, a Web é baseada em 3 pilares:

Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI.

Um Protocolo de acesso para acessar estas fontes, hoje o HTTP.

Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML.

hoje o HTTP. ◦ Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de

6

HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto. Resumindo

HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto.

Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

É possível criar páginas utilizando ferramentas (como Dreamwaver) ou montá-las diretamente através do uso de TAGs.

criar páginas utilizando ferramentas (como Dreamwaver) ou montá-las diretamente através do uso de TAGs. TAG =

TAG = comando

7

Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram

Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem.

Contudo, até aqui o HTML ainda não era tratado como um padrão.

Apenas em 1997, o grupo de trabalho do W3C responsável por manter o padrão do código, trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada como prática comum.

O HTML 4.0 surgiu em 1997, há mais de uma década. A estruturação de páginas em HTML 4.0 é basicamente constituída pelo elemento <div>, com classes e IDs diferentes.

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" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Uma Página HTML5 Básica</title> </head> <body> <!-- conteúdo da página --> Primeiro exemplo de HTML. </body> </html>

< body > <!-- conteúdo da página --> Primeiro exemplo de HTML. </ body > </

9

DOCTYPE ◦ para que o navegador reconheça que deve funcionar no “standards mode” Tag html

DOCTYPE

para que o navegador reconheça que deve funcionar no “standards mode”

Tag html

com o atributo lang, para identificar a língua na qual o conteúdo do documento será escrito

Tag head

Informações de cabeçalho não visíveis da página

Tag meta

Especificando a codificação da página (charset)

Tag title

Título da página

Tag body

Conteúdo da página

◦

10

Comandos Básicos

Comandos Básicos

Comandos Básicos
<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<title>Quebra de linha</title> </head> <body> Primeira linha. <br /> Segunda linha. </body>

</html>

/> Segunda linha. </body> </html> A tag <br /> pode ser usada várias vezes, pulando
A tag <br /> pode ser usada várias vezes, pulando uma linha a cada comando.
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" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Tamanho do Texto</title> </head> <body> <p>Primeiro parágrafo</p> <p>Segundo parágrafo</p> <p>Terceiro parágrafo</p> </body> </html>

parágrafo</p> </body> </html> A tag <p> não produz nenhum efeito se usada mais
A tag <p> não produz nenhum efeito se usada mais de uma vez.
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" />

<!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> <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>

Tamanho 1</h6> <hr> <!-- barra horizontal --> </body> </html> 14
Tamanho 1</h6> <hr> <!-- barra horizontal --> </body> </html> 14

14

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!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:
Tabela de cores HTML:
Cor de fundo </body> </html> Tabela de cores HTML: www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm 15

www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm

15

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Lista Ordenada</title> </head> <body> <ul>

<li>Abacaxi</li>

<li>Laranja</li>

<li>Mamão</li>

<li>Morango</li>

<li>Pera</li>

</ul>

</body>

</html>
</html>
<li> Morango </li> <li> Pera </li> </ul> </body> </html> 16

16

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Lista Ordenada</title> </head> <body> <ol>

<li>Limpar a superficie</li> <li>Aplicar o produto</li> <li>Passar nova camada</li> <li>Aguardar a secagem</li> <li>Pronto!</li> </ol> </body> </html>

Aguardar a secagem </li> <li> Pronto! </li> </ol> </body> </html> 17
Aguardar a secagem </li> <li> Pronto! </li> </ol> </body> </html> 17

17

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Carregar Imagens</title> </head> <body> <img src="logo.png"> </body> </html>

src="logo.png"> </body> </html> Atenção para o caminho e nome do arquivo!!! Se a imagem
src="logo.png"> </body> </html> Atenção para o caminho e nome do arquivo!!! Se a imagem

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 imagem.jpg <!-- index.htm --> <img
C:\ html index.htm imagem.png image imagem.gif img imagem.jpg
C:\
html
index.htm
imagem.png
image
imagem.gif
img
imagem.jpg

<!-- index.htm --> <img src="./imagem.png"> <img src="./image/imagem.gif"> <img src=" /img/imagem.jpg">

Sempre deve-se usar o caminho relativo. No servidor, será hospedado em outra pasta. Nunca se deve o caminho físico:

será hospedado em outra pasta. Nunca se deve o caminho físico: <img src="C:\html\imagem.png"> 19
será hospedado em outra pasta. Nunca se deve o caminho físico: <img src="C:\html\imagem.png"> 19

<img src="C:\html\imagem.png">

19

É possível referenciar imagens diretamente de outros sites. <img

É 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 ◦

Vantagem que a imagem é atualizada automaticamente

Desvantagem é que a imagem pode ser removida do site

◦ Vantagem que a imagem é atualizada automaticamente ◦ Desvantagem é que a imagem pode ser

20

É possível redimensionar uma imagem sem precisar editar <img src="logo.png" width="300"

É possível redimensionar uma imagem sem precisar editar

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

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

width="300" height="120"> ◦ Cuidado para não perder a qualidade da resolução. 21

21

Um link serve para direcionar o usuário para outra página do site ou para um
Um link serve para direcionar o usuário para outra página do site ou para um

Um link serve para direcionar o usuário para outra página do site ou para um site externo.

Veja meu Currículo

<a href="vitae.htm">Currículo</a>

Conheça a Google

<a href="http://www.google.com.br">Google</a>

Para carregar uma nova janela, use: target="_BLANK"
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">
É possível usar uma imagem como âncora de um link. Conheça a <a href="http://www.google.com.br">

É possível usar uma imagem como âncora de um link.

Conheça a

usar uma imagem como âncora de um link. Conheça a <a href="http://www.google.com.br"> <img

<a href="http://www.google.com.br">

<img src="logo.png" border="0">

</a>

href="http://www.google.com.br"> <img src="logo.png" border="0"> </a> 23

23

<table border="1"> <tr> <th> Código </th> <th> Descrição </th>

<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> 45,00 </td> </tr> <tr> <td> 2 </td> <td> Notebook

<td>2</td>

<td>Notebook</td>

<td>2399,99</td>

<table>: cria a tabela <tr>: cria uma linha (table row) <th>: cria uma cabeçalho (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

</tr>

</table>

cria uma cabeçalho (table head) <td>: cria uma coluna (table data) 24 </tr> </table>
<table width ="500" border ="0"> <tr bgcolor ="#36648B"> <td colspan

<table width="500" border="0"> <tr bgcolor="#36648B"> <td colspan="3" align="center"> <font color="white">Relação de Produtos</font></td>

</tr> <tr bgcolor="#4682B4"> <th width="60">Código</th> <th>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>
</table>
border: define a borda colspan: expande a coluna align: alinha o texto
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

1. Crie uma página chamada ‘academico.htm’ com a seguinte formatação:

a) O cabeçalho deve ter tamanho 2.
b) Após o cabeçalho, incluir uma linha horizontal.
c) Criar uma lista não ordenada com os itens ‘Graduação’, ‘Pós-Graduação’ e ‘Extensão’ com fonte tamanho 3.
d) Na frente do item ‘Graduação’, usar uma imagem de lupa para criar um link para a página ‘graduacao.htm’.
e) Criar uma sublista com as opções ‘Mestrado’ e ‘Doutorado’. Os itens devem estar com o type de marcador quadrado.

uma sublista com as opções ‘Mestrado’ e ‘Doutorado’. Os itens devem estar com o type de

26

27
27

27

2. Na outra página (graduacao.htm), criar uma tabela com os cursos: Curso Duração Período Agronomia

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’.

criar um link com a palavra ‘voltar’, que deve direcionar o usuário novamente para a página

28

29
29

29

W3C é a sigla para World Wide Web Consortium, uma organização independente que gerencia as

W3C é a sigla para World Wide Web Consortium, uma organização independente que gerencia as normas para codificação na Internet (isto é, HTML, CSS, XML e outros).

Microsoft, Fundação Mozilla e muitas outras organizações são membros do W3C e formam um consenso sobre o futuro desenvolvimento de normas.

A ideia da normatização é criar um consenso e encontrar um denominador comum para uso de tecnologias para a Web.

A ideia da normatização é criar um consenso e encontrar um denominador comum para uso de

30

Validador da W3C que faz uma verificação da arquivos HTML e XML e retorna um

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/

e XML e retorna um relatório com os eventuais erros e avisos caso seu arquivo não

31

TAG Função HTML Delimita o início e final de uma página HEAD Define o cabeçalho

TAG

Função

HTML

Delimita o início e final de uma página

HEAD

Define o cabeçalho da página

BODY

Contem o conteúdo a se exibido pela página

BR

Quebra de linha, equivalente à tecla ENTER

P

Parágrafo de texto

H?

Cabeçalho de título

OL

Lista ordenada

UL

Lista não ordenada

IMG

Carregar uma imagem

A

Âncora para um hiperlink

TABLE

Tabela

UL Lista não ordenada IMG Carregar uma imagem A Âncora para um hiperlink TABLE Tabela 32

32

Cascading Style Sheets (Folha de Estilos)

Cascading Style Sheets

(Folha de Estilos)

Cascading Style Sheets (Folha de Estilos)
CSS é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em
CSS é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em

CSS é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.

Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Em resumo:

HTML é usado para estruturar conteúdos.

CSS é usado para formatar conteúdos estruturados.

Em resumo: ◦ HTML é usado para estruturar conteúdos. ◦ CSS é usado para formatar conteúdos

34

CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais.

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

dar manutenção no site ◦ Mais controle no layout da página ◦ Vários documentos podem compartilhar

35

Usando HTML podemos fazer assim: <body bgcolor="#FF0000"> Com CSS o mesmo resultado será obtido

Usando HTML podemos fazer assim:

<body bgcolor="#FF0000">

Com CSS o mesmo resultado será obtido assim:

body {background-color: #FF0000;}

Os códigos HTML e CSS são mais ou menos parecidos.

Em CSS usamos três itens: seletor, propriedade e valor.

◦ Os códigos HTML e CSS são mais ou menos parecidos. ◦ Em CSS usamos três

36

Método 1: In-line (o atributo style) ◦ O estilo é aplicado diretamente no elemento. Método

Método 1: In-line (o atributo style)

O estilo é aplicado diretamente no elemento.

Método 2: Interno (a tag style)

Utiliza-se a tag style para definir o CSS

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

Utiliza um arquivo externo com a extensão .css

definir o CSS Método 3: Externo (link para um arquivo separado) ◦ Utiliza um arquivo externo

37

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> </head> <body style="background-color: #FF0000;"> <p>Página com fundo vermelho</p> </body> </html>

#FF0000;" > <p>Página com fundo vermelho</p> </body> </html> 38

38

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Página com fundo vermelho</p> </body> </html>

</head> <body> <p>Página com fundo vermelho</p> </body> </html> 39

39

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<link rel="stylesheet" href="style.css" />

</head> <body> <p>Página com fundo vermelho</p> </body> </html>

<!-- style.css --> <!-- não usar a tag style --> body {background-color:#FF0000;}

</html> <!-- style.css --> <!-- não usar a tag style --> body {background-color:#FF0000;} 40

40

Propriedades: ◦ color ◦ background-color ◦ background-image ◦ background-size ◦ background-repeat ◦

Propriedades:

color

background-color

background-image

background-size

background-repeat

background-attachment

background-position

background

◦ background-size ◦ background-repeat ◦ background-attachment ◦ background-position ◦ background 41

41

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style type="text/css"> h1 {color: #FF0000;} </style> </head> <body> <h1>Cabeçalho na cor vermelha</h1> </body> </html>

</head> <body> <h1>Cabeçalho na cor vermelha</h1> </body> </html> 42

42

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style type="text/css"> body { background-color: #FFCC66;

}

h1 { color: #990000; background-color: #FC9804;

}

</style> </head> <body> <h1>Cabeçalho com uma cor de fundo.</h1> </body> </html>

<body> <h1>Cabeçalho com uma cor de fundo.</h1> </body> </html> 43

43

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style type="text/css"> body { background-color: #FFCC66; background-image: url("imagem.png");

}

</style>

</head>

<body>

</body>

</html>

url("imagem.png"); } </style> </head> <body> </body> </html> 44

44

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" />

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style type="text/css"> body { background-image: url("imagem.png"); background-size: 100%;

}

</style>

</head>

<body>

</body>

</html>

background-size: 100%; } </style> </head> <body> </body> </html> 45

45

body { background-color: #FFCC66; background-image: url("imagem.png"); background-repeat: no-repeat; } Valor

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

repeat Se repete na horizontal e na vertical background-repeat: no-repeat A imagem não se repete 46

46

body { background-color: #FFCC66; background-image: url("imagem.png"); background-repeat: no-repeat;

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

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;

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

centrada na horizontal e 25% para baixo top right A imagem é posicionada no canto superior
centrada na horizontal e 25% para baixo top right A imagem é posicionada no canto superior

48

A propriedade background é uma abreviação para todas as propriedades listadas anteriormente. background: #FFCC66

A propriedade background é uma abreviação para todas as propriedades listadas anteriormente.

background: #FFCC66 url("imagem.png") no-repeat fixed right bottom;

background: #FFCC66 url("imagem.png") no-repeat fixed right bottom; Obs.: pode ser feito tudo na mesma linha 49

Obs.: pode ser feito tudo na mesma linha

49

Propriedades: ◦ font-family ◦ font-style ◦ font-variant ◦ font-weight ◦ font-size ◦ font 50

Propriedades:

font-family

font-style

font-variant

font-weight

font-size

font

Propriedades: ◦ font-family ◦ font-style ◦ font-variant ◦ font-weight ◦ font-size ◦ font 50

50

h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; }

h1 { font-family: arial, verdana, sans-serif;

}

h2 { font-family: "Times New Roman", serif;

}

} h2 { font-family: "Times New Roman", serif; } 51 Se a primeira fonte da lista

51

Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser
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.
na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada
h2 { font-family: "Times New Roman", serif; font-style: italic; } A propriedade font-style define a

h2 { font-family: "Times New Roman", serif; font-style: italic;

}

A propriedade font-style define a escolha da fonte em normal, italic ou oblique.

serif; font-style: italic; } A propriedade font-style define a escolha da fonte em normal , italic

52

h1 {   font-variant: small-caps; } h2 {   font-variant: normal; } Usada para escolher

h1 {

 

font-variant: small-caps;

}

h2 {

 

font-variant: normal;

}

Usada para escolher as variantes normal ou small-caps. Abaixo um exemplo de small-caps.

font-variant: normal; } Usada para escolher as variantes normal ou small-caps. Abaixo um exemplo de small-caps.

53

p { font-family: arial, verdana, sans-serif; font-weight: bold; } Uma fonte pode ser normal ou

p

{

font-family: arial, verdana, sans-serif; font-weight: bold;

}

Uma fonte pode ser normal ou bold

p { font-family: arial, verdana, sans-serif; font-weight: bold; } Uma fonte pode ser normal ou bold

54

h1 {font-size: 30px;} h2 {font-size: 120%;} h3 {font-size: 12pt;} p {font-size: 1em;} 55

h1

{font-size: 30px;}

h2

{font-size: 120%;}

h3

{font-size: 12pt;}

p

{font-size: 1em;}

h1 {font-size: 30px;} h2 {font-size: 120%;} h3 {font-size: 12pt;} p {font-size: 1em;} 55

55

p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Equivale a: p

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;

}

bold; font-size: 30px; font-family: arial, sans-serif; } Equivale a: p { font: italic bold 30px arial,

56

Propriedades: ◦ text-align ◦ text-decoration ◦ text-indent ◦ text-transform ◦ letter-spacing 57

Propriedades:

text-align

text-decoration

text-indent

text-transform

letter-spacing

Propriedades: ◦ text-align ◦ text-decoration ◦ text-indent ◦ text-transform ◦ letter-spacing 57

57

h1 {   text-align: right; } h2 {   text-align: left; } h3 {  

h1 {

 

text-align: right;

}

h2 {

 

text-align: left;

}

h3 {

 

text-align: center;

}

p {

text-align: justify;

}

} h2 {   text-align: left; } h3 {   text-align: center; } p { text-align:

58

h1 {   text-decoration: underline; } h2 {   text-decoration: overline; } h3 {  

h1 {

 

text-decoration: underline;

}

h2 {

 

text-decoration: overline;

}

h3 {

 

text-decoration: line-through;

}

p {

text-decoration: none;

}

  text-decoration: line-through; } p { text-decoration: none; } underline overline line-through none 59

underline

overline

line-through

none

59

p { text-indent: 30px; } Código HTML: <p> As atualizações dos apps na Play Store,

p {

text-indent: 30px;

}

Código HTML:

<p>As atualizações dos apps na Play Store, do Google, serão mais rápidas Isso porque a loja de aplicativos do Android agora conta com um sistema de upgrade que baixa arquivos menores para o smartphone, segundo o Android Police.</p>

.

Visualização no browser:

As atualizações dos apps na Play Store, do Google, serão mais rápidas. Isso porque a loja de aplicativos do Android agora conta com um sistema de upgrade que baixa arquivos menores para o smartphone, segundo o Android Police.

Android agora conta com um sistema de upgrade que baixa arquivos menores para o smartphone, segundo

60

h1 {   text-transform: uppercase; } li {   text-transform: capitalize; } Propriedade

h1

{

 

text-transform: uppercase;

}

li

{

 

text-transform: capitalize;

}

Propriedade Efeito capitalize Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe"
Propriedade
Efeito
capitalize
Capitaliza a primeira letra de cada palavra.
Por exemplo: "john doe" transforma-se para "John Doe“.
uppercase
Converte todas as letras para maiúscula.
Por exemplo: "john doe" transforma-se para"JOHN DOE“.
lowercase
Converte todas as letras para minúscula.
Por exemplo: "JOHN DOE" transforma-se para"john doe“.
none
O texto é apresentado como foi escrito no código HTML.
Sem transformações.

61

h1 { letter-spacing: 6px; } p { letter-spacing: 3px; } espaçamento 6 espaçamento 3 62

h1 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;

}

espaçamento 6 espaçamento 3
espaçamento 6
espaçamento 3
h1 { letter-spacing: 6px; } p { letter-spacing: 3px; } espaçamento 6 espaçamento 3 62

62

Especifica a altura de uma linha de texto. p { line-height: normal ; } This

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
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 { This example demonstrates different line- line-height: 25px; } heights. You can change the
p
{
This example demonstrates different line-
line-height: 25px;
}
heights. You can change the line height by
clicking on one of the line-height properties on
the left. This text is where you will see the result
of the selected line-height property.

63

Define como o elemento será apresentado: <h1 class= "block">Texto1 </h1> <h1

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;

}
}
</h1> h1.block{ display: block; } h1.inline{ display: inline; } h1.none{ display: none; } 64

64

h1.visible { visibility: visible; } h1.hidden { visibility: hidden; } <h1 class="visible">This is a

h1.visible { visibility: visible;

}

h1.hidden { visibility: hidden;

}

{ visibility: visible; } h1.hidden { visibility: hidden; } <h1 class="visible">This is a visible

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

is an invisible heading</h1> <p>Notice that the invisible heading still takes up space.</p> 65

65

<ul class="myList"> <li>Café</li> <li>Chá</li>
<ul class="myList"> <li>Café</li> <li>Chá</li>
<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>

<ol class="myList"> <li>Café</li> <li>Chá</li> <li>Coca-Cola</li> </ol>

ol.myList { list-style-type: decimal;

}

Opções para listas OL:

decimal decimal-leading-zero lower-alpha lower-greek lower-latin lower-roman none upper-alpha upper-greek upper-latin upper-roman

lower-greek lower-latin lower-roman none upper-alpha upper-greek upper-latin upper-roman 67

67

Cursor especifica o tipo de cursor a ser exibido: ◦ auto ◦ crosshair ◦ default

Cursor especifica o tipo de cursor a ser exibido:

auto

crosshair

default

pointer

move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

◦ s-resize ◦ w-resize ◦ text ◦ wait ◦ help h1.cursor { cursor: wait; width: 200px;

h1.cursor { cursor: wait; width: 200px; background: #75AD45;

}
}

68

Pseudo-classes: ◦ link ◦ visited ◦ active ◦ hover 69

Pseudo-classes:

link

visited

active

hover

Pseudo-classes: ◦ link ◦ visited ◦ active ◦ hover 69

69

a { color: blue; text-decoration: none; } Os links da página ficarão em azul e

a

{

color: blue; text-decoration: none;

}

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

a { color: blue; text-decoration: none; } Os links da página ficarão em azul e sem

70

a:link { color: blue; } a:visited { color: purple; } a:active { color:red; } a:hover

a:link { color: blue;

}

a:visited { color: purple;

}

a:active { color:red;

}

a:hover { background-color: yellow;

} link é usada para links não visitados. visited é usada para links já visitados.
}
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

{

background-color: blue; color: white; font-family: verdana, arial; border: solid 1px blue; text-decoration: none;

}

a:hover { background-color: yellow; color: blue;

}

<a href="#">Institucional</a> <a href="#">Produtos</a> <a href="#">Serviços</a> <a href="#">Contatos</a>

<a href="#">Serviços</a> <a href="#">Contatos</a> 72

72

CLASS e ID são usados para classificar e/ou identificar elementos dentro de uma página. O

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.

elementos deve-se usar class e o atributo id deve ser usado quando se deseja identificar um

73

<style type="text/css"> ul.whitewine { color: #0000FF;} ul.redwine { color: #FF0000;} </style>

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

Sauvignon</li> <li>Merlot</li> <li>Pinot Noir</li> </ul> 74
Sauvignon</li> <li>Merlot</li> <li>Pinot Noir</li> </ul> 74

74

<style type="text/css"> #c1-2 { color: red; } </style> <h1 id="c1" >Capítulo

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

id="c2-1" >Capítulo 2.1</h2> <h3 id="c2-1-2" >Capítulo 2.1.2</h3> 75

75

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são

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.

detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital

76

O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica

O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.

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

Dormir cedo e acordar cedo faz o homem saudável, rico e sábio.

abaixo de autoria de Benjamin Franklin: Dormir cedo e acordar cedo faz o homem saudável ,

77

<p>Dormir cedo e acordar cedo faz o homem <span class="benefit"> saudável </span> ,
<p>Dormir cedo e acordar cedo faz o homem <span class="benefit"> saudável </span> ,

<p>Dormir cedo e acordar cedo faz o homem <span class="benefit">saudável</span>, <span class="benefit">rico</span> e <span class="benefit">sábio</span>.</p>

A folha de estilos:

span.benefit { color:red; }

É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve estar lembrado, deverá usar uma única id para cada um os três elementos <span>, conforme foi explicado na lição anterior.

deverá usar uma única id para cada um os três elementos <span>, conforme foi explicado na

78

Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo

Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, <div> é usado para agrupar um ou mais elementos nível de bloco.

O <div> sempre cria um bloco (caixa) com seu conteúdo.

Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira.

com seu conteúdo. Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma

79

<div id="democrats" > <ul> <li>Franklin D. Roosevelt</li> <li>Harry S.

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

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

<style> #democrats { background:blue; } #republicans { background:red; } </style>

</div> <style> #democrats { background:blue; } #republicans { background:red; } </style> 80
</div> <style> #democrats { background:blue; } #republicans { background:red; } </style> 80

80

A propriedade width destina-se a definir a largura de um elemento. A propriedade height ,

A propriedade width destina-se a definir a largura de um elemento.

A propriedade height, por sua vez, define a altura de um elemento.

Você pode usar a propriedade overflow para criar uma barra de rolagem.

por sua vez, define a altura de um elemento. Você pode usar a propriedade overflow para

81

<div class="box"> Daqui a apenas alguns anos, as pessoas não precisarão mais controlar os volantes

<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.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

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
83
<h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights. They

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

They are endowed with reason and conscience and should act towards one another in a spirit

84

h1 { font-family: arial, verdana; color: #000099; margin-top: 10px; margin-right: 255px; margin-bottom: 8px; margin-left:
h1 { font-family: arial, verdana; color: #000099; margin-top: 10px; margin-right: 255px; margin-bottom: 8px; margin-left:

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;

}

} 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
Define a distância da margem entre os elementos vizinhos. No caso do BODY, da margem

Define a distância da margem entre os elementos vizinhos. No caso do BODY, da margem do browser.

elementos vizinhos. No caso do BODY, da margem do browser. body { margin-top: 100px; margin-right: 40px;

body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;

}

do BODY, da margem do browser. body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;

86

Define a distância entre a borda e o conteúdo do elemento. body { margin: 100px

Define a distância entre a borda e o conteúdo do elemento.

Define a distância entre a borda e o conteúdo do elemento. body { margin: 100px 40px

body { margin: 100px 40px 10px 70px;

}

p

{ margin: 5px 50px 5px 50px;

}

h1 { background: yellow; padding: 20px 20px 20px 80px;

}

h2 { background: orange;

padding-left:120px;

}

5px 50px; } h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background:

87

border-width border-color border-style 88

border-width

border-width border-color border-style 88

border-color

border-width border-color border-style 88
border-width border-color border-style 88

border-style

border-width border-color border-style 88

88

h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset;

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;

border-style: dashed; border-color: blue; { } ul { border-width: thin; border-style: solid; border-color: orange; } 89

}

border-style: dashed; border-color: blue; { } ul { border-width: thin; border-style: solid; border-color: orange; } 89

89

h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick;

h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange;

}

90
90
p { border-width: 1px; border-style: solid; border-color: blue; } ou p { border: 1px solid

p {

border-width: 1px; border-style: solid; border-color: blue;

}

ou

p { border: 1px solid blue; }

p { border-width: 1px; border-style: solid; border-color: blue; } ou p { border: 1px solid blue;

91

table{ border-collapse:collapse; } table, td, th{ border:1px solid black; } <table> <tr> <th>
table{ border-collapse:collapse; } table, td, th{ border:1px solid black; } <table> <tr> <th>

table{

border-collapse:collapse;

}

table, td, th{ border:1px solid black;

}

} table, td, th{ border:1px solid black; } <table> <tr> <th> Código

<table> <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>

92

Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float.

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)

que o box e seu conteúdo são deslocados para a direita ou para a esquerda do

93

Se desejamos que um texto seja posicionado em volta de uma figura, basta flutuarmos a

Se desejamos que um texto seja posicionado em volta de uma figura, basta flutuarmos a imagem:

em volta de uma figura, basta flutuarmos a imagem: <div id="picture"> <img

<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>
etiam nostrarum voluntatum
</p>

#picture { float: left;

}

94

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado. A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear for, por exemplo, definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele

95

<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div>
<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div>

<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;

}

et antecedentes, etiam nostrarum voluntatum </p> #picture { float: left; } .floatstop { clear: both; }

96

et antecedentes, etiam nostrarum voluntatum </p> #picture { float: left; } .floatstop { clear: both; }
<div id="column1"> <p>Haec disserens qua de re agatur et in quo causa consistat non videt

<div id="column1"> <p>Haec disserens qua de re agatur et in

quo causa consistat non videt </div> <div id="column2">

<p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum </div>

<div

<p>nam nihil esset in nostra potestate

si res ita se haberet </div>

</p>

</p>

id="column3">

</p>

Quando os elementos tem o mesmo estilo, podem ser declarado juntos.

Quando os elementos tem o mesmo estilo, podem ser declarado juntos.

os elementos tem o mesmo estilo, podem ser declarado juntos. #column1, #column2, #column3 { float:left; width:
#column1, #column2, #column3 { float:left; width: 33%; }
#column1, #column2, #column3 {
float:left;
width: 33%;
}

97

.tabela { border: 1px solid black; width: 462px; height: 96px; padding: 1px; } .celula {
.tabela { border: 1px solid black; width: 462px; height: 96px; padding: 1px; } .celula {

.tabela { border: 1px solid black; width: 462px; height: 96px; padding: 1px;

}

.celula { float: left; border: 1px solid #008B00; width: 150px; height: 20px; margin: 1px; text-align: center;

}

.cabecalho { background-color: #90EE90;

}

<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> <div class="celula"></div> <div class="celula"></div> <div class="celula"></div> <div class="celula"></div> </div>

Uma nova linha é iniciada ao atingir a largura da div ‘tabela’.
Uma nova linha é
iniciada ao atingir a
largura da div ‘tabela’.
</div> Uma nova linha é iniciada ao atingir a largura da div ‘tabela’. 98

98

<div class="celula cabecalho">Código</div> <div class="celula
<div class="celula cabecalho">Código</div> <div class="celula

<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> <div class="celula"></div> <div class="celula"></div> <div class="celula newline"></div> <div class="celula"></div> <div class="celula"></div>

<div class="celula"></div> .celula { float: left; border: 1px solid #008B00; width:

.celula { float: left; border: 1px solid #008B00; width: 150px; height: 20px; margin: 1px; text-align: center;

}

.cabecalho { background-color: #90EE90;

}

.newline { clear: both;

}

É possível notar que a quebra de linha é feita com a propriedade clear, sem
É 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

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; }
.headline {
position:absolute;
top: 100px;
left: 200px;
}
página. A posição pode ser absoluta ou relativa. .headline { position:absolute; top: 100px; left: 200px; }

100

Existem 4 opções de Position: ◦ Static ◦ Relative ◦ Absolute ◦ Fixed 101

Existem 4 opções de Position:

Static

Relative

Absolute

Fixed

Existem 4 opções de Position: ◦ Static ◦ Relative ◦ Absolute ◦ Fixed 101

101

E o valor padrão dos elementos e segue o fluxo normal dos elementos da página.

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;

}

posterior, quando nenhum destes está posicionado de outra forma que não a estática. elemento { position:

102

#header { position: static; height: 50px; background-color: #4682B4; } #body { height: 300px; background-color: #87CEFA;
#header { position: static; height: 50px; background-color: #4682B4; } #body { height: 300px; background-color: #87CEFA;

#header { position: static; height: 50px; background-color: #4682B4;

}

#body { height: 300px; background-color: #87CEFA;

}

#footer { height: 30px; background-color: #1E90FF;

}

<div id="header">Cabeçalho</div> <div id="body">Corpo</div> <div id="footer">Rodapé</div>

<div id="body">Corpo</div> <div id="footer">Rodapé</div> 103

103

O posicionamento para posição relativa é calculado com base na posição original do elemento no

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.

Assim, o elemento ocupa um espaço após ser posicionado. #relative { position: relative; top: 10px; left:

#relative { position: relative; top: 10px; left: 10px;

}

104

#header { height: 50px; background-color: #4682B4; } #body { position: relative; top: 10px; height: 300px;
#header { height: 50px; background-color: #4682B4; } #body { position: relative; top: 10px; height: 300px;

#header { height: 50px; background-color: #4682B4;

}

#body { position: relative; top: 10px; height: 300px; background-color: #87CEFA;

}

#footer { position: relative; top: 20px; height: 30px; background-color: #1E90FF;

}

top: 20px; height: 30px; background-color: #1E90FF; } Note que seria possível ter o mesmo efeito usando
Note que seria possível ter o mesmo efeito usando margin.
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

Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa que não deixa nenhum espaço vazio após ser posicionado.

Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute.

Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.

então usar as propriedades left , right , top , e bottom para definir as coordenadas

106

#box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px;

#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;

}

50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left:
50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left:

107

O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A

O position: fixed; irá fixar a posição do elemento na coordenada que você definir.

A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente.

Pode ser usado, por exemplo, para criação de menus suspensos ou avisos sempre visíveis.

O IE6 não suporta position: fixed

por exemplo, para criação de menus suspensos ou avisos sempre visíveis. ◦ O IE6 não suporta

108

div#sidebar { position: fixed; top: 30px; right: 30px; width: 200px; height: 300px; background: #75AD45; border:

div#sidebar { position: fixed; top: 30px; right: 30px; width: 200px; height: 300px; background: #75AD45; border: 2px solid black; color: white; padding: 10px;

}

p

}

{ margin-right: 270px;

height: 300px; background: #75AD45; border: 2px solid black; color: white; padding: 10px; } p } {
height: 300px; background: #75AD45; border: 2px solid black; color: white; padding: 10px; } p } {

109

<div id="centro">Caixa Centralizada</div> #centro { position: absolute; top: 50%; left: 50%;

<div id="centro">Caixa Centralizada</div>

id="centro">Caixa Centralizada</div> #centro { position: absolute; top: 50%; left: 50%; width:
id="centro">Caixa Centralizada</div> #centro { position: absolute; top: 50%; left: 50%; width:

#centro { position: absolute; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -200px; border-style: ridge; border-width: 10px; border-color: #0033FF; background: #6495ED; color: #191970; line-height: 400px; text-align: center; font-family: verdana; font-size: 40px; font-weight: bold;

}

110

Camadas significam como os elementos se sobrepõem uns aos outros. Para fazer isto definimos para

Camadas significam como os elementos se sobrepõem uns aos outros.

Para fazer isto definimos para cada elemento um número índice (z-index).

O comportamento é que elementos com número índice maior se sobrepõem àqueles com menor número.

O método é simples, mas as possibilidades são muitas. Você pode colocar imagens sobre textos, texto sobre texto, etc.

é simples, mas as possibilidades são muitas. Você pode colocar imagens sobre textos, texto sobre texto,

111

#carta1, #carta2, #carta3 { position: absolute; width: 200px; height: 250px;

}

#carta1 { background-image: url("dois.png"); top: 50px; left: 50px; z-index: 1;

}

#carta2 { 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;

top: 150px; left: 150px; z-index: 3; cursor: pointer; <div id="carta1"></div> <div

<div id="carta1"></div> <div id="carta2"></div> <div id="carta3"></div>

<div id="carta3"></div> z-index: 1 z-index: 2 z-index: 3 } 112

z-index: 1

z-index: 2

<div id="carta3"></div> z-index: 1 z-index: 2 z-index: 3 } 112

z-index: 3

}

}

112

O que é < a href="#" class=" tooltip ">CSS< span > CSS é uma técnica
O que é < a href="#" class=" tooltip ">CSS< span > CSS é uma técnica

O que é <a href="#" class="tooltip">CSS<span> CSS é uma técnica de projetar páginas Web, separando conteúdo da apresentação.</span></a>?

a.tooltip{ position:relative;

a.tooltip span{ display: none;

}

a . tooltip:hover span{ display:block; position:absolute;

width:200px;

top:3em;

text-align:justify;

left:0;

padding:0;

color:#039;

text-decoration:none; border-bottom:2px dotted #039;

z-index:24;

}

a.tooltip:hover{

background:transparent;

color:#f00;

cursor:help;

font: 12px arial, verdana; padding:5px 10px; border:1px solid #999;

background:#e0ffff;

color:#000;

z-index:25;

}

}
}

113

<a href="#" class="galeria"><img src="foto1.jpg" class="miniatura" />

<a href="#" class="galeria"><img src="foto1.jpg" class="miniatura" /> <span><img src="foto1.jpg" alt="" class="ampliada" /></span></a>

class="ampliada" /></span></a> a.galeria span{ display: none; } a.galeria:hover span{
class="ampliada" /></span></a> a.galeria span{ display: none; } a.galeria:hover span{

a.galeria span{ display: none;

}

a.galeria:hover span{ display:block; position:absolute;

}

.miniatura { border: 0px solid;

width: 39px; height: 26px;

}

.ampliada { border: 0px solid; width: 300px; height: 200px;

}

114

Com o uso de CSS na construção de layouts para sites, é possível remodelar toda

Com o uso de CSS na construção de layouts para sites, é possível remodelar toda apresentação de um portal sem alterar seu conteúdo.

<div id="container"> <div id="header">Cabeçalho</div> <div id="wrapper"> <div id="content">Conteúdo</div> </div> <div id="navigation">Navegação</div> <div id="extra">Extra</div> <div id="footer">Rodapé</div> </div>

id="extra">Extra</div> <div id="footer">Rodapé</div> </div> 115

115

116
116
116
html,body{margin:0;padding:0} body{font: 76% arial,sans-serif} p{margin:0 10px 10px} div #header h1{height:80px;

html,body{margin:0;padding:0}

body{font: 76% arial,sans-serif} p{margin:0 10px 10px} div#header h1{height:80px; line-height:80px; margin:0; padding-left:10px; background:#EEE; color:#79B30B} div#content p{line-height:1.4}

div#navigation{background:#B9CAFF}

div#extra{background:#FF8539}

div#footer{background: #333;color: #FFF} div#footer p{margin:0; padding:5px 10px}

div#wrapper{float:left; width:100%} div#content{margin: 0 25% 0 25%} div#navigation{float:left; width:25%; margin-left:-100%} div#extra{float:left; width:25%; margin-left:-25%} div#footer{clear:left; width:100%}

margin-left:-100% } div #extra {float:left; width:25%; margin-left:-25% } div #footer {clear:left; width:100%} 117

117

div#wrapper{float:left; width:100%} div#content{ margin: 0 50% 0 0 } div#navigation{float:left; width:25%;
div#wrapper{float:left; width:100%} div#content{ margin: 0 50% 0 0 } div#navigation{float:left; width:25%;
div#wrapper{float:left; width:100%} div#content{ margin: 0 50% 0 0 } div#navigation{float:left; width:25%;

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%}

width:25%; margin-left:-50% } div#extra{float:left; width:25%; margin-left:-25%} div#footer{clear:left; width:100%} 118

118

div#container{ width:700px ; margin:0 auto} div#wrapper{float:left; width:100%} div#content{ margin: 0 150px 0 0 }
div#container{ width:700px ; margin:0 auto} div#wrapper{float:left; width:100%} div#content{ margin: 0 150px 0 0 }

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%}

margin-left:-700px } div#extra{float:left; width:150px; margin-left:-150px } div#footer{clear:left; width:100%} 119

119

div#wrapper{float:left; width:100%; margin-left:-200px } div#content{ margin-left:200px } div#navigation{ float:right ;
div#wrapper{float:left; width:100%; margin-left:-200px } div#content{ margin-left:200px } div#navigation{ float:right ;

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%}

float:right ; width:200px } div#extra{ float:right ; clear:right; width:200px } div#footer{clear:both; width:100%} 120

120

div#wrapper{ float:right ; width:70%} div#navigation{ float:left ; width:29.9%} div#extra{ clear:both ; width:100%}
div#wrapper{ float:right ; width:70%} div#navigation{ float:left ; width:29.9%} div#extra{ clear:both ; width:100%}

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%}

div#navigation{ float:left ; width:29.9%} div#extra{ clear:both ; width:100%} div#footer{ clear:left ;width:100%} 121

121

div#navigation{ float:left ; width:50%} div#extra{ float:right ; width:50%} div#footer{clear:both; width:100%} 122
div#navigation{ float:left ; width:50%} div#extra{ float:right ; width:50%} div#footer{clear:both; width:100%} 122

div#navigation{float:left; width:50%} div#extra{float:right; width:50%} div#footer{clear:both; width:100%}

div#navigation{ float:left ; width:50%} div#extra{ float:right ; width:50%} div#footer{clear:both; width:100%} 122

122

123
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="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>

Os 4 arquivos do site farão uso desta mesma estrutura.
Os 4 arquivos do site farão
uso desta mesma estrutura.
</div> </div> </body> </html> Os 4 arquivos do site farão uso desta mesma estrutura. 124

124

global.css

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; top: 20px; bottom: 20px; background: #999999; border: 1px solid #EEEEEE; width: 1000px; left: 50%; margin-left: -500px; clear:both; min-height: 300px;

}

.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; 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 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;

}

.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;

}

125

historia.html

<h1>Nascida da fusão de três tradicionais faculdades</h1> <img src="./img/portal.jpg" style="float:left; margin:0px 20px 5px 0px;"> <p>Somos um complexo educacional com mais de 45 anos educando e formando profissionais de liderança no mercado mundial.</p> <p>A tradição e o conceito da UNILINS são reconhecidos pelas empresas que buscam não apenas profissionais com boa formação, mas verdadeiros empreendedores com experiência e vida acadêmica ativa. A UNILINS engloba três tradicionais escolas superiores: Escola de Engenharia de Lins, Faculdade de Informática de Lins e Faculdade de Serviço Social de Lins.</p> <p>Mantida pela Fundação Paulista de Tecnologia e Educação - o maior pólo tecnológico do Oeste Paulista.</p> <p>Além da UNILINS, a Fundação mantém uma escola de Educação Infantil, Ensino Fundamental e Médio, e Cursos Técnicos na modalidade Pós-Médio "ETL" e o CETEC - Centro Tecnológico, que conta com cinco respeitados e modernos laboratórios que atendem aos alunos dos cursos oferecidos pela UNILINS e prestam serviços nas áreas da construção civil, informática, química, geoprocessamento, meio ambiente, energia elétrica, entre outras. Cerca de trezentos alunos da UNILINS realizam estágios nesses laboratórios. A experiência adquirida com a prática de serviços reais contratados pelo CETEC lhes garantem maior facilidade de ingresso no mercado de trabalho.</p>

serviços reais contratados pelo CETEC lhes garantem maior facilidade de ingresso no mercado de trabalho. </p>

126

127
127

127

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 /> 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>

.curso { margin-bottom: 30px;

}

.curso img { float: left; margin-right: 7px;

}

.curso h3 { color:

rgb(23,110,164);

margin-bottom: -15px;

}

.curso p { margin-left: 30px; line-height: normal; text-align: justify;

}

rgb(23,110,164); margin-bottom: -15px; } .curso p { margin-left: 30px; line-height: normal; text-align: justify; } 128

128

129
129

129

alunos.html

.aluno { float: left; border: 0px solid red; width: 235px; height: 300px; text-align: center;

}

.aluno img { width: 200 x;

p

height: 250px; border: 2px solid rgb(23,110,164);

}

.aluno span { text-family: Arial, Verdana; color: rgb(23,110,164);

}

<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> <div class="aluno"> <img src="./img/fotos/aluno03.jpg" /> <span>Aluno 01</span> </div>

< img src="./img/fotos/aluno03.jpg" /> <span> Aluno 01 </span> </div> 130

130

131
131

131

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>

.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 s an{

.

p 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

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.

sem alterar seu conteúdo. Ou seja, deve-se reestruturar o site através do CSS, mas sem modificar

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:

Utilizando CSS, criar o layout de um site conforme modelo a seguir: 134

134

Utilizando CSS, criar o layout de um site conforme modelo a seguir: 135

Utilizando CSS, criar o layout de um site conforme modelo a seguir:

135
135
Validador da W3C que faz uma verificação da folha de estilos e retorna um relatório

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/

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,
Propriedade Função Color Define a cor do texto Background Fundo (color, image, size, repeat, attachment,
Propriedade
Função
Color
Define a cor do texto
Background
Fundo (color, image, size, repeat, attachment, position.)
Font
Define a fonte (family, style, variant, weight, size)
Text
Formatação (align, decoration, indenti, transform, spacing)
Display
Forma de exibir (block, inline, none)
Visibility
Visível (visible, hidden)
Link
Define o estilo de links (link, visited, active, hover)
Class e Id
Classificar e identificar elementos
Span e Div
Agrupar e estruturar um documento
Width e Height
Largura e altura dos elementos
Margin
Define a margem entre elementos (top, right, bottom, left)
Padding
Define o espaço interno do conteúdo (top, right, bottom, left)
Border
Define a borda de um elemento (width, style, color)
Float
Flutua elementos na página
Clear
Equivalente a quebra de linha, mas para objetos
Position
Posição na tela (static, relative, absolute, fixed)
Cursor
Define a aparência do cursor
Z-index
Indica a camada para objetos sobrepostos
137
Elaborar um site completo para uma empresa. O site deve utilizar o maior número possível

Elaborar um site completo para uma empresa. O site deve utilizar o maior número possível de recursos, tais como fotos, listas, tabelas, links, efeitos, etc.

Sugestões de temas: centro de estética, loja de automóveis, roupas e acessórios, loja de brinquedos, eletroeletrônicos, agência de viagens, pet shop, cultura, artesanato, culinária, dicas de moda, tecnologia, notícias, esportes, cinema, academia, imobiliária.

Não será permitido utilizar os modelos de layout criados durante as aulas.

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

Javascript (JS) é uma linguagem de programação executada no browser do lado do cliente.

Com JS é possível realizar tratamentos e criar efeitos visuais.

Apesar de ser outra linguagem, a sintaxe é similar a C, C++, C#, Java e PHP.

Por questões de segurança, JS não pode acessar banco de dados e nem arquivos.

é similar a C, C++, C#, Java e PHP. Por questões de segurança, JS não pode

140

Com JS é possível realizar o tratamento e validação de campos de formulários antes de

Com JS é possível realizar o tratamento e validação de campos de formulários antes de submeter os dados.

A grande vantagem é que o processamento será mais rápido, pois somente depois de validados é que os dados são enviados ao servidor.

É recomendado fazer as validações via JS. Mas, não devemos esquecer que o usuário pode desligar a execução do JS.

recomendado fazer as validações via JS. Mas, não devemos esquecer que o usuário pode desligar a

141

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8">
<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8">

<!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>

document.write('Exemplo Javascript'); </script> </body> </html> 142

142

Todo código Javascript deve estar dentro da tag <script></script> . A definição da linguagem utilizada

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.

responsável por escrever no browser. O código JS será executado no local onde for inserido dentro

143

<input type = "button" value = "Google" onClick = "window.open('http://www.google.com',
<input type = "button" value = "Google" onClick = "window.open('http://www.google.com',

<input type = "button" value = "Google" onClick = "window.open('http://www.google.com', '',

'width=500,height=400,menubar=no');">

width e height – definem a dimensão da nova janela menubar – define se a
width e height – definem a dimensão da nova janela
menubar – define se a barra de menu deverá aparecer
> width e height – definem a dimensão da nova janela menubar – define se a

144

<script language="javascript" type="text/javascript"> alert(' Janela de Alerta em Javascript
<script language="javascript" type="text/javascript"> alert(' Janela de Alerta em Javascript

<script language="javascript" type="text/javascript">

alert('Janela de Alerta em Javascript!');

</script>

type="text/javascript"> alert(' Janela de Alerta em Javascript !'); </script> 145

145

<script> alert('Você será redirecionado para outro site!');
<script> alert('Você será redirecionado para outro site!');

<script> alert('Você será redirecionado para outro site!'); location='http://www.google.com.br'; </script>

será redirecionado para outro site!'); location='http://www.google.com.br'; </script> 146

146

<script> if( confirm('Deseja fazer isso?') ==true) { alert('Confirmado'); } else {
<script> if( confirm('Deseja fazer isso?') ==true) { alert('Confirmado'); } else {

<script> if(confirm('Deseja fazer isso?')==true) { alert('Confirmado');

}

else { alert('Cancelado');

}

</script>

A instrução if funciona de forma similar as linguagens C, C++, C#, Java, PHP
A instrução if funciona de
forma similar as linguagens
C, C++, C#, Java, PHP
} </script> A instrução if funciona de forma similar as linguagens C, C++, C#, Java, PHP

147

var r, i, n; n = prompt('Informe o valor da tabuada: ',''); for(i=1; i<=10; i++)
var r, i, n; n = prompt('Informe o valor da tabuada: ',''); for(i=1; i<=10; i++)
var r, i, n; n = prompt('Informe o valor da tabuada: ',''); for(i=1; i<=10; i++)

var r, i, n;

n = prompt('Informe o valor da tabuada: ',''); for(i=1; i<=10; i++) {

da tabuada: ',''); for(i=1; i<=10; i++) { r = n document.write(n + ' x ' +

r = n

document.write(n + ' x ' + i + ' = ' + r + '<br />');

* i;

}

var r, i = 1, n;

n = prompt('Informe o valor da tabuada: ',''); while(i<=10) {

= document.write(n + ' x ' + i + ' = ' + r + '<br />'); i++;

r

n * i;

}

{ = document.write(n + ' x ' + i + ' = ' + r +

148

<script type="text/javascript"> var d = new Date(); time = d.getHours(); if (time<12) {
<script type="text/javascript"> var d = new Date(); time = d.getHours(); if (time<12) {

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

</script>

149

<SCRIPT> var s = new Array('Domingo', 'Segunda-feira', 'Terça-feira',
<SCRIPT> var s = new Array('Domingo', 'Segunda-feira', 'Terça-feira',
<SCRIPT> var s = new Array('Domingo', 'Segunda-feira', 'Terça-feira',

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

+ " de " + mes + " de " + ano; document.write(hoje); </SCRIPT> Semana: 0
Semana: 0 – 6 Mês: 0 – 11
Semana: 0 – 6
Mês: 0 – 11

150

<script> document.write("SCREEN RESOLUTION: ") document.write( screen.width + "x")
<script> document.write("SCREEN RESOLUTION: ") document.write( screen.width + "x")

<script> document.write("SCREEN RESOLUTION: ") document.write(screen.width + "x") document.write(screen.height + "<br />") document.write("AVAILABLE VIEW AREA: ") document.write(window.screen.availWidth + "x") document.write(window.screen.availHeight + "<br />") </script>

SCREEN RESOLUTION: 1920x1080 AVAILABLE VIEW AREA: 1920x1032
SCREEN RESOLUTION: 1920x1080
AVAILABLE VIEW AREA: 1920x1032

151

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8">
<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8">

<!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"> var userAgent = navigator.userAgent.toLowerCase(); var devices = new Array('nokia', 'iphone', 'blackberry', 'sony', 'lg', 'htc_tattoo', 'samsung', 'symbian', 'SymbianOS', 'elaine', 'palm', 'series60', 'windows ce', 'android', 'obigo', 'netfront', 'openwave', 'mobilexplorer', 'operamini');

noscript – é executado se o browser não tiver javascript navigator.userAgent – informações do browser
noscript – é executado se o browser não tiver javascript
navigator.userAgent – informações do browser utilizado
devices – lista de dispositivos mobiles

152

function mobileDetect(userAgent, devices) { for(var i = 0; i < devices.length; i++) { if (userAgent.search(devices[i])
function mobileDetect(userAgent, devices) { for(var i = 0; i < devices.length; i++) { if (userAgent.search(devices[i])

function mobileDetect(userAgent, devices) { for(var i = 0; i < devices.length; i++) { if (userAgent.search(devices[i]) > 0) { return true; }

}

return false;

}

if (mobileDetect(userAgent, devices)) { location = 'http://www.seusite.com/mobile.html';

}

else { location = 'http://www.seusite.com/classic.html';

}

</script>

</head>

<body>

</body>

</html>

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

153

1. Criar um programa em javascript que abra uma janela de confirmação perguntando: ‘Deseja informar

1. Criar um programa em javascript que abra uma janela de confirmação perguntando: ‘Deseja informar seu nome?’. Em caso negativo, apresentar uma janela de alerta com a mensagem ‘Operação Cancelada!’. Caso contrário, abrir uma janela de prompt solicitando um nome. Enquanto o nome informado estiver em branco, abrir novamente a janela de prompt. Após informar o nome, apresentá-lo em uma janela de alerta.

estiver em branco, abrir novamente a janela de prompt. Após informar o nome, apresentá-lo em uma

154

Com o Javascript podemos validar dados de um formulário antes de enviá-los para um servidor.

Com o Javascript podemos validar dados de um formulário antes de enviá-los para um servidor. Podemos dizer que é uma validação do lado cliente.

Algumas das vantagens deste tipo de validação é que economiza tráfego para o servidor, tem resposta mais rápida por atuar diretamente na máquina do cliente e envia os dados para o servidor quando estes já estão validados.

Em contrapartida, é uma validação insegura uma vez que o código fica visível e pode ser alterado, e, desta forma, enviar dados inválidos para o servidor. Por isso é sempre aconselhável validar, também, os dados no servidor.

enviar dados inválidos para o servidor. Por isso é sempre aconselhável validar, também, os dados no

155

<script> function mostrar() { var x = document.cadastro.nome.value ; alert('Seu nome é: ' + x);
<script> function mostrar() { var x = document.cadastro.nome.value ; alert('Seu nome é: ' + x);

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

<input type="button" value="Enviar" onClick="mostrar();" > </form> 156

156

/* form.js */ function mostrar() { var x = document.cadastro.nome.value ; alert('Seu nome é: '

/* form.js */ function mostrar() { var x = document.cadastro.nome.value; alert('Seu nome é: ' + x);

}

<!-- form.html -->

<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
O arquivo externo deve ser a extensão .js
Deve ser carregado dentro do head

157

<script> function mostrar() { var sexo = document.cadastro.sexo; if( sexo[0].checked ) alert('Sexo
<script> function mostrar() { var sexo = document.cadastro.sexo; if( sexo[0].checked ) alert('Sexo

<script> function mostrar() { var sexo = document.cadastro.sexo;

if(sexo[0].checked)

alert('Sexo MASCULINO'); else if(sexo[1].checked) alert('Sexo FEMININO');

else

if( sexo[1].checked ) alert('Sexo FEMININO'); else alert('Sexo não selecionado'); } </script>

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>

<input type="button" value="Enviar" onClick="mostrar();"> </form> 158

158

<script> function mostrar() { var uf = document.cadastro.uf.value ; alert('Estado selecionado: ' + uf); }
<script> function mostrar() { var uf = document.cadastro.uf.value ; alert('Estado selecionado: ' + uf); }
<script> function mostrar() { var uf = document.cadastro.uf.value ; alert('Estado selecionado: ' + uf); }

<script> function mostrar() { var uf = document.cadastro.uf.value; alert('Estado selecionado: ' + uf);

}

</script>

<form name="cadastro"> 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>

<input type="button" value="Enviar" onClick="mostrar();"> </form> 159

159

<script> function mostrar() { if( document.cadastro.uf.selectedIndex==0 ) { alert('É preciso selecionar um
<script> function mostrar() { if( document.cadastro.uf.selectedIndex==0 ) { alert('É preciso selecionar um

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

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

<input type="button" value="Enviar" onClick="mostrar();"> </form> 160

160

<script> function somar() { var num1 = document.calc.num1.value; var num2 = document.calc.num2.value; var
<script> function somar() { var num1 = document.calc.num1.value; var num2 = document.calc.num2.value; var

<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

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>

onClick="somar();"> </form> parseInt – converte para inteiro parseFloat – converte
parseInt – converte para inteiro parseFloat – converte para real isNaN – verifica se é
parseInt – converte para inteiro
parseFloat – converte para real
isNaN – verifica se é um valor numérico

161

<script> function somar() { var num1 = document.calc.num1.value; var num2 = document.calc.num2.value; var
<script> function somar() { var num1 = document.calc.num1.value; var num2 = document.calc.num2.value; var

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

readonly> <input type="button" value="Somar" onClick="somar();"> </form> 162

162

<script> function validar() { var email = document.envio.email; if( email.value=='' ) { alert('O
<script> function validar() { var email = document.envio.email; if( email.value=='' ) { alert('O

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

<input type="button" value="Enviar" onClick="validar();"> </form> 163

163

function validar() { var email = document.envio.email; var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.
function validar() { var email = document.envio.email; var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.

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!');

}

}

é válido!'); email.value = ''; email.focus(); } else { alert('Campo e-mail é válido!'); } } 164

164

<script type="text/javascript"> function PermiteSomenteNumeros (event) { var charCode = (event.which) ?
<script type="text/javascript"> function PermiteSomenteNumeros (event) { var charCode = (event.which) ?

<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);" />

type="text" name="numero" onkeypress="return PermiteSomenteNumeros(event); " /> 165

165

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8">
<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8">

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Título editável com JavaScript</title> <style type="text/css"> h1 { font: "times new roman", times, serif;

color:#900;

}

</style>

type="text/css"> h1 { font: "times new roman", times, serif; color:#900; } </style> 166

166

<script type="text/javascript"> window.onload = function(){ function editTitle(){ var title = document.
<script type="text/javascript"> window.onload = function(){ function editTitle(){ var title = document.

<script type="text/javascript"> window.onload = function(){ function editTitle(){ var title = document.getElementsByTagName('h1')[0]; var span = title.firstChild; span.onmouseover = function(){ this.title = 'Clique para editar o texto'; this.style.background = '#f5f5f5';

}

span.onmouseout = function(){ this.title = ''; this.style.background = '';

}