ApostilaHTML

Desenvolvimento WEB
APOSTILA por Luclia Ribeiro
Se eu fosse um padre, eu, nos meus sermes,

no falaria em Deus nem no Pecado
muito menos no Anjo Rebelado
e os encantos das suas sedues,
no citaria santos e profetas:
nada das suas celestiais promessas
ou das suas terrveis maldies...
Se eu fosse um padre eu citaria os poetas,
Rezaria seus versos, os mais belos,
desses que desde a infncia me embalaram
e quem me dera que alguns fossem meus!
Porque a poesia purifica a alma
...e um belo poema ainda que de Deus se aparte
um belo poema sempre leva a Deus!

(Mario Quintana, Se eu fosse um padre)
Verso 1 jan/07
ndice
"Quantas vezes a gente, em busca da ventura,
Procede tal e qual o avozinho infeliz:
Em vo, por toda parte, os culos procura,
Tendo-os na ponta do nariz! (Mrio Quintana)
NDICE ............................................................................................................... 2
O BSICO ........................................................................................................... 4
1.1
PGINAS HTML ....................................................................................... 4
1.2
TAGS..................................................................................................... 4
1.3
ESTRUTURA BSICA DO HTML ................................................................... 4
1.4
MARCAES BSICAS ............................................................................. 4
1.4.1 TTULOS .............................................................................................. 5
1.4.2 CABEALHOS ........................................................................................ 5
1.4.3 PARGRAFOS ........................................................................................ 5
1.4.4 QUEBRAS DE LINHA ............................................................................... 5
1.5.
COMANDOS DE ESTILO ............................................................................ 6
1.6.
ALTERANDO A FONTE............................................................................... 6
1.7.
CORES E PADRES DE FUNDO ................................................................... 7
1.8.
OUTROS COMANDOS ............................................................................... 8
1.8.1 TEXTOS PR-FORMATADOS..................................................................... 8
1.8.2 CENTRALIZAO DE TEXTOS .................................................................. 8
1.8.3 LINHA DIVISRIA.................................................................................. 8
LINKS E LISTAS .................................................................................................. 9
2.1
LINKS.................................................................................................... 9
2.2
LISTAS ................................................................................................ 10
2.2.1 LISTAS NO ORDENADAS ..................................................................... 10
2.2.2 LISTAS ORDENADAS ............................................................................ 10
2.2.3 LISTAS DE DEFINIES ....................................................................... 10
IMAGENS E TABELAS ........................................................................................ 12
3.1
IMAGENS ............................................................................................. 12
3.1.1 INSERINDO IMAGENS .......................................................................... 12
3.1.2 BACKGROUND COM IMAGENS ............................................................... 12
3.1.3 IMAGENS COMO HIPERLINK .................................................................. 12
3.2
TABELAS.............................................................................................. 13
3.2.1 INSERINDO TABELAS ........................................................................... 13
FORMULRIOS.................................................................................................. 16
4.1
INTRODUO ....................................................................................... 16
4.2
ELEMENTOS DE FORMULRIOS: CAMPOS DE TEXTO ........................................ 17
4.2.1 TEXTO CURTO ..................................................................................... 17
4.2.2 TEXTO OCULTO ................................................................................... 17
4.2.3 TEXTO LONGO .................................................................................... 18
4.3
OUTROS ELEMENTOS DE FORMULRIO ..................................................... 18
4.3.1 LISTA DE OPES ............................................................................... 19
4.3.2 BOTES DE RADIO .............................................................................. 19
4.3.3 CAIXAS DE VALIDAO ........................................................................ 20
4.4
BOTO SUBMIT, APAGAR CAMPOS E OUTROS ............................................ 20
4.4.1 BOTO ENVIAR CAMPOS....................................................................... 20
4.4.2 BOTO APAGAR CAMPOS ...................................................................... 20
4.4.3 DADOS OCULTOS ................................................................................ 20
FRAMES ............................................................................................................ 22
Algoritmos e Linguagens Lucilia Ribeiro
5.1
5.2
5.3
5.4
INTRODUO ....................................................................................... 22
DOCUMENTOS DE LAYOUT E DE CONTEDO .............................................. 22
FRAMES SOBREPOSTOS DIRETA E INDIRETAMENTE.................................... 23
LINKS EM FRAME ALVO........................................................................... 24
FOLHAS DE ESTILO - CSS.................................................................................. 27

6.1
6.2
6.3
6.4
6.5
6.6
6.7
6.8
6.9
INTRODUO ....................................................................................... 27
A REGRA CSS E SUA SINTAXE.................................................................. 27
AGRUPAMENTO DE SELETORES ............................................................... 28
O SELETOR CLASSE ............................................................................... 28
INSERINDO COMENTRIOS..................................................................... 28
FOLHA DE ESTILO EXTERNA .................................................................... 29
FOLHA DE ESTILO INCORPORADA OU INTERNA .......................................... 29
FOLHA DE ESTILO INLINE ....................................................................... 29
FOLHAS MLTIPLAS DE ESTILO ............................................................... 30
INTRODUO AO JAVA SCRIPT......................................................................... 33

7.1
INTRODUO ....................................................................................... 33
7.2
ORIENTAO A OBJETOS........................................................................ 33
7.2.1 PROPRIEDADES................................................................................... 33
7.2.2 MTODOS........................................................................................... 34
7.2.3 EVENTOS ........................................................................................... 34
7.2.4 FUNES ........................................................................................... 34
7.3
ELEMENTOS DA LINGUAGEM ................................................................... 34
7.3.1 VARIVEIS ......................................................................................... 34
7.3.2 EXPRESSES e OPERADORES................................................................ 35
7.3.3 DECLARAES .................................................................................. 35
7.4
JAVASCRIPT BSICO.............................................................................. 36
7.4.1 EMBUTINDO O CDIGO JavaScript ......................................................... 36
7.4.2 CARREGANDO UM ARQUIVO EXTERNO.................................................... 37
7.4.3 EXTENSES JavaScript PARA A LINGUAGEM HTML ................................... 37
7.5
ELEMENTOS ESSENCIAIS DO JAVASCRIPT ................................................... 38
7.5.1 O OBJETO DOCUMENT.......................................................................... 38
7.5.2 MANIPULAO E ALTERAO DO VALOR DE UMA PROPRIEDADE ................ 38
7.6
EVENTOS ............................................................................................. 39
7.6.1 onBlur................................................................................................ 40
7.6.2 onChange ........................................................................................... 40
7.6.3 onClick............................................................................................... 40
7.6.4 onFocus ............................................................................................. 42
7.6.5 onLoad............................................................................................... 42
7.6.6 onUnLoad ........................................................................................... 43
7.6.7 onMouseOver ...................................................................................... 43
7.6.8 onSubmit ........................................................................................... 44
7.6.9 onSelect ............................................................................................. 44
7.6.10 onMouseDown ................................................................................... 45
7.7
OUTROS EXEMPLOS ............................................................................... 45
PROPRIEDADES PARA FOLHAS DE ESTILOS CSS ............................................... 48
TABELA DE REFERNCIA HTML ......................................................................... 52
Algoritmos e Linguagens Lucilia Ribeiro
01 O Bsico
O Bsico
O pior dos problemas da gente que ningum tem nada com isso
(Mrio Quintana)
1.1
PGINAS HTML
Uma home page, conhecida como pgina Web ou pgina HTML, um arquivo texto
criado com um editor de textos qualquer, como o bloco de notas e gravado com a
extenso .HTM ou .HTML cujo contedo composto basicamente de textos e cdigos
especiais chamados tags que possibilitam a exibio deste arquivo na Web (Word Wide
Web) atravs de um programa especial chamado navegador ou browser.
Alm de texto, este documento pode conter referncias para imagens, sons,
animaes e at mesmo vdeos. Pode conter ligaes ou links para outras pginas
armazenadas no micro ou em qualquer outro lugar da internet. Uma pgina HTML
tambm conhecida como home page quando nos referimos pagina inicial ou principal
de um site.
A linguagem HTML (Hiper Text Makup Language) bastante simples e tem como
finalidade bsica formatar o texto exibido e criar ligaes entre as pginas Web, criando
assim documentos com o conceito de hipertexto.
1.2
TAGS
As tags normalmente so especificadas em pares, delimitando um texto que sofrer

algum tipo de formatao. Mas existem vrias tags individuais que executam uma ao
independente de um texto-alvo que sofrer formatao.
As tags so identificadas por serem envolvidas pelos sinais de menor e maior < >.
Entre tais sinais so especificados os comandos propriamente ditos. No caso de tags que
necessitam envolver um texto, a sua finalizao deve ser feita usando a barra de diviso
/, indicando que a tag est finalizando a marcao de um texto.
1.3
ESTRUTURA BSICA DO HTML
Para que um navegador interprete corretamente o programa, ele deve possuir alguns
comandos bsicos que sempre devero estar presentes. Um programa HTML possui trs
partes bsicas: a estrutura principal, o cabealho e o corpo do programa:
<HTML>
<HEAD>
<TITLE>Minha Primeira Pgina </TITLE>
</HEAD>
<BODY>
J acabou !!!!
</BODY>
</HTML>
1.4
MARCAES BSICAS
Em um editor de textos convencional, voc insere uma quebra ou avana de linha

toda vez que pressiona a tecla ENTER. Em um programa HTML necessrio colocar um
comando especfico para que o navegador entenda que voc deseja mudar de linha,
comear um novo pargrafo, colocar o texto em negrito, etc.
Veremos agora algumas marcaes tags bsicas:
HTML Lucilia Ribeiro
01 O Bsico
1.4.1 TTULOS
Esse o texto que aparece na barra de ttulo do seu navegador. Fica dentro do
cabealho no programa HTML.
1.4.2 CABEALHOS
"Cabealhos" normalmente so usados para ttulos e sub-ttulos de uma pgina.
Existem seis nveis de cabealhos, numerados de 1 a 6, sendo o nmero 1 o de maior
destaque. Cabealhos so exibidos em letras maiores e em negrito. O comando para
insero do cabealho o <Hn>, onde n pode ser um nmero de 1 a 6. O atributo align
pode assumir os valores center (centralizado), right (alinhado direita), left (alinhado
esquerda) e justify (alinhado pelas duas margens):
<Hn align = alinhamento>Texto do Pargrafo</Hn>
EX01.HTML
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Este o maior de todos</H1>
<H2 align=center>Agora vai diminuindo,</H2>
<H3 align=right>diminuindo...</H3>
<H4 align=left>diminuindo...</H4>
<H5>at ficar</H5>
<H6>bem pequenininho.</H6>
</BODY>
</HTML>
1.4.3 PARGRAFOS
A marcao <P> utilizada para definir o incio de um novo pargrafo, deixando
uma linha em branco entre cada pargrafo. A linguagem HTML no reconhece o caracter
de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os
clientes Web s reconhecem o incio de um novo pargrafo mediante a marcao
apropriada. Podemos incluir o atributo align da mesma forma como utilizado nos
cabealhos.
1.4.4 QUEBRAS DE LINHA
A marcao <BR> faz uma quebra de linha sem acrescentar espao extra entre as
linhas. Veja a diferena do uso de <P> e <BR> no exemplo a seguir:
EX02.HTML
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Utilizando p</H1>
Vamos separar esta sentena com marcao de pargrafo.<p> Para ver a diferena.
<H1>Utilizando br</H1>
Diferena quando separamos duas linhas utilizando<br> a marcao de quebra de
linha<br> Deu pra notar?
<P align=right>Pargrafo alinhado direita
</BODY>
</HTML>
01 O Bsico
1.5.
COMANDOS DE ESTILO
Assim como no editor de textos, voc pode criar uma srie de efeitos no texto,
alterando a forma ou tipo de fonte. Todos os comandos que alteram o estilo do texto so
do tipo continer ou liga-desliga, ou seja, precisam ser especificados em pares,
marcando o incio e o fim do texto que sofrer a formatao.
EX03.HTML
<HTML>
<HEAD>
<TITLE>Testando Estilos de Texto</TITLE>
</HEAD>
<BODY>
Texto em <B>Negrito</B><BR>
Texto em <I>Itlico</I><BR>
Texto em <B><I>Negrito e Itlico</I></B><P>
Texto <U>Sublinhado</U><BR>
Texto em estilo <STRONG>Strong</STRONG><BR>
Texto em estilo <TT>Typewriter</TT><P>
Texto em estilo <BIG>Big</BIG> que cria letras grandes<BR>
Texto em estilo <SMALL>Small</SMALL> que cria letras pequenas<P>
Texto no formato <SUP>sobrescrito</SUP> pelo comando SUP.<P>
Texto no formato <SUB>subscrito</SUB> pelo comando SUB.<P>
Para chamar a <BLINK>ATENO</BLINK> use o comando BLINK.<BR>
</BODY>
</HTML>
1.6.
ALTERANDO A FONTE
Um dos recursos de tratamento do texto mais interessante da linguagem HTML a

possibilidade de alterar o tamanho, cor e tipo da fonte do texto utilizado. O comando
responsvel por isso o <FONT>, que tambm do tipo continer:
<FONT size = n face = nome1, nome2, nome3 color = cor> </FONT>
SIZE: Este parmetro especifica o tamanho da fonte utilizada. Os valores permitidos
vo de 1 a 7. O padro 3. Se for especificado um nmero antecedido pelo sinal de
adio ou de subtrao, o tamanho da fonte atual ser aumentado ou diminudo naquele
valor. Por exemplo, se a fonte atual 3 e for especificado <font size=+2> o texto ser
exibido no tamanho 5. Note que esta numerao funciona de forma contrria aos
nmeros usados nos comandos de cabealho. Aqui, quanto menor o nmero, menor a
fonte.
FACE: Este parmetro permite que seja escolhida uma fonte diferente para o texto.
Podem ser especificadas vrias fontes, de maneira que, se o sistema no possuir a
primeira opo, a segunda carregada e assim por diante.
COLOR: Especifica a cor do texto. Seu valor pode ser especificado em hexadecimal,
RGB ou atravs de um nome predefinido de cores como mostra a tabela:
RED
BLACK
FLUCHSIA
GREEN
MAROON
#FF0000
#000000
#FF00FF
#00FF00
#800000
BLUE
CYAN
GRAY
LIME
NAVY
#0000FF
#00FFFF
#C0C0C0
#32CD32
#23238E
WHITE
YELLOW
SILVER
TEAL
OLIVE
#FFFFFF
#FFFF00
#E6E8FA
#008080
#808000
01 O Bsico
EX04.HTML
<HTML>
<HEAD>
<TITLE>ex04</TITLE>
</HEAD>
<BODY>
<H2>Exemplo de faces:</H2>
<FONT FACE='Verdana'>
Texto exibido na fonte Verdana </FONT><BR>
<FONT FACE='Courier New'>
Texto exibido na fonte Corurier New </FONT><BR>
<FONT FACE='TimesRoman'>
Texto exibido na fonte Times New Roman </FONT><BR>
<FONT FACE='VictorianD'>
Texto exibido na fonte VictorianD</FONT><BR>
<FONT FACE='xyz'>
Texto exibido na fonte XYZ que no existe na mquina</FONT>
<FONT SIZE=+2>Exemplo de size:</FONT><BR>
<FONT SIZE=7>Texto com tamanho de fonte 7</FONT><BR>
<FONT COLOR="#ffff00">Usando cores</FONT>
<FONT COLOR="#ff00ff">Usando cores</FONT>
<FONT COLOR=green>Usando cores</FONT>
<font color=red>Usando cores</FONT><BR>
<FONT SIZE=4 COLOR="blue" FACE='Verdana' >
Texto exibido na fonte Verdana cor Azul e tamanho 4</FONT><BR>
<FONT SIZE=2 COLOR="red" FACE='Arial' >
Texto exibido na fonte Arial cor vermelha e tamanho 2</FONT><BR>
Apenas <FONT SIZE=5 COLOR=green> parte </FONT> do texto pode ser mudada
</BODY>
</HTML>
1.7.
CORES E PADRES DE FUNDO
O mundo colorido, no ? Ento por que usar aquele fundo cinza ou branco que
aparece como padro toda vez que a pgina criada? A maioria dos navegadores
permite a utilizao de cores no segundo plano da tela (background) assim como a
utilizao de imagens que podem ser utilizadas para enfeitar o fundo da tela. Vamos
alterar os parmetros do comando <body>, responsvel pelas cores da pgina.
<BODY bgcolor=#xxxxxx text = #xxxxxx link = #xxxxxx vlink = #xxxxxx>
Onde xxxxxx deve ser substitudo por um cdigo que identifique a cor desejada para
aquele elemento. bgcolor a cor do fundo, onde o padro cinza ou branco. text a
cor do texto sendo que o padro preto, link a cor do texto do link, tendo como
padro o azul e vlink a cor do link visitado, padro vermelho prpura.
EX05.HTML
<HTML>
<HEAD>
<TITLE>Grcia </TITLE>
</HEAD>
<BODY bgcolor=yellow text=red link=black vlink=blue>
01 O Bsico
<P>Grcia est localizada no sudeste da Europa e ocupa uma rea total de 131.990
km<SUP>2</SUP>. O pas tem fronteiras para o norte com a Albnia, a ex-Iugoslvia, a
Bulgria e para o leste com a Turquia, perfazendo um comprimento total de 1.228km. </P>
<P><FONT color="#0000FF" size="4">Uso da terra:</FONT> 23% terra cultivvel; 40%
prados e pastos; 20% florestas e bosques; 9%outros. </P>
</BODY>
</HTML>
1.8.
OUTROS COMANDOS
Alm dos comandos de formatao apresentados, existem outros que ajudam e

melhoram a legibilidade do texto:
1.8.1 TEXTOS PR-FORMATADOS
Atravs do comando <PRE> voc pode incluir um texto que foi editado por um editor
de textos e preservar a formatao original do texto tais como marcas de tabulao, fim
de linha gerado pela tecla enter e outros formatos. A sintaxe geral :
<PRE> texto
...texto
</PRE>
1.8.2 CENTRALIZAO DE TEXTOS
Como padro, os textos inseridos em uma pgina HTML so alinhados esquerda.
Para centralizar um cabealho, pargrafo ou figura dentro da largura da pgina deve ser
usado o comando <CENTER></CENTER>.
1.8.3 LINHA DIVISRIA
O comando <HR> tem como finalidade inserir uma linha divisria na posio em que
foi especificado se ele for o nico comando da linha ou na linha seguinte caso esteja no
meio de um texto. Seu uso recomendado para criar uma diviso na pgina, separando
tpicos e assuntos distintos. Pode-se utilizar os atributos color, size e width. Este
ltimo designa qual a porcentagem que a linha ocupar na tela. Esse comando no
precisa ser finalizado:
<HR color=red size=3 width=50%>
EX06.HTML
<HTML>
<HEAD> <TITLE>ex06</TITLE> </HEAD>
<BODY>
Primeira linha de texto <BR>Segunda linha de texto <BR> Terceira linha de
texto<BR>Agora veremos o uso comando hr.<BR> Ao ser inserido no meio desta linha ele
mostra uma barra na prxima linha<HR> e continua o texto na linha seguinte.<BR>
Primeira linha de texto <HR color=red>Segunda linha de texto <HR color=blue size=3>
Terceira linha de texto<HR color=fuchsia size=5>
<HR color=olive size=10 width=50%>
<H1>Sem Centralizar</H1>
<CENTER><H1>Centralizado</H1></CENTER>
<PRE>
Este texto est digitado utilizando enter para mudar de linha
Como qualquer outro editor de texto.
A tabulao tambm foi includa.
</PRE>
</BODY>
</HTML>
02 Links e Listas
Links e Listas
A maior dor do vento no ser colorido

(Mrio Quintana)
2.1
LINKS
Fazer a ligao de um texto com uma pgina local uma tarefa bastante simples. Voc
precisa apenas especificar o nome completo do arquivo que ser chamado, utilizando o
comando <A> de ncora, onde href especifica o endereo da URL (Universal Resource
Locator) ao qual o link est associado, pode ser uma outra pgina da internet, um arquivo
para download ou at mesmo uma figura. Pode ser usada para referncias dentro ou fora do
documento e name especifica o nome da seo de um documento que referida por um link
de hipertexto.
<A href=url name=nome> link </A>
Exemplos:
<A href=http://www.lucilia.com.br> pgina da prof luclia</A>
<A name=inicio>Incio da Pgina</A>
<A href=#inicio>Vai para o incio da pgina</A>
<A href=pagina2.html#outra> outra parte da pgina 2</A>
<A href=index.html>Pgina Principal</A>
<A href=figura.jpg>Nome da Figura</A>
<A href=turboc.zip>Baixe aqui</A> o Compilador C
EX07A.HTML
<HTML>
<HEAD> <TITLE>EX07A</TITLE> </HEAD>
<BODY>
<H1><A NAME=inicio>TESTANDO LINKS</A></H1>
<H3>Isto aqui s para ocupar espao xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx <H3>
Vamos experimentar links para outras pginas na internet:<HR>
Site da professora <A HREF=http://www.lucilia.com.br> Luclia</A>, ou ento o site da <A
HREF = http://www.ufg.br>UFG</A><HR>
Podemos especificar links para outras pginas html como a <A HREF=cores.html>Tabela de
Cores</A> ou ento para envio de <A HREF=mailto:professora@lucilia.com.br> EMAIL</A><HR>
Ou ento podemos vincular uma parte do texto que leva a outra, como o <A HREF="#inicio">incio
</A> desta pgina. Ou at parte de outra pgina, <A HREF="ex07b.html#volta"> assim</A>
</BODY>
</HTML>
EX07B.HTML
<HTML>
<HEAD> <TITLE>EX07B</TITLE> </HEAD>
<BODY bgcolor=maroon text=white link=red vlink=silver>
<H1> <CENTER>PGINA 2 PARA TESTAR LINKS</CENTER> </H1>
<FONT face="futura" size=5>
Este texto somente para testar o <A NAME="volta">link</A> em uma outra pgina. Da mesma
forma, podemos retornar pgina principal chamada <A HREF="ex07a.html#inicio>INCIO.</A>
</BODY>
</HTML>
02 Links e Listas
2.2
LISTAS
Assim como os cabealhos, que separam partes do texto, outra forma de estruturar um
documento HTML a utilizao de listas. As listas podem funcionar como um sumrio, um
menu ou um resumo do contedo do documento e so excelentes para serem usadas como
ponto de partida ao acesso de outras partes de um documento.
Existem basicamente trs tipos de listas. As listas no-ordenadas, que contm uma srie
de itens sem numer-los, as listas ordenadas, que atribuem um nmero para cada elemento
da lista e a lista de definies, utilizadas para definir palavras.
Pode-se utilizar uma lista dentro da outra para implementar listas aninhadas.
2.2.1 LISTAS NO ORDENADAS
O comando <UL> (Unordered List) utilizado para criar listas no-ordenadas. Esse
comando deve envolver o primeiro e o ltimo item da lista. Cada item da lista deve ser
precedido do comando <LI> (Line Item). O parmetro type permite que sejam especificadas
variaes para o marcador utilizado na lista. Os valores possveis de se atribuir so square,
circle ou disc. Omitindo o parmetro type, os marcadores assumem a bolinha padro.
<UL type=square>
<LI> texto do item 1
<LI> texto do item n
</UL>
2.2.2 LISTAS ORDENADAS
O comando <OL> (Ordered List) utilizado para criar listas ordenadas. Esse comando
deve envolver o primeiro e o ltimo item da lista. Cada item da lista deve ser precedido do
comando <LI> (Line Item). O parmetro type permite que sejam especificadas variaes
para o marcador utilizado na lista. Os valores possveis de se atribuir so A (cria uma lista
alfabtica com letras maisculas), a (lista alfabtica com letras minsculas), I (lista com
numerais romanos maisculos) e i (numerais romanos minsculos).
Alm do parmetro type, voc pode mudar o nmero inicial da lista utilizando o parmetro
start, que deve ser sucedido do sinal de igualdade e do nmero inicial da lista. Omitindo os
parmetros, a lista ser numerada e iniciar pelo nmero 1.
<OL type=a start=f>
<LI> texto do item n
</OL>
2.2.3 LISTAS DE DEFINIES
O comando <DL> (Definition List) utilizado para criar listas de definies que se parece
um glossrio de termos. Cada termo da lista deve ser especificado com o comando <DT> e a
explicao de cada comando especificada com o comando <DD>:
<DL>
<DT> termo1 a ser definido
<DD> definio do termo1
<DT> termo2 a ser definido
<DD> definio do termo2
</DL>
10
02 Links e Listas
EX08.HTML
<HTML>
<HEAD> <TITLE>EX08</TITLE> </HEAD>
<BODY>
<UL>
<LI> FRUTAS:
<UL type=square>
<LI> banana
<LI> ma
</UL>
<LI> VERDURAS:
<UL type=disc>
<LI> cenoura
<LI> vagem
</UL>
</UL>
<HR>
<OL>
<LI> FRUTAS:
<OL type=A>
<LI> banana
<LI> ma
</OL>
<LI> VERDURAS:
<OL type=i start=5>
<LI> cenoura
<LI> vagem
</OL>
</OL>
<HR>
<DL>
<DT>HTML
<DD>A sigla HTML deriva da expresso inglesa HyperText Markup Language.
Trata-se de uma linguagem de marcao utilizada para produzir pginas na Internet. Esses
cdigos podem ser interpretados pelos browsers para exibir as pginas da World Wide Web..
<DT>HTTP
<DD>HTTP significa HyperText Transfer Protocol (Protocolo de Transferncia de
Hipertexto) e um protocolo da camada de "Aplicao" do modelo OSI, utilizado para
transferncia de dados na World Wide Web.
</DL>
</BODY>
</HTML>
11
03 Imagens e Tabelas
Imagens e Tabelas
"Para os peixinhos do aqurio, quem troca a gua Deus."

(Mrio Quintana)
3.1
IMAGENS
Incluir uma imagem em uma pgina HTML uma tarefa simples, mas que requer alguns
requisitos bsicos. Antes de criar uma pgina com dezenas de figuras e fotos, lembre-se uma
figura demora mais para carregar do que textos.
3.1.1 INSERINDO IMAGENS
O comando <IMG> responsvel por definir a posio em que uma imagem ser inserida.
Sua sintaxe bsica com seus respectivos parmetros est descrito abaixo. Com exceo do
parmetro src, todos os demais so opcionais.
<IMG src = url width = tam height = tam border = num alt = texto
vspace = num hspace = num align = sentido>
SRC: o nome da figura se estiver no mesmo diretrio do programa, ou o seu caminho
completo se estiver em outro diretrio.
WIDTH: Especifica a largura em pixels de exibio da imagem independente do seu
tamanho fsico. Se a imagem for maior ou menor do que o valor especificado, ela ser esticada
ou comprimida para caber no espao especificado. Se for colocado o sinal de percentual, ele
relativo largura da janela.
HEIGHT: Altura em pixels de exibio da imagem.
BORDER: Especifica em pixels a largura da borda da imagem. O valor zero remove a
borda.
ALT: Permite a exibio de um texto alternativo no lugar da imagem quando o navegador
no puder carreg-la.
VSPACE: Determina em pixels o espao que deve ser deixado em branco acima e abaixo
da imagem.
HSPACE: Determina o espao que deve ser deixado do lado esquerdo e direito da imagem.
ALIGN: Especifica o alinhamento da imagem relativa linha do texto onde exibida. Pode
assumir os seguintes valores: top (acima), middle( ao meio), bottom (abaixo), left (
esquerda) e right ( direita).
3.1.2 BACKGROUND COM IMAGENS
Usar um fundo colorido d outra vida para sua pgina. Melhor ainda utilizar pequenas
imagens para o fundo. Em vez de usar um cdigo de cor na opo bgcolor, voc pode
especificar o nome de um arquivo de imagem na opo background do comando body. Esta
imagem ser espalhada por toda a pgina de forma a encher o fundo da tela:
<BODY background="arquivo.jpg">
3.1.3 IMAGENS COMO HIPERLINK
Voc pode usar uma imagem como hiperlink envolvendo-a com o comando <A> </A>.
Em vez de especificar um texto, voc usa o comando <IMG> para colocar a imagem:
<A href=link> <IMG SRC=imagem.jpg></A>
12
3.2
TABELAS
O uso de tabelas melhora muito a aparncia de uma pgina, por permitir o alinhamento de
textos e imagens, alm de ordenar as informaes de forma padronizada.
Uma tabela criada atravs do comando <TABLE> </TABLE> e consiste em linhas e
colunas. A interseo de uma linha com uma coluna chamada de clula. As linhas de uma
tabela so criadas pelo comando <TR> </TR>. As clulas de uma linha so criadas pelo
comando <TD> </TD>.
3.2.1 INSERINDO TABELAS
O comando <TABLE> define a estrutura bidimensional da tabela:
<TABLE border=numero cellspacing=numero cellpadding=numero width=numero
align=alinhamento bgcolor=cor bordercolor = cor >
BORDER: Especifica a largura da linha das bordas que separam as clulas da tabela. Se
no for especificado, no ser exibido uma borda para a tabela.
CELLSPACING: Especifica o espaamento em pixels entre as clulas.
CELLPADDING: Espaamento entre o contedo e a borda da clula.
WIDTH: Largura da tabela em pixels.
ALIGN: Alinhamento da tabela na pgina. Pode ser right, left ou center.
BGCOLOR: Especifica a cor de fundo de toda a tabela
BORDERCOLOR: Especifica a cor das bordas da tabela
O comando <TR> (Table Row) define uma linha da tabela. Para cada linha de uma tabela,
deve ser especificado um par deste comando, onde, dentro deles, devem ser especificados os
comandos <TD> ou <TH> para criar as clulas de dados daquela linha.
<TR align=alinhamento valign = alinhamento bgcolor=cor bordercolor = cor >
ALIGN: Alinhamento horizontal do contedo da linha: right, left, center ou justify
VALIGN: Alinhamento vertical do contedo da linha: top, middle ou bottom
BGCOLOR: Especifica a cor de fundo da linha
BORDERCOLOR: Especifica a cor de borda da linha
O comando <TD> (Table Data) define o contedo de uma clula da linha de uma planilha.
Cada clula de uma linha precisa ser especificada por meio deste comando. Dentro de uma
clula voc pode colocar qualquer elemento aceito em uma pgina HTML como um texto ou
imagem.
<TD align=alinhamento valign = alinhamento bgcolor=cor bordercolor = cor nowrap
colspan=numero rowspan=numero>
ALIGN: Alinhamento horizontal do contedo da clula: right, left, center ou justify
VALIGN: Alinhamento vertical do contedo da clula: top, middle ou bottom
BGCOLOR: Especifica a cor de fundo da clula
BORDERCOLOR: Especifica a cor de borda da clula
NOWRAP: Indica para no quebrar a linha dentro da clula
COLSPAN: Indica o nmero de colunas que esta clula dever ocupar
ROWSPAN: Indica o nmero de linhas que esta clula dever ocupar
Atravs do par de comandos <TH> (Title Heading) voc pode especificar ttulos para as
colunas. Estes comandos funcionando da mesma forma que os comandos <TD>, s que
deixam o contedo da clula centralizado e em negrito.
13
EX09HTML
<HTML>
<HEAD> <TITLE>EX09</TITLE></HEAD>
<BODY background="planta.gif">
<P><IMG src="calvin.gif" alt="abrao" align="right" >
<FONT color="#3299cc">IMAGEM COM ALINHAMENTO RIGHT</FONT><P><P>
<P><A href=pagina2.html><IMG src="calvin.gif" alt="abrao" align="top"></A>
<FONT color="#db7093">IMAGEM COM ALINHAMENTO TOP</FONT>
<P><IMG src="calvin.gif" alt="abrao" align="middle">
<FONT color="#ebc79e">IMAGEM COM ALINHAMENTO MIDDLE</FONT>
<P><IMG src="calvin.gif" alt="abrao" align="botton">
<FONT color="#238e23">IMAGEM COM ALINHAMENTO BOTTON</FONT>
<HR>
<A href=Img2.jpg> <IMG src=Img1.jpg alt=Clique para Ampliar></A>
<TABLE border cellpadding=10 cellspacing=0 align=center bgcolor=silver bordercolor=red>
<CAPTION aling=top>LEGENDA COM ALINHAMENTO TOP</CAPTION>
<TR>
<TD colspan=2>primeira linha primeira coluna ocupando 2 colunas</TD>
<TH rowspan=4>primeira linha segunda coluna ocupando 4 linhas</TH>
</TR>
<TR align=right>
<TD>2 x 1</td><td>2 x 2</TD>
</TR>
<TR align=left>
<TD>3 x 1</td><td>3 x 2</TD>
</TR>
<TR align=center>
<TD>4 x 1</td><td>4 x 2</TD>
</TR>
</TABLE> <P>
<TABLE border=3 bordercolor=navy cellpadding=0 cellspacing=10>
<CAPTION align=bottom>LEGENDA COM ALINHAMENTO BOTTOM</CAPTION>
<TR>
<TD>teste para alinhamento<br>com relao s bordas<br>superior e inferior</TD>
<TD valign=top bgcolor=blue>TOP</TD>
<TD valign=middle>MIDDLE</TD>
<TD valign=bottom>BOTTOM</TD>
</TR>
</TABLE>
<H1>Alinhamento de Imagens</H1>
<TABLE>
<TR>
<TD><img src="calvin.gif"></TD>
</TR>
</TABLE>
<H1>Adicionando espao entre as imagens e incluindo uma legenda na Imagem</H1>
<TABLE cellpadding=50>
<TR>
<TD><img src="calvin.gif"><br>Imagem1</TD>
</TR>
</TABLE>
<H1>Imagem de fundo na tabela</H1>
<TABLE background="calvin.gif" border cellpadding=10 cellspacing=0 align=center
bordercolor=red>
<TR>
<TD colspan=2>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD>
14
<TH rowspan=4>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TH>
</TR>
<TR>
<TD>xxxxxxxxxxxxxxxxxxxxxxxxxx</TD><TD>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD>
</TR>
<TR align=left>
</TR>
<TR>
</TR>
</TABLE><P><P>
</BODY>
</HTML>
15
04 Formulrios
Formulrios
A resposta certa, no importa nada:

o essencial que as perguntas estejam certas.
(Mrio Quintana)
4.1
INTRODUO
At agora vimos a forma na qual o HTML providencia e mostra a informao,

essencialmente mediante o texto, imagens e links. Falta ver de que forma podemos trocar
informaes com nosso visitante. Desde ento, este novo aspecto primordial para a grande
quantidade de aes que se podem realizar mediante o Web: Comprara um artigo, preencher
uma enquete, enviar um comentrio ao autor
Vimos anteriormente que poderamos, mediante os links, entrar em contato diretamente
com um correio eletrnico. Entretanto, esta opo pode ser em alguns casos pouco verstil se
o que desejamos que o navegante nos envie uma informao bem precisa. atravs dele, o
HTML que propem outra soluo muito mais ampla: Os formulrios.
Os formulrios so estas famosas caixas de texto e botes que podemos encontrar em
muitas pginas web. So muito utilizados para realizar buscar ou tambm para introduzir
dados pessoais, por exemplo, em sites de comrcios eletrnico. Os dados que o usurio
introduz nestes campos so enviados ao correio eletrnico do administrador do formulrio ou
tambm, em um programa que se encarrega de process-lo automaticamente.
Usando HTML podemos unicamente enviar o formulrio a um correio eletrnico. Se
quisermos processar o formulrio mediante um programa, a coisa pode ser um pouco mais
complexa, j que teremos que empregar outras linguagens mais sofisticadas. Neste caso, a
soluo mais simples utilizar os programas pr-desenhados que nos propem um grande
nmero de servidores de hospedagem e que nos permitem armazenar e processar os dados
em forma de arquivo ou outros formatos. Se sua pgina est hospedada em um servidor que
no lhe propem estes tipos de vantagens, voc sempre poder recorrer a servidores de
terceiros que oferecem este ou outros tipos de servios gratuitos para webs. claro que
tambm existe outra alternativa que a de aprender linguagens como ASP ou PHP que nos
permitir, entre outras coisas, o tratamento de formulrios.
Os formulrios so definidos por meio das etiquetas <FORM> e </FORM>. Entre estas
duas etiquetas colocaremos todos os campos e botes que compem o formulrio. Dentro
desta etiqueta <FORM> devemos especificar alguns atributos:
<FORM action= mailto:professora@lucilia.com.br method= post enctype = text/plain>
ACTION: Define o tipo de ao a realizar com o formulrio. Como j dissemos, existem duas
possibilidades:
O formulrio enviado a um endereo de correio eletrnico
O formulrio enviado a um programa ou script que processa seu contedo.
No primeiro caso, o contedo do formulrio enviado ao endereo de correio eletrnico
especificada por meio de uma sintaxe deste tipo:
Se o que queremos que o formulrio seja processado por um programa, temos de
especificar o endereo do arquivo que contem o tal programa.
METHOD: Este atributo se encarrega de especificar a forma na qual o formulrio enviado. Os
dois valores possveis que este atributo pode tomar so post e get. Para efeitos prticos e
salvo se lhe disserem o contrrio, daremos sempre o valor post.
ENCTYPE: Utiliza-se para indicar a forma na qual viajar a informao que for mandada pelo
formulrio. No caso mais corrente, enviar o formulrio por correio eletrnico, o valor deste
16
04 Formulrios
atributo deve ser text/plain. Assim, conseguimos que o contedo do formulrio seja enviado
como texto plano dentro do e-mail.
Se quisermos que o formulrio se processe automaticamente por um programa,
geralmente no utilizaremos este atributo, de forma que tome seu valor padro, ou seja, no
incluiremos enctype dentro da etiqueta <FORM>.
4.2
ELEMENTOS DE FORMULRIOS: Campos de Texto
O HTML nos prope uma grande diversidade de alternativas na hora de criar nossos
formulrios. Estas vo desde a clssica caixa de texto at a lista de opes passando pelas
caixas de validao. Veremos em que consiste cada uma destas modalidades e como podemos
implement-las em nosso formulrio.
4.2.1 TEXTO CURTO
As caixas de texto so colocadas por meio da etiqueta <INPUT>. Dentro desta etiqueta
temos de especificar o valor de dois atributos: type e name.
A etiqueta da seguinte forma:
<INPUT type=text name=nome>
Deste modo expressamos nosso desejo de criar uma caixa de texto cujo contedo ser
chamado nome (por exemplo). O aspecto deste tipo de caixas conhecido, como pode ser
visto aqui:
O nome do elemento do formulrio de grande importncia para poder identific-lo em

nosso programa de processamento ou no e-mail recebido. Por outro lado, importante indicar
o atributo type, j que, como veremos, existem outras modalidades de formulrio que usam
esta mesma etiqueta.
O emprego destas caixas est fundamentalmente destinado tomada de dados breves:
palavras ou conjuntos de palavras de longitude relativamente curta. Veremos mais adiante que
existe outra forma de tomar textos mais longos a partir de outra etiqueta.
Alm destes dois atributos, essenciais para o correto funcionamento de nossa etiqueta,
existem outra srie de atributos que podem ser de utilidade, mas que no so imprescindveis:
SIZE: Define o tamanho da caixa em nmero de caracteres. Se ao escrever o usurio
chega ao final da caixa, o texto ir desfilando medida que se escreve fazendo desaparecer a
parte de texto que fica esquerda.
MAXLENGTH: Indica o tamanho mximo do texto que pode ser tomado pelo formulrio.
importante no confundi-lo com o atributo size. Enquanto o primeiro define o tamanho
aparente da caixa de texto, maxlength indica o tamanho mximo real do texto que pode ser
escrito. Podemos ter uma caixa de texto com um tamanho aparente (size) que menor do que
o tamanho mximo (maxlength). O que ocorrer neste caso que, ao escrever, o texto ir
desfilando dentro da caixa at que cheguemos ao seu tamanho mximo definido por
maxlength, momento no qual ser impossvel continuar escrevendo.
VALUE: Em alguns casos pode ser interessante atribuir um valor definido ao campo em
questo. Isto pode ajudar ao usurio a preencher mais rapidamente o formulrio ou a dar
alguma idia sobre a natureza de dados que se requerem. Este valor inicial do campo pode ser
expresso mediante o atributo value. Vejamos seu efeito com um exemplo simples:
<INPUT type=text name=nome value=Josefa Palotes>
Gera um campo deste tipo:
Josefa Palotes
4.2.2 TEXTO OCULTO
17
04 Formulrios
Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer uma certa
confiabilidade. Estes tipos de campos so anlogos aos de texto com somente uma diferena:
deslocando o atributo type=text por type=password:
<INPUT type=password name=nome>
Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto
sero vistos asteriscos. Estes campos so ideais para a introduo de dados confidenciais,
principalmente cdigos de acesso. Isto pode ser visto em funcionamento a seguir:
4.2.3 TEXTO LONGO

Se desejarmos colocar disposio do usurio um campo de texto onde possa escrever
comodamente sobre um espao composto de vrias linhas, temos de convocar uma nova
etiqueta: <TEXTAREA> e seu fechamento correspondente.
Estes tipos de campos so prticos quando o contedo a enviar no um nome, telefone
ou qualquer outro dado breve, e sim, um comentrio, opinio, etc.
Dentro da etiqueta TEXTAREA deveremos indicar, como para o caso visto anteriormente, o
atributo name para associar o contedo a um nome que ser semelhante a uma varivel nos
programas de processo. Alm disso, podemos definir as dimenses do campo a partir dos
atributos rows (nmero de linhas do campo de texto.) e cols (nmero de colunas do campo
de texto). A etiqueta fica portanto, desta forma:
<TEXTAREA name=comentrio rows=10 cols=40></TEXTAREA>
Mesmo assim, possvel definir o contedo do campo. Para isso, no usaremos o atributo
value e sim, que escreveremos dentro da etiqueta o contedo que lhe desejamos atribuir.
Vejamos:
<TEXTAREA name = comentrio rows = 10 cols = 40> Escreva seu comentrio</TEXTAREA>
Escreva seu comentrio....
4.3
OUTROS ELEMENTOS DE FORMULRIO
Efetivamente, os textos so uma maneira muito prtica de fazer chegar a informao do

navegante. Porm, em muitos casos, os textos so dificilmente adaptveis a programas que
possam process-los devidamente ou tambm pode ser que seu contedo no se ajuste ao
tipo de informao que requeremos. por isso que, em determinados casos, pode ser mais
efetivo propor uma escolha ao navegante a partir da exposio de uma srie de opes.
18
04 Formulrios
Este o caso de, por exemplo, oferecer uma lista de pases, o tipo de carto de crdito
para um pagamento, etc. Estes tipos de opes podem ser expressadas de diferentes formas.
4.3.1 LISTA DE OPES
As listas de opes so menus desdobrveis que nos permite escolher uma (ou vrias) das
mltiplas opes que nos propem. Para constru-las utilizaremos uma etiqueta com seu
respectivo fechamento: <SELECT>. Como para os casos j vistos, dentro desta etiqueta
definiremos seu nome por meio do atributo name. Cada opo ser includa em uma linha
precedida da etiqueta <OPTION>.
<SELECT name=estao>
<OPTION>Primavera</OPTION>
<OPTION>Vero</OPTION>
<OPTION>Outono</OPTION>
<OPTION>Inverno</OPTION>
</SELECT>
Primavera
A etiqueta <OPTION> ainda pode ser precisada por meio de outros atributos:
VALUE: Define o valor da opo que ser enviada ao programa ou ao correio eletrnico se
o usurio escolhe essa opo. Este atributo pode ser muito til se o formulrio for enviado a
um programa visto que a cada opo se pode associar um nmero ou letra, o qual torna-se
mais facilmente manipulvel que uma palavra ou texto. Poderamos assim escrever linhas
conforme escrito abaixo. Deste modo, se o usurio escolhe primavera, o que chegar ao
programa (ou ao correio) uma varivel chamada estao que ter com valor 1. No correio
eletrnico receberamos: estao=1
<OPTION value=1>Primavera</OPTION>
SELECTED: Este atributo no toma nenhum valor seno que simplesmente indica que a
opo que apresenta est escolhida por padro. Assim, se mudamos a linha do cdigo anterior
por <OPTION selected>Outono</OPTION>, o resultado ser:
Outono
4.3.2 BOTES DE RADIO

Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a
escolher unicamente uma das opes que lhe propem. A etiqueta empregada neste caso
<INPUT> na qual teremos a atributo type que temos de tomar o valor radio. Vejamos um
exemplo:
<INPUT
<INPUT
<INPUT
<INPUT
type=radio
type=radio
type=radio
type=radio
name=estao
name=estao
name=estao
name=estao
value=1>Primavera <BR>
value=2>Vero <BR>
value=3>Outono <BR>
value=4>Inverno <BR>
O resultado o seguinte:
Primavera
Vero
Outono
Inverno
Como podemos ver, a cada uma das opes se atribui uma etiqueta input dentro da qual
atribumos o mesmo nome (name) para todas as opes e um valor (value) distinto. Se o
usurio escolhe supostamente Outono, receberemos em nosso correio uma linha tal como
19
04 Formulrios
esta: estao=3. Cabe assinalar que possvel pr-selecionar por padro uma das opes.
Isto se pode conseguir por meio do atributo checked:
<INPUT type=radio name=estao value=2 checked>Vero
Vejamos o efeito:
Primavera
Vero
Outono
Inverno
4.3.3 CAIXAS DE VALIDAO
Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples
clique sobre a caixa em questo. A sintaxe utilizada muita parecida com as anteriores. A
nica diferena fundamental o valor adotado pelo atributo type.
Da mesma forma que para os botes de rdio, podemos ativar a caixa por meio do atributo
checked. O tipo de informao que chegar ao nosso correio (ou ao programa) ser do tipo:
feijoada=on (ou off dependendo se tiver sido ativada ou no)
<INPUT type=checkbox name=paella>Adoro uma feijoada
Adoro uma feijoada
4.4
BOTO SUBMIT, APAGAR CAMPOS E OUTROS
Os formulrios tm de dar lugar no somente informao a tomar do usurio como

tambm, a outra srie de funes. Concretamente, permite-nos seu envio mediante seu boto.
Tambm pode ser prtico poder propor um boto de Apagar Campos ou tambm, acompanhlo de dados ocultos que possam ajudar-nos em seu processamento.
4.4.1 BOTO ENVIAR CAMPOS
Para finalizar o processo de preenchimento do formulrio e faz-lo chegar a seu gestor, o
navegante tem de valid-lo por meio de um boto previsto para tal efeito. A construo de tal
boto no implica nenhuma dificuldade uma vez familiarizados com as etiquetas input j
vistas. Como poderemos observar, somente temos de especificar se trata de um boto de
envio (type=submit) e temos de definir a mensagem do boto por meio do atributo value.
<INPUT type=submit value=Enviar>
Enviar
4.4.2 BOTO APAGAR CAMPOS

Este boto nos permitir apagar o formulrio por completo no caso de que o usurio deseje
refaz-lo desde o princpio. Sua estrutura sinttica igual a anterior. Diferentemente ao boto
de envio, indispensvel em qualquer formulrio, o boto de Apagar Campos meramente
optativo e no utilizado freqentemente.
<INPUT type=reset value=Apagar Campos>
4.4.3 DADOS OCULTOS
Em alguns casos, aparte dos prprios dados enviados pelo usurio, pode ser prtico enviar
dados definidos por ns mesmos que ajudem ao programa em seu processamento do
formulrio. Estes tipos de dados, que no se mostram na pgina, mas que podem ser
detectados solicitando o cdigo fonte, no so freqentemente utilizados por pginas
construdas em HTML, so mais usados por pginas que empregam tecnologias de servidor.
20
04 Formulrios
Esta etiqueta, includa dentro de nosso formulrio, enviar um dado adicional ao correio ou
ao programa encarregado da gesto do formulrio. Poderamos a partir deste dado, tornar
conhecido ao programa a origem do formulrio ou algum tipo de ao a realizar (um reendereamento, por exemplo).
<INPUT type=hidden name=site value=www.criarweb.com>
EX10HTML
<HTML>
<HEAD>
<TITLE>EX10</TITLE>
</HEAD>
<FORM action="mailto:professora@lucilia.com.br" method="post" enctype="text/plain">
Nome <INPUT type="text" name="nome" size="30" maxlength="100"> <P>
E-mail <INPUT type="text" name="email" size="25" maxlength="100" value="@"> <P>
Cidade <INPUT type="text" name="cidade" size="20" maxlength="60"> <P>
Sexo <BR>
<INPUT type="radio" name="sexo" value="Masculino" checked> Homem <BR>
<INPUT type="radio" name="sexo" value="Feminino"> Mulher
<BR> <BR> Frequncia das viagens <BR>
<SELECT name="utilizao">
<OPTION value="1">Vrias vezes por dia
<OPTION value="2">Uma vez por dia
<OPTION value="3">Vrias vezes por semana
<OPTION value="4">vrias vezes por ms
</SELECT>
<BR> <BR>Comentrios sobre sua satisfao pessoal <BR>
<TEXTAREA cols="30" rows="7" name="comentrios"></TEXTAREA>
<BR> <BR>
<INPUT type="checkbox" name="receber_info" checked>
Desejo receber notificao das novidades nas linhas de nibus. <BR> <BR>
<INPUT type="submit" value="Enviar formulrio">
<BR> <BR>
<INPUT type="Reset" value="Apagar tudo">
</FORM>
</HTML>
21
05 Frames
Frames
"A morte a libertao total:

a morte quando a gente pode, afinal, estar deitado de sapatos".
(Mrio Quintana)
5.1
INTRODUO
Os frames so divises da tela do navegador em diversas telas (ou quadros). Com isso,
torna-se possvel apresentar mais de uma pgina por vez: por exemplo, um ndice principal em
uma parte pequena da tela, e os textos relacionados ao ndice em outra parte. O objetivo
principal dividir a pgina em sees que se tornam HTML independentes.
No difcil colocar frames em pginas; porm, nem todos os usurios gostam deles, pois
nem sempre a navegao fcil, alm de problemas para a impresso e a marcao dos
documentos interiores aos frames nos bookmarks.
5.2
DOCUMENTOS DE LAYOUT E DE CONTEDO
Com a definio de frames, os documentos escritos em HTML (extenso html ou htm)

podem ser de dois tipos: Documentos de Layout e Documentos de Contedo.
Documentos de layout contm informaes sobre a estrutura de frames dos documentos.
Cada frame declarado em documento de layout contm uma referncia implcita ou explcita
para outro documento que ser exibido no frame. Esse "documento filho" ser exibido
independentemente da existncia de outros frames na janela do navegador. O "documento
filho" pode ser um documento de contedo ou mesmo outro documento de layout encadeado.
Os documentos de contedo so documentos normais em HTML. Um documento de
contedo pode ser visto em um frame (de um documento de layout) ou sozinho, na janela do
navegador. A tag <FRAME></FRAME> define o contedo de cada frame do documento.
<frame src=pagina.htm name=nome scrolling=no noresize>
SRC:Associa uma URL ao frame.
NAME: Associa um valor (nome) janela.
SCROLLING: Define a presena, ausncia ou atribuio automtica pelo navegador das
barras de rolagem. Pode ser yes, no ou auto.
NORESIZE: Impede que o usurio mude o tamanho do frame.
A tag <FRAMESET> </FRAMESET> substitui o TAG <BODY> em um documento de
layout. Ela define a diviso da janela em duas ou mais linhas ou em duas ou mais colunas.
Pode haver vrias TAGs <FRAMESET> encadeados, fazendo-se, desta maneira, divises das
divises da pgina.
Contm os elementos FRAME, NOFRAMES e outros FRAMESETs que podem ser aninhados
para que se tenha uma divises dentro de uma diviso de layout.
<FRAMESET cols=quant rows=quant frameborder=1|0 framespacing=num>
COLS: Divide a janela (ou frame) em diversos frames verticais, tantos quantos forem os
valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente
uns aos outros. Ex: <frameset cols="70%,*"> <frameset cols="50,100">.
22
05 Frames
ROWS: Divide a janela (ou frame) em diversos frames horizontais, tantos quantos forem
os valores descritos. Os valores podem estar expressos em pixels, percentuais ou
relativamente uns aos outros.
FRAMEBORDER: Indica se ser exibida uma borda 3D para os frames, ou se os frames
no aparecero destacados por uma borda. O parmetro pode assumir os valores "1" (default,
indica a exibio da borda) ou "0" (suprime a exibio de borda).
FRAMESPACING: Cria um espao adicional, em pixels, entre os frames.
Os atributos FRAMESPACING e FRAMEBORDER funcionam igualmente por toda a cadeia de
FRAMESETs encadeados, bastando que sejam declarados no primeiro comando FRAMESET a
ser utilizado. A definio de frames atravs de percentuais interessante, pois a diagramao
da janela preservada, no importando a resoluo em que se estiver visualizando a pgina.
5.3
FRAMES SOBREPOSTOS DIRETA E INDIRETAMENTE
A janela do navegador pode ser dividida em diversos frames horizontais e verticais. Para
que isso seja possvel, as TAGs <FRAMESET> so encadeadas. Assim so criados frames
sobrepostos diretamente:
EX11.HTML (Documento de Layout)
<HTML>
<HEAD>
<TITLE>EX11</TITLE>
</HEAD>
<FRAMESET rows=*,*> 
<FRAME src=ex11a.html noresize>
<FRAMESET cols=30%,70%> 
<FRAME src=ex11b.html>
<FRAME src=ex11c.html>
</FRAMESET>
</FRAMESET>
</HTML>
O documento acima um documento de layout. Os documentos a que se referem os
comandos <FRAME>, dentro do <FRAMESET>, so tipicamente documentos de contedo, mas
tambm podero ser novos documentos de layout, que dividam novamente cada frame.
A janela do navegador foi inicialmente dividida em 2 frames horizontais iguais. Foi atribudo
o documento de contedo "ex11a.htm" ao primeiro frame.
Em seguida, dividiu-se o segundo frame em dois frames verticais, o primeiro com 30% do
espao disponvel e o segundo com os restantes 70%. Um frame pode exibir um documento de
contedo, isto , um documento tradicional com textos, imagens etc, ou um documento de
layout, que o dividiria novamente em outros frames. Chama-se isto de diviso indireta.
Iremos criar os documentos ex11a, ex11b e ex11c para fazer funcionar o exemplo.
EX11A.HTML
<HTML>
<HEAD>
<TITLE>EX11A</TITLE>
</HEAD>
<BODY>
<P>
<FONT face="Arial, Helvetica" color="blue" size="+4">
Este texto um teste do arquivo EX11A
</FONT>
</BODY>
</HTML>
23
05 Frames
EX11B.HTML
<HTML>
<HEAD>
<TITLE>EX11B</TITLE>
</HEAD>
<BODY>
<P><FONT face="Arial, Helvetica" color="red">
Este texto um teste do arquivo EX11B</FONT>
</BODY>
</HTML>
EX11C.HTML
<HTML>
<HEAD>
<TITLE>EX11C</TITLE>
</HEAD>
<BODY>
<H1 align="center"> <B>Este texto um teste do arquivo EX11C</B></H1>
</BODY>
</HTML>
5.4
LINKS EM FRAME ALVO
Quando o usurio pressiona um link qualquer em um frame, o link pode atualizar seu
prprio frame com o documento contido em sua URL, ou atualizar outro frame. Para que seja
possvel a atualizao de outros frames, foi introduzido o atributo TARGET na TAG <A>. O
atributo "TARGET" pode ter o nome de um frame ou uma dentre as seguintes palavras:
_self (atualiza o prprio frame)
_parent (atualiza o "frame-me")
_top (atualiza toda a janela, independente de qualquer frame - ex.: link externo)
_blank ou _window (abre uma nova janela de navegador)
"_self", "_parent" e "_top" so case-sensitive, e devem ser escritos em minsculas.
EX12.HTML
<HTML>
<HEAD>
<TITLE>Este o menu</TITLE>
</HEAD>
<FRAMESET rows=80%,*>
<FRAMESET cols=30%,*>
<FRAME src=ex12ind.html name=menu>
<FRAME src=ex12nada.html name=textos>
</FRAMESET>
<FRAME src=ex12nada.html name=ajuda>
</FRAMESET>
</HTML>
24
05 Frames
EX12A.HTML
EX12B.HTML
<HTML>
<HEAD>
<TITLE>Introduo </TITLE>
</HEAD>
<BODY>
<H1>Este o documento a.htm</H1>
<H2>Introduo</H2>
</BODY>
</HTML>
<HTML>
<HEAD></HEAD>
<BODY>
<H1>Este o documento b.htm</H1>
<H2>Captulo 1</H2>
</BODY>
</HTML>
EX12C.HTML
EX12D.HTML
<HTML>
<HEAD></HEAD>
<BODY>
<H1>Este o documento c.htm</H1>
<H2>Captulo 2</H2>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Captulo 3 </TITLE>
</HEAD>
<BODY bgcolor=lightgreen>
<H1>Este o documento d.htm</H1>
<H2>Captulo 3</H2>
</BODY>
</HTML>
EX12E.HTML
EX12F.HTML
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor=aqua>
<H1>Este o documento e.htm</H1>
<H2>Captulo 4</H2>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor=#ccccee>
<H1>Este o documento f.htm</H1>
<H2>Captulo 5</H2>
</BODY>
</HTML>
EX12G.HTML
EX12NADA.HTML
<HTML>
<HEAD>
<TITLE>Captulo 6</TITLE>
</HEAD>
<BODY bgcolor="skyblue">
<H1>Captulo 6</H1>
<HR>
<P>Este captulo descreve alguns conceitos bsicos
relacionados com a utilizao dos recursos de <A href =
ex12hlp.html target = ajuda>frames </A> e sua utilizao
na criao de home pages.</P>
<UL>
<LI>O que so Frames</LI>
<LI>Sintaxe geral</LI>
<LI>Exemplos</LI>
</UL>
<HR>
<H5>Aula sobre o uso de Frames.</H5>
<BR>
</BODY>
</HTML>
<HTML>
<HEAD></HEAD>
<BODY bgcolor="#80FFFF">
</BODY>
</HTML>
EX12SOS.HTML
<HTML>
<HEAD>
<TITLE>Ajuda do manual </TITLE>
</HEAD>
<BODY background=gray>
<H2><B><FONT face=Arial, Helvetica, sans-serif
color=red>Arquivo de Ajuda Online</FONT></B></H2>
Este arquivo contm informaes sobre a
ajuda.<BR>
</BODY>
</HTML>
EX12HLP.HTML
<HTML>
<HEAD>
<TITLE>Help do Frame.</TITLE>
</HEAD>
<BODY bgcolor=aquamarine>
<H1><FONT color=red>Frames</FONT></H1>
<P><TT>Os frames so divises da tela do browser em diversas telas (ou quadros). Com isso, torna-se possvel
apresentar mais de uma pgina por vez: por exemplo, um ndice principal em uma parte pequena da tela, e os textos
relacionados ao ndice em outra parte.</TT></P>
<P><A href=ex12nada.html>apagar texto de ajuda</A></P>
</BODY>
</HTML>
25
05 Frames
EX12IND.HTML
<HTML>
<HEAD>
<TITLE>Menu principal</TITLE>
<base target=textos>
</HEAD>
<BODY bgcolor=gold>
<H1 align=center>Menu Principal</H1>
<UL>
<LI><A href=ex12a.html>Introduo </A>
<LI><A href=ex12b.html>Captulo 1 </A>
<LI><A href=ex12c.html>Captulo 2 </A>
<LI><A href=ex12d.html>Captulo 3 </A>
<LI><A href=ex12e.html>Captulo 4 </A>
<LI><A href=ex12f.html>Captulo 5 </A>
<LI><A href=ex12g.html>Captulo 6 </A>
</UL>
<HR>
<P CENTER> <A href=ex12sos.html target=ajuda>Ativa Ajuda</A>
<P CENTER> <A href=ex12nada.html target=ajuda>Desativa Ajuda</A>
</BODY>
</HTML>
26
06 CSS
Folhas de Estilo - CSS
"O estilo uma dificuldade de expresso"

(Mrio Quintana)
6.1
INTRODUO
CSS, sigla em ingls para Cascading Style Sheet que em portugus foi traduzido para Folha
de Estilo em Cascata.
A introduo deste conceito preconiza o uso dos elementos (tags) HTML, exclusivamente
para marcar e estruturar o contedo do documento. Nenhum elemento HTML ser usado para
alterar a apresentao, ou seja estilizar o contedo. A tarefa de estilizao ficar a cargo das
CSS que nada mais do que um arquivo independente do arquivo HTML no qual so
declaradas propriedades e valores de estilizao para os elementos do HTML.
Estas declaraes de estilo, quer sejam estruturadas em um arquivo externo com extenso
.css quer sejam declaradas de outros modos (importadas, lincadas, incorporadas ou inline),
contm todas as regras de estilo para os elementos do documento HTML.
6.2
A REGRA CSS E SUA SINTAXE
Uma regra CSS uma declarao que segue uma sintaxe prpria e que define como ser
aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma Folha
de Estilos.
Uma regra CSS, na sua forma mais elementar, compe-se de trs partes: um seletor,
uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:
seletor { propriedade: valor; }
SELETOR: genericamente, o elemento HTML identificado por sua tag, ou por uma classe,
ou por uma ID, ou etc., e para o qual a regra ser vlida (por exemplo: <p>, <h1>, <form>,
.minhaclasse, etc...);
PROPRIEDADE: o atributo do elemento HTML ao qual ser aplicada a regra (por
exemplo: font, color, background, etc...).
VALOR: a caracterstica especfica a ser assumida pela propriedade (por exemplo: letra
tipo arial, cor azul, fundo verde, etc...)
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor
separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida
na regra, deve-se usar ponto-e-vrgula para separ-las. O ponto-e-vrgula facultativo no caso
de propriedade nica e tambm aps a declarao da ltima propriedade no caso de mais de
uma. No entanto de boa tcnica usar-se sempre o ponto-e-vrgula aps cada regra para uma
propriedade.
No exemplo abaixo, o seletor o "documento todo" (body - a pgina web), a propriedade
o fundo do documento e o valor a cor branca. Se o valor for uma palavra composta, dever
estar entre aspas duplas " ", ou simples ':
body {
background: lightgray;
}
h3 {
font-family: "Comic Sans MS"
}
27
06 CSS
Para tornar mais legvel as definies de estilo, voc deve descrever uma propriedade e
seu valor, em cada linha, como abaixo, mas isto no obrigatrio!
p{
text-align: right;
color: #FF0000;
}
6.3
AGRUPAMENTO DE SELETORES
Uma regra CSS quando vlida para vrios seletores, estes podem ser agrupados. Separe
cada seletor com uma vrgula. No exemplo abaixo agrupamos todos os elementos cabealho. A
cor de todos os cabealhos ser verde.
h1, h2, h3, h4, h5, h6 {
color: green;
}
6.4
O SELETOR CLASSE
Voc no est restrito somente aos elementos HTML (tags) para aplicar regras de estilo.
Voc pode "inventar" um nome e com ele criar uma classe a qual definir as regras CSS. E o
mais interessante das classes, que elas podem ser aplicadas a qualquer elemento HTML. E
mais ainda, voc pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML,
usando classes diferentes para cada um deles. A sintaxe para o seletor classe mostrada
abaixo: elemento HTML mais um nome qualquer que voc "inventa" precedido de . (ponto):
elemento HTML.minhaclasse {
propriedade: valor;
}
Por exemplo: suponha que voc queira ter dois tipos de pargrafos em seu documento: um
pargrafo com letras na cor preta e um pargrafo com letras na cor azul.
p.corum {
color:black;
}
p.cordois {
color:blue;
}
No seu documento HTML as regras seriam aplicadas conforme abaixo:
<p class =corum> este pargrafo ter cor preta.</p>
<p class =cordois> este pargrafo ter cor azul.</p>
6.5
INSERINDO COMENTRIOS
Voc pode inserir comentrios nas CSS para explicar seu cdigo, e principalmente ajud-lo
a relembrar de como voc estruturou e qual a finalidade de partes importantes do cdigo. O
comentrio introduzido no cdigo ser ignorado pelo navegador. Um comentrio nas CSS
comea com o /*, e termina com */. Veja o exemplo abaixo:
/* este um comentrio*/
p{
font-size: 14px; /* este outro comentrio*/
color: #000000;
font-family: Arial, Serif;
}
28
06 CSS
6.6
FOLHA DE ESTILO EXTERNA
Uma folha de estilo dita externa, quando as regras CSS esto declaradas em um
documento a parte do documento HTML. A folha de estilo um arquivo separado do arquivo
html e que tem a extenso .css.
Uma folha de estilo externa ideal para ser aplicada a vrias pginas. Com uma folha de
estilo externa, voc pode mudar a aparncia de um site inteiro mudando um arquivo apenas (o
arquivo da folha de estilo).
O arquivo css da folha de estilo externa dever ser lincado ou importado ao documento
HTML, dentro da tag <HEAD> do documento. A sintaxe geral para lincar uma folha de estilo
chamada estilo.css mostrada abaixo:
<HEAD>
..........
<LINK rel=stylesheet type=text/css href=estilo.css>
.........
</HEAD>
O browser ler as regras de estilo do arquivo estilo.css, e formatar o documento de
acordo com elas.Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O
arquivo no deve conter nenhuma tag HTML. As folhas de estilo devem ser "salvas" com uma
extenso .css.
6.7
FOLHA DE ESTILO INCORPORADA OU INTERNA
Uma folha de estilo dita incorporada ou interna, quando as regras CSS esto declaradas
no prprio documento HTML.
Uma folha de estilo incorporada ou interna ideal para ser aplicada a uma nica pgina.
Com uma folha de estilo incorporada ou interna, voc pode mudar a aparncia de somente um
documento, aquele onde a folha de estilo esta incorporada.
As regras de estilo, vlidas para o documento, so declaradas na seo <HEAD> do
documento com a tag de estilo <STYLE>, conforme sintaxe mostrada abaixo:
<HEAD>
...........
<STYLE type=text/css>
BODY {
background: white;
}
H3 {
color: red;
}
P{
margin-left: 15px;
}
</STYLE>
...........
</HEAD>
6.8
FOLHA DE ESTILO INLINE
Uma folha de estilo dita inline, quando as regras CSS esto declaradas dentro da tag do
elemento HTML. Um estilo inline s se aplica a um elemento HTML. Ele perde muitas das
vantagens de folhas de estilo pois mistura o contedo com a apresentao. Use este mtodo
excepcionalmente, como quando quiser aplicar um estilo a uma nica ocorrncia de um
elemento. A sintaxe para aplicar estilo inline mostrada a seguir:
<P style=color:#000000; margin: 5px;>
Aqui um pargrafo de cor preta e com 5px nas 4 margens.
</P>
29
06 CSS
6.9
FOLHAS MLTIPLAS DE ESTILO
Se alguma propriedade for definida para um mesmo elemento em folhas de estilo

diferentes, entrar em ao, o EFEITO CASCATA e prevalecero os valores da folha de estilo
mais especfica. Suponha, uma folha de estilo externa com as seguintes propriedades para o
seletor h2:
h2 {
color: #FFCC00;
text-align: center;
font: italic 9pt Verdana, Sans-serif;
}
E uma folha de estilo interna com as seguintes propriedades para o seletor h2:
h2 {
color: #FFCC00;
text-align: center;
font: italic 10pt Verdana, Sans-serif;
}
Se ambas as pginas estiverem vinculadas ao documento, como h um conflito no
tamanho das letras para <h2>, prevalecer a folha interna e a letra de <h2> ter o tamanho
igual a 10 pt.
Para determinar a prioridade so considerados diversos fatores, entre eles, o tipo de folha
de estilo, o local fsico da folha de estilo no seu todo, o local fsico da regra de estilo na folha
de estilo e a especificidade da regra de estilo.
A prioridade para o efeito cascata:
1. folha de estilo do usurio;
2. folha de estilo do desenvolvedor;
3. estilo inline (dentro de um elemento HTML);
4. estilo incorporado (definido na seo head do documento);
5. estilo externo (importado ou linkado).
6. folha de estilo nativa no navegador.
Assim, em linhas gerais, um estilo definido pelo usurio prevalece sobre todos os demais, a
seguir vem as folhas de estilo definidas pelo desenvolvedor do site e para estas os estilos
inline (dentro de um elemento HTML) tem a prioridade a mais elevada, o que significa que
prevalecer sobre aquele definido na seo head e este sobre o definido em uma folha de
estilo externa e finalmente a ltima prioridade para estilos padro do navegador.
30
06 CSS
EX13.CSS
H1 {
font-family: Verdana;
font-size: xx-large;
font-weight: bold;
color: #800000;
background: #FFFFCC;
text-align: center;
border: 10pt green inset;
}
H2 {
font-family: Arial;
font-size: x-large;
font-weight: bold;
color: #FFFFCC;
background: #800000;
text-align: center;
border: 10pt blue ridge;
}
H3 {
font-family: Courier;
font-size: large;
font-weight: bold;
color: #800080;
text-align: center;
border: 10pt red groove;
}
A{
font-family: Arial;
font-weight: bold;
color: #0000FF;
cursor: crosshair;
}
A:LINK {
font-family: Arial;
font-weight: bold;
color: #0000FF;
}
A:VISITED {
font-family: Arial;
font-weight: bold;
color: #800080;
text-decoration: underline;
position: relative;
}
B{
font-family: Arial;
font-weight: bold;
color: #800000;
I{
font-family: Arial;
font-weight: bold;
font-style: italic;
LI {
font-family: Arial;
font-size: medium;
color: #000080;
list-style: circle;
}
P{
font-family: Arial;
font-size: medium;
color: #000080;
position: relative;
}
TD {
font-family: sans-serif;
font-size: medium;
background: #99CCCC;
}
TH {
font-family: sans-serif;
font-size: medium;
font-weight: bold;
color: #FF0000;
background: #FFFF00;
text-align: center;
position: relative;
}
PRE {
font-family: monospace;
font-size: medium;
background: #CCFFFF;
left: 1cm;
}
.first {
border-top: ridge;
border-left: ridge;
text-decoration: underline;
}
.last {
border-bottom: ridge;
border-right: ridge;
border-top: solid;
border-left: double;
text-decoration: line-through;
letter-spacing: 2pt;
margin: .5cm .5cm .1cm .5cm;
}
31
06 CSS
EX13.HTML
<HTML>
<HEAD>
<TITLE>EX13</TITLE>
<LINK rel=stylesheet type=text/css href=ex13.css>
</HEAD>
<BODY bgcolor=White>
<H1>Este um cabealho H1</H1>
<P class=first> Esta uma classe de pargrafo "first"</P>
<P>Este um pargrafo normal com texto em <B>negrito</B> e em <I>itlico</I>.</P>
<UL>
<LI>Este um item de lista com um link <A href=ex13.html>vazio</A>
</UL>
<PRE>
Aqui vai algum texto pr-formatado.
</PRE>
<TABLE>
<TR>
<TH>Um cabealho de tabela</TH>
</TR>
<TR>
<TD>Uma clula de tabela</TD>
</TR>
</TABLE>
<P class=last>E aqui est uma classe de pargrafo "last"</P>
</BODY>
</HTML>
32
07 Java Script
Introduo ao Java Script
"Confesso que at hoje s conheci dois sinnimos perfeitos: 'nunca' e 'sempre'."

(Mrio Quintana)
7.1
INTRODUO
A linguagem HTML especializada na formatao de pginas e na criao de hiperlinks. Ela

totalmente desprovida de recursos para a validao de contedo e comandos estruturais que
permitam a execuo repetitiva de trechos do programa. Podemos resolver esse problema
utilizando uma linguagem de script como a JavaScript.
A primeira coisa que tem de ficar clara que a linguagem JavaScript no deve ser
confundida com a linguagem de programao Java. O Java permite a criao de uma aplicao
independente e possui todos os recursos de uma linguagem de programao destinada
criao de aplicaes comerciais, assim como a linguagem C. A JavaScript uma linguagem de
script que se aloja dentro de um programa HTML. Voc no pode criar um programa em
JavaScript e execut-lo sem ter um navegador.
O J avaScript uma linguagem interpretada, ou seja, o cdigo fonte sempre traduzido
para uma linguagem de mquina que o computador entenda na hora em que for executado.
Ele baseado em objetos, que significa que o programador pode utilizar-se de objetos
predefinidos ou ento criar novos objetos para satisfazer suas necessidades.
7.2
ORIENTAO A OBJETOS
A JavaScript baseada em objetos. Isso quer dizer, de uma forma bem simples, que ela
trata todos os elementos de uma pgina Web como um objeto. Os objetos normalmente so
agrupados de acordo com seu tipo ou finalidade. Quando um documento carregado no
navegador, ele cria um certo nmero de objetos JavaScript com propriedades e valores
ajustados pelo contedo do documento. Esses objetos respeitam uma hierarquia que reflete a
estrutura da pgina HTML em si.
Um objeto normalmente armazena uma srie de informaes que podem ser acessadas e
utilizadas para processamento, ou alteradas pelo programador. Uma janela que exibe uma
home page possui diversos objetos intrnsecos, por xemplo: navigator (possui propriedades
para o nome e verso do navegador que est sendo usado), window ( o objeto de mais alto
nvel. Possui propriedades que se aplicam janela como um todo. Cada janela-filha possui
tambm um objeto window), document (contm informaes sobre a pgina ou documento
HTML como um todo, incluindo dados sobre os elementos de formulrios, links e ncoras, alm
de uma srie de funes que permitem mudar as caractersticas da pgina), form (guarda
informaes especficas sobre formulrios da pgina atual tais como o seu mtodo, URL e
dados sobre seus elementos ou campos), history (mantm uma lista de todos os sites
visitados na sesso de uso atual do navegador) e location (possui informaes sobre o local
da pgina e informaes relacionadas tais como o protocolo utilizado e seu domnio.
7.2.1 PROPRIEDADES
Um objeto possui caractersticas prprias que o tornam nico dentro de um grupo. Por
exemplo, um carro possui caractersticas do tipo, nmero de portas, potncia do motor,
nmero de passageiros, cor, peso, etc. J uma geladeira possui caractersticas do tipo,
capacidade (em litros), cor, altura, peso, etc. Algumas caractersticas ou propriedades so
comuns a muitos objetos (nos exemplo acima a cor e o peso) enquanto outras so especficas
a cada um.
As propriedades podem ser vistas como variveis que armazenam uma informao
relacionada com um determinado objeto. As propriedades de um objeto so acessadas atravs
de uma sintaxe bastante simples e que consiste do nome do objeto, um ponto e o nome da
33
07 Java Script
propriedade. Por exemplo, o objeto documento (que diz respeito pgina HTML) possui uma
propriedade que a cor do fundo. Para se referir a esta propriedade devemos usar:
documento.bgcolor. Para saber o contedo do ttulo do documento pode-se usar outra
propriedade, assim: documento.title.
7.2.2 MTODOS
Alm de propriedades, um objeto possui, em sua maioria, funes especiais chamadas
mtodos que realizam alguma operao relacionada com o objeto. Os mtodos normalmente
so usados para alterar o valor de uma propriedade do objeto ou ento executar uma tarefa
especfica. A sintaxe bsica de um mtodo composta da seguinte forma:
objeto.nome_do_mtodo(argumento)
Onde objeto o nome do objeto que sofre a ao do mtodo, nome_do_mtodo o
nome que identifica o mtodo e argumento uma expresso ou valor opcional que ser
usado para alterar ou atuar sobre o objeto.
O objeto documento possui um mtodo chamado write cuja finalidade a de inserir
linhas no programa HTML durante sua execuo: documento.write(<H1>Demonstrao de
JavaScript</H1>). J o objeto window possui um mtodo chamado alert que exibe uma
mensagem de aviso em uma caixa de dilogo: window.alert(operao invlida).
7.2.3 EVENTOS
Uma das caractersticas de uma linguagem baseada em objetos a possibilidade de
gerenciar eventos, ou seja, reagir a um evento e executar algum procedimento. De uma forma
simples podemos dizer que um evento uma ao que ocorre na pgina devido interao do
usurio. Por exemplo, clicar sobre um boto, marcar um campo, digitar o contedo de um
campo.
Os eventos so o principal recurso da linhagem JavaScript para a validao de campos e
alterao dinmica da pgina. Veja uma tabela parcial dos eventos e seus gerenciadores:
Evento
Blur
change
Click
focus
Load
mouseover
select
submit
Unload
Gerenciado associado
onBlur
onChange
onClick
onFocus
onLoad
onMouseOver
onSelect
onSubmit
onUnload
Comentrio
executado sempre que um campo perde o foco
Executado sempre que o contedo de um campo alterado
Executado sempre que um objeto do formulrio clicado
Executado quando um campo recebe o foco
Executado quando uma janela totalmente carregada
Executado sempre que o mouse passa por cima de um objeto
Executado quando um texto de um campo (text ou textarea) selecionado
Executado sempre que o usurio enviar um formulrio para o servidor
Executado quando um documento abandonado
Com o gerenciador de eventos, podemos mudar o comportamento do navegador. Por

exemplo, quando voc clicar sobre uma rea da janela com o boto direito do mouse, aparece
um menu rpido padro. Voc pode usar um gerenciador de evento para mudar isso. Ao invs
de mostrar o menu, voc pode trocar a cor de fundo da tela, mostrar uma caixa de dilogo ou
executar uma rotina qualquer.
7.2.4 FUNES
Funes so rotinas independentes que executam uma tarefa especfica. Elas se
diferenciam dos mtodos, pois no esto associadas a um objeto. O JavaScript possui funes
genricas que realizam operaes matemticas, com strings, datas, etc. A linguagem tambm
permite que o usurio crie suas prprias funes.
7.3
ELEMENTOS DA LINGUAGEM
Vimos que a linguagem funciona atravs da manipulao de objetos. Essa manipula~ao

pode ser feita de diversas formas. Seja atravs da alterao direta do contedo de uma
propriedade ou atravs de rotinas escritas na linguagem JavaScript, que possui sua prpria
sintaxe e regras. Veremos as caractersticas de programao da linguagem:
7.3.1 VARIVEIS
34
07 Java Script
Alm de propriedades, que armazenam informaes sobre objetos, a JavaScript permite a

criao de variveis de memria cuja finalidade armazenar temporariamente um contedo
qualquer que pode ser um texto, um valor, uma data, etc. Uma varivel pode receber seu
contedo atravs da atribuio simples do contedo ou do resultado da ao de uma
expresso ou funo:
nome=Geraldo Amaral
hoje=date()
total=20*4
O nome de uma varivel pode comear com uma letra ou sublinhado (_) seguidos de
nmeros ou letras sem espao. A JavaScript faz distino entre letras maisculas e
minsculas.
As variveis podem ser do tipo inteiro (ou integer, que representam um nmero que pode
ser positivo, negativo ou fracionrio), ponto flutuante (ou floating point, conhecido tambm
como notao cientfica), booleanos (podem assumir valores TRUE ou FALSE) ou literais
string (que consiste em um texto envolvido por aspas).
7.3.2 EXPRESSES e OPERADORES
Uma expresso uma combinao de variveis, mtodos, funes e operadores que
retornam um resultado qualquer. Uma expresso usada para atribuir um valor a uma
varivel ou para ser testada e uma ao tomada em funo do seu resultado. Na tabela a
seguir esto os principais operadores e seus respectivos efeitos:
Operador
=
+
*
/
%
&&
||
==
!=
>
<
>=
<=
Funo
Atribuio
Adio
Subtrao
Multiplicao
Diviso
Mdulo
E lgico (and)
Ou lgico (or)
Igual a
Diferente
Maior que
Menor que
Maior ou igual a
Menor ou igual a
Exemplos
x = 20 (atribui o valor 20 varivel x)
10 + 5 (resulta em 15)
10 8 (resulta em 2)
5 * 4 (resulta em 20)
50 / 5 (resulta em 10)
10 % 3 ( o resto da diviso de 10 por 3, resultado 1)
a && b (retorna TRUE se as duas expresses lgicas a e b forem verdadeiras)
a || b (retorna TRUE se uma das duas expresses a ou b forem verdadeiras)
a == b (retorna TRUE se a for igual a b)
a != b (retorna TRUE se a for diferente de b)
a > b (retorna TRUE se a for maior que b)
a < b (retorna TRUE se a for menor que b)
a >= b (retorna TRUE se a for maior ou igual a b)
a <= b (retorna TRUE se a for menor ou igual a b)
7.3.3 DECLARAES
A seguir encontra-se uma lista com os principais comandos ou declaraes da linguagem
JavaScript. Estes comandos so usados basicamente para criar a estrutura lgica do programa.
Eles so usados para a tomada de deciso, execuo repetitiva de outros comandos ou a
criao de funes do usurio.
Comando
break
Funo
interrompe o comando while ou for que
est sendo executado e transfere o controle
do programa para o comando seguinte ao
comando que encerra o lao.
comentrios
inclui linhas que sero ignoradas pela

linguagem. Para comentrio de uma nica
linha use duas barras. Para comentrios
que ocupem vrias linhas, inicie com /* e
finalize com */
Sintaxe
break;
//texto
ou
/*texto longo*/
Exemplos
function teste(x){
var i = 0;
while (i < 6) {
if (i == 4)
break;
i++;
}
return i*x;
}
//esta uma linha de
comentrio
/*este um comentrio
extenso que ocupa mais de
uma linha consecutiva.*/
35
07 Java Script
continue
for
function
if ... else
this
var
while
7.4
termina a execuo de um grupo de

comandos dentro de um lao gerado pelo
while ou for reiniciando o processo na
prxima interao, ou seja, ele retorna o
controle para a linha que contm a
condio validada pelo lao. Dentro de um
comando while volta para a linha da
condio e dentro de um comando for para
a
linha
da
expresso
usada
para
atualizao.
estrutura de controle que permite a
execuo
repetitiva
de
comandos
envolvidos dentro dos limites do comando
for. Ele composto de trs expresses. A
primeira usada para inicializar uma
varivel que usada como um contador
para controlar as repeties. A segunda
expresso analisada e se seu valor for
TRUE, ela executa os comandos seguintes.
Caso contrrio abandona o comando FOR.
A terceira expresso usada para
aumentar ou diminuir o valor do contador.
cria uma funo definida pelo usurio. Ela
recebe o nome determinado pelo texto que
for especificado no local de nome. No caso
da funo retornar um valor, deve ser
especificado o comando return com a
expresso de retorno.
faz a avaliao de uma expresso e
executa os comandos dentro do if se o
resultado for verdadeiro. Caso contrrio, os
comandos seguintes ao if so executados.
Se a clusula else for usada os comandos
seguintes a ela so executados caso a
expresso se torne falsa.
substitui o nome do objeto atual quando se
aplica um mtodo ou uma propriedade.
declara o nome de uma varivel e
opcionalmente inicializa a varivel com um
valor.
estrutura de controle que avalia uma
expresso e se ela for verdadeira executa o
grupo de comandos. Quando a expresso
se torna falsa o fluxo do programa
continuado sendo executada a instruo
seguinte ao comando while.
continue
for (exp1; exp2; exp3){

comandos
}
for (var i=0; i<19; i++) {

n = n + I;
myfunc(n);
}
function nome(param){
comandos
}
function cubo(x){
return x*x*x;
}
if (condio) {
comandos
} else {
comandos
}
if (a%2 = 0) {
document.write (par)
else
document.write(impar);
this.property
var
var1=valor, var2;
while (condio) {
comandos
}
x = 0;
while (x <= 10) {
document.write(x*2);
x++;
}
JAVASCRIPT BSICO
A JavaScript uma linguagem interpretada pelo navegador. O cdigo um tipo de hspede

dentro de um programa HTML. No mesmo arquivo .HTML que esto os comandos bsicos da
linguagem HTML, o cdigo JavaScript inserido de maneira a ser interpretado quando
necessrio.
Existem duas formas de incluir um cdigo JavaScript dentro do documento HTML. A
primeira embutir o cdigo inteiramente dentro do documento e a segunda criar um arquivo
externo com os comandos e que referenciado por um comando dentro do programa HTML
que o carrega automaticamente.
Embutir o cdigo dentro do programa HTML tem a vantagem de deixar tudo mo para a
edio do cdigo. ideal quando o cdigo JavaScript vai ser usado apenas naquele
documento. A criao de um arquivo separado interessante quando um mesmo cdigo
JavaScript utilizado por vrios documentos.
7.4.1 EMBUTINDO O CDIGO JavaScript
Para embutir o cdigo JavaScript no programa HTML, deve ser usado o comando <SCRIPT
language = JavaScript> ..... </SCRIPT>. Dentro desta tag voc deve inserir os comandos
da linguagem. Este cdigo avaliado depois da pgina HTML ter sido carregada. Se existirem
36
07 Java Script
funes definidas pelo usurio dentro desse cdigo, elas sero apenas carregadas e
executadas somente quando algum evento as acionar.
EX14.HTML
<HTML>
<HEAD>
<TITLE>EX14 - embutindo um cdigo JavaScript</TITLE>
<SCRIPT language="JavaScript">
alert( "Esta caixa de dilogo foi exibida pelo cdigo JavaScript embutido no programa" )
document.write("Esta linha tambm foi escrita pelo cdigo JavaScript")
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<HR>
Esta linha j parte do documento HTML.
</BODY>
</HTML>
7.4.2 CARREGANDO UM ARQUIVO EXTERNO
Usar um arquivo externo bastante simples, basta adicionar na linha do comando
<SCRIPT> o endereo do arquivo atravs do atributo src. Veja o cdigo abaixo:
EX15.HTML
<HTML>
<HEAD>
<TITLE>EX15 carregando arquivo JavaScript externo</TITLE>
<SCRIPT language=JavaScript src=ex15.js>
</SCRIPT>
</HEAD>
<HR>
Esta linha j parte do documento HTML.
</BODY>
</HTML>
O arquivo ex15 um arquivo texto normal. O seu contedo :
EX15.JS
alert( "Esta caixa de dilogo foi exibida pelo cdigo JavaScript embutido no programa" )
document.write("Esta linha tambm foi escrita pelo cdigo JavaScript")
7.4.3 EXTENSES JavaScript PARA A LINGUAGEM HTML
O container definido pelo comando <SCRIPT>...</SCRIPT> usado para armazenar
comandos que devem ser executados imediatamente aps o carregamento do documento
HTML e funes definidas pelo usurio que so executadas em funo da ocorrncia de um
determinado evento com um objeto.
No exemplo a seguir, dentro da tag <SCRIPT> so criadas duas funes, uma chamada
Quadrado() e outra Cubo(). Ainda dentro do container, so inseridos alguns comandos que
inicializam uma varivel e acionam a funo Quadrado(), exibindo uma frase no documento
contendo o valor original e o seu Quadrado.
Ao terminar a execuo do script, o documento HTML carregado normalmente. Atravs
de uma extenso do JavaScript linguagem HTML, pode-se controlar os eventos que ocorrem
com um objeto e tomar uma ao baseada neste evento.
O comando input, conforme j foi visto, usado para receber a digitao de um nmero.
Ao digitar o nmero e teclar enter, o gerenciador de eventos do JavaScript chamado onBlur
ativa a caixa de dilogo Alert e a funo Cubo mostrando o resultado da operao:
37
07 Java Script
EX16.HTML
<HTML>
<HEAD>
<TITLE>EX16 - eventos - OnChange</title>
</HEAD>
<SCRIPT language=javascript>
document.write("Linha gerada pelo JavaScript durante o seu carregamento"+"<br>")
function quadrado(x) // Funo executada por comandos dentro do container Script. {
document.write( x*x)
}
function cubo(x) // Funo executada apenas quando um evento ocorrer {
return x*x*x
}
a=5
document.write("A raiz de "+ a +" igual a = " )
quadrado(a)
</SCRIPT>
<HR>
<FORM>
<INPUT type=text name=teste Value=""
onChange="alert('O cubo de '+ this.value + ' ' +cubo(this.value))" >
</FORM>
<HR>
</BODY>
</HTML>
7.5
ELEMENTOS ESSENCIAIS DO JavaScript

Veremos agora alguns elementos essenciais mnimos para trabalhar com a linguagem.
7.5.1 O OBJETO DOCUMENT

O objeto document criado automaticamente pelo comando HTML <HEAD> e <BODY>.
Como todo objeto, ele possui caractersticas ou propriedades que podem ser acessadas ou at
mesmo alteradas. Para usar uma propriedade ou mtodo deste objeto deve ser usada a
seguinte sintaxe: document.nome_da_propriedade.
O MTODO DOCUMENTO.WRITE(): um dos elementos da linguagem JavaScript mais
utilizados o mtodo write do objeto document. Ele tem como finalidade escrever na pgina
HTML o contedo especificado entre parnteses. Sintaxe: document.write(mensagem) onde
mensagem pode representar uma string, que neste caso deve estar entre aspas, qualquer
expresso vlida incluindo o contedo de variveis e propriedades.
O MTODO ALERT(): na verdade pertence ao objeto window. Ele largamente utilizado
para a criao de caixas de dilogo interativas com o usurio. Sintaxe: alert(mensagem) onde
mensagem pode representar uma string entre aspas.
O MTODO CONFIRM(): uma alternativa ao mtodo alert. Ele exibe uma caixa de
dilogo com a mensagem especfica e dois botes, OK e CANCEL. Se for pressionado o boto
OK o mtodo retorna TRUE. Dessa forma podemos usar esse mtodo para a tomada de
decises dentro de um script.
7.5.2 MANIPULAO E ALTERAO DO VALOR DE UMA PROPRIEDADE
Uma propriedade de um objeto pode ser vista como se fosse uma varivel de memria.
Quando um objeto criado, um contedo atribudo a ela. Para alterar o contedo de uma
propriedade usamos um mtodo parecido com o usado para alterar o contedo de uma
varivel normal. Basta especificar o nome da propriedade, o sinal de igualdade e o novo
contedo.
Por exemplo: document.bgColor=red muda a cor de fundo do documento para vermelho.
Voc pode atribuir o contedo de uma propriedade a uma varivel: cor=document.bgcolor
38
07 Java Script
EX17.HTML
<HTML>
<HEAD>
<TITLE>EX17 - Objetos e propriedades</TITLE>
</HEAD>
<SCRIPT language=JavaScript>
document.write("A cor dos links do documento : "+ document.alinkColor+ "<br>")
document.write("A cor dos links visitados : "+ document.vlinkColor+ "<br>")
document.write("A cor de fundo do documento : "+ document.bgColor+ "<br>")
document.write("A cor de frente do documento : "+ document.fgColor+ "<br>")
document.write("O ttulo do documento : "+ document.title+ "<br>")
alert("A cor de fundo do Documento ser alterada")
document.bgColor="#FFFF00"
document.write("A nova cor de fundo : "+ document.bgColor)
</SCRIPT>
<HR>
Os dados acima foram obtidos pelo Javascript
</BODY>
</HTML>
7.6
EVENTOS
Em uma linguagem baseada em objetos, uma das caractersticas principais a

possibilidade de gerenciar eventos relacionados com um objeto. A maioria dos eventos est
relacionada com um campo de formulrio, link ou o documento como um todo. Cada evento
possui um gerenciador de eventos que responsvel pelo seu acionamento.
Um gerenciador de eventos tem associado a ele uma funo ou comandos JavaScript que
so executados quando ele ativado. Por exemplo, se um usurio der um clique sobre um
boto, deve ser exibida uma caixa de dilogo avisando-o do fato. Nesse caso deve ser criada
uma funo ou rotina que executada quando o boto recebe o clique. A seguir veremos os
eventos e seus gerenciadores. Note que eles tm uma letra em caixa alta no meio da palavra.
Se voc no usar a mesma notao, ocorrer um erro:
Evento
Abort
Blur
Aplica-se a
Imagens
DragDrop
Windows e todos os elementos de

formulrios
Campos text, texareas e select
botes, radio buttons, checkboxes, botes
submit e reset, links
windows
Error
imagens, windows
Focus
windows e elementos de formulrio
KeyDown
Load
MouseDown
MouseMove
MouseOut
documentos, imagens, links, campos de

texto
texto
texto
document body
documentos, botes, links
nada
reas, links
MouseOver
MouseUp
Move
Reset
links
documentos, botes, link
windows
formulrios
Change
Click
KeyPress
KeyUp
Ocorre quando
O usurio interrompe o carregamento de
uma imagem pressionando o boto stop
retirado o foco do elemento
Manipulador
onAbort
alterado o valor do elemento

clicado sobre um link ou elemento de
formulrio
Usurio deposita um objeto na janela do
navegador
O carregamento de uma imagem ou
documento causa um erro
O usurio coloca foco de input em uma
janela ou campo de formulrio
pressionada uma tecla
onChange
onClick
Uma tecla mantida pressionada
onKeyPress
Uma tecla liberada
onKeyUp
Uma pgina carregada no navegador

O boto do mouse pressionado
O cursor movido
O cursor movido fora de um mapa de
imagem ou link
O mouse movido sobre um link
O boto do mouse liberado
A janela movimentada
O boto reset de um formulrio
pressionado
onLoad
onMouseDown
onMouseMove
onMouseOut
onBlur
onDragDrop
onFocus
onFocus
onKeyDown
onMouseOver
onMouseUp
onMove
onReset
39
07 Java Script
Resize
Select
Submit
Unload
windows
text fields, textareas
formulrios
document body
Uma janela redimensionada

Um campo de formulrio selecionado
O boto submit pressionado
A pgina abandonada
onSelect
onSubmit
onUnload
7.6.1 onBlur
Esse evento ocorre quando um campo perde o foco. Por exemplo, foi digitado o contedo
de um campo do tipo text e depois foi pressionada a tecla Tab para avanar para outro campo,
ou ainda foi clicado outro objeto do formulrio, fazendo com que o campo atual perca o foco
do programa.
EX18.HTML
<HTML>
<HEAD>
<TITLE>JsonBlur01</TITLE>
function campovital(x) {
if (x.value=="") {
alert("O campo "+ x.name +" no pode ser deixado em branco") }
}
function testanome(x) {
if (x.value.length < 5) {
alert("O campo "+ x.name +" no pode ter menos do que 5 caracteres")
}
</SCRIPT>
</HEAD>
<FORM >
<BR>Cdigo....:<INPUT type="text" name="cdigo" value="" size=5 maxlength=5
onBlur="campovital(this)">
<BR>Nome......:<INPUT type="text" name="nome" value="" size=30 maxlength=30
onChange="testanome(this)">
<BR>Cargo......:<INPUT type="text" name="cargo" value="" size=20 maxlength=0>
<BR>Telefone..:<INPUT type="text" name="telefone" value="" size=15 maxlength=0
onBlur="campovital(this)">
<BR>Ramal......:<INPUT type="text" name="ramal" value="" size=4 maxlength=0>
</FORM>
</BODY>
</HTML>
7.6.2 onChange
O evento ocorre quando um campo do tipo select, text ou textarea perde o foco e o seu
contedo foi alterado. Ele diferente do evento Blur que ocorre sempre que o campo perde o
foco independemente de ter seu contedo alterado.
7.6.3 onClick
Esse evento ocorre quando um objeto de um formulrio do tipo button, checkbox, radio,
link, reset ou submit so clicados. Este evento controlado pelo geranciador onClick. Ele pode
executar uma funo ou um comando da linguagem JavaScript.
EX19.HTML
<HTML>
<HEAD>
<TITLE>EX19</title>
</SCRIPT>
</HEAD>
40
07 Java Script
<FORM>
<CENTER>
<INPUT type="button" value="No aperte este boto" onclick="alert('Curiosidade mata! O
seu disco rgido est sendo formatado')">
<HR>
<H2>Prova</H2></CENTER>
1. Quem descobriu o Brazil?
<INPUT type="button" value="A" onclick="alert(' A : Volta para a escola!')"> Vasco da
Grama
<INPUT type="button" value="B" onclick="alert('B: Correto.')"> Pedro Alvares Cabral
<INPUT type="button" value="C" onclick="alert('C: Este descobriu a Amrica')">
Cristvo Colombo
<HR>
2. Qual a raiz quadrada de 16 ?
<INPUT type="button" value="resposta" onclick="alert(eval(16*16)) ">
</FORM>
</BODY>
</HTML>
EX20.HTML
<HTML>
<HEAD>
<TITLE>EX20</TITLE>
</SCRIPT>
</HEAD>
<CENTER>
<H2>Usando onClick para alterar propriedades </H2>
<HR>
<FORM>
<INPUT type="button" value="Vermelho" ONCLICK="document.bgColor='red'">
<INPUT type="button" value="Cyan" ONCLICK="document.bgColor='cyan'">
<INPUT type="button" value="Azul" ONCLICK="document.bgColor='blue'">
<INPUT type="button" value="Cinza" ONCLICK="document.bgColor='silver'">
<HR>
Cinza: <INPUT type="radio" name="bgcolor" ONCLICK="document.bgColor='gray' ">
Azul: <INPUT type="radio" name="bgcolor" ONCLICK="document.bgColor='blue' ">
Verde: <INPUT type="radio" name="bgcolor" ONCLICK="document.bgColor='lightgreen' ">
Cyan <INPUT type="radio" name="bgcolor" ONCLICK="document.bgColor='cyan' ">
</FORM>
</CENTER>
</BODY>
</HTML>
EX21.HTML
<HTML>
<HEAD>
<TITLE>EX21</TITLE>
function processa1() {
d= eval(document.calculo.campo1.value) + eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
d= eval(document.calculo.campo1.value) * val(document.calculo.campo2.value) *
41
07 Java Script
}
</SCRIPT>
</HEAD>
<FORM name="calculo">
<H2>Usando onClick para alterar o contedo de outros campos</H2>
Campo1....:<input type="text" name="campo1" value="" size=10 maxlength=10 >
Campo2......:<input type="text" name="campo2" value="" size=10 maxlength=10 >
Campo3.....:<input type="text" name="campo3" value="" size=10 maxlength=10>
<HR>
<CENTER>
<INPUT type="button" value="Soma" onclick="processa1()">
<INPUT type="button" value="Multiplica" onclick="processa2()">
<HR>
Resultado...:<input type="text" name="campo4" value="" size=10 maxlength=0>
</CENTER>
</FORM>
</BODY>
</HTML>
7.6.4 onFocus
O evento foco ocorre quando um campo recebe o foco de entrada ou digitao pelo
pressionamento da tecla Tab no campo anterior, Shift+Tab do campo posterior ou pelo click do
mouse. Ele atua sobre campos do tipo select, text e textarea.
EX22.HTML
<HTML>
<HEAD>
<TITLE>EX22</TITLE>
d= eval(document.calculo.campo1.value) + eval(document.calculo.campo2.value)+
}
</SCRIPT>
</HEAD>
<FORM name="calculo" >
<H2>Usando onFocus para executar clculos e mensagens</H2>
Campo1....:<INPUT type="text" name="campo1" value="" size=10
onBlur='if(this.value=="") {this.value=0}' >
<BR>Campo2.....:<INPUT type="text" name="campo2" value="" size=10
onBlur='if(this.value=="") {this.value=0}' >
<BR>Campo3.....:<INPUT type="text" name="campo3" value="" size=10
onBlur='if(this.value=="") {this.value=0}'>
<BR>Resultado...:<INPUT type="text" name="campo4" value="" size=10
onFocus="processa1()">
<BR>Comentrio...:<INPUT type="text" name="campo5" value="" size=30
onFocus="alert('Este campo de comentrio deve ser preenchido')">
</FORM>
</BODY>
</HTML>
7.6.5 onLoad
O evento ocorre quando voc carrega uma pgina ou documento. Por exemplo, voc clicou
no boto Back ou Voltar do navegador ou clicou em um hiperlink. O gerenciador onLoad
responsvel por tratar este evento. Ele pode ser especificado no comando <BODY> ou
<FRAMESET>. Este gerenciador pertence ao objeto window e no ao objeto document.
Exemplo: <BODY onLoad=rotinadeabertura()>
42
07 Java Script
7.6.6 onUnLoad
O evento ocorre quando voc abandona uma pgina ou documento. Por exemplo, voc
clicou no boto Back ou Voltar do navegador ou clicou em um hiperlink. O gerenciador
onUnLoad responsvel por tratar este evento. Ele pode ser especificado no comando
<BODY> ou <FRAMESET>. Este gerenciador pertence ao objeto window e no ao objeto
document. Exemplo: <BODY onUnLoad=rotinadefechamento()>
EX23_1.HTML
<HTML>
<HEAD>
<TITLE>EX23_1</title>
</HEAD>
<BODY onUnload="alert('Voce ainda est na pgina Pag01 e vai carregar a pgina Pag02')">
<H1>Pgina 1</H1>
Essa pgina contm um link para outra pgina <BR>
<A href="ex23_2.html" >Acesse a segunda Pgina</A>
</BODY>
</HTML>
EX23_2.HTML
<HTML>
<HEAD>
<TITLE>EX23_2</TITLE>
</HEAD>
<BODY>
<H1>Pgina 2</H1>
Essa pgina contm dois link para outras pginas <HR>
<A href="ex23_1.html" >Acesse a primeira Pgina</A><BR>
<A href="ex23_3.html" >Acesse a terceira Pgina</A>
</BODY>
</HTML>
EX23_3.HTML
<HTML>
<HEAD>
<TITLE>EX23_3</TITLE>
</HEAD>
<BODY onLoad="alert('Voc esta na pgina Pag03') ">
<H1>Pgina 3</H1>
Essa pgina contm um link para outra pgina <BR>
<A href="ex23_2.html" >Acesse a segunda Pgina</A>
</BODY>
</HTML>
7.6.7 onMouseOver
O evento pertence ao objeto Link. Toda vez que o cursor do mouse passa por cima de um
link o gerenciador de eventos ativado se tiver sido especificado no comando. Como padro,
quando passamos o cursor sobre um link, a linha de status da janela do navegador mostra o
endereo do link. O cdigo associado ao gerenciador deve sempre conter o comando return
true para que funcione corretamente.
EX24.HTML
<HTML>
<HEAD>
<TITLE>EX24 - onMouseOver</TITLE>
</SCRIPT>
43
07 Java Script
</HEAD>
<H1 color="red"> Pgina 2 </H1>
Esta pgina contm um link para a pgina chamada Pag03 e outro para a pgina Pag01<P>
<A href="" ONMOUSEOVER ="document.bgColor='red' ">vermelho</A>
<A href="" ONMOUSEOVER ="document.bgColor='cyan' ">cyan</A>
<A href="" ONMOUSEOVER ="document.bgColor='lightgreen' "> verde</A>
<HR>
<A HREF=ex23_3.html ONMOUSEOVER ="window.status='MATERIAL IMPRPRIO PARA
MENORES' ; return true">Vai para a Pgina 03</A>
<A HREF=ex23_1.html ONMOUSEOVER = "window.status='Esta pgina pode conter
material imprprio para Maiores' ; return true">Vai para a pgina 01 </A>
</BODY>
</HTML>
7.6.8 onSubmit
O evento ocorre quando o usurio pressiona o boto submit para enviar um formulrio.
Para evitar que o formulrio seja enviado, deve ser acrescentado o comando RETURN FALSE
dentro do cdigo associado ao gerenciador.
EX25.HTML
<HTML>
<HEAD>
<TITLE>EX25 - onsubmit </TITLE>
</HEAD>
<SCRIPT>
var dataOK=false
function testacampos(){
if (document.ficha.campo1.value.length == 0 |document.ficha.campo2.value.length == 0
| document.ficha.campo3.value.length == 0) {
alert("Todos os campos do formulrio devem ser preenchidos")
return false
}
else {
alert("Todos os campos do formulrio FORAM preenchidos")
return true
}
}
</SCRIPT>
<BODY>
<FORM NAME="ficha" onSubmit="return testacampos()">
<INPUT TYPE="text" NAME="campo1" SIZE=10>
<P><INPUT TYPE="submit" VALUE="envia" NAME="submit1">
</FORM>
</BODY>
</HTML>
7.6.9 onSelect
O evento ocorre quando um texto de um campo do tipo Text ou Texarea selecionado. O
gerenciador onSelect o responsvel por manipular este evento.
EX26.HTML
<HTML>
<HEAD>
<TITLE>EX26</TITLE>
</HEAD>
44
07 Java Script
<FORM>
<H2>Testando alteraes em um campo com onChange</H2>
<BR>Cdigo....:<input type="text" name="cdigo" value="" size=5 maxlength=5
onMouseOver="window.status='Digite o cdigo do cliente' ">
<BR>Nome......:<input type="text" name="nome" value="" size=30 maxlength=30
onSelect="alert('campo com texto selecionado') ">
<BR>Cargo......:<input type="text" name="cargo" value="" size=20 maxlength=20>
</FORM>
</BODY>
</HTML>
7.6.10 onMouseDown
O evento ocorre quando o boto do mouse pressionado. Ele est associado com button,
document e link. Este recurso funciona por enquanto, apenas no Internet Explorer.
EX27.HTML
<HTML>
<HEAD>
<TITLE>EX27 - onmousedown</TITLE>
<SCRIPT language=javascript>
function click() {
if (event.button==1) {
document.bgColor="FFFF00"
}
if (event.button==2) {
alert('Copyrighted. Essa imagem no pode ser usada sem permisso do autor')
}
}
document.onmousedown=click
</SCRIPT>
</HEAD>
<BODY>
<h1>CALVIN</h1>
<IMG src=calvin.gif>
</BODY>
</HTML>
7.7
OUTROS EXEMPLOS
EX28.HTML
<HTML>
<HEAD>
<TITLE>EX28 Testando Javascript</TITLE>
</HEAD>
<BODY>
Que horas so???
<A href = ex29.html ONCLICK="alert(Date())">Clique Aqui</A>
</BODY>
</HTML>
EX29.HTML
<HTML>
<HEAD>
<TITLE>EX29 Usando Condicionais</TITLE>
</HEAD>
<BODY>
45
07 Java Script
<SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript">

if (confirm("Voc que trocar o carro por uma banana?")){
alert("Voc ganhou uma BANANA!!!")
}
else{
alert("Parabns!!! Voc ganhou um CARRO!!!")
}
</SCRIPT>
</BODY>
</HTML>
EX30.HTML
<HTML>
<HEAD>
<TITLE>EX30 Mtodo Prompt e Confirm</TITLE>
</HEAD>
<BODY>
/*no mtodo prompt so passados dois parmetros: a pergunta e a resposta padro*/
RESP=prompt("O que voc deseja, CASAR ou comprar uma BICICLETA???","BICICLETA")
if (RESP==null){
alert("Voc no respondeu")
}
if (RESP=="CASAR"){
confirm("Tem Certeza????")
}
if (RESP=="BICICLETA"){
alert("PARABNS!!! \nVoc fez a escolha correta.")
}
document.write("Voc escolheu "+RESP)
</SCRIPT>
</BODY>
</HTML>
EX31.HTML
<HTML>
<HEAD>
<TITLE>EX31 Funes</TITLE>
/*Criando uma funo function nomedafuncao(){*/
function Oi(texto){
alert(texto)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="MENSAGEM1" onClick="Oi('Isto um teste')">
<INPUT TYPE="BUTTON" VALUE="MENSAGEM2" onClick="Oi('Deu certo')">
</FORM>
</BODY>
</HTML>
EX32.HTML
<HTML>
<HEAD>
<TITLE>EX32 Janelas</TITLE>
46
07 Java Script
/*Trabalhando com janelas: a varivel quadro contm o objeto novajanela. Para

adicionar parmetros podemos incluir "toolbar=yes, location=yes, scrollbars=yes,
width=n,height=n, resizable"*/
function NovaJanela(){
Quadro=window.open("susanita.gif", "nome", "width=100,height=100, resizable")
}
</SCRIPT>
</HEAD>
<BODY >
<A HREF="javascript:NovaJanela()">SURPRESA!!!</a>
</BODY>
</HTML>
EX33.HTML
<HTML>
<HEAD>
<TITLE>EX33 Janelas onLoad</TITLE>
function NovaJanela(){
Quadro=window.open("ex04.html", "NOME", "width=100,height=100")
}
</SCRIPT>
</HEAD>
<BODY onLoad="javascript:NovaJanela()">
<A HREF="javascript:NovaJanela()">DE NOVO</a>
</BODY>
</HTML>
EX34.HTML
<HTML>
<HEAD>
<TITLE>EX34 Imagens</TITLE>
</HEAD>
<BODY>
<A HREF="ex04.html" onMouseOver="document.desenho.src='susanita.gif'"
onMouseOut="document.desenho.src='mafalda.gif'" > <IMG SRC="susanita.gif" BORDER=0
HEIGHT=100 WIDTH=100 NAME="desenho"> </A>
</BODY>
</HTML>
EX35.HTML
<HTML>
<HEAD>
<TITLE>EX35 OnClick</TITLE>
function AperteBotao() {
alert("Ai, no com tanta fora!!!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" name="Button1" value="Aperte-me" onclick="AperteBotao()">
</FORM>
</BODY>
</HTML>
47
Folhas de Estilo
Propriedades Para Folhas De Estilos CSS

MEDIDAS:
px pixel
in polegadas (2,54 cm)
cm centmetros
mm milmetros
pt pontos (medida tipogrfica, sendo cada ponto equivalente a 1/72 de polegada).
pc picas (pronuncia-se pica. Outra medida tipogrfica, equivalente a 12 pontos).
CORES:
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow
PROPRIEDADES DE FONTE
PROPRIEDADE
font-size
font-family
font-weight
font-style
font-variant
PROPRIEDADE
text-decoration
text-align
text-indent
vertical-align
text-transform
DESCRIO
Ajusta o tamanho do texto
VALORES
tamanho (pt, in, cm, px) porcentagem
do tamanho normal relativo: xx-large,
x-large, large, medium, small, x-small,
xx-small, larger, smaller
Ajusta os tipos de face e as alternativas (em ordem de
nome do tipo de face
preferncia)
nome da famlia da fonte
Ajusta o peso do tipo
normal
bold
Texto em itlico
normal
italic
Especifica uma variante de fonte
smallcaps
PROPRIEDADES DE TEXTO
DESCRIO
VALORES
Sublinha ou ento seleciona o texto
none
underline
overline
line-through
Ajusta o alinhamento de texto para a margem esquerda ou
left
direita, ou para o centro da pgina
center
right
Faz a indentao da primeira linha do texto no elemento
tamanho (pt, in, cm, px)
Alinha o texto verticalmente dentro do elemento
baseline
sub
super
top
text-top
middle
bottom
text-bottom
Ajusta as regras de maisculas e minsculas no texto
porcentagem da altura de linha a

partir da base da linha (%)
capitalize (coloca em maiscula a
primeira letra de cada palavra)
uppercase
lowercase
EXEMPLO
{ font-size: 200% }
{ font-size: x-large }
{ font-size: 12pt }
{ font-family: "Trebuchet MS", "Sans-serif" }
{ font-weight: bold }
{ font-style: italic }
{ font-variant: smallcaps }
EXEMPLO
{ text-decoration: underline }
{ text-align: right }
{ text-indent: 0.5in }
{ vertical-align: super }
{ text-transform: capitalize }
48
Folhas de Estilo
letter-spacing
PROPRIEDADE
color
background
background-color
background-image
background-repeat
background-attachment
background-position
PROPRIEDADE
margin-left
margin-right
margin-top
margin-bottom
margin
padding
padding-top
padding-right
padding-bottom
padding-left
ajusta o espaamento entre as letras no texto
normal,
tamanho (pt, in, cm, px, em)
PROPRIEDADES DE COR e BACKGROUND
DESCRIO
VALORES
Ajusta a cor do texto
nome da cor
Trio RGB
Cdigo hex
Valores RGB
Ajusta as imagens de background ou cores
url(URL) (com ou sem repeat);
nome da cor (ou transparent, ou dois
nomes de cores, que sero
misturadas, separados por um /);
trio RGB (cdigo hex)
Ajusta a cor do background
nome da cor;
trio RGB (cdigo hex)
Ajusta a imagem de background
URL
Ajusta a repetio do entelhamento das imagens de
repeat (horizontalmente e
background
verticalmente);
repeat-x (horizontal);
repeat-y (vertical);
no-repeat
Fixa a imagem de background ou permite que ela deslize
scroll ou fixed
junto com a pgina
Posio (x y) ou (x% y%);
Ajusta a posio inicial das imagens de background
top, center, bottom
(Observe que a posio default, 0,0 ou 0%,0%, o canto
left, center, right
superior esquerdo do elemento)
PROPRIEDADES DE CAIXA e MARGENS

DESCRIO
VALORES
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
tamanho (pt, in, cm, px) ou
Ajusta as margens em todos os quatro lados de um
porcentagem do tamanho da fonte na
elemento (Se houver somente um valor, ele se aplica a
ordem: alto, direita, baixo, esquerda
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
porcentagem do tamanho da fonte na
contedo de um elemento (Se houver somente um valor, ele
ordem: alto, direita, baixo, esquerda
se aplica a todos os lados; se houver dois ou trs, o valor
que falta ser tomado do lado oposto.)
Ajusta o preenchimento nos lados referentes do contedo de
um elemento
porcentagem do tamanho da fonte
{ letter-spacing: 2pt }
{
{
{
{
{
{
{
{
{
{
{
{
{
EXEMPLO
color: blue }
color: #00F }
color: #0000FF }
color: RGB 0.0 0.0 1.0 }
background: url(image1.gif) repeat }
background: Red }
background: Red / Blue }
background: transparent }
background: #CCCCCC }
background-color: Red }
background-color: #CCCCCC }
background-image: url(image1.gif) }
background-repeat: repeat-y }
{ background: fixed }
{
{
{
{
{
background-position:
2cm 1cm }
50% 20% }
top center }
top }
bottom right}
EXEMPLO
{ margin-left: 1in }
{ margin-right: 1in }
{ margin-top: -20pt }
{ margin-bottom: 20pt }
{ margin: .5cm .5cm 1cm .5cm }
{ padding: .5cm .5cm 1cm .5cm }
{ padding-left: 5pt }
49
Folhas de Estilo
border-top-width
border-right-width
border-bottom-width
border-left-width
Ajusta a largura da borda ao longo da parte designada de

um elemento
tamanho (pt, in, cm, px);

thin, medium, thick
{ border-top-width: thin }
border-width
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.)
Ajusta a cor da borda relativa de um elemento
tamanho (pt, in, cm, px);

thin, medium, thick
{ border-width: thin thin thick thin }
nome da cor ou cdigo hex
{ border-top-color: green }
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.)
Ajusta o estilo da borda referente de um elemento
nome da cor ou cdigo hex
{ border-color: green #FFFF00 #00FFFF

green }
nome do estilo (none, solid, double,

groove, ridge, inset, outset)
{ border-top-style: ridge }
Ajusta o estilo da borda em todos os lados de um elemento
nome do estilo (none, solid, double,

groove, ridge, inset, outset)
largura, cor, e estilo
{ border-style: outset }
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style
border-top
border-right
border-bottom
border-left
border
float
clear
PROPRIEDADE
display
list-style-type
list-style-image
list-style-position
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 em todos os lados de

largura, cor, e estilo
um elemento
Faz com que o elemento flutue para um lado e outro do
left, right, ou none
texto e o envolva. (Usado nos elementos DIV e SPAN.)
left, right, ou both
Especifica se o elemento pode ter elementos flutuando sua
volta -- faz com que o elemento se posicione por baixo de
qualquer elemento que esteja flutuando no lado especificado.
PROPRIEDADES DE CLASSIFICAO
DESCRIO
VALORES
Faz com que o elemento no aparea (no ser reservado
none
nenhum espao para ele na pgina)
Especifica a aparncia de marcadores de item de lista (para
disk; circle; square; decimal; loweruso com elementos LI)
roman; upper-roman; lower-alpha;
upper-alpha; none
Especifica uma imagem para ser usada como marcador de
url(URL); none
item de lista (para uso com elementos LI)
Especifica a posio de marcadores de item de lista (para
inside; outside
uso com elementos LI)
{ border-top: thin green ridge }
{ border: thin green ridge }

{ float: left }
{ clear: left }
EXEMPLO
{ display: none }
{ list-style-type: square }
{ list-style-image: url(redball.jpg) }
{ list-style-position: inside }
50
Folhas de Estilo
list-style
PROPRIEDADE
clip
height
width
left
top
overflow
position
visibility
z-index
white-space
PROPRIEDADE
@import
cursor
A:link|A:visited |A:active
Especifica a posio, estilo,e URL da imagem a ser usada

como marcador de item de lista (para uso com elementos LI)
inside; outside
disk; circle; square; decimal; lowerroman; upper-roman; lower-alpha;
upper-alpha; none; URL
PROPRIEDADES DE POSICIONAMENTO
DESCRIO
VALORES
Especifica a rea do elemento que aparece como
rect (top right left bottom) onde top
transparente
right left bottom so definidas como
auto ou como valores de extenso (pt,
in, cm, px)
Especifica a altura de um elemento ( mais til para o
auto ou valores de extenso (pt, in,
escalonamento de imagens; a mdia da aparncia ser
cm, px) ou porcentagem
mantida se a width for especificada como auto)
Especifica a largura de um elemento ( mais til para o
escalonamento de imagens; a mdia da aparncia ser
mantida se height for especificada como auto)
Especifica a posio esquerda de um elemento relativamente
ou absolutamente posicionado
Especifica a posio da parte de cima de um elemento
relativamente ou absolutamente posicionado
cm, px) or porcentagem
Clip ((a poro inundada oculta) ou
Especifica o manejo da poro de um elemento
none (a poro inundada aparece) ou
relativamente ou absolutamente posicionado, que se
scroll (para revelar a poro inundada)
derrama sobre outro elemento
Especifica se o elemento pode ser posicionado
absolute (em relao ao documento);
relative (em relao ao elemento pai);
static (default--no posicionado)
Especifica se o elemento visvel (espao para o elemento
visible; hidden
reservado em ambos os casos)
Especifica se o elemento mostrado acima ou abaixo de
nmero (positivo para cima, negativo
outros elementos com os quais faz entelhamento
para baixo, comeando do 1; por
default elementos sucessivos so
designados nmeros superiores aos
elementos antecedentes)
Especifica se um elemento vai ser mostrado normalmente ou
normal; pre
num texto pr-formatado
OUTRAS PROPRIEDADES
DESCRIO
VALORES
@import: url(url)
Importa outra folha de estilo para dentro da atual; deve
aparecer antes que qualquer estilo seja definido; novas
propriedades e valores iro sobrepujar-se s da folha de
estilo importada
especifica a aparncia do cursor quando colocado dentro do
auto (default definido pelo
elemento
browser/sistema operacional);
crosshair; default; hand; move; eresize; ne-resize; nw-resize; n-resize;
se-resize; sw-resize; s-resize; wresize; text; wait; help
Classes pr-definidas para a tag <a>
Nome da cor ou cdigo hex
{ list-style: inside disk url(redball.jpg) }
EXEMPLO
{ clip: rect (5pt auto auto auto) }
{ height: 50px }
{ width: 50% }
{ left: 2pt }
{ top: -2pt }
{ overflow: clip }
{ position: relative }
{ visibility: hidden }
{ z-index: 2 }
{ white-space: pre }
EXEMPLO
@import url(stylesheet2.css)
{ cursor: help }
a.link { color: #FF0000 }

51
Tabela de Referncia HTML

TAGS
!-<A>
Accesskey
Event
Href
Name
Tabindex
Target
<AREA>
Accesskey
Coords
Href
Nohref
Shape
Target
<B>
<BASEFONT>
Color
Face
Size
<BGSOUND>
Loop
Src
<BIG>
<BLOCKQUOTE>
<BODY>
Alink, Link, Vlink
Background
Bgcolor
Leftmargin
Topmargin
Text
<BR>
Clear
<BUTTON>
Accesskey
Event
Name
Value
<CENTER>
<DIV>
Align
Class
Id
<EMBED>
Align
Autostart
Controls
Loop
Src
DESCRIO
Insere comentrios Ex.: 
Cria links e ancoras
Adiciona tecla de atalho para o link
Aciona um SCRIPT
Especifica uma URL ou nome da ancora para onde o link ir
Especifica uma rea especifica da pgina para onde o link pular
Define a ordem na qual a tecla Tab levar o visitante atravs dos links
e dos elementos dos formulrios.
Ex.: <A Href=xx.html Tabindex=2> xx </A>
Especifica uma janela ou moldura particular para o link
Especifica as coordenadas de um mapa de imagem
Adiciona uma tecla de atalho para uma regio particular do mapa
Especifica as coordenadas de uma rea
Especifica a URL do link
Um link no tem efeito
Especifica o formato da rea (rect, circle, poly)
Especifica a janela ou moldura onde o link ser mostrado
Negrito
Especifica uma fonte padro para toda a pgina
Especifica a cor
Especifica o tipo
Especifica o tamanho
Insere som de fundo
Especifica quantas vezes o som ser tocado (n, -1 ou infinite)
Especifica a URL do som
Formata um texto maior que o texto ao redor
Formata um bloco de texto na pgina
Determina seo de corpo da pgina
Especifica a cor dos links ativos, dos novos links, e dos links visitados.
Especifica imagem de fundo
Especifica cor de fundo
Especifica margem da esquerda
Especifica margem do topo
Especifica cor do texto
Cria quebra de linha
Para o envolvimento do texto
Cria botes
Adiciona teclas de atalho para o boto
Associa um boto com um SCRIPT
Identifica um boto
Especifica o tipo de boto a construir
Centraliza texto, imagens e outros elementos.
Divide a pgina em sees lgicas
Especifica o alinhamento da coluna (left, right, center)
D um nome a cada classe de diviso
D um nome nico a uma diviso particular
Adiciona multimdia pgina
Alinha controles (left, right, center)
Inicializa multimdia automaticamente (true, false)
Mostra play, pause e rewind botes (console, smallconsole, playbutton,
pausebutton, stopbutton, volumelever)
Especifica se a multimdia deve ocorrer mais de uma vez (true para
tocar at que o usurio clique em stop)
Especifica a URL do arquivo multimdia
52
Width, height
<FIELDSET>
<FONT>
Color
Face
Size
<FORM>
Action
Method
<FRAME>
Border
Bordercolor
Frameborder
Framespacing
Name
Noresize
Marginwidth,
Marginheight
Scrolling
Src
Target
<FRAMESET>
Border
Bordercolor
Cols
Frameborder
Framespacing
Rows
<HN>
Align
<HEAD>
<HR>
Align
Noshade
Size
Width
<HTML>
<I>
<IFRAME>
Align
Frameborder
Name
Width, height
Scrolling
Src
<IMG>
Align
Alt
Border
Controls
Dynsrc
Hspace,vspace
Loop
Lowsrc
Src
Start
Especifica o tamanho dos controles

Agrupa um conjunto de elementos de um formulrio
Formata fontes
Especifica cor
Especifica tipo
Especifica tamanho
Cria formulrios
Especifica a URL ou o SCRIPT CGI para o formulrio
Especifica como o formulrio ser processado (post, get)
Cria molduras
Especifica a grossura da borda da moldura
Especifica a cor das bordas da moldura
Mostra ou esconde as bordas da moldura
Adiciona espao entre as molduras
Nomeia as molduras para que possam ser usadas como atributo de
Target
Impede que o usurio redimensione a moldura
Especifica as margens superior, inferior, direita e esquerda da moldura
Mostra ou esconde as barras de rolamento da moldura (yes, no, auto)
Especifica a URL inicial a ser mostrada na moldura
Especifica qual a moldura em que um link deve ser aberto
Define moldura
Especifica a grossura da borda da moldura
Especifica a cor das bordas da moldura
Determina o numero e o tamanho das molduras
Mostra ou esconde as bordas da moldura
Adiciona espao entre as molduras
Determina o numero e o tamanho das molduras
Cria cabealhos
Alinha cabealhos (left, right, center)
Cria seo de cabealho
Cria linhas horizontais
Alinha as linhas horizontais (left, right, center)
Mostra as linhas sem sombra
Especifica altura
Especifica comprimento
Identifica o documento como documento HTML
Itlico
Cria molduras flutuantes
Especifica alinhamento da moldura (left, right, center)
Mostra ou esconde as bordas
Especifica um nome para a moldura para ser usado em um TARGET
Especifica o tamanho da moldura
Mostra ou esconde as barras de rolamento (yes, no, auto)
Especifica a URL da pgina inicial
Insere imagem
Alinha imagem e escreve texto ao redor (left, right, center)
Oferece texto alternativo caso a imagem no carregue
Especifica a grossura da borda
Mostra ou esconde controle de vdeo
Especifica URL do arquivo de vdeo
Especifica espao acima, abaixo e ao lado da imagem.
Especifica numero de repetio do arquivo de vdeo (n, -1 ou infinite)
Especifica URL de uma verso de baixa resoluo da imagem
Especifica URL da imagem
Determina quando o vdeo deve comear (FILEOPEN, MOUSEOVER)
53
Usemap
Width,height
<INPUT>
Accesskey
Checked
Disabled
Event
Maxlength
Name
Size
Src
Readonly
Taborder
Type
Value
<LEGEND>
<LI>
Type
Value
<LINK>
<MAP>
Name
<MARQUEE>
Behavior
Direction
Loop
Scorllamount
Scrolldelay
<META>
http-equiv
Name
<NOBR>
<NOFRAMES>
<NOSCRIPT>
<OL>
Type
Start
<OPTION>
Selected
Value
<P>
Align
<S>
<SCRIPT>
Charset
Language
Src
Type
<SELECT>
Name
Multiple
Especifica a imagem que deve ser usada como referencia em um mapa

Especifica o tamanho da imagem
Cria elementos de um formulrio
Adiciona tecla de atalho para o elemento
Marca um radio button ou checkbox como padro
Desabilita elementos do formulrio
Para acionar um SCRIPT com um determinado evento
Especifica o numero mximo de caracteres que pode ser entrado
Determina o nome do elemento para poder ser usado depois
Especifica o comprimento do texto ou senha
Especifica URL de uma imagem
Impede que usurios alterem seu contedo
Especifica em que ordem TAB ir percorrer os elementos
Especifica o tipo (text, password, radio, checkbox)
Especifica o valor inicial
Nomeia Fieldsets
Cria item de uma lista
Determina o tipo do smbolo marcador (A- letras maisculas, a letras
minsculas, I nmeros romanos, i nmeros romanos minsculos, 1
nmeros, disc, circle, square)
Determina o valor inicial do primeiro item
Liga a uma css externa
Cria um mapa de imagem
Atribui um nome ao mapa para que este possa ser referenciado depois.
Cria um texto em movimento
Controla como o texto deve mover (scroll, slide, alternate)
Esquerda Direita ou Direita Esquerda
Quantas vezes a ao ir se repetir
Espao entre cada repetio
Tempo entre cada repetio
Redireciona a pgina
Adiciona informaes extras sobre a pgina
Mantm elementos na mesma linha independente do tamanho da
janela.
Oferece uma alternativa para molduras
Oferece uma alternativa para SCRIPTS
Cria uma lista ordenada
Especifica o smbolo com o qual cada item ir comear (A- letras
maisculas, a letras minsculas, I nmeros romanos, i nmeros
romanos minsculos, 1 nmeros)
Especifica o valor inicial da lista
Cria opes individuais em um formulrio
Seleciona a opo como padro de um formulrio em branco
Especifica um valor inicial
Cria um novo pargrafo
Especifica o alinhamento (left, right, center)
Tachado
Adiciona SCRIPTS automticos na pgina
Especifica o conjunto de caracteres no qual o SCRIPT externo est
sendo escrito
Define a linguagem na qual o SCRIPT est sendo escrito
Referencia um SCRIPT externo
Define a linguagem na qual o SCRIPT est sendo escrito
Cria menus no formulrio
D nome ao elemento
Permite que o usurio escolha mais de uma opo
54
Size
<SMALL>
<SPAN>
Class
Id
<STRIKE>
<STYLE>
<SUB>
<SUP>
<TABLE>
Bgcolor
Border
Bordercolor
Bordercolordark
Bordercolorlight
Cellpadding
Cellspacing
Frame
Height
Rules
Width
<TBODY>
<TD><TH>
Align, Valign
Bgcolor
Colspan
Nowrap
Rowspan
Width, Height
<TEXTAREA>
Accesskey
Name
Rows, Cols
<TITLE>
<TR>
Align, Valign
Bgcolor
<U>
<UL>
Type
<WBR>
Especifica o numero de itens inicialmente visveis

Diminui o tamanho de um texto
Cria estilo
Nomeia estilos
Nomeia estilos
Tachado
Adiciona informaes a uma folha de estilo
Subscrito
Sobrescrito
Cria tabela
Especifica a cor de fundo da tabela
Especifica a grossura da borda da tabela
Especifica a cor da borda
Especifica cor da borda (mais escura, sombreada)
Especifica cor da borda (mais clara, marcada)
Especifica o espao entre o contedo da clula e a borda
Especifica o espao entre clulas
Mostra bordas externas
Especifica altura da tabela
Mostra bordas internas
Especifica o comprimento da tabela
Identifica o corpo de uma tabela
Cria clulas em uma tabela (normal, de cabealho)
Especifica o alinhamento do contedo da clula (right, left, center, top,
bottom, middle)
Especifica cor de fundo da clula
Aumenta a clula em relao coluna
Mantm o contedo da clula em uma linha
Aumenta a clula em relao linha
Especifica o tamanho da clula
Cria um bloco de texto em um formulrio
Adiciona uma tecla de atalho para a rea de texto
Identifica o contedo para ser usado posteriormente
Especifica o numero de linhas e colunas para a rea de texto
Cria o titulo na barra de ttulos
Cria linhas em uma tabela
Especifica o alinhamento do contedo da linha (right, left, center, top,
bottom, middle)
Especifica a cor de fundo de uma linha
Sublinhado
Cria lista desordenada
Especifica o tipo do smbolo do marcador (disc, circle, square)
Controla onde uma linha ser quebrada caso seja necessrio, usada
com <NOBR> xxxx <WBR> yyy </NOBR>
55

ApostilaHTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

ApostilaHTML

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento WEB

APOSTILA por Luclia Ribeiro

Se eu fosse um padre, eu, nos meus sermes,

um belo poema sempre leva a Deus!

FOLHAS DE ESTILO - CSS.................................................................................. 27

INTRODUO AO JAVA SCRIPT......................................................................... 33

Algoritmos e Linguagens Lucilia Ribeiro

As tags normalmente so especificadas em pares, delimitando um texto que sofrer

ESTRUTURA BSICA DO HTML

Em um editor de textos convencional, voc insere uma quebra ou avana de linha

Um dos recursos de tratamento do texto mais interessante da linguagem HTML a

HTML Lucilia Ribeiro

CORES E PADRES DE FUNDO

Alm dos comandos de formatao apresentados, existem outros que ajudam e

HTML Lucilia Ribeiro

A maior dor do vento no ser colorido

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

"Para os peixinhos do aqurio, quem troca a gua Deus."

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

A resposta certa, no importa nada:

At agora vimos a forma na qual o HTML providencia e mostra a informao,

ELEMENTOS DE FORMULRIOS: Campos de Texto

O nome do elemento do formulrio de grande importncia para poder identific-lo em

4.2.2 TEXTO OCULTO

HTML Lucilia Ribeiro

4.2.3 TEXTO LONGO

OUTROS ELEMENTOS DE FORMULRIO

Efetivamente, os textos so uma maneira muito prtica de fazer chegar a informao do

4.3.2 BOTES DE RADIO

BOTO SUBMIT, APAGAR CAMPOS E OUTROS

Os formulrios tm de dar lugar no somente informao a tomar do usurio como

4.4.2 BOTO APAGAR CAMPOS

HTML Lucilia Ribeiro

"A morte a libertao total:

DOCUMENTOS DE LAYOUT E DE CONTEDO

Com a definio de frames, os documentos escritos em HTML (extenso html ou htm)

HTML Lucilia Ribeiro

FRAMES SOBREPOSTOS DIRETA E INDIRETAMENTE

HTML Lucilia Ribeiro

LINKS EM FRAME ALVO

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

Folhas de Estilo - CSS

"O estilo uma dificuldade de expresso"

A REGRA CSS E SUA SINTAXE

HTML Lucilia Ribeiro

FOLHA DE ESTILO EXTERNA

FOLHA DE ESTILO INCORPORADA OU INTERNA

FOLHA DE ESTILO INLINE

FOLHAS MLTIPLAS DE ESTILO

Se alguma propriedade for definida para um mesmo elemento em folhas de estilo

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

Introduo ao Java Script

"Confesso que at hoje s conheci dois sinnimos perfeitos: 'nunca' e 'sempre'."

A linguagem HTML especializada na formatao de pginas e na criao de hiperlinks. Ela

Com o gerenciador de eventos, podemos mudar o comportamento do navegador. Por

Vimos que a linguagem funciona atravs da manipulao de objetos. Essa manipula~ao