1CT Pi

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.
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>.
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>
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">
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
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
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
PULANDO DE LINHA
Quando queremos pular de linha, ou seja, simplesmente iniciar uma nova linha no texto utilizamos a tag BR (Break Row). <br>
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
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
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.
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)
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.
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
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
EXEMPLO
TABELA DE PROFESSORES PROFESSOR Valria Rosinha Viviane MATRIA DDW LOP OSA
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
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
PROPRIEDADES TR E TH
o Bgcolor=cor = cor de fundo o Colspan=n = mescla colunas o Rowspan=n = mescla linhas
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
FRAME
0 Frame significa quadros, ou seja, significa que
conseguimos dividir o browser em quadros e ver mais de uma pgina ao mesmo tempo.
FRAMESET
<html> <head> <title> TITULO DA PGINA </title> </head> <frameset cols="20%,80%" border="0"> </frameset> </html>
FRAME SRC
<frame src="pagina1.html" noresize> <frame src="pagina2.html" scrolling="no">
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>
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.

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.
RESULTADO
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>
RESULTADO
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>
RESULTADO IFRAME
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.
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.
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.
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>
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>
ESTILO_VAL.CSS
h1 { color : red; }
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>
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>
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>
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; }
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
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>
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>
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>
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>
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>
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>
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; }
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; }
MUDANDO CURSOR
0 possvel mudar a aparncia do cursor com estilo,
apenas use a propriedade cursor:tipo;
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.
EXEMPLO BORDAS
EXEMPLO BORDAS
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)
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
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
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); }
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}
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; }
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);

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

CHROMA
filter: chroma(Color=#ffff00);
DROPSHADOW
filter: dropshadow (color=#9999FF, offx=3pt, offy=5pt);

EMBOSS / ENGRAVE
filter:progid:DXImageTransform.Microsoft.Emboss;filter:progid:DXImageTransform.Microsoft.Engrave;
FLIPV / FLIPH
filter: flipv;
filter: fliph;
GLOW
filter: glow(Color=#00FF00, Strength=30);

GRADIENT
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=, startColorstr=white, endColorstr=#006699);
GRAY
filter: gray
INVERT
filter: invert;
LIGHT
filter: light;
MASK
filter: mask (Color=#009933);
MOTION BLUR
filter:progid:DXImageTransform.Microsoft.MotionBlur(direction=270,strength=95);
ROTATION 1
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
ROTATION 2
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
SHADOW
filter: shadow(Color=#9900FF, Direction=135);

TRANSFORM BLUR
filter: blur(Add=1, Direction=90, Strength=10);
WAVE
filter: wave(Add=1, Freq=10, Phase=90, LightStrength=10, Strength=10);
XRAY
filter: xray;
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 :
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.

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.
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.
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 !!!
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>
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>
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.
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.
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">
BOTO RESET
0 O Boto RESET limpa todo o formulrio, voltando os
valores aos padres definidos inicialmente.
<INPUT TYPE = "RESET"VALUE = "APAGAR CAMPOS">
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()>
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.
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).
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.
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
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
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)
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
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.
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)
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>
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" ; }
Comando FOR for ( [inicializao de varivel de controle ] ; [condio ] ; [incremento] ) { ao; } Exemplo for (x = 0 ; x <= 10 ; x++) { window. alert ("X igual a " + x); }
Comando WHILE Executa uma ao enquanto determinada condio for verdadeira. while (condio) { ao; } Exemplo var contador = 10; while (contador > 1) { contador--; }
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.
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
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 = ""
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>
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>
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")
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
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'; }
RESULTADOS
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;
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>
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();
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";
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";
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)
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>
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>
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>
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; } }
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>
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(); }
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>

1CT Pi

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

1CT Pi

Transféré par

Droits d'auteur :

Formats disponibles

O QUE UM BROWSER

0 Browser o programa que usamos para navegar na

0 Falamos em pgina na Internet porque browser na

realidade significa folheador.

Prof. Valria Helena Politi Gerbelli

ONDE FAZER UM SITE?

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

center = centralizado right = direita left = esquerda padro

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

dividir pargrafos, ttulos, etc.

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

Prof. Valria Helena Politi Gerbelli

ou com parte do mesmo documento:

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

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

o Background=nome.ext = figura de fundo

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

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

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

pgina, esse nome, ser utilizado no parmetro TARGET.

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

DIVIDINDO DE OUTRA FORMA

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

Prof. Valria Helena Politi Gerbelli

0 O estilo foi criado para permitir que um Web Designer

Prof. Valria Helena Politi Gerbelli

VANTAGENS DO CSS CASCADE STYLE SHEET

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

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

Prof. Valria Helena Politi Gerbelli

nome da tag que ser alterada :

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : index.html

<frame src=menu.html noresize>

EXERCCIO nome : menu.html

EXERCCIO nome : entrada.html

EXERCCIO nome : estilo1.css

Prof. Valria Helena Politi Gerbelli

da pgina, os passos so os seguintes :

o Determine se haver repetio ou no

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : esquerda.html

Prof. Valria Helena Politi Gerbelli

EXERCCIO nome : direita.html

Prof. Valria Helena Politi Gerbelli