Você está na página 1de 130

O QUE UM BROWSER

0 Browser o programa que usamos para navegar na

Internet : Internet Explorer, Netscape, Google Chrome, Safari, Mozilla Firefox, entre outros.

0 Falamos em pgina na Internet porque browser na

realidade significa folheador.

Prof. Valria Helena Politi Gerbelli

ONDE FAZER UM SITE?


0 Podemos fazer no Bloco de Notas, ou usar softwares

que agilizam seu desenvolvimento como Web Expression da Microsoft, Alleycode HTML Editor, Visual Studio na parte de HTML, DreamWeaver, etc. 0 O importante saber que todo arquivo deve ter sua extenso .htm ou .html e deve ser texto puro (caracter ASCII), nunca use e formate suas pgina no word ou outros software.

Prof. Valria Helena Politi Gerbelli

H.T.M.L.
0 HyperText Markup Language Linguagem por Marca

de Hipertexto Hipertexto seriam os links. 0 HTML uma linguagem de formatao, esttica que permite formatar apenas os textos. Seus comando veem dentro de tags <> (sinais de maior e menor). 0 Quase todas as tags tm a sua correspondente de fechamento : <comando> texto formado </comando>.

Prof. Valria Helena Politi Gerbelli

HTML - ESTRUTURA
Veja s : O Seu Texto Aqui . Para digitar os comandos tanto faz ser maiscula ou minscula, pois HTML no Case Sensitive. Vejamos a estrutura da Linguagem :
<html> <head> <title> TITULO DA PGINA - BARRA DE TTULO </title> </head> <body> Aqui vai o seu texto, sua tabela, sons, figuras, listas, tudo o que voc quiser </body> </html>

Prof. Valria Helena Politi Gerbelli

BODY
0 A TAG BODY responsvel por configurar o corpo da

pgina, ou seja, tudo o que voc tem no site, fica dentro do corpo da pgina. Existe apenas um <BODY> na pgina. Se voc tiver alguma coisa a mais para colocar referente ao corpo da pgina, altere a TAG <BODY> e no insira outra TAG.

<body bgcolor="cor" background="arquivo.ext topmargin="n" bottommargin="n" leftmargin="n" rightmargin="n" scroll="yes/no" text="cor" bgproperties="tipo">

Prof. Valria Helena Politi Gerbelli

BODY - PROPRIEDADES
0 BODY = Corpo o corpo da pgina o incio de tudo, S TEM UM NA SUA PGINA. Se escrever mais 0 0

0 0 0 0 0

de um BODY na pgina, d BODE na nota ! entendeu ? Utilizando apenas esta tag, sem parmetro algum, a cor de fundo padro branco e a cor da letra preto. BGCOLOR = Background Color Cor de fundo da pgina, aqui voc pode escrever a cor em Ingls ou usar o cdigo RGB (Red Green Blue). Veja a tabela de cores aqui BACKGROUND = Fundo uma figura de fundo que pode ser colocada na sua pgina. Se a figura no ocupar o espao todo da tela, ela ir se repetir at preench-la. Em HTML no possvel posicionar a figura centralizada, apenas utilizando Estilo. O nome do arquivo deve ser escrito corretamente e no deve estar com letra maiscula, muito menos o arquivo da figura. topmargin = margem do topo Aqui definimos um margem a partir do topo da pgina. Este nmero definido em Pixels. bottommargin = margem do rodap Aqui definimos um margem a partir do fim da pgina. Este nmero definido em Pixels. leftmargin = margem da esquerda Aqui definimos um margem a partir do lado esquerdo da pgina. Este nmero definido em Pixels. rightmargin = margem da direita Aqui definimos um margem a partir do lado direito da pgina. Este nmero definido em Pixels. scroll = barra de rolagem Se colocarmos o valor no , a barra de rolagem ser omitida, pois mesmo que no ela no fique ativada por no existir texto suficiente para sua ativao, o seu espao fica reservado, ela fica inativa, portanto ocupa luga na pgina. text = texto Definimos um cor padro para o texto, que inicialmente preto. Tipo SE ser fixa, a figura de fundo no rola junto com o texto, use FIXED, caso contrrio, omita a propriedade

Prof. Valria Helena Politi Gerbelli

TTULOS - H
0 Os ttulos so utilizados para definir um tamanho de

ttulo qualquer, e este d um espao antes e depois do ttulo. As tags de ttulos tem fechamento e vo de 1 a 6, sendo o 1 o maior tamanho. 0 <h1 align=alinhamento> Titulo </h1>
o Alinhamentos podem ser :

center = centralizado right = direita left = esquerda padro

Prof. Valria Helena Politi Gerbelli

CRIANDO PARGRAFO
Quando queremos pular de pargrafo, ou seja, pular uma linha e iniciar a digitao, utilizamos a tag P (paragraph) : <p align=alinhamento> O alinhamento pode ser : Left = esquerda (padro) Right=direita Center=centralizado

Prof. Valria Helena Politi Gerbelli

PULANDO DE LINHA
Quando queremos pular de linha, ou seja, simplesmente iniciar uma nova linha no texto utilizamos a tag BR (Break Row). <br>

Prof. Valria Helena Politi Gerbelli

IMAGENS
0 Para inserir imagens dentro da pgina utilizamos a seguinte tag : 0 <img src=arquivo.ext width=n height=n alt=texto vspace=n hspace=n border=n align=alinhamento lowsrc=arquivo.ext >
img abreviao de image (imagem) src source (origem) exemplo sol.jpg ou crianca.gif width largura height altura alt texto alternativo vspace vertical space espao vertical entre a figura e o texto hspace horizontal space - espaco horizontal entre a figura e o texto border insere borda na figura align alinhamento do texto adjacente lowsrc baixa resoluo - carrega figura arquivo de baixa resoluo antes de carregar a figura original
Prof. Valria Helena Politi Gerbelli

TIPOS DE ALINHAMENTO
TOP alinhamento no topo da imagem Se houver mais texto continua nesta parte MIDDLE alinhamento no meio da imagem Se houver mais texto continua nesta parte

BOTTOM alinhamento no rodap da imagem Se houver mais texto continua nesta parte
Prof. Valria Helena Politi Gerbelli

TIPOS DE ALINHAMENTO
Alinhamento da figura esquerda e texto direita bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
0 0 0 0 Alinhamento da figura direita e texto

esquerda bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.

Prof. Valria Helena Politi Gerbelli

LINHA DIVISRIA - HR
0 Horizontal Row Linha Horizontal, insere uma linha horizontal para

dividir pargrafos, ttulos, etc.

<hr color="cor" width="n" size="n" align=alinhamento noshade>


COLOR
Define a cor da linha, caso seja omitido este parmetro, a cor da linha fica transparente.

NOSHADE
Retira a sombra padro da linha, tornando-a slida.

WIDTH
Define a largura da linha, pode especificar nmero relativos (%) ou em pixels.

SIZE
Define a espessura da linha.

ALIGN
Alinha a linha para esquerda ou direita (left, right ou center)

Prof. Valria Helena Politi Gerbelli

LINKS
0 Links so ligaes com outras pginas na Internet, com outros documentos

ou com parte do mesmo documento:

o <a href=URL target=destino title=titulo> Texto para Link </a>

0 A Significa ANCHOR - Ancora. 0 HREF Horizontal Reference - Referncia Horizontal, aqui que colocamos o

nome do arquivo, local ou endereo da Internet que queremos abrir. 0 TARGET Destino - onde dever ser aberta a URL. Os tipos so : _blank - abre uma nova janela do Browser para exibir o documento _parent - abre o documento no frame principal ou na janela que contm o link. _self - este o padro, abre o documento na janela do link, por ser o padro no precisa ser especificado. _top - abre o documento na janela inteira do Browser, removendo todos os frames, se no existir frame ele age como o _self. 0 TITLE Ttulo, abre um texto, como a dica, ao apontar o mouse.

Prof. Valria Helena Politi Gerbelli

EXERCCIO EM DUPLA
Escolha um assunto que gostem e faam 3 links sobre este assunto. Utilize todos os comandos HTML que foram vistos at agora inclusive links. FRUTAS SUCOS LEGUMES LINKS PGINA PRINCIPAL chama-se index.html FRUTAS chamar arquivo frutas.html SUCOS chamar arquivo sucos.html LEGUMES - chamar arquivo legumes.html Todos os links devero voltar para a pgina principal val.politi@gmail.com
Prof. Valria Helena Politi Gerbelli

TABELA
0 Criando Tabela 0 Para criar tabelas, interessante termos em mente que criamos as tabelas na horizontal : a linha e cada clula. 0 As principais tags para utilizarmos na tabela so :
table Tabela e sua respectiva de fechamento ao final /table TR Table Row Linha da Tabela TH Table Head Cabealho de Tabela TD Table Data Dados da Tabela

Prof. Valria Helena Politi Gerbelli

EXEMPLO
TABELA DE PROFESSORES PROFESSOR Valria Rosinha Viviane MATRIA DDW LOP OSA

Prof. Valria Helena Politi Gerbelli

EXEMPLO
<Table> TABELA DE PROFESSORES <TR> <TH> PROFESSOR</TH> <TR> <TD> Valria </TD> <TR> <TD> Rosinha </TD> <TH> MATRIA </TH> </TR> <TD> DDW </TD> </TR> <TD> <TD> LOP </TD> </TR> </TD> </TR>

<TR> <TD>
</Table>

Viviane

</TD>

OSA

Prof. Valria Helena Politi Gerbelli

PROPRIEDADES TABLE
o Border=n = espessura da borda o Align=alinhamento = center/right/left (padro) o Width=n% = tamanho da tabela o Bgcolor=cor = cor de fundo

o Background=nome.ext = figura de fundo


o Cellpadding =n = espaamento do texto para borda das

clulas o Cellspacing=n = espaamento entre as clulas o Bordercolor=cor = cor das bordas

Prof. Valria Helena Politi Gerbelli

PROPRIEDADES TR E TH
o Bgcolor=cor = cor de fundo o Colspan=n = mescla colunas o Rowspan=n = mescla linhas

Prof. Valria Helena Politi Gerbelli

PROPRIEDADES TD
o Bgcolor=cor = cor de fundo o Background=nome.ext = figura de fundo o Colspan=n = mescla colunas o Rowspan=n = mescla linhas

Prof. Valria Helena Politi Gerbelli

FRAME
0 Frame significa quadros, ou seja, significa que

conseguimos dividir o browser em quadros e ver mais de uma pgina ao mesmo tempo.

Prof. Valria Helena Politi Gerbelli

FRAMESET
<html> <head> <title> TITULO DA PGINA </title> </head> <frameset cols="20%,80%" border="0"> </frameset> </html>

Prof. Valria Helena Politi Gerbelli

FRAME SRC
<frame src="pagina1.html" noresize> <frame src="pagina2.html" scrolling="no">

Prof. Valria Helena Politi Gerbelli

TAG COMPLETA
<html> <head> <title> TITULO DA PGINA </title> </head> <frameset cols="20%,80%" border="0"> <frame src="pagina1.html" noresize> <frame src="pagina2.html" scrolling="no"> </frameset> </html>

Prof. Valria Helena Politi Gerbelli

A TAG FRAMESET
0 FRAMESET Inicio da configurao do Frame. 0 COLS="n%,n%" ou ROWS="n%,n%"

COLS = Colunas, define quantas colunas ser dividida sua tela. Pense sempre em % (porcentagem), ou seja, sua tela tem 100%, 20% para uma coluna e 80% para outra. Se preferir trabalhar com linhas utilize ROWS.
0 FRAME SRC="arquivo.ext" Aqui, definimos qual o arquivo que ir aparecer no

frame dividido. Saiba que se voc dividir sua tela em Colunas, a primeira coluna

receber o arquivo da primeira linha do FRAME SRC, e assim sucessivamente.


0 NAME="nome" definido um nome, que ser utilizado quando tivermos link na

pgina, esse nome, ser utilizado no parmetro TARGET.


Prof. Valria Helena Politi Gerbelli

A TAG FRAMESET
0 NORESIZE para no permitir que atravs das bordas

do frame, ele seja REDIMENSIONADO. 0 BORDER="0" Se voc no desejar que o frame tenha bordas, utilize o parmetro BORDER com o valor zero, caso contrrio, omita-o. 0 SCROLLING="NO" Se ter barra de rolagem, omita o parmetro SCROLLING, caso contrrio, utilize-o com o valor NO.

Prof. Valria Helena Politi Gerbelli

RESULTADO

Prof. Valria Helena Politi Gerbelli

DIVIDINDO DE OUTRA FORMA


<html> <head> <title> TITULO DA PGINA </title> </head> <frameset rows="20%,80%"> <frame src="pagina1.html"> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html"> </frameset> </frameset> </html>
Prof. Valria Helena Politi Gerbelli

RESULTADO

Prof. Valria Helena Politi Gerbelli

IFRAMES
0 So frames dentro de bodys: <html> <head> <title> TITULO DA PGINA </title> </head> <body> Coloque aqui sua pgina, suas imagens, e onde voc desejar colocar um IFRAME insira-o. <img src="ma2anosp.jpeg"> <iframe src="pagina1.html" width="n%" height="n%" name="nome" frameborder="n"></iframe> Continue com a pgina se for necessrio. </body> </html>

Prof. Valria Helena Politi Gerbelli

RESULTADO IFRAME

Prof. Valria Helena Politi Gerbelli

ESTILO
0 Estilo permite voc fazer tudo o que HTML no deixa

voc fazer, desde mudar a carinha do link, at criar bordas estilizadas para figuras, etc.

0 O estilo foi criado para permitir que um Web Designer

possa definir uma formatao para todo um site e se houver alguma alterao, essa seja feita apenas em um nico arquivo agilizando assim a manuteno de sites.

Prof. Valria Helena Politi Gerbelli

VANTAGENS DO CSS CASCADE STYLE SHEET


0 A grande vantagem do uso de CSS a de separar a

marcao HTML, da apresentao do site. Em outras palavras, o HTML responsvel por estruturar e marcar o contedo, e o CSS pelo visual do documento. marca e estrutura textos, cabealhos, pargrafos, links, botes, formulrios, imagens e demais elementos da pgina e CSS define cores, posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado apresentao.
Prof. Valria Helena Politi Gerbelli

0 HTML

TIPOS DE ESTILO
0 InLine Local fica junto com a TAG HTML que deseja

mudar <h1 style=color:red> MEU TTULO </h1>

0 Perceba que o atributo style est dentro da tag H1,

porque esta tag que eu desejo alterar a cor do texto, por isso chamada de tag local.

Prof. Valria Helena Politi Gerbelli

TIPOS DE ESTILO
0 Interno fica dentro da pgina HTML dentro da seo HEAD. Precisa ter o

nome da tag que ser alterada :

<html> <head> <style> h1 { color : red; } </style> <title> Minha Pgina de Estilos </title> </head> <body> <h1> Estilo Interno </h1> </body> </html>
Prof. Valria Helena Politi Gerbelli

TIPOS DE ESTILO
0 Externo fica em um arquivo fora da pgina HTML, e seu

nome tem a extenso .css e deve ser linkado para a pgina que ir utiliz-lo.

<html> <head> <link rel=stylesheet href=estilo_val.css type=text/css> <title> Minha Pgina de Estilos </title> </head> <body> <h1> Estilo Interno </h1> </body> </html>
Prof. Valria Helena Politi Gerbelli

ESTILO_VAL.CSS
h1 { color : red; }

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : index.html


<html> <head> <title> Testando Estilo </title> </head> <frameset rows=20%,80% border=0>

<frame src=menu.html noresize>


<frame src=entrada.html name=leitura> </frameset> </html>
Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : menu.html


<html> <head> <link rel=stylesheet href=estilo1.css type=text/css> <title> Menu </title> </head> <body> <table width=100%> <tr> <td> <a href=fontes.html target=leitura>Fontes</a> </td> <td> <a href=links.html target=leitura>Links</a> </td> <td> <a href=bordas.html target=leitura>Bordas</a> </td> </tr> </table> </body> </html>
Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : entrada.html


<html> <head> <link rel=stylesheet href=estilo1.css type=text/css> <title> Menu </title> </head> <body> <h1> BEM VINDO AO SITE DE ESTILOS </h1> <h2> Estilo vai facilitar sua vida </h2> <h3> Utilize o menu ao lado para navegar no site </h3> <p> <center><img src=sol.png></center> </body> </html>
Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : estilo1.css


body { background:black; color:white; line-height:20px; } h1 { color:yellow; font-weight:bold; font-family:Script,Georgia; } h2 { color:cyan; text-align:center; } a:link { color:white; text-decoration:none; font-family:Comic Sans Ms; } a:visited { color:yellow; text-decoration:none; font-family:Comic Sans Ms; } a:hover { color:orange; text-decoration:none; font-size:16px; }

Prof. Valria Helena Politi Gerbelli

FUNDOS DIFERENTES
0 Com estilo possvel posicionar uma figura no corpo

da pgina, os passos so os seguintes :


o Insira a figura;

o Determine se haver repetio ou no


o Determine a posio da repetio se houver

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : esquerda.html


<html> <head> <link rel=stylesheet href=fundos.css type=text/css> <title> FUNDOS </title> </head> <body class=esquerda> Fundo posicionado esquerda </body> </html>

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : direita.html


<html> <head> <link rel=stylesheet href=fundos.css type=text/css> <title> FUNDOS </title> </head> <body class=direita> Fundo posicionado direita </body> </html>

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : topo.html


<html> <head> <link rel=stylesheet href=fundos.css type=text/css> <title> FUNDOS </title> </head> <body class=topo> Fundo posicionado ao topo </body> </html>

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : baixo.html


<html> <head> <link rel=stylesheet href=fundos.css type=text/css> <title> FUNDOS </title> </head> <body class=baixo> Fundo posicionado abaixo </body> </html>

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : posicionado.html


<html> <head> <link rel=stylesheet href=fundos.css type=text/css> <title> FUNDOS </title> </head> <body class=posicionado> Fundo posicionado abaixo </body> </html>

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : centralizado.html


<html> <head> <link rel=stylesheet href=fundos.css type=text/css> <title> FUNDOS </title> </head> <body class=centralizado> Fundo centralizado </body> </html>

Prof. Valria Helena Politi Gerbelli

EXERCCIO - nome : fundos.css


.esquerda { background-image:url(sol.jpg); background-repeat:repeat-y; } .direita { background-image:url(sol.jpg); background-repeat:repeat-y; background-position:right; } .topo { background-image:url(sol.jpg); background-repeat:repeat-x; }

Prof. Valria Helena Politi Gerbelli

EXERCCIO - nome : fundos.css


.baixo { background-image:url(sol.jpg); background-repeat:repeat-x; background-position:bottom; } .posicionado { background-image:url(sol.png); background-repeat:no-repeat; background-position:300px 50px; // margem esquerda e do topo } .centro { background-image:url(sol.jpg); background-repeat:no-repeat; background-position:center; }
Prof. Valria Helena Politi Gerbelli

MUDANDO CURSOR
0 possvel mudar a aparncia do cursor com estilo,

apenas use a propriedade cursor:tipo;

Prof. Valria Helena Politi Gerbelli

BORDAS/CAIXAS
0 As caixas (bordas) podem ser usadas em pargrafos,

tabelas ou formulrios e at em frames. Eu criei um estilo interno, com nomes diferentes para os pargrafos, na verdade nomeei os pargrafos com os tipos das bordas. As bordas podem ter espaos entre elas e o texto, podem ter os quatro lados de estilos diferentes, ou ainda os quatro lados com cores diferentes e at com espessuras diferentes.

Prof. Valria Helena Politi Gerbelli

EXEMPLO BORDAS

Prof. Valria Helena Politi Gerbelli

EXEMPLO BORDAS

Prof. Valria Helena Politi Gerbelli

PROPRIEDADES
margin-left (no herdado) margin-right (no herdado) margin-top (no herdado) margin-bottom (no herdado) margin (no herdado) padding (no herdado) Ajusta a distncia a partir do lado esquerdo da pgina Ajusta a distncia a partir do lado direito da pgina Ajusta a distncia a partir da parte de baixo do elemento prvio Ajusta a distncia a partir da parte de cima do prximo elemento Ajustas as margens em todos os quatro lados de um elemento (Se houver somente um valor, ele se aplica a todos os lados; se houver dois ou trs, o valor que falta ser tomado do lado oposto.) Ajusta o preenchimento em todos os quatro lados do contedo de um elemento (Se houver somente um valor, ele se aplica a todos os lados; se houver dois ou trs, o valor que falta ser tomado do lado oposto.)

padding-top (no herdado)


padding-right (no herdado) padding-bottom (no herdado) padding-left (no herdado) border-top-width (no herdado) border-right-width (no herdado) border-bottom-width (no herdado)

Ajusta o preenchimento na parte de cima do contedo de um elemento


Ajusta o preenchimento no lado direito do contedo de um elemento Ajusta o preenchimento na parte de baixo do contedo de um elemento Ajusta o preenchimento no lado esquerdo do contedo de um elemento Ajusta a largura da borda ao longo da parte de cima de um elemento Ajusta a largura da borda ao longo do lado direito de um elemento Ajusta a largura da borda ao longo da parte de baixo de um elemento Ajusta a largura da borda em cada lado de um elemento na ordem parte de cima, lado direito, parte de baixo, lado esquerdo (Se houver s um valor, ele se aplica a todos os lados; se houver dois ou trs, os valores que faltam sero tomados do lado oposto.)

border-width (no herdado)

Prof. Valria Helena Politi Gerbelli

PROPRIEDADES
border-top-color (no herdado) border-right-color (no herdado) border-bottom-color (no herdado) Ajusta a cor da borda ao longo do lado de cima de um elemento Ajusta a cor da borda ao longo do lado direito de um elemento Ajusta a cor da borda ao longo do lado de baixo de um elemento

border-left-color (no herdado)

Ajusta a cor da borda ao longo do lado esquerdo de um elemento


Ajusta a cor da borda em cada lado de um elemento na ordem parte de cima, lado direito, parte de baixo, lado esquerdo (Se houver s um valor, ele se aplica a todos os lados; se houver dois ou trs, os valores que faltam sero tomados do lado oposto; note que o Netscape s permite um valor)

border-color (no herdado)

border-top-style (no herdado)


border-right-style (no herdado) border-bottom-style (no herdado) border-left-style (no herdado) border-style (no herdado) border-top (no herdado) border-right (no herdado) border-bottom (no herdado) border-left (no herdado) border (no herdado)

Ajusta o estilo da borda ao longo do lado de cima de um elemento


Ajusta o estilo da borda ao longo do lado direito de um elemento Ajusta o estilo da borda ao longo do lado de baixo de um elemento Ajusta o estilo da borda ao longo do lado esquerdo de um elemento Ajusta o estilo da borda em todos os lados de um elemento Ajusta a largura, cor, e estilo da borda ao longo do lado de cima de um elemento Ajusta a largura, cor, e estilo da borda ao longo do lado direito de um elemento Ajusta a largura, cor, e estilo da borda ao longo do lado de baixo de um elemento Ajusta a largura, cor, e estilo da borda ao longo do lado esquerdo de um elemento Ajusta a largura, cor, e estilo da borda em todos os lados de um elemento

Prof. Valria Helena Politi Gerbelli

LISTAS
0 Em HTML para usar listas no numeradas usamos apenas duas tags

simples :

UL un-numered list (lista no numerada) que tem apenas 3 tipos de marcadores : circle bolinha vazia, disc (padro) bolinha cheia ou square - quadrado LI list item
<ul> <li> Primeiro Item da Lista <li> Segundo Item da Lista <li> Terceiro Item da Lista <li> Quarto Item da Lista </ul> Reproduz : Primeiro Item da Lista Segundo Item da Lista Terceiro Item da Lista Quarto Item da Lista
Prof. Valria Helena Politi Gerbelli

LISTAS
0 Para podermos usar uma figura s mesmo usando

estilo. 0 Localize uma figura bem pequena, que possa ser usada como marcador, e no arquivo externo do estilo coloque a seguinte linha :
li { list-style-image:url(marca_flor.gif); }

Prof. Valria Helena Politi Gerbelli

LINKS
0 O Link em HTML sempre foi um incmodo para todos, pois

nunca conseguamos tirar o sublinhado, apenas mudar a cor, e a fonte, mas o cdigo ficava muito grande. Com o estilo, voc consegue muita coisa, desde tirar o sublinhado, at colocar uma cor de fundo em um link.
a:link { link no visitado } a:visited { link visitado } a:active { link ativo } a:hover { link com mouse em cima}

Prof. Valria Helena Politi Gerbelli

EXEMPLO DE LINKS
a:link { text-decoration : none; color : red; font-family : Georgia; } a:visited { text-decoration : none; color : red; font-family : Georgia; } a:active { text-decoration : none; color : red; font-family : Georgia; } a:hover { text-decoration : overline; color : yellow; font-family : Comic Sans Ms; }

Prof. Valria Helena Politi Gerbelli

FILTROS
0 Os filtros permitem que textos e figuras tenham uma

formatao, que s conseguiramos atravs dos softwares editores de imagens. Exemplo Filtro Alpha

filter: alpha(style=1, Opacity=75, FinishOpacity=15);


Prof. Valria Helena Politi Gerbelli

FILTRO BLUR

filter: blur(Add=1, Direction=90, Strength=10) ;


Prof. Valria Helena Politi Gerbelli

CHROMA

filter: chroma(Color=#ffff00);
Prof. Valria Helena Politi Gerbelli

DROPSHADOW

filter: dropshadow (color=#9999FF, offx=3pt, offy=5pt);


Prof. Valria Helena Politi Gerbelli

EMBOSS / ENGRAVE

filter:progid:DXImageTransform.Microsoft.Emboss;filter:progid:DXImageTransform.Microsoft.Engrave;

Prof. Valria Helena Politi Gerbelli

FLIPV / FLIPH

filter: flipv;

filter: fliph;

Prof. Valria Helena Politi Gerbelli

GLOW

filter: glow(Color=#00FF00, Strength=30);


Prof. Valria Helena Politi Gerbelli

GRADIENT

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=, startColorstr=white, endColorstr=#006699);

Prof. Valria Helena Politi Gerbelli

GRAY

filter: gray

Prof. Valria Helena Politi Gerbelli

INVERT

filter: invert;
Prof. Valria Helena Politi Gerbelli

LIGHT

filter: light;

Prof. Valria Helena Politi Gerbelli

MASK

filter: mask (Color=#009933);

Prof. Valria Helena Politi Gerbelli

MOTION BLUR

filter:progid:DXImageTransform.Microsoft.MotionBlur(direction=270,strength=95);
Prof. Valria Helena Politi Gerbelli

ROTATION 1

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Prof. Valria Helena Politi Gerbelli

ROTATION 2

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

Prof. Valria Helena Politi Gerbelli

SHADOW

filter: shadow(Color=#9900FF, Direction=135);


Prof. Valria Helena Politi Gerbelli

TRANSFORM BLUR

filter: blur(Add=1, Direction=90, Strength=10);

Prof. Valria Helena Politi Gerbelli

WAVE

filter: wave(Add=1, Freq=10, Phase=90, LightStrength=10, Strength=10);

Prof. Valria Helena Politi Gerbelli

XRAY

filter: xray;
Prof. Valria Helena Politi Gerbelli

FORMULRIOS
Os formulrios permite que possamos interagir com o visitante, solicitando nome, e-mail e outras informaes que voc acredite ser necessrio para o seu site. Os formulrios so dividos em 2 partes. Uma parte onde descrevemos o cdigo fonte em HTML (os campos, identificadores, botes, textos, etc) e um script ou aplicativo que possa processar as informaes enviadas, como por exemplo um script em CGI (Common Gateway Interface), um programa que trata os dados do formulrio. Apenas coloque o caminho do programa CGI na propriedade ACTION. Sem um script voc apenas consegue enviar as informaes digitada para seu e-mail e no guard-las em um banco de dados, ou outra ao mais complexa. A tag principal para iniciar um Formulrio a TAG FORM. Esta tag tem vrios parmetros, vamos ver uma sintaxe completa desta TAG. <form action="mailto:seumail@provedor?subject=assunto" method="post" enctype="text/plain" name="nome_do_formulario"> </form> Vamos entender esta TAG :
Prof. Valria Helena Politi Gerbelli

FORMULRIOS
0 FORM Indica que estamos iniciando um Formulrio 0 ACTION Indica a ao que formulrio ter, neste caso, o formulrio ter os dados

enviados para seu e-mail. Pode ser indicado tambm um servidor e o programa CGI que ir processar o formulrio.
0 SUBJECT o assunto do e-mail. 0 METHOD o mtodo da troca de dados; qual mtodo o servidor usar para

receber o formulrio. Os mtodos podem ser POST ou GET, neste caso POST, porque estamos enviando informao para o provedor. J o mtodo GET, faz com que o contedo do formulrio seja anexado ao endereo da URL.
0 ENCTYPE como o formulrio ser enviado, aqui os dados sero formatados

como texto puro.


Prof. Valria Helena Politi Gerbelli

INPUT TYPE=TEXT
Define um campo de entrada em que o usurio entra com as informaes do formulrio. Cada campo de um formulrio atribui o seu contedo para uma varivel, que possui nome e tipo especficos. Veja como seria : <FORM> DIGITE SEU NOME <input type="text" name="var_nome" size="35" maxlength="30" value="qq coisa"> </FORM>
0 type="text" - type = tipo - text = texto, ou seja o tipo de informao que aquele local receber do tipo

texto.

0 name="var_nome" - name = var_nome a varivel que ir guardar o que for digitado naquele campo. 0 size="35" - tamanho do objeto ser de 35 pixels 0 maxlength="30" - comprimento mximo de caracteres ser de 30.

0 value = "qualquer coisa" - value = valor, ou seja, o campo j vem preenchido com o que vier neste parmetro, neste caso vir escrito : qq coisa. Para alterar, basta selecionar o texto e escrever outro. S utilize o value caso queira que um campo j venha preenchido com um valor, por exemplo : estado = SP, ai sim vale a pena.

Prof. Valria Helena Politi Gerbelli

INPUT TYPE=PASSWORD
E se voc quiser que a pessoa entre com uma senha ? Pode usar o type="password" Este comando idntico ao comando INPUT TEXT. Sua nica diferena que, no lugar dos caracteres digitados, aparece um asterisco. Vamos ver como seria : <FORM> DIGITE SEU NOME <input type=password" name="var_nome" size=10" maxlength=6"> </FORM>
0 type=password" - type = tipo - password= senha, ou seja o tipo de informao que aquele local receber do tipo senha. 0 name="var_senha" - name = var_senha a varivel que ir guardar o que for digitado naquele campo. 0 size=10" - tamanho do objeto ser de 10 pixels 0 maxlength=6" - comprimento mximo de caracteres ser de 6.

Prof. Valria Helena Politi Gerbelli

INPUT TYPE=RADIO
E para fazer uma seleo exclusiva de uma lista de opes ? Precisamos inserir um "boto de rdio", que so associados a uma nica varivel. O contedo de um dos campos atribudo varivel. Apenas um campo pode ser marcado, vamos ver um exemplo : <FORM> Digite seu nome: <input type = "text" name = "var_nome"> Estado civil: <input type= "radio" name="civil" value = "solteiro" checked> Solteiro <input type= "radio" name="civil" value = "casado"> Casado <input type= "radio" name="civil" value = "divorciado"> Divorciado <input type= "radio" name="civil" value = "vivo"> Vivo<br> </FORM> Observe que todas as variveis receberam o mesmo nome: CIVIL. Veja tambm que o nico comando que tem o parmetro CHECKED o que contm a opo de solteiro, ou seja, esta opo j vem marcada como padro.

OS NOMES DAS OPES OBRIGATRIAMENTE DEVEM SER IGUAIS, SE FOREM DIFERENTES, ESTE POSSIBILITAR MARCAR VRIAS OPES !!!

Prof. Valria Helena Politi Gerbelli

INPUT TYPE=CHECKBOX
Para poder selecionar vrias opes, usamos o CHECKBOX. Ele se parece como Radio Button, mas tem uma diferena significativa. Nele mais de um campo associado a uma varivel pode ser selecionado. Veja o exemplo: <FORM> Digite seu nome: <input type = "text" name="var_nome"> Estado civil: <input type="radio" name="civil" value = "solteiro" checked> Solteiro <input type="radio" name="civil" value = "casado"> Casado< <input type="radio" name="civil" value = "divorciado"> Divorciado <input type="radio" name="civil" value = "vivo"> Vivo Documentos : <INPUT TYPE="checkbox" name="teste" value="1"> Carteira de Profissional <INPUT TYPE="checkbox" name="teste" value="2">CPF <INPUT TYPE="checkbox" name="teste" value= 3"> Carteira de Identidade </FORM>

Prof. Valria Helena Politi Gerbelli

LISTA DE OPES
0 o comando <SELECT> ... </SELECT> define e exibe uma lista de

itens que podem ser selecionados pelo usurio.

<SELECT NAME="CARGO"> <OPTION value="anasenior">ANALISTA SNIOR <OPTION value="clipper"> PROGRAMADOR CLIPPER <OPTION value="html">PROGRAMADOR HTML <OPTION value="operador">OPERADOR <OPTION value="usuario">USUARIO </SELECT>

Prof. Valria Helena Politi Gerbelli

LISTA DE OPES
0 Para que uma opo j venha selecionada utilize o

parmetro SELECTED. 0 Para mostrar mais de uma linha utilize SIZE=n. 0 Para poder selecionar mais de uma opo utilizando o CTRL utilize o parmetro MUTIPLE.

Prof. Valria Helena Politi Gerbelli

REA DE TEXTO
0 Define uma caixa de digitaao, onde o usurio pode

digitar livremente um texto.

<TEXTAREA NAME="comentarios" ROWS="7" COLS="50"> </TEXTAREA>

0 ROWS Nmero de linhas que ter a rea d e texto.


0 COLS Nmero de colunas que ter a rea de texto.

Prof. Valria Helena Politi Gerbelli

BOTO SUBMIT
0 O Boto SUBMIT responsvel por enviar os dados do

formulrio para o e-mail que est no parmetro ACTION da TAG FORM.

<INPUT TYPE = "SUBMIT"VALUE = "ENVIAR">

Prof. Valria Helena Politi Gerbelli

BOTO RESET
0 O Boto RESET limpa todo o formulrio, voltando os

valores aos padres definidos inicialmente.

<INPUT TYPE = "RESET"VALUE = "APAGAR CAMPOS">

Prof. Valria Helena Politi Gerbelli

BOTO BUTON
0 O Boto BUTTON um boto que necessita de um

Evento para seja chamado uma funo em Javascript para que ele funcione.
<INPUT TYPE = "BUTTON" VALUE = "Verificar e-mail onClick=verificar()>

Prof. Valria Helena Politi Gerbelli

JAVASCRIPT
0 O QUE SO SCRIPTS? So pequenos programas que acrescentam interatividade e funcionalidade pgina. 0 JAVASCRIPT JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML. Os pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a ocorrncia de eventos. Os pargrafos soltos so executados na sequncia em que aparecem na pgina (documento) e os atrelados a eventos so executados apenas quando o evento ocorre.
Prof. Valria Helena Politi Gerbelli

INSERINDO JAVASCRIPT NO HTML


Para inserir pargrafos de programao dentro do HTML necessrio identificar o incio e o fim do set de JavaScript, da seguinte forma: <script language=javascript> Comandos; </script> Este procedimento pode ser adotado em qualquer local da pgina. Entretanto, para melhor visualizao e facilidade de manuteno, recomenda-se que toda a lgica seja escrita no incio do documento, atravs da criao de funes a serem invocadas quando se fizer necessrio (normalmente atreladas a eventos).

Prof. Valria Helena Politi Gerbelli

INSERINDO JAVASCRIPT NO HTML


0 Os comandos JavaScript so sensveis ao tipo de letra (maisculas e

0 0 0 0

minsculas) em sua sintaxe. Portanto, necessrio que seja obedecida a forma de escrever os comandos. Caso seja cometido algum erro de sintaxe quando da escrita de um comando, o JavaScript interpretar, o que seria um comando, como sendo o nome de uma varivel. uma linguagem de script, que foi desenvolvida pela Netscape e passou a ser suportada pelo Netscape Navigator partir da verso 2.0. A Microsoft criou a VBScript que um subset (variante) do Visual Basic. Javascript no tem nada a ver com a linguagem Java. A linguagem Javascript se aloja dentro de um programa HTML. Um programa em Javascript s pode ser executado atravs de um Browser.

Prof. Valria Helena Politi Gerbelli

A JAVASCRIPT
0 Javascript baseada em objetos, ou seja, ela trata todos os

elementos de uma pgina Web como objeto:


document

0 um objeto que contm informaes sobre a pgina ou

documento HTML, incluindo dados sobre os elementos de um formulrio, links e funes que permitem mudar as caractersticas da pgina.
form

0 um objeto que contm informaes sobre os formulrios da history

pgina atual como mtodo, URL e dados sobre seus elementos ou campos. atual do Browser.

0 Este objeto mantm uma lista de todos os site visitados na sesso

Prof. Valria Helena Politi Gerbelli

PROPRIEDADES DOS OBJETOS


0 Um objeto possui caractersticas prprias que o tornam

nico dentro de um grupo, como um carro que tem tipo, nmero de portas, potncia, cor, peso, etc. Algumas caractersticas ou propriedade so comuns a muitos objetos (como cor e peso), outras so especificas de cada um. As propriedades podem ser vistas como variveis que armazenam informaes relacionadas com um determinado objeto.
Acessando as propriedades dos objetos nome do objeto.propriedade Para dar uma nova cor de fundo para a pgina : document.bgcolor = cor
Prof. Valria Helena Politi Gerbelli

MTODO DOS OBJETOS


0 Alm das propriedades, um objeto possui funes especiais que realizam

alguma operao relacionada com o objeto. Esses mtodos so usados para alterar o valor de uma propriedade do objeto ou executar uma tarefa especifica.
Acessando o mtodo dos objetos objeto.mtodo( argumento) onde : objeto o nome do objeto que sofre a ao do mtodo mtodo o nome que idnfica o mtodo argumento um expresso ou valor opcional que ser usado para alterar ou atuar sobre o objeto. O objeto document tem um mtodo chamado write que insere linhas no documento HTML. document.write(texto inserido em javascript) O objeto window tem um mtodo chamado alert que exibe uma mensagem de alerta em uma caixa de dilogo. window.alert(Operao Invalida)

Prof. Valria Helena Politi Gerbelli

OPERADORES LGICOS
So operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE. Os comandos condicionais sero vistos mais a frente.

Comparadores ==

Funo Igual

!=
> >= < <= && ||

Diferente
Maior Maior ou Igual Menor Menor ou Igual E Ou
Prof. Valria Helena Politi Gerbelli

OPERADORES MATEMTICOS
0 So operadores a serem utilizados em clculos, referncias de indexadores e manuseio

de strings. Ao longo do manual estes operadores sero largamente utilizados, dando, assim, uma noo mais precisa do seu potencial. Operador + Funo adio de valor e concatenao de strings

* / %
0 Exemplos 0 150 % 13 retornar 7 0 7 % 3 retornar 1

subtrao de valores
multiplicao de valores diviso de valores obtm o resto de uma diviso:

0 +=concatena /adiciona ao string/valor j existente. 0 Ou seja: x += y o mesmo que x = x + y 0 Da mesma forma podem ser utilizados: -= , *= , /= ou %= Um contador pode ser simplificado utilizando-se X++ ou X-- o que equivale as expresses: 0 X = X + 1 ou X = X - 1 respectivamente.

Prof. Valria Helena Politi Gerbelli

CONVERTER TEXTO PARA NUMERO


0 Quando digitamos nmeros em caixas de textos, devemos converter esses nmeros

para nmeros verdadeiros;

Conversor eval ()

Sintaxe eval(varivel)

parseInt()
parseFloat() parseDouble()

parseInt(variavel)
parseFloat(variavel) parseDouble(variavel)

Prof. Valria Helena Politi Gerbelli

0 Para inverter sinal: X = -X negativo para positivo ou positivo para negativo. Vamos fazer

EXERCCIO 1

o primeiro exerccio. Abra o Bloco de Notas e digite o cdigo abaixo. A idia do exerccio fazer com que valor constantes sejam somados, divididos, subtrados, divididos e ver o resto da diviso.
<html> <head> <title> Primeiro Exercicio de Javascript </title> </head> <body> <script language = "javascript"> var num1 = 150; var num2 = 13; var resto, soma, sub, mult, divi; resto = num1 % num2; soma = num1 + num2; sub = num1 - num2; mult = num1 * num2; divi = num1 / num2; window.alert("O Resultado da soma " + soma); window.alert("O Resultado da Subtrao " + sub); window.alert("O Resultado da Multiplicao " + mult); window.alert("O Resultado da Diviso " + divi); window.alert("o resto da diviso " + resto); document.write("O Resultado da soma " + soma + "<br>"); document.write("O Resultado da Subtrao " + sub + "<br>"); document.write("O Resultado da Multiplicao " + mult + "<br>"); document.write("O Resultado da Diviso " + divi + "<br>"); document.write("O resto da diviso " + resto); </script> </body> </html>

Prof. Valria Helena Politi Gerbelli

EXERCCIO 2
0 Agora, vamos fazer um segundo exerccio. Abra o Bloco de Notas e digite o cdigo abaixo. A idia deste exerccio fazer com que algum digite 2 valores e estes sejam somados, divididos, subtrados, divididos e ver o resto da diviso.
<html> <head> <title> Segundo Exercicio de Javascript </title> </head> <body> <script language = "javascript"> var num1, num2, resto, soma, sub, mult, divi; num1 = window.prompt("Digite o Primeiro Numero"); num2 = window.prompt("Digite o Segundo Numero"); resto = eval(num1) % eval(num2); soma = eval(num1) + eval(num2); sub = eval(num1) - eval(num2); mult = eval(num1) * eval(num2); divi = eval(num1) / eval(num2); window.alert("O Resultado da soma " + soma); window.alert("O Resultado da Subtrao " + sub); window.alert("O Resultado da Multiplicao " + mult); window.alert("O Resultado da Diviso " + divi); window.alert("o resto da diviso " + resto); document.write("O Resultado da soma " + soma + "<br>"); document.write("O Resultado da Subtrao " + sub + "<br>"); document.write("O Resultado da Multiplicao " + mult + "<br>"); document.write("O Resultado da Diviso " + divi + "<br>"); document.write("O resto da diviso " + resto); </script> </body> </html> Prof. Valria Helena Politi Gerbelli

COMANDOS CONDICIONAIS
0

So comandos que condicionam a execuo de uma certa tarefa veracidade ou no de uma determinada condio, ou enquanto determinada condio for verdadeira. So eles: Comando IF if (condio) { ao para condio satisfeita ; } else { ao para condio no satisfeita } Exemplo if (idade < 18) { Categoria = "Menor" ; } else { Categoria = "Maior" ; }

Prof. Valria Helena Politi Gerbelli

COMANDOS CONDICIONAIS
Comando FOR for ( [inicializao de varivel de controle ] ; [condio ] ; [incremento] ) { ao; } Exemplo for (x = 0 ; x <= 10 ; x++) { window. alert ("X igual a " + x); }

Prof. Valria Helena Politi Gerbelli

COMANDOS CONDICIONAIS
Comando WHILE Executa uma ao enquanto determinada condio for verdadeira. while (condio) { ao; } Exemplo var contador = 10; while (contador > 1) { contador--; }
Prof. Valria Helena Politi Gerbelli

EVENTOS
Uma das caractersticas da linguagem baseada em objetos a possibilidade de gerenciar eventos. So fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador pode definir aes a serem realizadas pelo programa. A seguir apresentamos a lista dos eventos possveis, indicando os momentos em que os mesmos podem ocorrer, bem como, os objetos passveis de sua ocorrncia.

Prof. Valria Helena Politi Gerbelli

EVENTOS
EVENTO

OnBlur

FUNO Ocorre quando o objeto perde o focus, independente de ter havido mudana. Vlido para os objetos Text, Select e Textarea Ocorre quando o objeto perde o focus e houve mudana de contedo. Vlido para os objetos Text, Select e Textarea. Ocorre quando o objeto recebe um Click do Mouse. Vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit. Ocorre quando o objeto recebe o focus. Vlido para os objetos Text, Select e Textarea. Ocorre quando o ponteiro do mouse passa por sobre o objeto. Vlido apenas para Link. Ocorre quando o ponteiro do mouse sai de cima do objeto. Vlido apenas para Link. Ocorre quando o objeto selecionado. Vlido para os objetos Text e Textarea Ocorre quando um boto tipo Submit recebe um click do mouse. Vlido apenas para o Form. Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY. Ocorre na carga do documento, ou seja, s ocorre no BODY do documento.

OnChange OnClick OnFocus OnMouserOver OnMouseOut OnSelect

OnSubmit
OnUnload onLoad

Prof. Valria Helena Politi Gerbelli

CRIANDO VARIVEIS
A varivel criada automaticamente, pela simples associao de valores a mesma. Ex. NovaVariavel = "Jose" Foi criada a varivel de nome NovaVariavel que, passou a conter a string Jose. As variveis podem ser Locais ou Globais. As variveis que so criadas dentro de uma funo so Locais e referenciveis apenas dentro da funo. As variveis criadas fora de funes so Globais, podendo ser referenciadas em qualquer parte do documento. Desta forma, variveis que precisam ser referenciadas por vrias funes ou em outra parte do documento, precisam ser definidas como globais. Embora no seja recomendvel, em uma funo, pode ser definida uma varivel local com o mesmo nome de uma varivel global. Para isso utiliza-se o mtodo de definio var. Ex. : Varivel Global : MinhaVariavel = "" ; Varivel Local : var MinhaVariavel = ""
Prof. Valria Helena Politi Gerbelli

ESCREVENDO NO DOCUMENTO
O JavaScript permite que o programador escreva linhas dentro de uma pgina (documento), atravs do mtodo write. As linhas escritas desta forma, podem conter textos, expresses JavaScript e comandos Html. As linhas escritas atravs deste mtodo aparecero no ponto da tela onde o comando for inserido.
<script> valor = 30 ; document.write ("Minha primeira linha") ; document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor)) ; </script>

Prof. Valria Helena Politi Gerbelli

ESCREVENDO NO DOCUMENTO
0 A idia do exemplo anterior escrever duas linhas. Entretanto o mtodo write no insere mudana de linha, o que provocar o aparecimento de apenas uma linha com os dois textos emendados. Para evitar este tipo de

ocorrncia, existe o mtodo writeln que escreve uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando no surtiu efeito,obtendo-se o mesmo resultado do mtodo write. A soluo encontrada para esta situao foi a utilizao do comando de mudana de pargrafo da linguagem Html.
<script> valor = 30 document.write ("<p>Minha primeira linha") document.write ("<p>Nesta linha aparecer o resultado de : " + (10 * 10 + valor) ) </script>

Prof. Valria Helena Politi Gerbelli

MENSAGENS
Existem trs formas de comunicao com o usurio atravs de mensagens. Apenas Observao window.alert ( mensagem ); window.alert ("Certifique-se de que as informaes esto corretas") ; Mensagem que retorna confirmao de OK ou CANCELAR confirm (mensagem) ;

if (confirm ("Algo est errado...devo continuar??")) { window.alert ("Continuando") ; } else { window.alert ("Parando") ; }
Recebe mensagem via caixa de texto Input receptor = window.prompt ("Minha mensagem", "Meu texto")
Prof. Valria Helena Politi Gerbelli

MUDANDO COR DE FUNDO E LETRA


<html> <head> <style> div { width:200; height:200; position : absolute; left : 200; top : 200; background : black; color : white; } </style> <title> MUDANDO COR E COR DE LETRA </title> </head> <script language="javascript" src="muda_cor.js"></script> <body> <form name="form_cor"> <div id="quadro" > Mude minha cor </div> Cor de Fundo e Letra <br> <input type="radio" name="cores" onClick="pb()">Branco / Preto <input type="radio" name="cores" onClick="vb()">Vermelho / Branco <input type="radio" name="cores" onClick="rv()">Rosa / Vermelho </form> </body> </html>

muda_cor.html

Prof. Valria Helena Politi Gerbelli

CRIANDO O JAVASCRIPT EXTERNO


function pb() { document.getElementById("quadro").style.background = 'white'; document.getElementById("quadro").style.color = 'black'; } function vb() { document.getElementById("quadro").style.background = 'red'; document.getElementById("quadro").style.color = 'white'; } function rv() { document.getElementById("quadro").style.background = 'pink'; document.getElementById("quadro").style.color = 'red'; }

Prof. Valria Helena Politi Gerbelli

RESULTADOS

Prof. Valria Helena Politi Gerbelli

TRABALHANDO COM HORA


Para fazer um relgio funcionar, necessrio que seja criado uma varivel baseado no objeto Date(), que ter dentro dela horas,minutos, segundos,dia,mes,ano,dia da semana e codigo do fuso horrio do Windows. A partir disto, sabe-se que necessrio "quebrar" todos esses valores, e jogar em variveis que tenham o seu nome de acordo com o que ir armazenar.
function horario() { //criar varivel com base no objeto Date() hoje = new Date(); //Enviar para varivel hora, o que tem dentro da varivel hoje, somente as horas hora=hoje.getHours(); //se a hora for menor que 10 (9) if (hora < 10) // acrescente um 0 antes de exib-la hora="0" + hora; minutos=hoje.getMinutes() if (minutos < 10) minutos="0" + minutos; segundos=hoje.getSeconds() if (segundos < 10) segundos="0" + segundos;

Prof. Valria Helena Politi Gerbelli

COLOCANDO O RELOGIO NO FORMULRIO


// no documento tem um formulrio de nome FORM1, e neste tem um objeto de nome RELOGIO e seu valor deve ser igual ao que tem dentro das variveis e os doispontos para separ-los. document.form1.relogio.value=hora + ":" + minutos + ":" + segundos; } //no objeto janela, tem uma funo de nome HORARIO, e esta deve ser chamada a cada 1000 segundos window.setInterval("horario()",1000);

</script> Aqui voc insere o objeto no formulrio, se quiser que as bordas no apaream, utilize o estilo. <body> <form name="form1"> <big>Hora <input type="text" name="relogio" size="8" style="border-style:none"> </form> </body> </html>

Prof. Valria Helena Politi Gerbelli

TRABALHANDO COM DATA


Para inserir a data por extenso na pgina, necessrio que seja criado uma varivel baseado no objeto Date(), que ter dentro dela horas,minutos, segundos,dia,mes,ano,dia da semana e codigo do fuso horrio do Windows. A partir disto, sabe-se que necessrio "quebrar" todos esses valores, e jogar em variveis que tenham o seu nome de acordo com o que ir armazenar.

//atribua a varivel agora a data baseado no objeto Date() var Agora = new Date(); //atribua a uma variavel o ms + 1 //var NrMes = Agora.getMonth() + 1; atribua o dia da semana + 1 //var NomeDia = Agora.getDay() + 1; atribua o dia do ms //var NrDia = Agora.getDate(); atribua o ano //var NrAno=Agora.getYear();

Prof. Valria Helena Politi Gerbelli

COLOCANDO DIA DA SEMANA POR EXTENSO


verifique se o dia da semana = 1, se sim atribua o valor por extenso em outra varivel e assim com todos os outros dias if(NomeDia if(NomeDia if(NomeDia if(NomeDia if(NomeDia if(NomeDia if(NomeDia == == == == == == == 1) 2) 3) 4) 5) 6) 7) Day Day Day Day Day Day Day = = = = = = = "Domingo"; "Segunda-feira"; "Tera-feira"; "Quarta-feira"; "Quinta-feira"; "Sexta-feira"; "Sbado";

Prof. Valria Helena Politi Gerbelli

COLOCANDO DIA DO MS POR EXTENSO


verifique agora o ms, e atribua o valor por extenso a outra varivel e assim por diante

if(NrMes if(NrMes if(NrMes if(NrMes if(NrMes if(NrMes if(NrMes if(NrMes if(NrMes if(NrMes if(NrMes if(NrMes

== == == == == == == == == == == ==

1) Mes = "Janeiro"; 2) Mes = "Fevereiro"; 3) Mes = "Maro"; 4) Mes = "Abril"; 5) Mes = "Maio"; 6) Mes = "Junho"; 7) Mes = "Julho"; 8) Mes = "Agosto"; 9) Mes = "Setembro"; 10) Mes = "Outubro"; 11) Mes = "Novembro"; 12) Mes = "Dezembro";
Prof. Valria Helena Politi Gerbelli

VERIFICANDO O ANO E COLOCANDO NA PGINA


//se o ano for menor que 2000 if(NrAno < 2000) //ento atribua a variavel Ano 1900 + numero do ano Ano = 1900 + NrAno; else //caso contrrio manter o valor da varivel Ano. Ano = NrAno; /* Cdigo para mostrar a data atual agora iguale uma varivel a todas as outrar que voc criou, com as virgulas e espaos necessrios */
var DiaSemana =(" " + Day + ", " + NrDia + " de " + Mes + " de " + Ano +".");

//escreva no documento document.write(DiaSemana)

Prof. Valria Helena Politi Gerbelli

MSCARAS PARA TEXTBOX


<html> <head> <title> Teste </title> </head> <body> <form> Cep <input type="text" name="cep" onkeypress="mascara(this, '#####-###')"> <p> CPF <input type="text" name="cpf" onkeypress="mascara(this, '###.###.###-##')"> <p> RG <input type="text" name="rg" onkeypress="mascara(this, '##.###.###-#')"> </form> </body> </html>
Prof. Valria Helena Politi Gerbelli

MSCARAS PARA TEXTBOX


<script language="javascript"> // src um objeto que est sendo criado - mask a mascara que est sendo passada como parmetro function mascara(src, mask) { // guarde comprimento de cada digitao var i = src.value.length; // subtraindo um caracter da mascara, iniciando do 0 um caracter var saida = mask.substring(0,1); //variavel texto = mascara toda var texto = mask.substring(i) // se texto for diferente do caracter usado como mscara, ele insere os caracteres de separao if (texto.substring(0,1) != saida) { src.value += texto.substring(0,1); } } </script>

Prof. Valria Helena Politi Gerbelli

DIFERENA PARA MSCARA DE TELEFONE


<script language="javascript"> function mascara(src, mask) { var i = src.value.length;

var saida = mask.substring(1,2);


var texto = mask.substring(i) if (texto.substring(0,1) != saida) { src.value += texto.substring(0,1); } } </script>

Prof. Valria Helena Politi Gerbelli

ALBUM COM SETAS


<html> <head> <title> Parquia Nossa Senhora da Boa Viagem - Matriz de So Bernardo do Campo </title> </head> <body scroll="auto" topmargin="0" leftmargin="0"> <script language="JavaScript"> if(document.images) { currentslide=1; maxslides=96; slide = new Array(maxslides+1); for(var n=1;n<=maxslides;n++) { slide[n]=new Image(480,640); slide[n].src='sexta_santa_2011_'+n+'.jpg'; } } function prevSlide() { if(document.images) { currentslide--; if(currentslide<1) currentslide=maxslides; document.images['slide'].src=slide[currentslide].src; } }

Prof. Valria Helena Politi Gerbelli

ALBUM REVEALTRANS
<html> <head> <script language="javascript"> var fotos=new Array(foto1.jpg", foto2.jpg, foto3.jpg"); // contando os elementos da matriz var quantidade=fotos.length; var x=0; var fotos_real=quantidade-1; function matriz() { velocidade = 3000 documento = document.getElementById("obra"); with(documento) { filters.revealtrans.Apply(); filters.revealtrans.transition=23; obra.src=fotos[x]; document.form1.arquivo.value = obra.src; filters.revealtrans.Play(); } Prof. Valria Helena Politi Gerbelli

ALBUM REVEALTRANS
x++; if(x > fotos_real) x=0; window.setTimeout("matriz()",velocidade); } </script> <title> TITULO </title> </head> <body onload="matriz()"> Aguarde as Fotos Passarem Automaticamente <br> <center> <img src=foto1.jpg" id="obra" style="filter:revealtrans(duration=1.0)"> </center> <form name="form1"> </body> </html>

Prof. Valria Helena Politi Gerbelli

ALBUM BLENDTRANS
<html> <head> <script language="javascript"> var fotos=new Array(foto1.jpg", foto2.jpg, foto3.jpg"); // contando os elementos da matriz var quantidade=fotos.length; var x=0; var fotos_real=quantidade-1; function matriz() { velocidade = 3000 documento = document.getElementById("obra"); with(documento) { filters.blendtrans.Apply(); obra.src=fotos[x]; document.form1.arquivo.value = obra.src; filters. blendtrans.Play(); }

Prof. Valria Helena Politi Gerbelli

ALBUM REVEALTRANS
x++; if(x > fotos_real) x=0; window.setTimeout("matriz()",velocidade); } </script> <title> TITULO </title> </head> <body onload="matriz()"> Aguarde as Fotos Passarem Automaticamente <br> <center> <img src=foto1.jpg" id="obra" style="filter:blendtrans (duration=1.0)"> </center> </body> </html>

Prof. Valria Helena Politi Gerbelli