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
2
5.1 5.2 5.3 5.4 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9
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
FOLHAS DE ESTILO - CSS.................................................................................. 27
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
1
1.1
O Bsico
O pior dos problemas da gente que ningum tem nada com isso (Mrio Quintana)
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
4
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
5
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
HTML Lucilia Ribeiro
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. 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> HTML Lucilia Ribeiro
7
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
2
2.1 LINKS
Links e Listas
A maior dor do vento no ser colorido (Mrio Quintana)
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
3
3.1
Imagens e Tabelas
"Para os peixinhos do aqurio, quem troca a gua Deus." (Mrio Quintana)

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. HTML Lucilia Ribeiro
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> <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
<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
4
4.1
Formulrios
A resposta certa, no importa nada: o essencial que as perguntas estejam certas. (Mrio Quintana)
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 HTML Lucilia Ribeiro
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. HTML Lucilia Ribeiro
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 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 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. HTML Lucilia Ribeiro
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
5
5.1
Frames
"A morte a libertao total: a morte quando a gente pode, afinal, estar deitado de sapatos". (Mrio Quintana)
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 <HTML> <HEAD> <TITLE>Introduo </TITLE> </HEAD> <BODY> <H1>Este o documento a.htm</H1> <H2>Introduo</H2> </BODY> </HTML> EX12C.HTML <HTML> <HEAD></HEAD> <BODY> <H1>Este o documento c.htm</H1> <H2>Captulo 2</H2> </BODY> </HTML>
EX12B.HTML <HTML> <HEAD></HEAD> <BODY> <H1>Este o documento b.htm</H1> <H2>Captulo 1</H2> </BODY> </HTML>
EX12D.HTML <HTML> <HEAD> <TITLE>Captulo 3 </TITLE> </HEAD> <BODY bgcolor=lightgreen> <H1>Este o documento d.htm</H1> <H2>Captulo 3</H2> </BODY> </HTML> EX12F.HTML <HTML> <HEAD> <TITLE>Captulo 5 </TITLE> </HEAD> <BODY bgcolor=#ccccee> <H1>Este o documento f.htm</H1> <H2>Captulo 5</H2> </BODY> </HTML> EX12NADA.HTML <HTML> <HEAD></HEAD> <BODY bgcolor="#80FFFF"> </BODY> </HTML>
EX12E.HTML <HTML> <HEAD> <TITLE>Captulo 5 </TITLE> </HEAD> <BODY bgcolor=aqua> <H1>Este o documento e.htm</H1> <H2>Captulo 4</H2> </BODY> </HTML> EX12G.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>
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
6
6.1
Folhas de Estilo - CSS
"O estilo uma dificuldade de expresso" (Mrio Quintana)

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" } 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
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> HTML Lucilia Ribeiro
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;
} LI {
font-family: Arial; font-weight: bold; font-style: italic;
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; }
} I{
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
7
7.1
Introduo ao Java Script
"Confesso que at hoje s conheci dois sinnimos perfeitos: 'nunca' e 'sempre'." (Mrio Quintana)
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 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
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. Sintaxe break; 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.*/
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 */
//texto ou /*texto longo*/
35
07 Java Script
continue
for
function
if ... else
this var
while
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++; }
7.4
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 HTML Lucilia Ribeiro
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 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> <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
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 Change Click DragDrop Error Focus KeyDown KeyPress KeyUp Load MouseDown MouseMove MouseOut MouseOver MouseUp Move Reset Aplica-se a Imagens Windows e todos os elementos de formulrios Campos text, texareas e select botes, radio buttons, checkboxes, botes submit e reset, links windows imagens, windows windows e elementos de formulrio documentos, imagens, links, campos de texto documentos, imagens, links, campos de texto documentos, imagens, links, campos de texto document body documentos, botes, links nada reas, links links documentos, botes, link windows formulrios Ocorre quando O usurio interrompe o carregamento de uma imagem pressionando o boto stop retirado o foco do elemento 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 Uma tecla mantida pressionada Uma tecla liberada 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 Manipulador onAbort onBlur onChange onClick onDragDrop onFocus onFocus onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut 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> <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
<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> <SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript"> /*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> <SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript"> /*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> <SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript"> HTML Lucilia Ribeiro
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> <SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript"> 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> <SCRIPT language="JavaScript"> 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 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 porcentagem da altura de linha a partir da base da linha (%) capitalize (coloca em maiscula a primeira letra de cada palavra) uppercase lowercase DESCRIO Ajusta o tamanho do texto 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 }
font-family font-weight font-style font-variant PROPRIEDADE text-decoration
text-align
{ text-align: right }
text-indent vertical-align
{ text-indent: 0.5in } { vertical-align: super }
text-transform
Ajusta as regras de maisculas e minsculas no texto
{ text-transform: capitalize }
48
Folhas de Estilo letter-spacing 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) ajusta o espaamento entre as letras no texto { letter-spacing: 2pt }
PROPRIEDADE color
background
background-color background-image background-repeat
{ { { { { { { { { { { { {
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-attachment background-position
{ background: fixed } { { { { { background-position: background-position: background-position: background-position: background-position: 2cm 1cm } 50% 20% } top center } top } bottom right}
PROPRIEDADE margin-left margin-right margin-top margin-bottom margin
padding
padding-top padding-right padding-bottom padding-left
PROPRIEDADES DE CAIXA e MARGENS DESCRIO VALORES Ajusta a distncia a partir do lado esquerdo da pgina tamanho (pt, in, cm, px) Ajusta a distncia a partir do lado direito da pgina tamanho (pt, in, cm, px) Ajusta a distncia a partir da parte de baixo do elemento tamanho (pt, in, cm, px) prvio Ajusta a distncia a partir da parte de cima do prximo tamanho (pt, in, cm, px) 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.) tamanho (pt, in, cm, px) ou 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 tamanho (pt, in, cm, px) ou um elemento porcentagem do tamanho da fonte
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 border-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-top-color border-right-color border-bottom-color border-left-color border-color
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 }
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
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 Ajusta a largura, cor, e estilo da borda ao longo do lado de cima de um elemento
nome do estilo (none, solid, double, groove, ridge, inset, outset) largura, cor, e estilo
{ border-style: outset } { border-top: thin green ridge }
PROPRIEDADE display list-style-type
list-style-image list-style-position
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: 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 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 Especifica a posio, estilo,e URL da imagem a ser usada como marcador de item de lista (para uso com elementos LI) { list-style: inside disk url(redball.jpg) }
PROPRIEDADE clip
EXEMPLO { clip: rect (5pt auto auto auto) }
height
{ height: 50px }
width
{ width: 50% }
left top overflow
{ left: 2pt } { top: -2pt } { overflow: clip }
position
{ position: relative }
visibility z-index
{ visibility: hidden } { z-index: 2 }
white-space
{ white-space: pre }
PROPRIEDADE @import
EXEMPLO @import url(stylesheet2.css)
cursor
{ cursor: help }
A:link|A:visited |A:active
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

um belo poema sempre leva a Deus! (Mario Quintana, Se eu fosse um padre)

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

Algoritmos e Linguagens Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

A maior dor do vento no ser colorido (Mrio Quintana)

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

"Para os peixinhos do aqurio, quem troca a gua Deus." (Mrio Quintana)

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

4.2.2 TEXTO OCULTO

HTML Lucilia Ribeiro

OUTROS ELEMENTOS DE FORMULRIO

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

Folhas de Estilo - CSS

"O estilo uma dificuldade de expresso" (Mrio Quintana)

HTML Lucilia Ribeiro

FOLHA DE ESTILO EXTERNA

FOLHAS MLTIPLAS DE ESTILO

HTML Lucilia Ribeiro

font-family: Arial; font-weight: bold; font-style: italic;

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

Introduo ao Java Script

HTML Lucilia Ribeiro

//texto ou /*texto longo*/

HTML Lucilia Ribeiro

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

HTML Lucilia Ribeiro

HTML Lucilia Ribeiro

onSelect onSubmit onUnload

HTML Lucilia Ribeiro

Propriedades Para Folhas De Estilos CSS

font-family font-weight font-style font-variant PROPRIEDADE text-decoration

{ text-indent: 0.5in } { vertical-align: super }

Ajusta as regras de maisculas e minsculas no texto

background-color background-image background-repeat

PROPRIEDADE margin-left margin-right margin-top margin-bottom margin

padding-top padding-right padding-bottom padding-left

{ padding: .5cm .5cm 1cm .5cm }

border-top-color border-right-color border-bottom-color border-left-color border-color

tamanho (pt, in, cm, px); thin, medium, thick

{ border-width: thin thin thick thin }

nome da cor ou cdigo hex

nome da cor ou cdigo hex

{ border-color: green #FFFF00 #00FFFF green }

nome do estilo (none, solid, double, groove, ridge, inset, outset)

{ border-style: outset } { border-top: thin green ridge }

PROPRIEDADE display list-style-type

//texto ou /texto longo/

function cubo(x){ return xxx; }