Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila HTML
Apostila HTML
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
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
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
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
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.
<TITLE>Minha Primeira Pgina </TITLE>
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>
<TITLE>Minha Primeira Pgina </TITLE>
</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>
<TITLE>Minha Primeira Pgina </TITLE>
</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>
HTML Lucilia Ribeiro
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
#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 SIZE=6>Texto com tamanho de fonte 6</FONT><BR>
<FONT SIZE=5>Texto com tamanho de fonte 5</FONT><BR>
<FONT SIZE=4>Texto com tamanho de fonte 4</FONT><BR>
<FONT SIZE=3>Texto com tamanho de fonte 3</FONT><BR>
<FONT SIZE=2>Texto com tamanho de fonte 2</FONT><BR>
<FONT SIZE=1>Texto com tamanho de fonte 1</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.
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>
HTML Lucilia Ribeiro
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
02 Links e Listas
Links e Listas
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 2
<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 1
<LI> texto do item 2
<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
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
03 Imagens e Tabelas
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.
HTML Lucilia Ribeiro
13
03 Imagens e Tabelas
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>
<TD><img src="calvin.gif"></TD>
<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>
<TD><img src="calvin.gif"><br>Imagem2</TD>
<TD><img src="calvin.gif"><br>Imagem3</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>
HTML Lucilia Ribeiro
14
03 Imagens e Tabelas
<TH rowspan=4>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TH>
</TR>
<TR>
<TD>xxxxxxxxxxxxxxxxxxxxxxxxxx</TD><TD>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD>
</TR>
<TR align=left>
<TD>xxxxxxxxxxxxxxxxxxxxxxxxxx</TD><TD>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD>
</TR>
<TR>
<TD>xxxxxxxxxxxxxxxxxxxxxxxxxx</TD><TD>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD>
</TR>
</TABLE><P><P>
</BODY>
</HTML>
15
04 Formulrios
Formulrios
INTRODUO
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
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:
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:
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
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
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
HTML Lucilia Ribeiro
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
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
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
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
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=*,*> <!---Diviso da janela em 2 frames--->
<FRAME src=ex11a.html noresize>
<FRAMESET cols=30%,70%> <!---Diviso do segundo frame em duas--->
<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
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>
<TITLE>Captulo 5 </TITLE>
</HEAD>
<BODY bgcolor=aqua>
<H1>Este o documento e.htm</H1>
<H2>Captulo 4</H2>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Captulo 5 </TITLE>
</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
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
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"
}
HTML Lucilia Ribeiro
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
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
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
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>
HTML Lucilia Ribeiro
29
06 CSS
6.9
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>
<H2>Este um cabealho H2</H2>
<P>Este um pargrafo normal com texto em <B>negrito</B> e em <I>itlico</I>.</P>
<H3>Este um cabealho H3</H3>
<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
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
HTML Lucilia Ribeiro
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
ELEMENTOS DA LINGUAGEM
34
07 Java Script
*
/
%
&&
||
==
!=
>
<
>=
<=
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
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
continue
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
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>
<BODY bgcolor="#FFFFFF">
<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:
HTML Lucilia Ribeiro
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>
<BODY bgcolor="#FFFFFF">
<HR>
<FORM>
<INPUT type=text name=teste Value=""
onChange="alert('O cubo de '+ this.value + ' ' +cubo(this.value))" >
</FORM>
<HR>
</BODY>
</HTML>
7.5
38
07 Java Script
EX17.HTML
<HTML>
<HEAD>
<TITLE>EX17 - Objetos e propriedades</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<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
Aplica-se a
Imagens
DragDrop
Error
imagens, windows
Focus
KeyDown
Load
MouseDown
MouseMove
MouseOut
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
onChange
onClick
onKeyPress
onKeyUp
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
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>
<SCRIPT language="JavaScript">
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>
<BODY bgcolor="#FFFFFF">
<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 language="JavaScript">
</SCRIPT>
</HEAD>
HTML Lucilia Ribeiro
40
07 Java Script
<BODY bgcolor="#FFFFFF">
<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 language="JavaScript">
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<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>
<SCRIPT language="JavaScript">
function processa1() {
d= eval(document.calculo.campo1.value) + eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
function processa2() {
d= eval(document.calculo.campo1.value) * val(document.calculo.campo2.value) *
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
HTML Lucilia Ribeiro
41
07 Java Script
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<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>
<SCRIPT language="JavaScript">
function processa1() {
d= eval(document.calculo.campo1.value) + eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<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()>
HTML Lucilia Ribeiro
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 language="JavaScript">
</SCRIPT>
HTML Lucilia Ribeiro
43
07 Java Script
</HEAD>
<BODY bgcolor="#FFFFFF">
<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>
<INPUT TYPE="text" NAME="campo2" SIZE=10>
<INPUT TYPE="text" NAME="campo3" 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>
HTML Lucilia Ribeiro
44
07 Java Script
<BODY bgcolor="#FFFFFF">
<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>
HTML Lucilia Ribeiro
45
07 Java Script
46
07 Java Script
47
Folhas de Estilo
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
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
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)
{ 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:
background-position:
background-position:
background-position:
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-left: 5pt }
49
Folhas de Estilo
border-top-width
border-right-width
border-bottom-width
border-left-width
{ border-top-width: thin }
border-width
{ border-top-color: green }
{ border-top-style: ridge }
{ 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
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
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)
auto ou valores de extenso (pt, in,
Especifica a largura de um elemento ( mais til para o
cm, px) ou porcentagem
escalonamento de imagens; a mdia da aparncia ser
mantida se height for especificada como auto)
Especifica a posio esquerda de um elemento relativamente
auto ou valores de extenso (pt, in,
ou absolutamente posicionado
cm, px) ou porcentagem
Especifica a posio da parte de cima de um elemento
auto ou valores de extenso (pt, in,
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
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 }
DESCRIO
Insere comentrios Ex.: <!-- texto aqui -->
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
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
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>
55