Construção de Web Sites HTML e Javascript - 2

CONSTRUO DE WEB SITES HTML E JAVASCRIPT
50.01.01.94.021.02.0
Governador Acio Neves da Cunha Secretria de Estado de Educao Vanessa Guimares Pinto Secretrio Adjunto de Educao Joo Antnio Filocre Saraiva Chefe de Gabinete Felipe Estbile Morais S u b s e c r e t r i a d e I n f o r m a e s e Te c n o l o g i a s E d u c a c i o n a i s Snia Andre Cruz Subsecretria de Desenvolvimento da Educao Bsica Raquel Elizabete de Souza Santos Superintendente de Ensino Mdio e Profissional Joaquim Antnio Gonalves
COORDENAO DO PROJETO Superintendncia Educacional Senac Minas SUPERVISO PEDAGGICA Flvia Alves de Almeida RSC Gerncia de Solues Corporativas/Senac Minas ELABORAO DO CONTEDO Adriano Gomes Lima REVISO TCNICA WR3 EAD Consultoria EDITORAO Setor de Material Didtico SEMD/Senac Minas REVISO LINGSTICA/TRATAMENTO METODOLGICO Setor de Material Didtico SEMD/Senac Minas PROJETO GRFICO Czar Alves de Mariano RAI/Senac Minas
BELO HORIZONTE - 2009
APRESENTAO APRESENTAO
Considerando a magnitude do contingente de jovens mineiros submetidos a condies adversas de vida que afetam negativamente sua trajetria escolar, tornou-se imperativo ao Governo de Minas elaborar e implementar polticas pblicas especialmente destinadas a eles. Na educao, o Programa de Educao Profissional de MG (PEP), sintonizado com as vocaes econmicas regionais e destinado preparao dos jovens para enfrentar os desafios do mundo do trabalho, uma expresso concreta dessas polticas. O pressuposto desse Programa que os jovens so sujeitos de direitos e portadores de capacidades e potencialidades das quais a sociedade no pode prescindir. As altas taxas de abandono e evaso e a baixa taxa de concluso do ensino mdio so evidncias de que a escola est muito longe de corresponder s expectativas desses jovens. Agregar sua formao bsica a possibilidade de formao profissional uma das medidas indispensveis para tornar a escola mais alinhada com os seus interesses e necessidades. A incluso de cursos de preparao inicial para o trabalho na parte diversificada do currculo do ensino mdio parte desse Programa e constitui um esforo de transformao desse nvel de ensino nas escolas estaduais de Minas. Para isso, a SEEMG desenvolveu nove cursos na rea de informtica, todos com durao entre 40 a 80 horas. So eles: Sistema Operacional Linux, Editorao Eletrnica - Draw e Scribus, Construo de Web Sites - HTML e Java Script, Programao em Java, Introduo a Banco de Dados - MySQL, Gimp, Computao Grfica - Blender, Projeto Auxiliado por Computadores QCAD, Multimdia na Educao - Impress. Os cursos sero ministrados pelos prprios professores das escolas estaduais, das vrias disciplinas do currculo, especialmente preparados por um programa de capacitao implementado pela SEEMG, o que amplia as suas possibilidades de trabalho na escola e de desenvolvimento profissional.
SUMRIO
CONSTRUO DE WEB SITES
HTML
Criando Pginas na Web, 11

Uma Pequena Viagem ao Passado..., 13 Normas Implementadas pelo HTML, 13 Glossrio, 14 Tipos de Editores de Pginas HTML, 14 Hipertextos e Hipervnculos (Links), 15 Exerccios, 16
Documento 17 Iniciando um Documento HTML, 17

Estrutura da Pgina, 19 Exerccios, 20 Comandos da Linguagem: Tags, 21 Tipos de Tags, 22 Atributos de Tags, 23 Estrutura Principal de uma Pgina, 24 Salvando sua Pgina, 26 Utilizando o TAG de Pargrafo <P>, 27 Exerccios, 29
Pargraf 31 argrafo, Estilos de Cabealho e P argraf o, 31

Tag <FONT>, 34 Exerccios, 36 Sobre o Atributo Color, 37 Exerccios, 38 Cores de Fundo <BODY> , 38 Exerccios, 39o Tags mais utilizados (Resumo), 3911
Inserindo Imagens em Documentos HTML <IMG>, 45

Alinhamento de Imagens e Texto na Pgina, 48 Redimensionamento de Imagens, 49 Exerccios, 51
Trabalhando Hiperlinks Trabalhando com Vnculos, 55

Tipos de URLs , 57 Criando Links de Arquivos Locais <A>, 58 Criando Links para Imagens, 60 Tags mais Utilizados (Resumo), 61 Exerccios, 62
Criando Listas, 65
Tipos de Listas, 67 Exerccios, 71
Tabelas, Utilizando Tabelas, 73

Tag <TABLE>, 76 Tag de Linha <TR>, 76 Tag de Clula <TD>, 77 Atributos da Tabela, 80 Exerccios, 84 Exerccios, 93
Trabalhando com Formulrios, 95 Formulrios,

Campos de Formulrio <INPUT>, 97 Criando Caixas de Texto, 98 Campos de Senha, 100 Botes de Radio, 101 Caixas de Seleo, 103 Lista de Opes <SELECT>, 106 Transmitindo Dados do Formulrio, 109 Exerccios, 113 Guia de Referncia Rpida, 115
Bibliografia, 117 Bibliograf ia, 117 Anexo
JAVA SCRIPT
Introduo, 135
O que a Linguagem JavaScript?, 137 Java e JavaScript: Conceitos e Diferenas, 139
Jav Objet 14 Ja v aScript Linguagem Orientada a Obje tos, 1 41

Orientao a Objetos, 143 Manipulao de Objetos, 144 Tipos de Propriedades, 144 Mtodos dos Objetos, 146 Eventos, 147
Estrutura da Linguagem, 149

Variveis, 151 Desenvolvimento de Scripts, 152 Exerccios, 154
Comandos Bsicos, 155

Mtodo Document.Write(), 157 Mtodo Alert(), 157 Exerccios, 158 Mtodo Confirm(), 159 Exerccios, 161 Mtodo Prompt(), 161
Comandos Condicionais e de Repetio, 163

Instruo If ... Else, 165 Exerccios, Instruo While, 167 Instruo Switch, 169 Exerccios, 170
17 Funes, 171
Exerccios, 176
Outros Objet Jav 17 Outr os Obje t os do Ja v aScript, 17 7

Objeto Date, 179 Mtodos do Objeto Date, 179 Exerccios, 185
Manipulaes de Janelas e Formulrios, 187

Objeto Window, 189 Exerccios, 193 Objeto Form, 194 Objeto Text, 196 Objeto Password, 197 Objeto Textarea, 198 Objeto Button, 198 Objeto Checkbox (Caixa de Verificao), 199 Exerccios, 201 Objeto Radio, 201 Objeto Select, 202 Exerccios, 203 Objeto Location, 204 Exerccios, 205
Bibliografia, 207 Bibliograf ia, 207 Anexo
CONSTRUO DE WEB SITES HTML

H T M L
CRIANDO PGINAS NA WEB

11
1
Criando Pginas na WEB
CONSTRUO DE WEB SITES - HTML
Prepare-se! A partir de agora, voc vai aprender tudo sobre como criar uma pgina na Internet. O primeiro passo para isso entender o que a linguagem HTML (Hypertext Hypertext Language). Markup Language . Vamos l? Sites Para que voc construa os famosos Site da Internet, ter que conhecer a principal linguagem de criao dessas pginas: a HTML. Apesar de muitas pessoas pensarem que essa linguagem fraca ou ultrapassada, em funo de outras tecnologias mais avanadas que foram criadas, saiba que a HTML oferece a base para qualquer outra tecnologia mais usual que existe atualmente. Um profissional que desenvolve pginas, utilizando linguagens como ASP ou PHP, que so dinmicas para o desenvolvimento de comrcio eletrnico (e-commerce), ou JavaScript para criar uma simples calculadora, por exemplo, no conseguiria jamais criar tais pginas sem os conhecimentos bsicos da linguagem HTML HTML.
PASSADO... UMA PEQUENA VIAGEM AO PASSADO...

No princpio, a linguagem HTML foi desenvolvida para fins de divulgao de dados (textos) e catlogos. Porm, ningum poderia imaginar que a Internet dominaria a rea da multimdia, agregando udio e vdeos. Assim, a linguagem se fortaleceu durante o avano da tecnologia e, com isso, acabou recebendo padres internacionais de conformidade que definem suas regras de utilizao. Esses padres so aqueles mesmos padres de qualidade das empresas como, por exemplo, a ISO 9001. O ltimo padro criado para a linguagem HTML foi o 4.01, em dezembro de 1999.
IMPLEMENTADAS PELO NORMAS IMPLEMENTADAS PELO HTML

Veja, abaixo, quais so os padres internacionais de conformidade: SGML Standard Generalized Markup Language (Padro ISO 8879) : uma metalinguagem na qual podem ser definidas linguagens de formatao para documentos. Apesar de no ter sido desenvolvido para Hipertextos, esse padro muito til para descrever ligaes e para transformar documentos em Hiperobjetos. HyTime Hypermedia/Time-based Strtucturing Language (ISO 10744:1992) : define um conjunto de tipos de elementos que permite
13
FORMAO INICIAL PARA O TRABALHO
que autores de documentos SGML elaborem apresentaes, utilizando multimdia e hipertexto de uma forma padronizada. Na verdade, um documento HTML ser visto como um conjunto de comandos que so executados durante seu tempo. Independente dos padres utilizados pelos processadores de textos em geral, esse padro fornecer a base para se construir Hipertextos.
GLOSSRIO GLOSSRIO
Hipertexto um sistema para a visualizao de informaes cujos documentos possuem referncias internas para outros documentos (chamadas de hiperlinks ou, simplesmente, links, como conhecemos). HTML, Site Um conjunto de vrias pginas HTML vinculadas entre si e controladas por um nico usurio ou grupo de usurios, no importando seu tamanho. Multimdia Imagens digitais, filmes, sons e apresentaes especializadas como as criadas por programas de animao e sonorizao, como por exemplo, o Impress. A linguagem HTML capaz de incluir diversos tipos de arquivos multimdia em uma nica Pgina Web (documento contendo instrues HTML HTML). Browser O mesmo que navegador da Internet (tambm conhecido como Web Browser ou simplesmente Browser) um programa que permite os usurios do computador navegarem pelos Sites e visualizarem seus documentos HTML hospedados nos servidores de Internet. Ao visitarmos, por exemplo, uma loja virtual, estaremos, na verdade, navegando no Site da loja virtual. o mesmo quando visitamos um stio numa cidade do interior e percorremos a propriedade para simplesmente v-la ou encontrarmos algo especfico nela.
TIPOS DE EDITORES DE PGINAS HTML

Assim como existem diferentes tipos de Browsers, h diversos tipos de programas que so utilizados para criar as pginas HTML Os mais conhecidos e utilizados, na plataHTML. forma Windows, so o Dreamweaver e o Frontpage. J, na plataforma Linux, existe o Quanta Plus, NVU (dito, New View), KompoZer, SeaMonkey Amaya. Esses programas foram projetados para criar pginas com muita facilidade, no exigindo que os usurios
14
possuam conhecimentos sobre os cdigos HTML Mas esses cdigos que ficam escondidos HTML. do autor em programas desse tipo, podem, muitas vezes, ser teis na montagem de uma pgina. Conhecendo esses cdigos, voc, com certeza, ter mais condies de se beneficiar dos diversos recursos que a Web pode oferecer sua pgina. Para voc editar uma pgina Web qualquer editor ASCII* poder ser utilizado. Web, Para os usurios do Windows o editor Bloco de Notas ou at o Wordpad so sufiWindows, cientes. Para os usurios do Mac Os o programa Simpletext ou o BBEdit Lite resolvem. Os, Lite, Para usurios do Linux existe o KWrite, que ser aprendido nesta apostila para a Linux, criao de algumas pginas. nele que sero digitados os cdigos HTML HTML.
HIPERVNCULOS HIPERTEXTOS E HIPERVNCULOS (LINKS)

Entende-se por Hipertexto uma ou mais palavras que, a partir de um clique de mouse, chama outra pgina que est vinculada primeira. E por Hipervnculos, os links criados sobre figuras chamadas de Hiperobjetos. O Hipertexto encontrado, dentro de uma pgina HTML geralmente em cor diferente de HTML, um texto simples e sublinhado. Atravs de um clique no mouse, o navegador se direciona, automaticamente, para outro local, que pode ser dentro da mesma pgina ou para uma outra que esteja vinculada pgina em que se encontra. Ele diferente de um texto normal que apenas se desloca em seqncia, ou seja, para frente e para trs.
Exemplo de um HIPERTEXTO
Exemplo de um HIPERVNCULO
*ASCII Acrnimo para American Standard Code for Information Interchange ou Cdigo de Padro Americano para o Intercmbio de Informao: conjunto padro de caracteres de texto que podem ser transmitidos entre vrios sistemas operacionais e lidos sem traduo. A maioria dos programas conhecidos como editores de texto salva e abre documentos em formato texto ASCII.
15
Em geral, todo Site organizado e sua navegao feita pelos conhecidos Hiperlinks. So eles que permitem o visitante encontrar as informaes de que necessita mais facilmente. E toda essa relao existente entre pginas HTML que formam o Site possui um endereamento que o identifica, o que chamamos de URL (Uniform Resource Locator). Agora, vamos exercitar um pouco para que voc comece a dar os primeiros passos para entender como formado um Site da Internet.
EXERCCIOS
Depois de compreender alguns conceitos iniciais sobre a criao de um Site Site, responda s questes abaixo. Qual programa (editor de texto) ser usado para criar pginas na Internet? Firefox), Utilizando a ferramenta Firefox (clicar duas vezes no cone do Mozilla Firefox entre em um Site da Internet sua escolha ou em http://www.senac.com.br. Site Aps inicializado o navegador: 1) Clique no campo de endereo para selecionar o endereo que j estiver neste espao ou clique no menu Arquivo e selecione a opo Abrir endereo. 2) Digite a URL da pgina que voc deseja visitar. Aquela que voc digitar, substituir qualquer texto j existente no campo de endereo, pois este estar selecionado. 3) Pressione Enter. Identifique os Hipertextos e Hiperobjetos da pgina.
16

H T M L
INICIANDO UM DOCUMENTO EM HTML

17
2
Iniciando um Documento HTML
ESTRUTURA DA PGINA
A estrutura de uma pgina HTML composta por elementos que voc pode encontrar, por exemplo, nas pginas de um livro. Nestas, existem pargrafos, ttulos, listas, imagens, cabealho, rodap etc, ou seja, elementos que compem, tambm, uma pgina HTML HTML. Antes de iniciar o projeto de criao de uma pgina HTML deve-se levar em conta o seu HTML, processo de organizao. Lembre-se de que uma pgina contm muitas informaes e todas devem estar bem dispostas para que qualquer pessoa que navegue por ela entenda seu contedo e encontre o que esteja pesquisando. Por isso, suas pginas devem ser planejadas como as de um livro, com os seguintes itens: Ttulo da Pgina Cada documento HTML possui um ttulo. Cabealhos Define cabealhos para cada assunto a ser abordado na pgina. Pargrafos Idnticos aos de um documento simples, com recursos de tamanho, alinhamento, estilo, entre outras opes existentes. Linhas Horizontais Utilizadas para dividir texto em sees/ separaes. Listas Idnticas s de um documento simples, podendo se apresentar como listas numeradas, listas com marcadores e listas de definio. Tabelas Prximas aos editores de textos comuns, ajudam na disposio de dados dentro da pgina e podem ser usadas para separar diferentes tipos de dados, mantendo, assim, a organizao do Site Site.
Exemplo
Veja, a seguir, um exemplo de uso de alguns dos principais componentes de uma pgina HTML HTML.
19
Barra de Ttulo
Imagem
Hiperlinks
Para visualizar o cdigo fonte de uma pgina HTML que est sendo exibida no seu navegador, basta clicar na opo Exibir e depois em Cdigo-Fonte. Cdigo-Font onte Abaixo, o cdigo HTML que cria todo esse visual da figura do Site SENAC MINAS:
VISUALIZAO DA ESTRUTURA BSICA DE UM DOCUMENTO HTML
EXERCCIOS
Clique duas vezes no cone FireFox-Mozilla FireFox-Mozilla. Aps inicializado o navegador: 1) Clique no campo de endereo para selecionar o que j estiver nesse espao ou endereo. clique no menu Arquivo e selecione a opo Abrir endereo 2) Digite a URL da pgina que voc deseja visitar. Sugesto: http://www.mg.senac.br er. 3) Pressione Enter Enter 4) Visualize o cdigo fonte desta pgina.
20
Procure, sempre que possvel, criar pginas que ocupem somente o tamanho de uma tela, evitando, assim, a criao de barras de rolagem que dificultam a visualizao da informao pelo usurio. Mesmo que o Site fique com muitas pginas e vnculos, procure no criar uma pgina grande demais, o que ser til para aqueles que se conectam atravs de modems lentos, facilitando o entendimento do contedo da pgina e, conseqentemente, do Site Site. Evite colocar, tambm, muitas imagens em uma pgina. No se esquea de que uma figura bem maior que um texto: quanto menos figuras houver, mais rpido ser o carregamento* de sua Home Page Faa com que ela tenha um design diferente de Page*. outras j existentes, chamando a ateno e incentivando as pessoas a visit-la.
COMANDOS DA LINGUAGEM: TAGS

Um Tag simplesmente a instruo HTML (cdigo de formatao) que mostra ao navegador o que ele deve fazer ao ser executado. Assim como uma instruo de qualquer linguagem de programao, cada Tag possui uma funo especfica dentro de uma pgina HTML HTML. Poderamos comparar um Tag a um marcador de texto. Voc pode, por exemplo, querer demarcar algumas frases de um texto qualquer que esteja lendo. Para isso, voc usa um marcador. Da mesma forma, todo Tag colocado dentro de uma pgina para fazer a marcao de algo que se deseja mudar. Uma pgina HTML estruturada conforme as regras da norma que estudamos anteriormente, chamada de SGML A pgina ser sempre composta de Tags formados SGML. ags, simplesmente por uma palavra (comando da linguagem) envolvida pelos sinais de < (menor que) e > (maior que). Esses sinais podem ser chamados, tambm, de parnteses angulares. angulares Quando voc quiser destacar trechos de textos com grifo, inclinao e at negrito, utilize os seguintes Tags ags: <B> Negrito <I> Itlico <U> Sublinhado(grifado)
*Carregamento Processo dado quando uma pgina aberta por um Browser Browser. *Home Page Pgina Inicial de um Site. Apresenta, normalmente, o que existe no contedo do Site. Tambm lista os Site Site links existentes. conhecida por Porta de Entrada
21
TIPOS DE TAGS
Depois de saber para que serve um Tag vamos entender seus tipos. ag,
Tag de contudo
aquele Tag que, para ser executado, precisa, geralmente, de algum contedo na pgina. Esse contedo pode ser um texto, uma palavra, uma figura, uma tabela, enfim, tudo aquilo que pode ser colocado na pgina. Esse Tag que vai sempre agir sobre algo que exista na pgina, possui o que chamamos ag, de Abertura e Fechamento Quando desejar mudar algo em sua pgina voc dever Fechamento. utilizar um Tag de Aber tura antes do objeto que se deseja mudar e, um Tag de Abertura Fechamento logo em seguida. Imagine, por exemplo, que em sua redao exista uma determinada palavra que voc queira destacar, colocando-a com um grifo. Para isso, voc dever iniciar o Tag que grifa a palavra antes dela (Abertura) e, logo depois da palavra, dever colocar o Tag que termina de grif-la (Fechamento). Agora, vamos entender como teramos que descrever uma Tag de Contedo Veja, no Contedo edo. exemplo, sua sintaxe: <tag de abertura>palavra ou texto</tag de fechamento> O comando a seguir mostra a frase Primeira Pgina sublinhada. <U> Primeira Pgina </U> Viu como fcil? Observe que o Tag de Fechamento possui, no incio, uma barra (/) que se diferencia echament hamento / do Tag de Aber tura Abertura tura. Entre elas, dever entrar a informao que sofrer o efeito de determinado Tag de Contedo. Contedo
Vazio Tag Vazio

Diferente do Tag de Contedo esse tipo de Tag no age sobre nada (palavra, texto, Contedo edo, imagens etc). Ele, na verdade, serve para criar elementos na pgina.
1. Para que a acentuao ou smbolos apaream corretamente, verifique no seu navegador, no menu Exibir se est selecionada a opo UNICODE (UTF-8). Caso no esteja, selecione-a. codificao
22
Suponhamos que voc tenha criado uma pgina que contm um texto. Entretanto, resolve inserir uma figura nesse texto para deix-lo mais sofisticado. Como voc est inserindo algo, dever usar um Tag Vazio que permite inserir uma figura na pgina. azios: A seguir, um exemplo de Tags Vazios
<IMG SRC = /figuras/ola.gif>

<BR> que significa mudana de linha. Um Tag Vazio mais simples de usar, porque ele no possui fechamento como o Tag Vazio Contedo edo. de Contedo Voc apenas dever coloc-lo no local da pgina onde deseja criar algo.
ATRIBUTOS DE TAGS
Todos esses elementos j descritos podem, tambm, conter o que chamamos de atributos parmetros. tros ags. butos ou parmetros Eles tornam diferente a forma de apresentao dos Tags Existe um Tag na linguagem HTML como, por exemplo, o Tag <FONT>, que muda a fonte (letra), o tamanho e a cor de um texto. Ou seja, ele possui trs atributos que poderemos aplicar: fonte (atributo FACE), cor (atributo COLOR) e tamanho (atributo SIZE). Cabe a voc usar um ou todos os atributos. Sua sintaxe de utilizao a seguinte: <FONT FACE=ARIAL CLOR=RED SIZE=5> Assim, temos os seguintes atributos para o Tag <FONT> Face = Tipo de Fonte Color = Cor da Fonte Size = Tamanho da Fonte
Exemplo Exemplo
Com base na sintaxe exposta, observe alguns exemplos de uso de Tags ags: A <i>Biologia</i> o estudo dos seres vivos <FONT FACE=ARIAL>Dicas de Gramtica</FONT>
23
Veja que, no primeiro exemplo, os comandos <i> e </i> etiquetam a palavra Biologia em itlico e os comandos <FONT> e </FONT> etiquetam o texto Dicas de Gramtica para utilizar a fonte arial. Isso possvel atravs do atributo FACE exposto no segundo exemplo.
OBSERVAO No existe distino entre letras maisculas ou minsculas na escrita de um Tag ag.
PRINCIPAL ESTRUTURA PRINCIPAL DE UMA PGINA

Agora, vamos colocar a mo na massa para darmos os primeiros passos prticos para a construo de um perfeito Site da Internet. Primeiramente, abra o editor de textos KWrite para digitar os cdigos HTML Para HTML. isso: clique no boto Aplicativos (que fica no canto inferior esquerdo da tela principal do Linux Linux); no item Escritrio clique em KWrite Escritrio, KWrite. Ser aberta a tela do editor de textos do Linux conforme mostrado a seguir: Linux,
24
Como toda linguagem de programao, a linguagem HTML possui uma estrutura principal na criao de suas pginas. Essa estrutura que permite ao Browser entender e interpretar um documento HTML Ela sempre ser iniciada pelo Tag <HTML> e termiHTML. KWrit rite nada pelo Tag </HTML>. Portanto, aps ter aberto o editor de texto KWrite, digite, na primeira linha do editor, o Tag <HTML>. Aps a entrada desse Tag nosso prximo componente o crebro da nossa pgina. Ele ag, conter informaes textuais e visuais e instrues da linguagem JavaScript que oferecem um maior controle nossa pgina como, por exemplo, solicitar ao usurio sua data de nascimento e, a partir de um clculo matemtico, saber a idade atual do nosso visitante. Alm disso, esse crebro conter o ttulo da nossa pgina, aquele mostrado no incio da apostila no Site do SENAC. O crebro da pgina ser formado pelo Tag <HEAD> e Site finalizado com o Tag </HEAD>, que ficam entre os Tags <HTML> e </HTML>. Entre estes que vo entrar as instrues da linguagem JavaScript que veremos mais adiante. Por hora, veremos apenas a incluso do ttulo da pgina. Para incluir um ttulo em HTML, uma pgina HTML utiliza-se o Tag <TITLE> (para iniciar) e </TITLE> (para fechar). Complemente seu arquivo do Kwrite com as informaes do exemplo. Basta copiar da mesma forma em que est escrito.
Exemplo Exemplo
<html> <head> <title>Minha Redao Pessoal</title> </head> </html> Vamos incluir, agora, o cdigo (corpo) que o terceiro e ltimo elemento da pgina. Ele chamado de corpo da pgina pgina. O corpo a rea da pgina onde ser colocado o contedo. Se voc est fazendo uma pgina que contm uma redao, por exemplo, ela deve ficar no corpo da pgina. Ele
25
formado pelo Tag <BODY> e Tag </BODY>. Aps terminar o corpo da pgina, devemos encerrar o primeiro Tag que foi aberto. Voc se lembra de que falamos que o Tag <HTML> o primeiro que se abre e o ltimo que se fecha? Terminado o corpo, ento, devemos fechar a pgina com o Tag </HTML>. Assim, temos os trs componentes bsicos que formam a estrutura de uma pgina HTML. ags: HTML Os Tags <HTML> e </HTML>, <HEAD> e </HEAD> e <BODY> e </BODY>. Ento, podemos redigir todos os elementos da pgina no editor de texto Kwrite e seu cdigo dever estar como o apresentado a seguir: <html> <head> <title>Minha Redao Pessoal</title> </head> <body> Devo digitar minha redao aqui!!! </body> </html>
SALV SUA SALVANDO SUA PGINA

Chegou o momento de saber como funcionar essa pgina, ou seja, como ela ser mostrada no navegador de Internet. Para isso, voc dever salvar seu arquivo no editor Kwrite: Kwrite quivo Salvar ar. no menu Arquivo, clique em Salvar Arquiv Ser aberta uma janela que solicitar um local para guardar seu arquivo e um nome para ele. Lembrando-se dos conceitos bsicos de informtica, ao salvar um arquivo, deve-se dar um nome e uma extenso* a ele. Nesse caso, ser utilizada a extenso .htm 1 que far com que seu sistema saiba que se trata de uma pgina de Internet. Escolha um diretrio de sua preferncia para guard-lo. Digite o nome: modelo.htm modelo.htm. Clique no boto Salvar Salvar ar.
1 A extenso para arquivos HTML pode ser tanto arquivo.htm como arquivo.html. *Extenso Identifica o tipo de arquivo. A extenso .sxi ou .ppt por exemplo, identifica arquivos do Impress ou .ppt, Point. Power Point
26
Pronto! Agora, v at o local onde voc guardou seu arquivo e abra-o. Para isso, voc ir abrir o Konqueror (clicar no boto de inicializao Metasys e selecionar o menu Arquivos). quivos Gerenciador de Arquivos Voc pode navegar, clicando nos diretrios sua esquerda at chegar ao diretrio que est seu arquivo .htm ou, na caixa de texto Localizao Localizao, voc pode digitar o caminho at o diretrio do arquivo e clicar Enter Os arquivos desse Enter er. diretrio aparecero ao lado direito do Konqueror Ento, clique duas vezes no arquivo onqueror or. Modelo.htm. Modelo.htm Sua pgina ser carregada no navegador e apresentada como mostra a figura a seguir:
Em nosso exemplo, criamos uma pgina chamada modelo.htm apenas para exercitar. Mas importante saber que, quando estiver montada a primeira pgina de um Site o Site, nome dela dever ser sempre index.htm Isso se d por ser a primeira pgina, ou seja, index.htm. aquela que o navegador est programado a procurar quando digitamos o endereo de um Site.
UTILIZANDO O TAG DE PARGRAFO <P>

Ao digitar o texto da pgina anterior, ele foi tratado como um texto puro, ou seja, se voc quisesse centraliz-lo, alinh-lo direita, esquerda ou, at mesmo, justific-lo, no seria possvel. Isso acontece porque a linguagem HTML somente alinha textos caso sejam tratados como pargrafos. E, para que isso ocorra, necessrio o uso dos Tags de Pargrafo <P> e </P>.
27
Para que possamos centralizar o texto da pgina modelo.htm temos que transform-lo em um pargrafo e colocarmos o atributo align=center Para isso: align=center er. volte ao editor de texto KWrite (clique no boto Aplicativos selecione o Aplicativos, item Escritrio e clique em KWrite KWrite); Arquivo, abra a pgina modelo.htm que contm nosso cdigo (clique em Arquivo no item Abrir ou clique no cone Abrir Navegue pelos diretrios, clicando Abrir. duas vezes neles at chegar ao diretrio que est o arquivo desejado. Clique no arquivo e, em seguida, no boto Abrir Abrir); envolva a linha que descreve o texto Devo digitar minha redao aqui!!! com o Tag de pargrafo, ou seja, Tag <P>, juntamente com o atributo align=center ; <p align=center>Devo digitar minha redao aqui!!!</p> clique no boto Salvar Salvar ar. Para visualizar a modificao, basta clicar no boto Recarregar do Firefox ou ir ao menu Exibir e escolher a opo Recarregar Sua pgina ser carregada no navegador ecarregar. e apresentada como mostra a figura a seguir:
Viu s como fcil criar pargrafos? Agora, continue criando outros. Construa uma pgina com o Hino do time de futebol para o qual voc torce. Deixe-o centralizado em sua pgina da Internet.
28
ATENO
Assim que terminar, lembre-se de salvar seu arquivo pode ser com o nome do time. Em seguida, abra-o no navegador.
Para alinhar alguns de seus pargrafos s margens direita, esquerda, no centro da pgina ou com alinhamento justificado, utilize o atributo de alinhamento Align Align. Para isso: atravs do cdigo de sua pgina, acrescente ao Tag <P> o atributo Align Align. Veja como ficaria a sintaxe de um pargrafo justificado:
<p align=justify>Conhea, nos pargrafos seguintes, a ortografia de algumas palavras do vocabulrio portugus:</p>
Outros valores para alinhamento <p align = left> Alinha o pargrafo esquerda. <p align= center> Alinha o pargrafo ao centro. <p align= right> Alinha o pargrafo direita. <p align= justify> Alinha o pargrafo justificado.
EXERCCIOS
1 ) Pesquise em um Site de busca um poema de Carlos Drummond de Andrade ou de um outro poeta de sua preferncia. 2 ) Agora, com base nas explicaes anteriores, utilizando o editor de texto KWrite, KWrite crie uma pgina cujo ttulo o nome do poema nome do autore o corpo da pgina so as estrofes do poema. 3 ) Coloque cada estrofe do poema como um pargrafo, fazendo alinhamentos diferentes (center justify left e right para cada um deles. center center, justify, left right) Modelo2.htm. 4 ) Salve o arquivo como Modelo2.htm FireFox. 5 ) Abra o arquivo no FireFox
29
30

H T M L
ESTILOS DE CABEALHO E PARGRAFO

31
Voc acabou de aprender a criar pargrafos com o Tag <P>. Mas existem, tambm, outros seis Tags de pargrafos que servem para aumentar a fonte do texto e coloc-lo em negrito. A diferena entre cada um deles est no tamanho da fonte. Veja, pelo exemplo do cdigo abaixo, a diferena entre eles: <H1>O Nvel Um: o maior de todos, normalmente utilizado nos Ttulos das Pginas HTML!</H1> <H2>O Nvel Dois: um pouco menor, podendo ser usado em Sub-Ttulos!</H2> <H3>O Nvel Trs: bem menor que o dois, podendo ser utilizado em Subitens de um texto!</H3> <H4>O Nvel Quatro: bem prximo ao texto normal, sendo um pouco mais destacado!</H4> <P>Este um exemplo de texto normal!</P> <H5>O Nvel Cinco: destacado tambm, porm, bem menor que o quatro</H5> <H6>O Nvel Seis: com certeza o menor de todos os exemplos!</H6> Agora, veja o resultado no navegador:
33
TAG <FONT>
A partir de agora, esses textos podem ser formatados com cores, tipos de letras e tamanho. Para isso, existe o Tag <FONT> e </FONT> que possui trs atributos: Face Color Size Altera a fonte do texto. Altera a cor da fonte. Altera o tamanho da fonte.
melhor... Entendendo melhor...

Inicialmente criando uma pgina que descreve o nome de cinco animais: Abra o editor de texto KWrite ( (clique no boto Aplicativos, no item Escritrio, KWrite). trio clique em KWrite Digite os cdigos abaixo: <html> <head> <title>AULA DE BIOLOGIA</title> </head> <body> <p>Cachorro</p> <p>Elefante</p> <p>Gato</p> <p>Sapo</p> <p>Leo </p> </body> </html> Salve seu arquivo como Modelo3.htm (clique no boto salvar e escolha o diretrio do curso). Visualize o cdigo no navegador.
34
Para isso, voc ir abrir o Konqueror (clicar no boto de inicializao Metasys e selecionar o menu Gerenciador de Arquivos Voc pode navegar, clicando nos diretrios Arquivos). quivos sua esquerda at chegar ao diretrio que est seu arquivo .htm ou, na caixa de texto Localizao, Enter er. Localizao voc pode digitar o caminho at o diretrio do arquivo e clicar Enter Os arquivos desse diretrio aparecero ao lado direito do Konqueror Ento, clique duas onqueror or. vezes no arquivo Modelo3.htm Modelo3.htm. No arquivo modelo3.htm, use o Tag <FONT> para mudar a letra, o tamanho e a cor de cada animal, procurando relacionar cada um. <html> <head> <title>AULA DE BIOLOGIA</title> </head> <body> <p><font color=brown face=arial size=3">Cachorro</font></p> <p><font color=silver face=Tahoma size=7">Elefante</p> <p><font color=black face=arial size=3">Gato</p> <p><font color=green face=corrier size=3">Sapo</p> <p><font color=gold face=Tahoma size=5">Leo</p> </body> </html> Salve seu arquivo novamente como Modelo3.htm Visualize o cdigo no Modelo3.htm. navegador. A pgina deve abrir conforme a figura a seguir:
35
CURIOSIDADE Para o atributo Size possvel alterar sete tamanhos que vo de 1 a 7. Size, Observe a sintaxe desse Tag e veja, tambm, os outros atributos: Sintaxe: <FONT SIZE = tamanho da fonte fonte>Texto</FONT> onte <FONT FACE = nome da fonte fonte>Texto</FONT> onte <FONT COLOR= nome da cor cor>Texto</FONT>
EXERCCIOS
Agora que voc j aprendeu a criar uma pgina com pargrafos e alinhamentos, crie uma nova pgina HTML HTML. KWrite, 1 ) Utilizando o editor de texto KWrite digite os trs componentes bsicos do HTML (os Tags <HTML>, <HEAD> e <BODY>). 2 ) Salve o arquivo com o nome gramtica.htm no diretrio sua escolha. 3 ) Insira, como ttulo, o texto: Dicas de Gramtica (Tag <HEAD>). 4 ) Pesquise na Internet, contedos sobre: a grafia de algumas palavras que parecem mais difceis (pelo menos 10 palavras): xcara, chuchu, jeito, chcara, exceto, sessenta etc; regras de concordncia; uso do por qu; conjugao verbal; uso da crase; do hfen; entre outros. 5 ) No corpo da pgina, coloque cinco dicas que voc pensa que so relevantes para quem necessita de um auxlio com o uso da nossa Lngua. 6 ) Separe cada uma delas em pargrafos diferentes. Na primeira, coloque a Tag H2. Na segunda, coloque em negrito <b>. Na terceira, coloque a fonte de tamanho 5 e a cor vermelha. Na quarta, coloque a fonte Tahoma, cor azul e em itlico (Tag <i>). E, por ltimo, a quinta, coloque centralizada e sublinhada. 7 ) Salve o arquivo e visualize sua pgina no navegador.
36
ATRIBUTO COLOR SOBRE O ATRIBUTO COLOR

possvel, com o atributo Color usar nomes de cores em ingls ou atravs do sistema Color, RGB (RED [vermelho], GREEN [verde] e BLUE [azul]) para cores. Seus valores so dados em hexadecimais, que permitem inserir intensidades de cores como azul escuro ou azul claro. Veja, a partir da tabela abaixo, a listagem de algumas cores com seus respectivos cdigos hexadecimais: COR 1
AQUA BLACK FUCHSIA GREEN BROWN OLIVE SILVER WHITE BLUE CYAN GRAY LIME NAVY RED TEAL YELLOW DARK GREEN PALE GREEN DARK OLIVE GREEN DARK BROWN DARK TAN BLUE VIOLET MAROON SPICY PINK BRONZE GOLD ORANGE
CDIGO
#70DB93 #000000 #FF00FF #00FF00 #800000 #808000 #E6E8FA #FFFFFF #0000FF #00FFFF #C0C0C0 #32CD32 #23238E #FF0000 #008080 #FFFF00 #2F4F2F #8FBC8F #4F4F2F #5C4033 #97694F #9F5F9F #8E236B #FF1CAE #8C7853 #CD7F32 #FF7F0
37
EXERCCIOS
1) Abra o arquivo Modelo2.htm utilizando o editor de texto KWrite Modelo2.htm, KWrite. 2) D cor ao ttulo do poema e coloque-o em itlico. 3) Deixe cada pargrafo com uma cor diferente. 4) Brinque com a sua pgina! 5) Salve as alteraes. Visualize sua nova pgina no navegador. Mas, lembre-se! Esses Tags so de Contedo ou seja, eles agem sobre o texto. Contedo edo, Portanto, no se esquea do seu fechamento, ok?
CORES DE FUNDO <BODY>

J aprendemos que o Tag <BODY> um dos principais elementos da estrutura de uma pgina e, alm dessa importncia, ele permite atribuir, em nossas pginas, cores (atributo BGCOLOR) e at imagens de fundo (atributo BACKGROUND). Para isso, basta utilizar os atributos no Tag <BODY>: KWrite, Modelo3.htm. Utilizando o editor de texto KWrite abra o arquivo Modelo3.htm Exercite esses atributos, colorindo o fundo da pgina que criamos para a aula de Biologia. Destaque-a com uma outra cor. Visualize sua pgina, usando o navegador. Mas, lembre-se: o atributo BGCOLOR deve ser usado dentro do Tag <BODY>. BGCOLOR Veja sua sintaxe: <BODY BGCOLOR=cor desejada>
38
EXERCCIOS
KWrite, 1 ) Utilizando o editor de texto KWrite digite os trs componentes bsicos do HTML (os Tags <HTML>, <HEAD> e <BODY>). 2 ) Salve o arquivo com o nome datas.htm no diretrio sua escolha. Comemorativas T 3 ) Insira, como ttulo, o texto: Datas Comemorativas (Tag <HEAD>). 4 ) Faa uma pesquisa das principais datas comemorativas durante o ano de 2008 dia e motivo. 5 ) Coloque uma data em cada linha <BR> e distribua em pargrafos <P> e </ P> o conjunto de datas referentes ao ms do ano. 6 ) Mude a cor, a letra, o tamanho da fonte e sua cor de fundo, conforme o ms. 7 ) Visualize sua pgina no navegador.
TAGS MAIS UTILIZADOS (RESUMO)

Segue, abaixo, um Resumo dos Tags mais utilizados para criao de Documentos HTML. HTML Esse resumo servir como um Guia de Referncia Bsica para seu aprendizado.
TAG: <HTML> Objetiv tivo Tag Obje tiv o do Tag
Comando INTERPRETADOR
Apresenta as instrues ao navegador que est trabalhando com documentos HTML HTML. Sintaxe Bsica <html> Conjunto de TAGs e informaes. </html>
39
TAG: <HEAD> Objetiv tivo Tag Obje tiv o do Tag
Comando CABEALHO
Responsvel por diversas informaes dentro de uma pgina HTML, Ttulo. HTML como o ttulo da Barra de Ttulo Sintaxe Bsica <head> <title>ttulo da pgina</title> </head> TA G: <TITLE> Objetiv tivo Tag Obje tiv o do Tag Define um texto como sendo o Ttulo de uma Pgina, que mostrada na parte superior do Browser (na Barra de Ttulo) lo e no cabealho de uma pgina impressa. O Tag <title> deve aparecer sempre dentro do Tag <head>. Sintaxe Bsica <title> Ttulo da Pgina </title> Exemplo <title>Pgina Principal do Meu Site</title> <BODY> TAG: <BODY> Objetiv tivo Tag Obje tiv o do Tag Define o contedo principal, o corpo do documento. Essa a parte do documento HTML que exibida no navegador. No corpo podem-se definir propriedades comuns a toda pgina como cor de fundo, margens e outras formataes. Sintaxe Bsica <body> Corpo da Pgina </body> Exemplo <title>Redao Pessoal </title> Comando CORPO Comando TTULO
40
TAG: <P> Objetiv tivo Tag Obje tiv o do Tag
Comando PARGRAFO
Define o encerramento do Pargrafo atual e incio de um novo, como no encerramento de um Pargrafo num documento de texto, pressionando-se Enter utilizado aos pares se for neEnter er. cessria a colocao de atributos. Sintaxe Bsica Pargrafo inicial<p> Pargrafo seguinte. <p> <p atrtibutos> Pargrafo </p> Exemplo Este o primeiro pargrafo.<p>E este o segundo pargrafo. <p align=center> Este o pargrafo </p> Efeito Este o primeiro pargrafo. E este o segundo pargrafo. Efeito Este o pargrafo TAG: <BR> Objetiv tivo Tag Obje tiv o do Tag Define o encerramento do Pargrafo atual e incio de um novo Pargrafo, como no encerramento de um pargrafo num documento de texto, pressionando-se Enter Enter er. Sintaxe Bsica Pargrafo inicial<BR> Pargrafo seguinte. <BR> Exemplo Este o primeiro pargrafo.<br>E este o segundo pargrafo. Efeito Este o primeiro pargrafo. E este o segundo pargrafo. Comando PARGRAFO
41
TAG: <B> Objetiv tivo Tag Obje tiv o do Tag
Comando NEGRITO
Atribui o estilo Negrito em trechos especficos do texto. Sintaxe Bsica <b> texto </b> Exemplo Teste de Estilo para <b>NEGRITO</b> Efeito Teste de Estilo para NEGRITO. NEGRITO. TAG: <I> Objetiv tivo Tag Obje tiv o do Tag Atribui o estilo Itlico em trechos especficos do texto. Sintaxe Bsica <i> texto </i> Exemplo Teste de Estilo para <i>ITLICO</i> Efeito Teste de Estilo para ITLICO. TAG: <U> Objetiv tivo Tag Obje tiv o do Tag Atribui o estilo Sublinhado em trechos especficos do texto. Sintaxe Bsica <u> texto </u> Exemplo Eu criei uma <U>Pgina WEB.</U> Efeito Eu criei uma Pgina WEB. Comando SUBLINHADO Comando ATRIBUI ITLICO
42
TAG: <H1> AT <H6> Objetiv tivo Tag Obje tiv o do Tag
Comando NVEIS DE CABEALHO
Reala os diversos nveis de cabealhos de modo hierrquico numa pgina. Os nveis vo desde <h1> at <h6>, passando por <h2>, <h3>, e assim por diante. Sintaxe Bsica <h2> Cabealho de Nvel 2</h2> </h2> Exemplo <h1>Cabealho de Nvel 1</h1> <h2>Cabealho de Nvel 2</h2> <h3>Cabealho de Nvel 3</h3> Efeito
Cabealho de Nvel 1
Cabealho de Nvel 2
Cabealho de Nvel 3
43
44

H T M L
INSERINDO IMAGENS EM DOCUMENTOS HTML

45
Uma das partes mais interessantes na construo de uma pgina na Internet poder usar imagens (figuras) dentro delas. Na maioria das pginas, so utilizadas imagens animadas para deix-las mais bonitas, sofisticadas e com uma boa apresentao. ATENO
Lembre-se de no colocar imagens muito grandes e com muitas cores. Isso evita o carregamento lento de quem visita sua pgina.
O Tag responsvel pela tarefa de inserir imagens em uma pgina o Tag <IMG>. Mas sua funo s de chamar a figura. necessrio que ela j exista num arquivo dentro do seu computador. Veja qual a sintaxe desse Tag para incluir uma imagem em sua pgina: <IMG SRC=nome da imagem> IMG: o Tag HTML para insero de imagens. SRC: local onde se encontra a imagem a ser includa na pgina. Vejamos um exemplo para incluir figuras em uma pgina que descreve a origem dos sinais Matemticos. Aproveitamos para incluir ttulos e pargrafos para a pgina. Repare o cdigo a seguir, em que utilizamos o Tag <IMG>: <html> <head><title>ORIGEM DOS NMEROS</title></head> <body> <font face=arial> <p align=center><img src=logo.gif></p> <h1 align=center>ORIGEM DOS SINAIS MATEMTICOS</h1> <h3>Adio ( + ) e subtrao ( - )</h3> <p>O emprego regular do sinal + ( mais ) aparece na Aritmtica Comercial de Joo Widman dEger publicada em Leipzig em 1489. Entretanto, representavam no adio ou subtrao ou aos nmeros positivos ou negativos, mas aos excessos e aos dficit em problemas de negcio. Os smbolos positivos e negativos vieram somente ter uso geral na Inglaterra depois que foram usados por Robert Recorde em 1557. Os smbolos positivos e negativos foram usados antes de
47
aparecerem na escrita. Por exemplo: foram pintados em tambores para indicar se os tambores estavam cheios ou no. </font> <h3>Multiplicao ( . ) e diviso ( : )</h3> </body> </html> Veja o efeito desse Tag na figura a seguir, com a imagem sendo mostrada a partir do navegador:
FONTE: HTTP://WWW.SOMATEMATICA.COM.BR/SINAIS.PHP
ALINHAMENTO DE IMAGENS E TEXTO NA PGINA

Na maioria das vezes, o navegador no ajuda muito no alinhamento, ao mesmo tempo, de imagens e textos em uma Pgina HTML. Por isso, existe o atributo do Tag <IMG> HTML que se chama Align Voc se lembra dele quando aprendemos a alinhar pargrafos? Align. Observe, abaixo, sua sintaxe: <IMG ALIGN=atributo SRC=nome_da_imagem> Agora, veja os valores utilizados para esse atributo ao alinhar uma imagem: Top = Alinha o texto parte superior da imagem.
48
Middle = Alinha o texto ao meio da imagem. Bottom = Alinha o texto parte inferior da imagem. Abaixo, seguem exemplos de alinhamento de imagem e texto, especificados anteriormente: <html> <head> <title>Utilizando Imagens</title> </head> <body> <img src=bemvindo.gif align=top> Conhecendo a linguagem HTML<br><br> <img src=bemvindo.gif align=middle> Conhecendo a linguagem HTML<br><br> <img src=bemvindo.gif align=bottom> Conhecendo a linguagem HTML </body>
</html>
49
REDIMENSIONAMENTO DE IMAGENS
Se voc quiser, poder alterar a Largura e a Altura das imagens de sua pgina, o que tornar seu carregamento mais rpido. Esses atributos no afetam a imagem original em suas dimenses, apenas apresentam a imagem na pgina com as dimenses mais definidas. Volte ao exemplo da pgina sobre a origem dos sinais Matemticos e perceba que a figura includa ficou muito grande. Vamos diminuir, ento, suas dimenses, usando o atributo de largura Width Width. Veja como fica sua sintaxe: <img src=logo.gif width=18%> No cdigo referente figura que foi inserida, usou-se o atributo de largura que definiu em 18% o tamanho original. Compare: Esta a pgina do exemplo anterior. Observe o tamanho da sua imagem:
50
Esta a pgina com a imagem reduzida em 18% do seu tamanho original.
EXERCCIOS
Seu professor de Biologia solicitou um trabalho sobre animais mamferos: nome cientfico, habitat, reino, filo, classe, ordem, famlia, gnero e espcie. Voc poderia realiz-lo em uma folha de papel ofcio, fazendo a colagem das figuras e escrevendo as caractersticas de cada um. Porm, agora, voc poder criar uma pgina de consulta com esse tema, fazendo uso dos recursos que aprendeu com a linHTML. guagem HTML 1 ) Busque, na Internet: informaes sobre sete animais mamferos; algumas imagens desses animais; os tens solicitados pelo seu professor, para cada animal. 2 ) Salve em seu computador todos os dados pesquisados. Lembre-se de que imagens menores deixam a pgina mais rpida. 3 ) Em seguida, v ao KWrite e digite todos os comandos necessrios para inserir as imagens selecionadas dos animais. Digite, no corpo da pgina, as informaes sobre o animal que aparece em cada imagem. No se esquea de alinhar os pargrafos. Verifique e, se necessrio, altere altura e largura das imagens, a cor de fundo e as cores do texto. Deixe sua pgina bem atraente! Salve o arquivo como mamferos.htm e visualize no navegador. mamfer eros.htm
51
Desenvolva uma pgina HTML que d dicas matemticas. No se esquea de incluir imagens para ilustrar sua pgina! Das dicas abaixo, selecione quatro e insira uma imagem para cada dica e uma imagem para o Ttulo (H1). Dica 1: multiplicar um nmero por 10: basta deslocar a vrgula uma casa decimal para a direita. Exemplo 1: 16 x 10 = 160 Exemplo 2: 15,567 x 10 = 155,67 Dica 2: multiplicar um nmero por 10n: basta deslocar a vrgula n casas decimais para a direita. Exemplo 1: 16 x 103 = 16000 Exemplo 2: 15,567 x 104 = 155670 Ento, se quisermos efetuar 12 x 100, sabemos que 100=102. Ento:12 x 100 = 12 x 102 = 1200. Dica 3: dividir um nmero por 10: basta deslocar a vrgula uma casa decimal para a esquerda. Exemplo 1: 16 / 10 = 1,6 Exemplo 2: 15,567 / 10 = 1,5567 Dica 4: dividir um nmero por 10n: basta deslocar a vrgula n casas decimais para a esquerda. Exemplo 1: 16 / 103 = 0,016 Exemplo 2: 15,567 / 102 = 0,15567 Ento, se quisermos efetuar a seguinte diviso: 12 / 1000, sabemos que 1000=103. Ento: 12 / 1000 = 12 / 103 = 0,012. Dica 5: multiplicar um nmero por 11: quando o nmero for de dois algarismos, basta somar esses dois algarismos e colocar o resultado no meio deles. Exemplo: efetuar a seguinte multiplicao: 26 x 11. Temos o nmero 26, somando seus 2 algarismos temos 2+6=8. Pronto! Agora s colocar esse 8 no meio deles: a resposta 286. Portanto, 26 x 11 = 286.
52
Outros exemplos: 1) 34 x 11: somamos os algarismos do nmero 34: 3+4=7, colocamos o resultado no meio deles: 374. Portanto 34x11 = 374. 2) 81 x 11: somamos os algarismos do nmero 81: 8+1=9, colocamos o resultado no meio deles: 891. Portanto 81x11 = 891. 3) 37 x 11: somamos os algarismos do nmero 37: 3+7=10 Como deu um nmero maior que 9, ento no podemos colocar todo o nmero no meio deles. Colocamos apenas o algarismo das unidades (0) e, o algarismo da dezena (1), somado ao primeiro algarismo do nmero: 407. Portanto, 37x11 = 407. Quando o nmero for de 3 algarismos, ento esse nmero multiplicado por 11 resultar em um nmero de 4 algarismos. Por exemplo, vamos efetuar a seguinte multiplicao: 135 x 11. Temos o nmero 135. Somando o 1 com o 2 algarismo desse nmero temos 1+3=4. Somando o 2 com o 3 algarismo desse nmero temos 3+5=8. Esses 2 resultados sero colocados no meio do nmero 135, tirando o seu algarismo do meio: 1485. Portanto 135 x 11 = 1485.
53
54

H T M L
HIPERLINKS TRABALHANDO COM VNCULOS

55
URLS TIPOS DE URLS

Normalmente, quando estamos navegando na Internet, basta digitar um endereo para que, em seguida, j nos transportamos para a Pgina Web ou Site em questo. Mas existem alguns servios da Internet que tendem a utilizar outros tipos de endereamento. URL: URL abreviao de Uniform Resource Locator (Localizador Universal de Recursos), o endereo de qualquer recurso que est disponibilizado na Internet. Ele permite que qualquer mquina acesse qualquer computador e/ou Site sem Site, se importar (do ponto de vista do usurio) onde est, fisicamente, localizado. A sintaxe bsica para um URL deve seguir a seguinte estrutura: PROTOCOLO://Servidor/NomeDoArquivo.Htm Agora, observe seu significado: PROTOCOLO = Protocolo de Comunicao que dever ser utilizado. Ex: http:// SERVIDOR = Nome do Computador Servidor que ser acessado. Ex: mg.senac : NOMEDOARQUIVO.HTM = Documento .html que ser aberto. Ex: index.htm PROTOCOLO = Protocolo de Comunicao que dever ser utilizado. Ex: http:// SERVIDOR = Nome do Computador Servidor que ser acessado. Ex: mg.senac : NOMEDOARQUIVO.HTM = Documento .html que ser aberto. Ex: index.htm Compare os dados apresentados anteriormente com o endereo abaixo: HTTP://www.portal.mec.gov.br/index.htm HTML. HTTP = Protocolo para Documentos HTML www = World Wide Web. portal.mec.go tal.mec.gov portal.mec.gov.br/ = Nome do Computador Servidor. index.htm index.htm = Pgina que ser aberta no computador.
CRIANDO LINKS DE ARQUIVOS LOCAIS <A>

Para criar um link, ser necessrio usar o Tag <A>...</A>, tambm conhecido como ncora e, juntamente a ele, o atributo Href que diz ao navegador o URL ou pgina
57
que dever ser chamado. Sendo assim, para que se crie um link, deve-se saber para qual Site voc deseja ir. Site Veja a sintaxe do Tag <A>, abaixo: <A HREF=Arq_destino>NCORA</A> HREF= HREF Significa Referncia de Vnculo. Arq_destino = Refere-se ao caminho do arquivo de destino. Veja o exemplo que se segue: <A HREF=ESCOLA.HTM>Curso de Programao em HTML</A> O cdigo HTML apresenta apenas o Texto Curso de Programao em HTML como Curso Programao Cur HTML hipertexto e indica que dever se direcionar para a pgina chamada ESCOLA.HTM. Todas as vezes que voc criar um link, os trechos envolvidos sero apresentados sublinhados, indicando ao usurio que ali existe um link para outra pgina ou outro endereo. No exemplo do cdigo a seguir, vamos criar uma pgina que permitir acessar, a partir de um link no texto Portal da Gramtica da Lngua Portuguesa o Site Portuguesa, www.portugues.com.br. Veja abaixo: KWrite; abra o editor KWrite digite o cdigo abaixo. <html> <head><title>Links</title></head> <body> <a href=http://www.portugues.com.br/>Portal da Gramtica da Lngua Portuguesa</a> </body>
</html>
Salve o cdigo e abra-o no navegador.
58
A pgina aberta dever ser igual a esta:
Clique no link que apareceu na imagem. Automaticamente, voc ser redirecionado para a pgina www.portugues.com.br conforme mostra a www.portugues.com.br, .portugues.com.br figura a seguir:
FONTE: HTTP://WWW.PORTUGUES.COM.BR/
At aqui, voc j deve saber que, para criar um link, necessrio saber, tambm, o destino no qual voc far a ligao.
59
PARA CRIANDO LINKS PARA IMAGENS

Da mesma forma que podemos criar links com textos, podemos fazer para imagens. Observe o mesmo cdigo apresentado, utilizando uma figura que, ao clicar sobre ela, o navegador ser redirecionado para o Site da UNESCO. <html> <head><title>Links</title></head> <body> <a href=http://www.unesco.org.br><img src=crianca.jpg width=40%></a> </body>
</html>
FONTE: HTTP://WWW.UNESCO.ORG.BR
Observe, pela figura acima, que a imagem apresentada na tela, com uma borda azul ao seu redor, indicando um Hiperlink.
60
Agora, veja que, ao clicar sobre a imagem, a pgina da UNESCO ser carregada, conforme mostrado na figura a seguir:
FONTE: HTTP://WWW.UNESCO.ORG.BR
TAGS MAIS UTILIZADOS (RESUMO)

Segue, abaixo, um Resumo dos Tags mais utilizados para a criao de Documentos Tags Documentos HTML. HTML Esse resumo servir como um Guia de Referncia Bsica para seu aprendizado: SRC> TAG: <IMG SR C> Objetiv tivo Tag Obje tiv o do Tag Insere uma imagem dentro da pgina. Sintaxe Bsica <img src=nome_da_imagem> Exemplo D um Download nesta imagem <img src=casa.gif> Efeito D um Download nesta imagem Comando INSERIR IMAGENS
61
TAG: <A HREF> Obje tiv o do Tag Objetiv tivo Tag
Comando CRIAR VNCULOS
Insere um link na pgina, destacando o endereo com uma linha sublinhada, permitindo o usurio, ao clicar sobre o link, ir diretamente a outro local, desta ou de outra pgina. Sintaxe Bsica . Texto <a href=endereo>ncora</a> mais texto. Exemplo Bate-Papo, <a HREF=http://www.unesco.com.br/>Clique Aqui!!!</a> e divirta-se. Efeito Bate-Papo, Clique Aqui!!! e Divirta-se.
EXERCCIOS
1) Imagine-se como um professor de Geografia e crie uma pgina na Internet com questes sobre clima, relevo, escala, vegetao, cartografia e geopoltica da regio Sudeste. Seu Site dever conter na pgina principal: uma figura com o mapa da Regio Sudeste; um link para cada Estado da Regio para pginas locais; um link para um Site de estatstica direcionado para a Regio Sudeste. Alm da pgina principal, seu Site dever ter uma pgina para cada Estado. Nesta pgina, coloque, pelo menos, as informaes encontradas na Internet, um mapa do Estado, um link para a previso de tempo na semana, um link para a pgina da prefeitura da capital e uma imagem que, para voc, simbolize o Estado. Insira imagens, crie grficos para colocar nas questes, brinque com as cores para dar um maior dinamismo sua pgina!
62
Se voc conhecer o Impress, pode utiliz-lo para criar o seu grfico. 2) Hora de pesquisar! Agora, suponha que seu professor de Matemtica tenha pedido uma pesquisa sobre a origem da calculadora. Voc pode usar a Internet para buscar informaes a respeito desse tema. O seu Site dever ter, pelo menos, cinco pginas. A principal, descrevendo Site sobre o que o Site e mais quatro pginas. Cada uma delas contendo a descrio, a poca e a imagem de cada calculadora encontrada na pesquisa. As pginas devero ter links em ordem cronolgica e o link de Back Back. a ) Inicie seu trabalho, por exemplo, falando sobre o instrumento de clculo chamado baco:
BACO Instrumento para contagem e clculo. Calculadora com vrias hastes de metal, sustentando bolinhas que podem ser manipuladas, servindo para realizar operaes matemticas. b ) Em seguida, faa uma pequena cronologia at os dias atuais, em que temos calculadora at em relgios, celulares etc. Use a sua criatividade! Trabalhe, em sua pgina, cores, pargrafos, imagens, textos, ttulos etc. Ao final, voc poder oferecer uma tima fonte para consulta sobre as fases da calculadora!
63
64

H T M L
CRIANDO LISTAS
65
LISTAS TIPOS DE LISTAS

Criar listas em HTML muito simples. As listas so muito usadas para ordenar itens, como nas questes de Geografia realizadas anteriormente. Ao invs de digitar manualmente os nmeros, eles sero dados automaticamente. Veja, no exemplo, a seguir, uma pgina que descreve uma lista de pedras preciosas existentes.
Exemplo
Lista ordenada Existem cerca de 130 espcies minerais que foram utilizadas como gemas, com 50 espcies mais comuns. Estas incluem: <HTML> <HEAD><TITLE>PEDRAS PRECIOSAS</TITLE></HEAD> <BODY><OL> <! ordenao por nmero> <li>gata <li>Alexandrita e outras variedades de crisoberilo <li>Ametista <li>gua-marinha e outras variedades de berilo <li>Crisocola <li>Crisoprase <li>Espinela <li>Feldspato (pedra da lua) <li>Granada <li>Hematita <li>Jade - jadete e nefrite <li>Jaspe <li>Lpis-lazli <li>Malaquita <li>Obsidiana <li>Olivina (Perdoto) <li>Opala <li>Pirita
67
<li>Quartzo e suas variedades, como Olho de tigre, Citrino, gata, e Ametista <li>Sugilite <li>Tanzanite e outras variedades de zoisite <li>Topzio <li>Turquesa <li>Turmalina <li>Zirco </ol> <! fim ordenao por nmero> </BODY> </HTML> Veja o resultado desse cdigo exibido no navegador:
Personalizando Listas Ordenadas

Para Listas Numeradas obrigatrio o uso do Tag <OL>. Nos itens, tanto da Lista Numeradas, Marcadores, Ordenada como da Lista de Marcadores dever haver sempre, para cada item da Lista, o Tag <LI> que significa (List Item), ou seja, Item da Lista Item Lista.
68
Observe este exemplo simples de Lista Ordenada Ordenada: <ol> <li>Geografia</li> <li>Histria</li> <li>Matemtica</li> </ol> Ao visualizar esse cdigo no navegador, o resultado ser o nome das matrias, ordenadas numericamente: 1 . Geografia 2 . Histria 3 . Matemtica Voc tem a opo, tambm, de ordenar sua Lista de forma diferente como, por exemplo, por ordem alfabtica, romana e, s vezes, at inici-la por um determinado valor que no seja o primeiro. Para isso, observe, na Tabela, a utilizao do atributo Type usado ype, no Tag <OL>: Type=A Type=a Type=I Type=i Type=1 Start Marcadores para Ordem Alfabtica em Maisculo. Marcadores para Ordem Alfabtica em Minsculo. Marcadores para Numerais Romanos em Maisculo. Marcadores para Numerais Romanos em Minsculo. Marcadores para Nmeros. Indica um valor inicial de marcadores na Lista atual atual.
Veja exemplos de uso desses atributos: <OL T YPE=A> Apresenta uma Lista de letras com itens numerados A, B, C, D etc. <OL T YPE=I> Apresenta uma Lista que usa nmeros romanos I, II, III, IV, V etc. START=4> <OL T YPE=a START=4> Apresenta uma Lista em ordem alfabtica minscula, comeando a partir da letra D.
69
Personalizando Listas No-Ordenadas

Para Listas de Marcadores obrigatrio o uso do Tag <UL> e, sempre, nos itens da Marcadores cadores, Lista, dever haver, para cada item, o Tag <LI> que significa List Item, ou seja, Item da Item Lista. No-Ordenada: Lista Observe este exemplo simples de Lista No-Ordenada <ul> <li>Primeiro item nesta lista <li>Segundo item nesta lista <li>Terceiro item nesta lista </ul> Aparece como: Primeiro item nesta lista. Segundo item nesta lista. Terceiro item nesta lista. O desenho da marca da Lista possui uma seqncia predeterminada pelo HTML que vai desde o Disco Cheio, passando pelo Crculo Vazado e chegando ao quadrado slido. Cada marca vai ser representada de acordo com seu nvel de identao*. O atributo Type permite alterar tal definio que deve ser especificada assim: Type=Disc ype=Circle Type=Cir cle Type=Square Cheio. Marcadores de Disco Cheio azado. Marcadores de Crculo Vazado Crculo Vazado Marcadores de Quadrado Slido (cheio).
* Identao: dentro da computao, Identao um termo aplicado ao cdigo fonte de um programa para indicar que os elementos hierarquicamente dispostos tm o mesmo avano relativamente posio (y,0). Na maioria das linguagens, a Identao tem um papel meramente esttico, tornando a leitura do cdigo fonte muito mais fcil (read-friendly), porm obrigatria em outras. Python, Occam e Haskell, por exemplo, utilizamse desse recurso, tornando desnecessrio o uso de certos identificadores de blocos (begin e/ou end). A verdadeira valia desse processo visvel em arquivos de cdigo fonte extensos, no se fazendo sentir tanto a sua necessidade em arquivos pequenos (relativamente ao nmero de linhas). Para qualquer programador, deve ser um critrio a se ter em conta, principalmente, por aqueles que pretendem partilhar o seu cdigo com outros. A Identao facilita, tambm, a modificao, seja para correo ou aprimoramento do cdigo fonte. Fonte: (Fonte: pt.wikipedia.org/wiki/Identao)
70
EXERCCIOS
1) 2) 3) 4) 5) 6) 7) 8) Utilizando o editor de texto KWrite, digite os trs componentes bsicos do HTML (os Tags <HTML>, <HEAD> e <BODY>). Salve o arquivo com o nome americasul.htm no diretrio sua escolha. Insira, como ttulo, o texto: Pases da Amrica do Sul (Tag <HEAD>). T Faa uma pesquisa de todos os pases da Amrica do Sul. Coloque os pases em uma lista ordenada. Salve o arquivo e visualize sua pgina no navegador. Modifique os atributos do Tag <OL>. Salve o arquivo e visualize sua pgina no navegador.
71
72

H T M L
UTILIZANDO TABELAS
73
As tabelas tm o intuito de organizar as informaes dentro de uma pgina, permitindo melhorar seu visual. Poderamos criar, por exemplo, uma tabela que listasse as letras do alfabeto grego e seu significado. Veja, abaixo, a tabela que iremos desenvolver:
Apha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa Lambda Mu Nu Xi Omicron Pi Rho Sigma Tau Upsilon Phi Chi Psi Omega
A B G D E Z H Q I K L M N X O P R S T U F C Y W
75
Mas antes, vamos observar a tabela a seguir: Linha 1 Coluna 1 Linha 2 Coluna 1 Linha 1 Coluna 2 Linha 2 Coluna 2 Linha 1 Coluna 3 Linha 2 Coluna 3
Depois de observar a tabela, veja o cdigo responsvel por ela: <HTML> <TABLE BORDER> <TR> <TD>Linha 1 Coluna 1</TD> <TD>Linha 1 Coluna 2</TD> <TD>Linha 1 Coluna 3</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD>Linha 2 Coluna 2</TD> <TD>Linha 2 Coluna 3</TD> </TR> </TABLE></HTML>
<TABLE> TAG <TABLE>

Para dar incio sua tabela, necessrio que se comece com o Tag de Contedo <TABLE>, Contedo responsvel por mostrar, ao navegador, onde apresentar a tabela na Pgina Web Ao Web eb. final, deve-se fech-la, utilizando o Tag de Fechamento </TABLE>. Fechamento echament
TAG DE LINHA <TR>

Logo aps a insero do Tag de Abertura da tabela <TABLE>, inclua o Tag de Contedo Abertura Contedo ag. <TR> para definir as linhas de sua tabela. Cada linha dever conter esse Tag No se esquea de que ele um Tag de Contedo por isso, ao final de cada linha de sua tabela, dever ser Contedo edo, feito o fechamento dela atravs do Tag de Fechamento </TR>. Se desejar criar um Fechamento echament cabealho para cada coluna, inclua-o na primeira.
76
CLUL ULA TAG DE CLULA <TD>

Em todas as linhas definidas pelo Tag <TR>, inclua um conjunto de Tags de Contedo Contedo <TD> (Tags de Dados), para definir cada clula. Entre esses conjuntos digite o texto T Dados para a respectiva clula. Observe,abaixo, a sintaxe bsica dos Tags utilizados para criao de tabelas: <table> <tr> <td>linha1</td><td>clula2</td><td><clula3</td> </tr> <tr> <td>linha2</td><td>clula2</td><td><clula3</td> </tr> </table> Linha 1 Linha 2 Clula 2 Clula 2 Clula 3 Clula 3
Veja, agora, um exemplo de utilizao de tabela. Nesta pgina, so mostradas as definies dos itens da Tabela Peridica:
77
MESCLAR CLUL ULAS <COLSPAN> TAG DE MESCLAR CLULAS DE LINHA <COLSPAN>

Essa tag utilizada, juntamente com a tag <td>, para indicar quantas colunas de uma determinada linha estaro mescladas em uma clula. Abaixo, um exemplo de como mesclar as clulas. <HTML> <TABLE BORDER> <TR> <TD COLSPAN=3>Linha 1 Coluna 1 2 3</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD>Linha 2 Coluna 2</TD> <TD>Linha 2 Coluna 3</TD> </TR> </TABLE></HTML>
MESCLAR CLUL ULAS COLUNA <ROWSPAN> TAG DE MESCLAR CLULAS DE COLUNA <ROWSPAN>
Essa tag utilizada, juntamente com a tag <td>, para indicar quantas linhas de uma determinada coluna estaro mescladas em uma clula. Abaixo, um exemplo de como mesclar as clulas. <HTML> <TABLE BORDER> <TR> <TD ROWSPAN=4>Linha 1 2 3 Coluna 1</TD> </TR> <TR> <TD>Linha 2 Coluna 2</TD> <TD>Linha 2 Coluna 3</TD>
78
</TR> <TR> <TD>Linha <TD>Linha </TR> <TR> <TD>Linha <TD>Linha </TR>
3 Coluna 2</TD> 3 Coluna 3</TD>
4 Coluna 2</TD> 4 Coluna 3</TD>
</TABLE></HTML>
TAG DE HEADER (CABEALHO) <TH>

Define a clula corrente da tabela como cabealho da tabela. Normalmente utilizado nas clulas do topo da tabela ou nas clulas ao lado. Abaixo, um exemplo de como mesclar as clulas. <HTML> <TABLE BORDER> <TR> <TH>Coluna 1</TH> <TH>Coluna 2</TH> <TH>Coluna 3</TH> </TR> <TR> <TD>Linha 1 Coluna <TD>Linha 1 Coluna <TD>Linha 1 Coluna </TR> <TR> <TD>Linha 2 Coluna <TD>Linha 2 Coluna <TD>Linha 2 Coluna </TR> </TABLE></HTML>
1</TD> 2</TD> 3</TD>
1</TD> 2</TD> 3</TD>
79
ATRIBUTOS DA TABELA
Veja, agora, uma listagem de outros atributos que podem ser definidos juntamente com o Tag de Contedo <TABLE>: Contedo Especifica a largura da tabela, medida em porcentagem ou em Width 1 Pixels . Height Pixels. Especifica a altura da tabela, medida em porcentagem ou em Especifica o espao entre o texto que est dentro da clula. Especifica o espao dentro de uma clula. O padro 2.
Cellpadding Cellspacing Align Border Bgcolor
Alinha uma tabela dentro do navegador. Especifica a espessura da borda da tabela. O padro 1. Especifica a cor de segundo plano para a tabela. Especifica uma figura de segundo plano para a tabela.
Background
Bottom, ttom Caption Inclui uma legenda para a tabela. Seus valores, Top ou Bottom Align. so do atributo Align Observe que, alm do espao nas bordas, existe, agora, um espao para o texto. Voltando tabela das letras gregas e seu significado. Para inici-la: acesse, novamente, nosso editor de texto KWrite KWrite. e digite o seguinte cdigo: <html> <head> <title>ALFABETO GREGO</title> </head> <body>
Picture e El Element: uma medida utilizada em imagens. Um Pixel o menor ponto que forma uma imagem Pic digital, sendo que o conjunto de milhares de Pixels formam a imagem inteira.
1
80
<table border=1"> <tr> <td>Apha </td> <td>A</td> </tr> <tr> <td>Beta </td> <td>B</td> </tr> <tr> <td>Gamma </td> <td>G</td> </tr> <tr> <td>Delta </td> <td>D</td> </tr> <tr> <td>Epsilon </td> <td>E</td> </tr> <tr> <td>Zeta </td> <td>Z</td> </tr> <tr> <td>Eta </td> <td>H</td> </tr> <tr> <td>Theta </td> <td>Q</td>
81
</tr> <tr> <td>Iota </td> <td>I</td> </tr> <tr> <td>Kappa </td> <td>K</td> </tr> <tr> <td>Lambda </td> <td>L</td> </tr> <tr> <td>Mu </td> <td>M</td> </tr> <tr> <td>Nu </td> <td>N</td> </tr> <tr> <td>Xi </td> <td>X</td> </tr> <tr> <td>Omicron </td> <td>O</td> </tr> <tr> <td>Pi </td> <td>P</td> </tr>
82
<tr> <td>Rho </td> <td>R</td> </tr> <tr> <td>Sigma </td> <td>S</td> </tr> <tr> <td>Tau </td> <td>T</td> </tr> <tr> <td>Upsilon </td> <td>U</td> </tr> <tr> <td>Phi </td> <td>F</td> </tr> <tr> <td>Chi </td> <td>C</td> </tr> <tr> <td>Psi </td> <td>Y</td> </tr> <tr> <td>Omega </td> <td>W</td> </tr> </table></body></html>
83
Ao terminar de digitar, salve seu arquivo como letrasgregas.htm letrasgregas.htm trasgregas.htm. Em seguida, abra o arquivo no navegador e observe o resultado, conforme mostrado na figura abaixo:
EXERCCIOS
1) Abra o arquivo letrasgregas.htm no Kwrite Kwrite. Utilizando os atributos de tabela, mude a cor do fundo da tabela, centralize a tabela e aumente a espessura da borda (utilizando os atrtributos Bgcolor, Border). Bgcolor Align e Border Salve o arquivo e visualize no navegador as alteraes. 2) Agora, voc ir criar a sua prpria Tabela Peridica, ou melhor, parte dela em uma pgina HTML (os Gases Nobres, os Lantandeos e os Actindeos). Abra o editor de texto KWrite e mos obra! Ao terminar a digitao dos cdigos, salve seu arquivo como tabelaperidica.htm tabelaperidica.htm.
84
<html> <HEAD><TITLE>Tabela Peridica</TITLE></HEAD> <body> <TABLE cellSpacing=1 cellPadding=3 align=center border=0 height=414" width=100%> <TR> <TH vAlign=bottom height=1"></TH> <TD vAlign=bottom align=left colSpan=10 height=14"> <p align=center> <b><font face=AvantGarde Bk BT size=4" color=#808000">TABELA PERIDICA DOS ELEMENTOS</b></TD></TR> <TR> <TD bgColor=#70db93 height=50" width=0">1<BR> <CENTER><A title=Hydrogen href=h.htm><B>H</B></A><BR>1.0079 </CENTER></TD> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH> <TD bgColor=#70db93 height=50">2<BR> <CENTER><A title=Helium href=he.htm><B>He</B></A><BR>4.0026 </CENTER></TD> <TD height=50"></TD></TR> <TR> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH>
85
<TD bgColor=#70db93 height=50">7<BR> <CENTER><A title=Nitrogen href=n.htm><B>N</B></A><BR>14.007 </CENTER></TD> <TD bgColor=#70db93 height=50">8<BR> <CENTER><A title=Oxygen href=o.htm><B>O</B></A><BR>15.999 </CENTER></TD> <TD bgColor=#70db93 height=50">9<BR> <CENTER><A title=Fluorine href=f.htm><B>F</B></A><BR>18.998 </CENTER></TD> <TD bgColor=#70db93 height=50">10<BR> <CENTER><A title=Neon href=ne.htm><B>Ne</B></A><BR>20.180 </CENTER></TD> <TD height=50"></TD></TR> <TR> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH> <TD bgColor=#70db93 height=50">17<BR> <CENTER><A title=Chlorine href=cl.htm><B>Cl</B></A><BR>35.453 </CENTER></TD> <TD bgColor=#70db93 height=50">18<BR> <CENTER><A title=Argon href=ar.htm><B>Ar</B></A><BR>39.948 </CENTER></TD> <TD height=50"></TD></TR> <TR> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH> <TH vAlign=bottom height=50"></TH>
86
<TH vAlign=bottom height=50"></TH> <TD bgColor=#70db93 height=50">35<BR> <CENTER><A title=Bromine href=br.htm><B>Br</B></A><BR>79.904 </CENTER></TD> <TD bgColor=#70db93 height=50">36<BR> <CENTER><A title=Krypton href=kr.htm><B>Kr</B></A><BR>83.80 </CENTER></TD> <TD height=50"> </TD></TR> <TR> <TH align=middle height=50"></TH> <TH vAlign=bottom height=50"></TH> <TH align=middle height=50"></TH> <TH align=middle height=50"></TH> <TH align=middle height=50"></TH> <TD bgColor=#70db93 height=50">54<BR> <CENTER><A title=Xenon href=xe.htm><B>Xe</B></A><BR>131.29 </CENTER></TD> <TD height=50"> </TD></TR> <TR> <TD vAlign=center align=right colSpan=4 height=50"></ TD></TR> <TR> <TD vAlign=center align=right colSpan=4 height=50"> <font face=Arial size=1">Lantandeos<font color=#008000"></TD> <TD bgColor=#dcecff height=50">57<BR> <CENTER><A title=Lanthanum href=la.htm><B>La</B></A><BR>138.91 </CENTER></TD>
87
<TD bgColor=#dcecff height=50">58<BR> <CENTER><A title=Cerium href=ce.htm><B>Ce</B></A><BR>140.12 </CENTER></TD> <TD bgColor=#dcecff height=50">59<BR> <CENTER><A title=Praseodymium href=pr.htm><B>Pr</B></A><BR>140.91 </CENTER></TD> <TD bgColor=#dcecff height=50">60<BR> <CENTER><A title=Neodymium href=nd.htm><B>Nd</B></A><BR>144.24 </CENTER></TD> <TD bgColor=#dcecff height=50">61<BR> <CENTER><A title=Promethium href=pm.htm><FONT color=#FF00FF><B>Pm</B></A><BR>(145) </CENTER></TD> <TD bgColor=#dcecff height=50">62<BR> <CENTER><A title=Samarium href=sm.htm><B>Sm</B></A><BR>150.36 </CENTER></TD> <TD bgColor=#dcecff height=50">63<BR> <CENTER><A title=Europium href=eu.htm><B>Eu</B></A><BR>151.96 </CENTER></TD> <TD bgColor=#dcecff height=50">64<BR> <CENTER><A title=Gadolinium href=gd.htm><B>Gd</B></A><BR>157.25 </CENTER></TD> <TD bgColor=#dcecff height=50">65<BR> <CENTER><A title=Terbium href=tb.htm><B>Tb</B></A><BR>158.93 </CENTER></TD> <TD bgColor=#dcecff height=50">66<BR> <CENTER><A title=Dysprosium href=dy.htm><B>Dy</B></A><BR>162.50 </CENTER></TD>
88
<TD bgColor=#dcecff height=50">67<BR> <CENTER><A title=Holmium href=ho.htm><B>Ho</B></A><BR>164.93 </CENTER></TD> <TD bgColor=#dcecff height=50">68<BR> <CENTER><A title=Erbium href=er.htm><B>Er</B></A><BR>167.26 </CENTER></TD> <TD bgColor=#dcecff height=50">69<BR> <CENTER><A title=Thulium href=tm.htm><B>Tm</B></A><BR>168.93 </CENTER></TD> <TD bgColor=#dcecff height=50">70<BR> <CENTER><A title=Ytterbium href=yb.htm><B>Yb</B></A><BR>173.04 </CENTER></TD> <TD bgColor=#dcecff height=50">71<BR> <CENTER><A title=Lutetium href=lu.htm><B>Lu</B></A><BR>174.97 </CENTER></TD> <TD height=50"> </TD></TR> <TR> <TD vAlign=bottom align=middle colSpan=20 height=2"></TD></TR> <TR> <TD vAlign=center align=right colSpan=2 height=50"> <FONT face=Arial size=1><a name=act></a>Actindeos</TD> <TD bgColor=#c0e0ff height=50">89<BR> <CENTER><B><a title=Actinium href=ac.htm>Ac</a></B><BR>(227) </CENTER></TD> <TD bgColor=#c0e0ff height=50">90<BR> <CENTER><A title=Thorium href=th.htm><B>Th</B></A><BR>232.04 </CENTER></TD>
89
<TD bgColor=#c0e0ff height=50">91<BR> <CENTER><A title=Protactinium href=pa.htm><B>Pa</B></A><BR>231.04 </CENTER></TD> <TD bgColor=#c0e0ff height=50">92<BR> <CENTER><A title=Uranium href=u.htm><B>U</B></A><BR>238.03 </CENTER></TD> <TD bgColor=#c0e0ff height=50">93<BR> <CENTER><A title=Neptunium href=np.htm><FONT color=#FF00FF><B>Np</B></A><BR>(237) </CENTER></TD> <TD bgColor=#c0e0ff height=50">94<BR> <CENTER><A title=Plutonium href=pu.htm><FONT color=#FF00FF><B>Pu</B></A><BR>(244) </CENTER></TD> <TD bgColor=#c0e0ff height=50">95<BR> <CENTER><A title=Americium href=am.htm><FONT color=#FF00FF><B>Am</B></A><BR>(243) </CENTER></TD> <TD bgColor=#c0e0ff height=50">96<BR> <CENTER><A title=Curium href=cm.htm><FONT color=#FF00FF><B>Cm</B></A><BR>(247) </CENTER></TD> <TD bgColor=#c0e0ff height=50">97<BR> <CENTER><A title=Berkelium href=bk.htm><FONT
90
color=#FF00FF><B>Bk</B></A><BR>(247) </CENTER></TD> <TD bgColor=#c0e0ff height=50">98<BR> <CENTER><A title=Californium href=cf.htm><FONT color=#FF00FF><B>Cf</B></A><BR>(251) </CENTER></TD> <TD bgColor=#c0e0ff height=50">99<BR> <CENTER><A title=Einsteinium href=es.htm><FONT color=#FF00FF><B>Es</B></A><BR>(252) </CENTER></TD> <TD bgColor=#c0e0ff height=50">100<BR> <CENTER><A title=Fermium href=fm.htm><FONT color=#FF00FF><B>Fm</B></A><BR>(257) </CENTER></TD> <TD bgColor=#c0e0ff height=50">101<BR> <CENTER><A title=Mendelevium href=md.htm><FONT color=#FF00FF><B>Md</B></A><BR>(258) </CENTER></TD> <TD bgColor=#c0e0ff height=50">102<BR> <CENTER><A title=Nobelium href=no.htm><FONT color=#FF00FF><B>No</B></A><BR>(259) </CENTER></TD> <TD bgColor=#c0e0ff height=50">103<BR> <CENTER><A title=Lawrencium href=lr.htm><FONT
91
color=#FF00FF><B>Lr</B></A><BR>(262) </CENTER></TD> <TD height=50"> </TD></TR> <TR> <TD height=2"></TD> <TD height=2" width=0"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD> <TD height=2"></TD></TR> </table> </body> </html>
92
Se quiser, voc pode fazer com que o navegador apresente a grade da tabela, bastando, para isso, adicionar ao Tag <TABLE>, o atributo Border A borda inserida possui uma Border. espessura padro de 1, podendo ser alterada, definindo-a da seguinte forma: <TABLE BORDER=valor para espessura> Ignorando esse valor, o navegador atribui a espessura padro para bordas da tabela. Observe a figura, abaixo:
EXERCCIO
1) Monte uma pgina e distribua em uma tabela a relao das calorias existentes nos ovos. Veja pelo exemplo da figura a seguir. Salve seu arquivo como calorias.htm. calorias.htm
93
TABELA DE C AL ORIAS CAL ALORIAS
ovos
QUANTIDADE Kcal Unidade Unidade 1 poro (150ml) Unidade Unidade 1 fatia mdia (100g) 1 fatia mdia (100g) Unidade Unidade Unidade Unidade Unidade Unidade Unidade Unidade Unidade Unidade Unidade 13 22 210 60 85 104 266 39 33 78 76 108 90 78 129 83 120 180
PRODUTO Clara de ovo cozida Clara de ovo frita Gemada Gema de ovo crua Gema de ovo frita Omelete Omelete c/ queijo Ovo de avestruz Ovo de codorna Ovo de galinha cozido Ovo de galinha cru Ovo de galinha frito Ovo de galinha frito na margarina Ovo de galinha poch Ovo de pata Ovo de perua Ovo mexido Ovo mexido c/ queijo
94

H T M L
TRABALHANDO COM FORMULRIOS
95
A Internet nos oferece todo tipo de servio que podemos imaginar, desde consultas a livros da biblioteca de alguma universidade, at compras pelo computador. Nesses casos, de compras ou at de cadastramento em alguma agncia de empregos, temos que preencher algum tipo de formulrio de dados para que possamos ter contato com a empresa que est oferecendo o servio. Esses formulrios de preenchimento contm campos nos quais armazenamos as informaes que sero enviadas a algum servidor, que as deixar disponveis para seus responsveis. Para que possamos criar um formulrio de dados em uma pgina HTML utilizamos o HTML, Contedo Tag de Contedo <FORM>, que possui duas funes especficas: informar o local do programa que gerencia o formulrio; definir o mtodo como os dados sero enviados ao respectivo servidor. O Tag <FORM> utiliza o atributo Action nele que informamos o servidor e o programa ction. que processar o formulrio. Alm do atributo Action necessrio usar, tambm, o atributo Method que indica o ction, Method thod, mtodo usado pelo servidor para receber o formulrio. Existem dois tipos de mtodos conhecidos: Get e Post Este ltimo o mais usado por Post. transmitir todas as informaes do formulrio. J o mtodo Get junta as informaes do formulrio ao endereo antes de envi-lo. Para entender melhor, imagine que voc esteja enviando um formulrio via Internet para se comunicar com algum de seus professores. Esse formulrio dever ser enviado pelo mtodo Post Mas, se voc estivesse exibindo um boleto bancrio para pagamento, Post. os dados do boleto seriam enviados pelo mtodo Get Get.
CAMPOS DE FORMULRIO <INPUT>

Atravs do Tag de Contedo <INPUT>, podemos apresentar a forma de entrada de dados Contedo que o usurio poder usar para preencher o formulrio. Cada tipo de entrada de dados no formulrio atribuda em uma varivel que ser definida nesse Tag ag. Veja a sintaxe usada pelo Tag <INPUT>: <INPUT TYPE=tipo de varivel NAME=varivel SIZE=tamanho MAXLENGTH=comprimento
97
Veja, a seguir, a lista dos parmetros utilizados no Tag <INPUT>: ARMETROS P ARMETR OS TYPE= TIPO DE VARIVEL TYPE= TEXT TYPE= PASSWORD TYPE= CHECKBOX TYPE= RADIO TYPE= SUBMIT TYPE= RESET TYPE= HIDDEN NAME= VARIVEL SIZE= TAMANHO MAXLENGTH= COMPRIMENTO FUNO Especifica o tipo de dados para a varivel. Entrada de dados tipo caractere. Entrada de dados tipo senha. Entrada de dados tipo lgico (sim/no). Lista de opes aceita somente uma. Cria um boto para enviar os dados. Cria um boto para limpar os dados. Cria um campo oculto. Valor que receber o contedo do campo. Tamanho do campo em caracteres. Tamanho do campo para TEXT e PASSWORD.
CRIANDO CAIXAS DE TEXTO

Para criar Caixas de Texto para entrada de dados em um formulrio, utilize o parmetro Caixas Texto ype=Te Type=Text para o Tag <INPUT>. Esse parmetro criar uma caixa de texto com tamanho definido pelo parmetro Size em uma nica linha. Size, Observe o cdigo HTML disposto, abaixo, e compare com o efeito apresentado na figura: <html> <body> <H2>Responda ao Questionrio abaixo:</h2> <FORM>
98
Digite seu Nome: <INPUT type=text NAME=nome SIZE=40" MAXLENGTH=40"> </FORM> </body> </html>
Alm de incluir Caixas de Texto para digitar valores, podemos definir um valor padro Caixas Texto para o campo a ser inserido, automaticamente, no formulrio. Para utiliz-lo, basta usar o atributo Value dentro do Tag <INPUT>. Observe, pela figura, o exemplo de utilizao desse atributo: <html> <body> <H2>Responda ao Questionrio abaixo:</h2> <FORM> Digite seu Nome: <INPUT type=text NAME=nome SIZE=40" MAXLENGTH=40"><br> Cidade: <INPUT type=text NAME=nome SIZE=40" MAXLENGTH=40" value=Belo Horizonte>
99
</FORM> </body> </html>
CAMPOS DE SENHA
Outro tipo de Caixas de Texto, usado em formulrios, seria o campo para preenchimento Caixas Texto de senhas. Nele, apenas os caracteres digitados so representados por * (asterisco) como, normalmente, so utilizados nesse tipo de campo. Para atribu-lo, basta utilizar o parmetro Password dentro do Tag <INPUT>. assword ord, <html> <body> <H2>Responda ao Questionrio abaixo:</h2> <FORM> Digite seu Nome: <INPUT type=text NAME=nome SIZE=40" MAXLENGTH=40"><br> Cidade: <INPUT type=text NAME=nome SIZE=40" value=Belo Horizonte><br>
100
Senha de Acesso: <INPUT type=password NAME=nome SIZE=40"> </FORM> </body> </html>
BOTES DE RADIO
Atravs do atributo Radio usado com o Tag <INPUT>, podemos criar opes do tipo Boto de Radio. As opes a serem escolhidas devero estar associadas a uma nica Radio varivel, por ser permitida apenas uma nica escolha. Quando clicamos em alguma opo, a que foi marcada anteriormente ser desmarcada automaticamente. Se desejar, poder utilizar o parmetro Checked para deixar uma das opes como Check valor padro. Observe o cdigo HTML apresentado, abaixo, e o efeito a partir da figura: <html> <body> <H2>Responda ao Questionrio abaixo:</h2>
101
<FORM> Digite seu Nome: <INPUT type=text NAME=nome SIZE=40" MAXLENGTH=40"><br> Cidade: <INPUT type=text NAME=nome SIZE=40" value=Belo Horizonte><br> Senha de Acesso: <INPUT type=password NAME=nome SIZE=10"><br> Para cada pas abaixo, determine sua capital.<br><br> <table><tr><td> <b>Ir:</b><br> <input name=questao1" type=radio value=Viena>Viena<br> <input name=questao1" type=radio value=Jerusalm>Jerusalm<br> <input name=questao1" type=radio value=Sofia>Sofia<br> <input name=questao1" type=radio value= Teer >Teer<br></td> <td> <b>Iraque:</b><br> <input name=questao2" type=radio value=adis>Adis Abeba<br> <input name=questao2" type=radio value=Am >Am<br> <input name=questao2" type=radio value=Teer >Teer <br> <input name=questao2" type=radio value=Bagd >Bagd <br> </td></tr></table><br> O globo terrestre composto por 6 hemisfrios.<br> <input name=questao3" type=radio value=verdadeiro>Verdadeiro <input name=questao3" type=radio
102
value=falso>Falso </FORM> </body> </html>
CAIXAS DE SELEO
O parmetro Checkbox, dentro do Tag <INPUT>, permite criar uma lista de opes que Checkbo kbox condiciona a escolha de vrias opes. Pode-se decidir, entre elas, quais ficaro marcadas. Para isso, basta definir o atributo Checked em seu cdigo. Observe o cdigo HTML a seguir, e seu efeito, a partir da figura: HTML, <html> <body> <H2>Responda ao Questionrio abaixo:</h2> <FORM> Digite seu Nome: <INPUT type=text NAME=nome SIZE=40" MAXLENGTH=40"><br> Cidade: <INPUT type=text NAME=nome SIZE=40" value=Belo Horizonte><br> Senha de Acesso: <INPUT type=password NAME=nome SIZE=10"><br>
103
Para cada pas abaixo, determine sua capital.<br><br><table> <tr><td> <b>Ir:</b><br> <input name=questao1" type=radio value=Viena>Viena<br> <input name=questao1" type=radio value=Jerusalm>Jerusalm<br> <input name=questao1" type=radio value=Sofia>Sofia<br> <input name=questao1" type=radio value=Teer>Teer<br></td> <td><b>Iraque:</b><br> <input name=questao2" type=radio value=adis>Adis Abeba<br> <input name=questao2" type=radio value=Am>Am<br> <input name=questao2" type=radio value=Teer >Teer <br> <input name=questao2" type=radio value=Bagd >Bagd <br> </td></tr></table><br> O globo terrestre composto por 6 hemisfrios.<br> <input name=questao3" type=radio value=verdadeiro>Verdadeiro <input name=questao3" type=radio value=falso>Falso<br><br> Indique o nome de quatro paralelos importantes no globo terrestre: <br> <input name=item1" type=checkbox id=item1" value=1"> Trpico de Cncer <br>
104
<input name=item2" type=checkbox id=item2" value=2"> Greenwich <br> <input name=item3" type=checkbox id=item3" value=3"> Trpico de Capricrnio <br> <input name=item4" type=checkbox id=item4" value=4"> Crculo Polar rtico <br> <input name=item5" type=checkbox id=item5" value=5"> Bssola <br> <input name=item6" type=checkbox id=item6" value=6"> Lua <br> <input name=item7" type=checkbox id=item7" value=7"> Sol <br> <input name=item8" type=checkbox id=item8" value=8"> Crculo Polar Antrtico <br> <input name=item9" type=checkbox id=item9" value=9"> estrelas <br> <input name=item10" type=checkbox id=item10" value=10"> Mxico </FORM> </body> </html>
105
LISTA LISTA DE OPES <SELECT>

Outro recurso que podemos adicionar em nossos formulrios o uso de menus suspensos e/ou de rolagem para a escolha entre vrias opes listadas. Esse recurso permite que o usurio escolha uma nica opo. Para isso: Contedo utilize o Tag de Contedo <SELECT> que exige o atributo Name e permite informar quantas opes sero apresentadas, seqencialmente, atravs do atributo Size Size. utilize o atributo Selected para informar qual valor ser o padro da listagem apresentada. Observe o cdigo, abaixo, com o Tag <SELECT>: <html> <body> <H2>Responda ao Questionrio abaixo:</h2> <FORM> Digite seu Nome: <INPUT type=text NAME=nome SIZE=40" MAXLENGTH=40"><br> Cidade: <INPUT type=text NAME=nome SIZE=40" value=Belo Horizonte><br>
106
Senha de Acesso: <INPUT type=password NAME=nome SIZE=10"><br> Para cada pas abaixo, determine sua capital.<br><br> <table> <tr><td> <b>Ir:</b><br> <input name=questao1" type=radio value=Viena>Viena<br> <input name=questao1" type=radio value=Jerusalm>Jerusalm<br> <input name=questao1" type=radio value=Sofia>Sofia<br> <input name=questao1" type=radio value=Teer>Teer<br> </td> <td> <b>Iraque:</b><br> <input name=questao2" type=radio value=adis>Adis Abeba<br> <input name=questao2" type=radio value=Am >Am<br> <input name=questao2" type=radio value=Teer >Teer <br> <input name=questao2" type=radio value=Bagd >Bagd <br> </td></tr></table><br> O globo terrestre composto por 6 hemisfrios.<br> <input name=questao3" type=radio value=verdadeiro>Verdadeiro <input name=questao3" type=radio value=falso>Falso<br><br> Indique o nome de quatro paralelos importantes no globo terrestre: <br> <input name=item1" type=checkbox id=item1" value=1">
107
Trpico de Cncer <br> <input name=item2" type=checkbox id=item2" value=2"> Greenwich <br> <input name=item3" type=checkbox id=item3" value=3"> Trpico de Capricrnio <br> <input name=item4" type=checkbox id=item4" value=4"> Crculo Polar rtico <br> <input name=item5" type=checkbox id=item5" value=5"> Bssola <br> <input name=item6" type=checkbox id=item6" value=6"> Lua <br> <input name=item7" type=checkbox id=item7" value=7"> Sol <br> <input name=item8" type=checkbox id=item8" value=8"> Crculo Polar Antrtico <br> <input name=item9" type=checkbox id=item9" value=9"> estrelas <br> <input name=item10" type=checkbox id=item10" value=10"> Mxico<br><br> Para que uma antena parablica funcione, ela deve estar apontada para o satlite! Como que o instalador da antena sabe onde est o satlite? A maneira mais correta achar os pontos cardeais e apontar a antena para uma direo do cu usando as ________________<br> <select name=questao5">
108
<option value= selected=selected></option> <option value=0">estrelas do cu</option> <option value=1">coordenadas geogrficas do satlite</option> <option value=2">antenas de rdio</option> <option value=3">empresas de avio</option> <option value=4">ondas do mar</option> <option value=5">telhas da casa</option> </select> </FORM> </body> </html> Veja o efeito desse cdigo na figura, a seguir:
TRANSMITINDO DADOS DO FORMULRIO

J entendemos que os dados de um formulrio so transmitidos para o Servidor da Internet. Internet Para enviar os dados de um formulrio, existe um boto de comando especial chamado Submit Ele envia todos os dados do formulrio. Submit.
109
As informaes do formulrio, quando enviadas, utilizando o j conhecido mtodo Get Get, so anexadas e enviadas ao Servidor Web juntamente com a URL do servidor. UtiliServidor Web eb, zando o mtodo Post as informaes so enviadas em um bloco de dados separados Post, da URL URL. ATENO
Para que um formulrio funcione dentro de uma Home Page necessrio verificar com o Provedor de Internet, se o mesmo permite o uso de formulrio no Servidor Web Web. Caso permita, devem-se desenvolver rotinas em alguma linguagem que o Servidor utiliza como ASP PHP etc. atravs de uma dessas linguagens que se escrevem os proASP, gramas responsveis pelo envio de dados de um formulrio para um Servidor Web Web.
Para que se crie um boto para envio de dados, observe a sintaxe a seguir: <INPUT TYPE=SUBMIT VALUE=Texto do boto> Observe, agora, no cdigo a seguir, da pgina do nosso formulrio, o uso do parmetro Submit para envio dos dados do formulrio e observe o efeito na figura que segue: <html> <body> <H2>Responda o Questionrio abaixo:</h2> <FORM> Digite seu Nome: <INPUT type=text NAME=nome SIZE=40" MAXLENGTH=40"><br> Cidade: <INPUT type=text NAME=nome SIZE=40" value=Belo Horizonte><br> Senha de Acesso: <INPUT type=password NAME=nome SIZE=10"><br> Para cada pas abaixo, determine sua capital.<br><br> <table> <tr><td> <b>Ir:</b><br> <input name=Viena type=radio value=questao1">Viena<br> <input name=questao1" type=radio
110
value=Jerusalm>Jerusalm<br> <input name=questao1" type=radio value=Sofia>Sofia<br> <input name=questao1" type=radio value=Teer>Teer<br> </td> <td> <b>Iraque:</b><br> <input name=questao2" type=radio value=adis>Adis Abeba<br> <input name=questao2" type=radio value=Am >Am<br> <input name=questao2" type=radio value=Teer >Teer <br> <input name=questao2" type=radio value=Bagd >Bagd <br> </td></tr></table><br> O globo terrestre composto por 6 hemisfrios.<br> <input name=questao3" type=radio value=verdadeiro>Verdadeiro <input name=questao3" type=radio value=falso>Falso<br><br> Indique o nome de quatro paralelos importantes no globo terrestre: <br> <input name=item1" type=checkbox id=item1" value=1"> Trpico de Cncer <br> <input name=item2" type=checkbox id=item2" value=2"> Greenwich <br> <input name=item3" type=checkbox id=item3" value=3"> Trpico de Capricrnio <br> <input name=item4" type=checkbox id=item4"
111
value=4"> Crculo Polar rtico <br> <input name=item5" type=checkbox id=item5" value=5"> Bssola <br> <input name=item6" type=checkbox id=item6" value=6"> Lua <br> <input name=item7" type=checkbox id=item7" value=7"> Sol <br> <input name=item8" type=checkbox id=item8" value=8"> Crculo Polar Antrtico <br> <input name=item9" type=checkbox id=item9" value=9"> estrelas <br> <input name=item10" type=checkbox id=item10" value=10"> Mxico<br><br> Para que uma antena parablica funcione ela deve estar apontada para o satlite! Como que o instalador da antena sabe onde est o satlite? A maneira mais correta achar os pontos cardeais e apontar a antena para uma direo do cu usando ______________________ <br> <select name=questao5"> <option value= selected=selected></option> <option value=0">estrelas do cu</option> <option value=1">coordenadas geogrficas do satlite</option> <option value=2">antenas de rdio</option> <option value=3">empresas de avio</option>
112
</select> <br> <br> <label> <input type=submit name=Submit value=Responder> </label> </FORM> </body> </html>
EXERCCIOS
Desenvolva um Site intitulado Estudo das Matrias Escolares Escolares. 1) Escolha cinco matrias diferentes. A pgina principal ter link para as cinco pginas das matrias. 2) Matria 1: escreva um texto pertinente ao assunto e formate-o da maneira mais adequada. Inclua imagens nesta pgina. 3) Matria 2: crie uma lista de links pesquisados na Internet sobre a matria. 4) Matria 3: a pgina dever conter uma tabela, utilizando-se todos os recursos de formatao aprendidos como cores, tamanho de clulas, entre outros.
113
5) Matria 4: ser uma pgina de links para todas as pginas HTML feitas no curso. Crie uma lista ordenada com links. Utilize de recursos de formatao e imagens para deixar a pgina mais atrativa. 6) Matria 5: ser uma prova sobre o tema que voc escolheu. Utilizando-se de formulrio, faa cinco questes sobre a matria. O objetivo deste exerccio utilizar o mximo dos recursos apresentados (imagens, hiperlinks, tabelas, listas, formatao de fonte, estilo de pargrafo e formulrio). Procure utilizar os recursos com bastante criatividade. Faa, tambm, links para os Sites que voc pesquisou na Internet.
Viu como foi fcil aprender a criar uma pgina na Internet atravs da linguagem HTML? Agora, com os comandos estudados ao longo da apostila, voc poder soltar a imaginao e criar inmeras pginas personalizadas!
114
GUIA DE REFERNCIA RPIDA

As tabelas a seguir so um resumo dos principais e mais utilizados comandos HTML. COMANDOS DE ESTRUTURA Funo Comando mestre Criao de cabealho Ttulo do documento Comentrios Abre com <html> <head> <title> <! Parmetros nenhum nenhum nenhum nenhum backgroud = nome do arquivo bgcolor=XXXX text=XXXX link=XXXX vlink=XXXX Fecha com </html> </head> </title> >
Corpo do Programa
<body>
</body>
COMANDOS DE TEXTO Finalidade Quebra de linha Pargrafo Negrito Itlico Texto de mquina Cabealho Fonte tag <br> <p> <b> <i> <tt> <h1-6> <font> Parmetros clear=left/right/all align=center/right nenhum nenhum nenhum align=center/right face=nome,nome size=+/-XX color=XXXX size=XX width=XX/ XX% noshade nenhum align=left/center/ right Fecha com nenhum </p> </b> </i> </tt> </h1-6>
</font>
Linha divisria
<hr>
nenhum </blockquote> </div>
Block quote Diviso
<blockquote> <div>
115
COMANDOS DE FORMULRIO Finalidade Form Input Field tag <form> <input> Parmetros method= get/put action=programname name=variablename type=text /password / checkbox /radio / submit /reset /image name=variablename size=XX multiple nenhum name=variablename rows=XX cols=XX Fecha com </form>
nenhum
Selection List
<select>
</select> nenhum
Selection Option
<option>
Scrolling Text Field <textarea>
</textarea>
116
BIBLIOGRAFIA
LIMA, Adriano Gomes. HTML 4 Senac Minas, 2000. 220p. 4. RAMALHO, Antnio Jos. HTML DINMICO Ed. Berkeley, 1999. 719p. DINMICO. STAUFFER, Todd. HTML 6 em 1. So Paulo: Berkeley Brasil, 1998. 1 http://pt.wikipedia.org/wiki/HTML http://www.icmc.usp.br/ensino/material/html/ http://www2.ufpa.br/dicas/htm/htm-cor1.htm http://www.ccuec.unicamp.br/treinamento_int2004/ conf_webpages_basico/pagina1.html http://www.lsi.usp.br/~help/html/comandos.html
117
ANEXO ANEX O
PLANO DE TRABALHO HTML

119
Caro professor, Voc est participando de um projeto da Secretaria de Educao, que tem como objetivo apresentar as possibilidades da informtica na educao, fazendo com que voc se familiarize com diferentes aplicativos e utilize-os em sala de aula, buscando tornar as suas aulas mais interessantes, criativas e de fcil entendimento. Vrias ferramentas sero trabalhadas neste projeto. Neste momento, voc aprender a montar pginas para a Internet atravs do programa KWrite onde voc desenvolver conhecimentos sobre a linguagem HTML Quando conclui-lo, voc estar apto a utilizar HTML. todos os recursos de diagramao para desenvolvimento de pginas para Internet, e tambm, multiplicar esse curso aos seus alunos, ensinando-os elaborar trabalhos e divulg-los na Internet. Procure utilizar o computador para planejar as suas aulas, organizar e apresentar contedos em sala, para pesquisas, elaborao de material didtico etc. Quanto mais utiliz-lo, mais estar familiarizado com o recurso e descobrir, cada vez mais, possibilidades de aplicao. importante que, ao utilizar a informtica nas suas aulas, as orientaes repassadas aos alunos sejam bem claras e as atividades bem direcionadas. Defina os temas, objetivos, o tempo de trabalho, metodologia. Em caso de pesquisas na internet, faa uma relao de Sites de busca, de temas especficos, imagens etc e resultados esperados do trabalho, evitando disperso da turma e garantindo objetividade no trabalho. A seguir, foi disponibilizado um Plano de Trabalho para orient-lo no repasse do curso aos seus alunos. Nele, constam os contedos que devem ser abordados, sugesto de carga horria, dicas de metodologia e recursos didticos. Durante o curso, podem surgir vrias idias de utilizao da ferramenta em sala de aula. No deixe de anot-las e discutir outras possibilidades com os colegas e instrutor. Aproveite o curso! Sucesso!
QUADRO 01
Contedos Previso Carga Horria
1h
Procedimentos Metodolgicos
Recursos Didticos
1. Apresentao do Instrutor e Alunos
Laboratrio de Informtica com Dinmica de apresentao HTML Exposio dialogada Quadro branco/negro
2. Apresentao Geral do Curso Metodologia de trabalho adotada no curso Critrios de Aprovao no curso
Pincis Apostila Informtica Bsica Peas de hardware para demonstrao ao aluno, como funcionam o processador, memria RAM e HD. 3h Exposio dialogada avaliao diagnstica para verificar o nvel de conhecimento da turma sobre o tema. Demonstrao O instrutor deve demonstrar todos os procedimentos necessrios Prtica Supervisionada Todos os alunos devem colocar em prtica os procedimentos abordados, sob a superviso do instrutor.
3. Informtica Bsica Na Era da Informatizao Componentes do Computador Perifricos Modem / Fax-modem Estabilizador Nobreak Sistema Operacional Conceitos e Convenes Arquivos e Pastas (viso geral) Armazenando Dados em um Computador Rede Internet Metasys Iniciando os aplicativos do Metasys Introduo ao OpenOffice Writer Introduo ao OpenOffice Calc Solues para Alguns Problemas da Informtica Qualidade de Vida no Trabalho Equipamentos
ORIENTAES PARA ORIENTAES PARA O PROFESSOR

Antes de iniciar a sua aula de informtica, verifique: O laboratrio est em condies adequadas? O nmero de computadores suficiente para a turma? O programa est instalado e funcionando adequadamente? A Internet est funcionando? O material didtico est disponvel para a turma? Tem giz/pincel e apagador disponveis?
Dica
No se esquea de planejar a sua aula!!! Pense em atividades extras para aqueles alunos com melhor desempenho. Talvez eles possam atuar como monitores, ajudando os outros colegas nas atividades e tirando dvidas.
Item 1 - Apresentao do Instrutor e Alunos

Cumprimente a turma e se apresente, dizendo o seu nome, em que rea atua, quais disciplinas ministra. Isso facilita a relao com a turma e diminui a distncia entre vocs. Para a apresentao dos alunos, pea turma que formem duplas. D a eles um tempo aproximado de 5 minutos para se conhecerem. Posteriormente, pea que um apresente o outro.
Item 2 - Apresentao Geral do Curso

Fale sobre o curso que ir ministrar (HTML Criando Pginas na Web), HTML fazendo um breve resumo a respeito das suas funes e do que possvel criar utilizando essa linguagem. Voc pode perguntar turma se algum j teve a experincia de criar pginas ou se j navegam na Internet, buscando
identificar o nvel de conhecimento dos participantes sobre o assunto. Voc pode abrir o navegador de Internet e mostrar uma Pgina Web e o Cdigo Web, Fonte, clicando em exibir e depois em Cdigo Fonte. Conte aos alunos como ser o curso, as formas que utilizar para ensinar. Diga que imprescindvel que tenham disciplina e se envolvam nas atividades propostas. Diga que haver momentos em que a exposio dialogada ser necessria, mas que haver muita prtica e resoluo de exerccios, buscando aplicar o software realidade vivenciada em sala de aula. Fale a respeito das facilidades da linguagem sempre reforando a necessidade de colocar em prtica tudo que ser ministrado durante o curso, afinal uma linguagem deve ser aplicada para que as ferramentas e os benefcius do programa possam ser assimilados pelos alunos. Diga que a participao nas aulas imprescindvel para que realmente ocorra o aprendizado e que, quando houver dvidas, basta solicitar o seu auxlio. importante informar aos alunos que somente sero aprovados se obtiverem freqncia mnima de 75% (caso aplicvel). Se no obtiverem esse resultado, no recebero o certificado de concluso.
Item 3 Informtica Bsica

Faa um levantamento, na turma, das pessoas que tm conhecimentos de informtica, perguntando se j fizeram algum tipo de curso, se sabem utilizar o computador, buscando identificar o grau de conhecimento para iniciar o assunto. Aproveite a oportunidade e verifique se os alunos conhecem o OpenOffice Impress ou se j assistiram alguma apresentao de slides. Converse com eles sobre as situaes em que podem ser utilizadas e pea sugestes de temas para desenvolvimento de atividades durante o curso. Fale sobre os conceitos bsicos da informtica, apresentando as partes do computador (CPU, monitor, teclado, mouse etc), procurando demonstrar como deve ser a sua utilizao. Mostre aos alunos como o computador deve ser
ligado e desligado, como se faz para abrir e criar pastas, abrir programas, acessar sites etc, permitindo a eles que exercitem todos os procedimentos. Mostre as peas do Hardware para eles, para eles visualizarem onde ficam armazenados os dados e o que faz o computador processar as informaes. Explore os dispositivos de entrada e sada e a importncia deles no dia a dia do professor Fale sobre as dificuldades que normalmente encontramos na utlizao do computador e seus perifricos Destaque a utilizao dos aplicativos Metasys. Procure nivelar os conhecimentos entre a turma, esclarecendo as dvidas que surgirem durante a aula. Demonstre todos os procedimentos aos alunos e no se esquea de deix-los praticar, pois a prtica imprescindvel para que o aprendizado realmente acontea.
QUADRO 02
4h
Exposio dialogada Consulta Internet para analisar e tirar dvidas a respeito do tema abordado. Demonstrao Resoluo de Exerccio na apostila pg.12
Recursos Didticos
Laboratrio de Informtica com KWrite e Mozzila Firefox instalados Quadro branco/ negro Pincis Apostila HTML
4. Criando Pginas na Web: Conceitos Padres de Desenvolvimento Existentes Tipos de Editores de Pginas HTML Hipertextos e Hipervnculos / Hiperobjetos (links)

Ao abordar esses contedos tericos, explique aos alunos a importncia de se preocupar com o visual das pginas que sero criadas posteriormente. Faa com que os alunos se preocupem com layout de cada pgina, atribuindo cores e fontes adequadas conforme cada tema. Antes de iniciar a aula, consulte alguns Sites (bem elaborados e mal elaborados) para demonstrar a turma durante a aula. Isso ir facilitar a conduo da sua aula.
Item 4 - Criando Pginas na Web

Fale sobre as caractersticas da linguagem e demonstre como cada Tag deve ser utilizado, preocupando-se com sua composio e atributos. A melhor forma de abordar esse contedo atravs do quadro branco, onde voc pode listar as maneiras de compor cada Tag Essa ser uma rpida abordagem. Esses ag. contedos sero trabalhados mais adiante. Fale das tecnologias existentes na rea de Internet (Flash Asp PHP Flash, Flash Asp, PHP, JavaScript etc) e procure mostrar aos alunos as diferenas entre elas, fazendo-os descobrir o interesse por cada um neste ambiente. Fale sobre as normas internacionais que regem a forma de se desenvolver pginas na Internet. Defina, junto com a turma, um tema que seja interessante para eles e planeje a criao de um projeto de desenvolvimento de um Site para que eles possam publicar na Internet. Por enquanto, s um planejamento! O desenvolvimento ser feito depois. Explique para os alunos sobre os inmeros editores de criao de pginas que existem no mercado. Fale da estrutura obrigatria que toda pgina na Internet deve possuir e qual a hierarquia destes elementos. Escolha um Site de sua preferncia, e pea aos alunos para acessarem e identificarem, junto com voc, os elementos abordados na aula.
Comece a criao de uma pequena pgina de modo a demonstrar como a construo de uma pgina deve sempre ser iniciada. Prossiga, mostrando como se deve salvar uma pgina e como visualiz-la no navegador de Internet. Gradativamente, v incluindo outros elementos e mostrando como formatar as fontes, cores, fundo de uma pgina. Indique exerccios da apostila para fixar o contedo demonstrado.
QUADRO 03
4h
Exposio dialogada Demonstrao: atravs de exibio dos procedimentos em datashow ou desenhos no quadro branco Resoluo de exerccios na apostila pg. 30
Recursos Didticos
Laboratrio de Informtica com KWrite e Mozzila Firefox instalados Quadro branco/negro Pincis Apostila HTML Desejvel Datashow
5. Iniciando um Documento HTML Estrutura de pginas Elementos Existentes Comandos da Linguagem: Tags Tipos de Tags Atributos de Tags Estrutura principal Salvando sua pgina Tag de Pargrafo <P>
6 . Estilos de Cabealho e Pargrafos Tag <FONT> Sobre o Atributo Color Cores de Fundo <BODY> Tags Mais Utilizados (resumo)
1h
Exposio dialogada Demonstrao Resoluo de exerccios na apostila pg. 36 Resoluo de Exerccios pg. 40
Laboratrio de Informtica com KWrite e Mozzila Firefox instalados Quadro branco/negro Pincis Apostila HTML
Item 5 - Iniciando um Documento HTML

Neste momento, voc ir ensinar a turma a inserir textos nas pginas, controlando os seus alinhamentos de margens. Anote, no quadro, todos os passos e pea aos alunos que construam junto com voc. Assim, o resultado poder ser observado por todos, sendo possvel tirar as dvidas durante o processo e detectar possveis erros.
Item 6 - Estilos de Cabealho e Pargrafos

Dando continuidade construo da pgina que est sendo criada, inclua, gradativamente, outros elementos, mostrando como formatar as fontes, cores e fundo de uma pgina. Demonstre como os atributos de Tags devem ser construdos. Indique exerccios da apostila para fixar o contedo demonstrado. Cada aluno dever desenvolver uma pgina com a sua orientao. Estabelea um tempo para concluso da atividade e, depois, verifique o resultado.
QUADRO 04
4h
Exposio dialogada Demonstrao Resoluo de Exerccios na apostila pg. 54
Recursos Didticos
7 . Inserindo Imagens em Documentos HTML <IMG> Alinhamento de Imagens e Texto na Pgina Redimensionamento de Imagens
ORIENTAES PARA O PROFESSOR ORIENTAES PARA

Previamente, liste e consulte alguns Sites que possuam diferentes formatos de imagens (fotos, animaes, logomarcas). Fazendo isso, voc poder selecionar os melhores Sites para ilustrar a sua aula.
Para demonstrao dos contedos abordados, voc pode utilizar o mesmo Site que est sendo criado desde o incio do curso ou criar novas pginas a cada novo tema abordado. Observe o interesse e envolvimento da turma. Criar novas pginas torna a aula mais dinmica e interessante.
Item 7 - Inserindo Imagens em Documentos HTML <IMG>

Explique os formatos de imagens existentes e quais so os mais apropriados para serem utilizados na Internet. Demonstre a importncia de definir tamanhos para as imagens usadas nas pginas. Apresente as diferenas entre as extenses de figuras existentes. Mostre como trabalhar a disposio entre imagens e textos. Indique exerccios da apostila para fixar o contedo demonstrado.
QUADRO 05
4h
Exposio dialogada Demonstrao Trabalho em Grupo: Resoluo de Exerccios na apostila pg. 67 A turma dever ser dividida em 2 grupos, cada um trabalhar com um tema (Geografia e Origem da Calculadora).
Recursos Didticos
8 . Hiperlinks Tipos de URLs Criao de Links de Arquivos Locais Criao de Links para imagem Tags Mais Utilizados (resumo)
Dica
Voc pode criar pginas na Internet para abordar vrios contedos durante a sua aula. Contedos sobre anatomia humana, vegetao, animais etc., podem ser inseridos no Site, onde podero ser criados hiperlinks para textos ou figuras. Imagine que interessante! Se no tiver Internet disponvel na sua escola, voc pode salvar as pginas em CD e exibi-las na sala.
Item 8 - Hiperlinks
Explique a importncia dos hiperlinks existentes nas pginas da Internet. Acesse alguns Sites, observando as diferenas dos tipos de hiperlinks. Aproveite as pginas criadas anteriormente e transforme alguns dos seus elementos em hiperlinks para outros Sites. Divida a turma em dois grupos para realizao de uma atividade. Distribua os temas para que cada grupo desenvolva um conjunto de pginas, utilizando os recursos apresentados, conforme os enunciados da pgina 67 da apostila. Grupo 1: Site sobre Geografia. Grupo 2: Site sobre a Histria da Calculadora.
QUADRO 06
1h
Exposio dialogada Demonstrao
Recursos Didticos
9 . Criando Listas Tipos de Listas Personalizando Listas Ordenadas Personalizando Listas noordenadas
Tabelas 1 0 . Utilizando Tabelas Tag de Tabela <TABLE> Tag de Linha <TR> Tag de Clula <TD> Tags de mescla <colspan> e <rowspan> Tag de cabealho <TH> Atributos de tabela
3h
- Exposio dialogada - Demonstrao - Proposta de Exerccio para ser realizado em casa: Tabela Peridica - Resoluo de exerccios na apostila pg. 107
- Laboratrio de Informtica com KWrite e Mozzila Firefox instalados - Quadro branco/negro - Pincis - Apostila HTML
Item 9 - Criando Listas

Explique sobre os tipos de listas presentes na linguagem e qual sua finalidade. Mostre como modificar os marcadores de cada lista.
It em 1 0 - Utilizando Tabelas Item 10 Tabelas

Fale sobre a importncia das tabelas, explicando que mais de 90% das pginas na Internet fazem uso de tabelas. Pea para os alunos fazerem algum tipo de tabela para fixao dos Tags que a englobam, como por exemplo, tabela de preos ou produtos. Proponha um desafio para a turma. Pea-os que tentem fazer o exerccio da tabela peridica em casa. um exerccio trabalhoso que no obrigatrio. Voc pode propor um outro tipo de exerccio relacionado sua disciplina, por exemplo. Sugesto: uma tabela com imagens de animais.
QUADRO 07
4h
Exposio dialogada Demonstrao Prtica Supervisionada: Trabalho Final de Curso - Exerccios na apostila pg. 132 (o instrutor pode optar por pedir o trabalho individual ou em grupo)
Recursos Didticos
11. Trabalhando Formulrios 11 . Trabalhando com Formulrios Campos de formulrio <INPUT> Criando Caixas de texto Campos de senha Botes de Radio Caixas de seleo Lista de opes <SELECT> Transmisso de Dados de formulrio
Encerramento do Curso Avaliao do Curso
Verificao de atendimento s expectativas da turma.
Formulrio: Avaliao do Curso pelo Aluno
Item 11 - Formulrios
Defina a finalidade do uso dos formulrios nas pginas e quais os mtodos existentes para que os dados sejam enviados atravs da Internet. HTML. Apresente os tipos de campos que podem ser criados com HTML Pea aos alunos que criem um formulrio para cadastro de clientes ou at mesmo para cadastramento de currculos. Este ser o ltimo exerccio do curso. Voc pode pedir a turma que faa a atividade prevista na apostila pode propor uma atividade diferente ou deixar que eles escolham um tema do seu interesse. importante que utilizem todos os recursos vistos no curso, com criatividade e qualidade. Analise cada trabalho desenvolvido e no se esquea de dar um feedback para cada aluno.
Encerramento do Curso
Termine o curso agradecendo aos alunos pela ateno e destacando o bom trabalho e desempenho dos mesmos. Diga que agora esto aptos para desenvolver pginas com maior interatividade. Basta tentar!
CONSTRUO DE WEB SITES JAVASCRIPT

J a v a S c r i p t
Introduo
135
CONSTRUO DE WEB SITES - JavaScript
LINGUAGEM JAV O QUE A LINGUAGEM JAVASCRIPT?

Voc est prestes a conhecer o lado funcional na criao de um Site para a Internet! Site O JavaScript uma das inmeras linguagens de programao utilizadas na Internet. Seu principal foco permitir uma maior funcionalidade s pginas Site, HTML, bsicas de um Site conhecidas como HTML que a linguagem responsvel pela exibio dos elementos. Tudo aquilo que voc observa nas pginas de um simples Site da Internet diagramado e montado pela linguagem HTML HTML. V a um computador mais prximo e abra a pgina www.chemkeys.com. Nela, voc vai encontrar materiais didticos e textos de referncia para o ensino da Qumica. Voc estar navegando em uma pgina HTML e aprendendo um pouco mais sobre o fascinante mundo da Qumica. Quando agregamos esse contedo da linguagem HTML aos pequenos programas do JavaScript chamados scripts conseguimos construir um Site com vrios JavaScript, scripts, recursos e funcionalidades interessantes que vo deixar suas pginas mais inteligentes e sofisticadas.
Exemplo
Um exemplo de evidncia do JavaScript na Internet seriam aquelas pginas que costumam solicitar o nome do visitante e, em seguida, cumprimenta-o como Senhor e deseja-lhe um Bom dia! ou uma Boa noite!, conforme o horrio em que esse visitante estiver acessando a pgina. Isso s ser possvel com a criao de uma rotina ou script desenvolvido atravs dos comandos da linguagem JavaScript JavaScript.
Poderamos, tambm, utilizar essa linguagem para desenvolver uma Pgina HTML de exerccio com questes de mltipla escolha sobre a Fsica, por exemplo, como as que seguem a seguir:
137
Numa residncia, existem possibilidades para dois tipos de tenses: 110 V e 220 V. No mercado, encontram-se chuveiros de 2200 W idnticos, exceto pelas tenses de operao, 110 V ou 220 V. Podemos afirmar que, para o mesmo fluxo de gua: a) b) c) d) e) de 220V gasta a metade da energia eltrica, para obter a metade do aquecimento do de 110V. de 220V gasta o dobro da energia eltrica, para obter a metade do aquecimento do de 110V. de 220V gasta o dobro da energia eltrica, para obter o dobro do aquecimento do de 110V. de 220V gasta a metade da energia eltrica, para obter o dobro do aquecimento do de 110V. consumo de energia eltrica e o aquecimento obtido so os mesmos nos dois chuveiros.
O fenmeno de Induo Eletromagntica essencial para explicar o funcionamento de: a) b) c) d) e) transformadores pilhas lmpadas torradeiras chuveiros eltricos
responder. Voc no precisa responder. apenas um exemplo. O HTML s capaz de montar os campos das alternativas e as questes. J o JavaScript consegue avaliar, ao se clicar em uma das opes, qual Jav delas seria a correta.
138
JAV JAVASCRIPT: JAVA E JAVASCRIPT: CONCEITOS E DIFERENAS

Quando pensamos nas expresses Java e JavaScript pode-se pensar que elas JavaScript, teriam algo em comum. Mesmo que ainda exista uma semelhana nos nomes dessas linguagens, saiba que so linguagens com finalidades diferentes O diferentes. LiveScript. JavaScript foi criado pela empresa Netscape e se chamava LiveScript Em meados de 1995, quando foi adotado pela empresa Sun Microsystems receMicrosystems, beu o nome atual.
Falando de suas diferenas

O JavaScript uma linguagem de scripts Estes, possuem a funo de execuscripts. tar comandos atravs dos programas que, por exemplo, usamos para navegar na Internet, funcionando apenas nos Sites que visitamos. Todos os cdigos construdos Sites com essa linguagem so embutidos nas pginas HTML HTML. J o Java uma linguagem que no depende de navegador para ser executada. Com ela, podem-se criar programas prprios como jogos para celular, sistemas, entre outras aplicaes.
que Ento quer dizer que O JavaScript uma linguagem interpretada, ou seja, algum programa tem que entender o seu cdigo e executar, nesse caso, os navegadores de Internet. E o Java uma linguagem compilada*, que transforma seu cdigo em um programa independente.
*Compilada Tipo de traduo criada para a linguagem binria do computador.
139
140

J a v a S c r i p t
JavaScript Linguagem Orientada a Objetos

141
ORIENTAO ORIENTAO A OBJETOS

A linguagem JavaScript uma linguagem orientada a objetos. Chamamos de Programao Orientada a Objetos o que desenvolvemos nesse tipo de linguagem. Esse um novo conceito que muda a maneira de se desenvolver a programao, diferente do mtodo convencional conhecido como Programao Estruturada. Estruturada Programao Orientada a Objetos significa que todos os elementos de uma pgina da Internet so tratados como objetos: textos links botes figuras textos, links, botes, figuras, pgina, plano de fundo da pgina ttulo etc, ou seja, tudo aquilo que, conforme j explicado, feito pela linguagem HTML HTML.
Exemplo
Se voc estiver navegando em um Site de estudo de peixes, por exemplo, em que so colocadas fotos de todas as espcies, cada foto que voc v considerada um objeto para o JavaScript que exerce controle sobre ele. Se voc quiser, pode coloJav car uma borda ao redor desse objeto, como se fosse uma moldura.
Compreendendo melhor esse conceito...

Ao acessar uma pgina da Internet, o navegador que voc utiliza criar um nmero de objetos que possuem propriedades e mtodos prprios. E so esses elementos que o JavaScript consegue modificar, alterando, assim, tudo ou quase Jav tudo, em uma pgina da Internet. As propriedades de um objeto so suas caractersticas. Cada objeto possui caractersticas prprias. Uma das propriedades de uma pgina da Internet, por exemplo, o seu plano de fundo. Podemos, atravs do JavaScript alterar sua JavaScript, fundo cor de fundo. Os mtodos de um objeto so seus comportamentos. Cada objeto possui mtodos prprios. Por exemplo, em uma pgina, podemos escrever textos, inserir imagens etc. Esses so comportamentos da pgina. Um boto no qual clicamos, executa uma funo. Esse um comportamento do objeto boto. Vamos comparar esses conceitos com objetos reais, como o corpo humano!
143
Objeto: Objeto uma pessoa. Propriedades: 1,73 altura, 60 kg, olhos castanhos, morena, cabelos negros etc., ou seja, as caractersticas do objeto. Mtodos: Mtodos: andar, falar, sentar, pular, usar cala jeans, entre outros., ou seja as aes que o objeto pode executar. Se um ser humano pudesse ser controlado pela linguagem JavaScript, JavaScript seria possvel, com um simples comando, alterar suas caractersticas (propriedades e seus comporpropriedades) propriedades tamentos (mtodos mtodos). mtodos
MANIPULAO DE OBJETOS
No exemplo sobre as questes da Fsica, dado anteriormente, cada opo que o usurio escolhe um objeto Sua caracterstica seria estar marcado ou no, certo objeto. ou errado, dependendo de qual alternativa o usurio escolher. E seu mtodo mtodo (comportamento) o fato de ser clicado ou no. Num momento, uma resposta pode estar marcada e, em outro, no! Assim funcionam muitas das questes de provas que fazemos na escola quando temos que escolher uma das opes listadas.
TIPOS DE PROPRIEDADES
Cada objeto existente na manipulao do JavaScript possui propriedades (caractersticas). Sabemos, por exemplo, que um documento HTML contm ttulo e corpo. Estes seriam, ento, o que chamamos de propriedades existentes nesse documento. Existem dois tipos de propriedades Algumas so os objetos propriamente ditos, propriedades. enquanto outras no podem ser herdadas. Na linguagem HTML por exemplo, HTML, existem os campos de formulrio. Esses campos so dependentes de seu objetopai, Form. pai chamado de Form Esse formulrio criado dentro de um documento HTML representado, em HTML, JavaScript, Document. JavaScript pelo objeto Document Com isso, o objeto Form uma propriedaopriedades. propriedades de do objeto Document e seus campos so suas propriedades Vamos ilustrar esses objetos:
144
DOCUMENT
Objeto-FILHO de DOCUMENT e PAI dos CAMPOS DE FORM
Objeto-PAI
F ORM
FORM CAMPOS DO FORM

Objeto-FILHO de FORM No possui filhos.
Exemplo
Em uma de suas aulas de Geografia, o professor ensina e demonstra os diversos continentes apresentados no mapa Mundi. Logo em seguida, algum aluno o interrompe para fazer perguntas especficas sobre a regio Sudeste do Brasil. Seu professor, prontamente, lhe responde. Ou seja, at o momento da explicao sobre os diversos continentes do mundo, a ao (mtodo) do professor era demonstrar isso no mapa Mundi. Logo aps ter sido interrompido pelo aluno e ter respondido sua pergunta, sua ao mudou. Concluso, os mtodos so alterados conforme algum evento for aplicado. J as propriedades podem conter valores (informaes que podem ser alteradas, mudando, assim, a propriedade do objeto). A utilizao de propriedades se d acompanhada de seu objeto, sendo separadas dele, por um ponto apenas. Veja, a seguir, a sintaxe de utilizao de propriedades propriedades opriedades: nomeObjeto.propriedade = valor;
145
Exemplo
ser_humano.altura = 1.75; opo_fisica1.value = true; No exemplo acima, existe um objeto chamado ser_humano que, atravs da sua propriedade chamada altura ter seu valor para 1.75 E, no segundo caso, poaltura, 1.75. demos verificar se o valor da opo 1 da questo de Fsica ser verdadeiro (true) ou falso (false).
MTODOS DOS OBJETOS

Cada objeto contm seus prprios mtodos Portanto, causaria erro se usssemtodos. mos um mtodo em um objeto que no o possui. Saiba que todo mtodo est associado ao objeto que ele modifica. Em um documento, por exemplo, o usurio pode usar o mtodo para escrever nele, exibindo um texto na pgina. Podemos utilizar mtodos para alterar as propriedades de um objeto ou at mesmo executar uma tarefa especfica. Veja a sintaxe de utilizao dos mtodos mtodos: nomeObjeto.mtodo(argumento);
Exemplo
ser_humano.ao(andar) No exemplo, existe um objeto chamado ser_humano que, atravs de seu mtoao, do chamado ao recebeu, entre suas vrias aes, a que far com que o objeto possa andar Posteriormente, pode-se alterar sua ao para parar andar. parar.
Lembre-se!
Uma propriedade sempre recebe um valor e, no mtodo modificamos mtodo, seu comportamento. por isso que, na propriedade utiliza-se o sinal propriedade, de igualdade = e, no mtodo utilizam-se parnteses () mtodo, ().
146
EVENTOS
Diferentes das propriedades e mtodos dos objetos, que so definidos sempre pelo JavaScript, JavaScript os eventos so as reaes externas para executar determinada ao.
Exemplo
Voc est andando por uma calada e, de repente, algum esbarra em voc e o empurra para fora dela. mtodo At o momento de voc ter sido empurrado, seu comportamento (mtodo era mtodo) andar sobre a calada. Aps a ao dada pela pessoa que o empurrou, seu comportamento mudou! Portanto, o evento trata-se da ao que acarretar na mudana de qual mtodo chamado e/ou do valor da propriedade de um objeto. O usurio faz isso instintivamente, clicando em botes, links da Internet, entre outras aes. A linguagem JavaScript disponibiliza para a pgina HTML inmeros eventos e, por isso, eles so declarados nos prprios Tags da linguagem.
Tags Interligao dos Tags com o HTML

Tags so os comandos utilizados para criar e formatar o contedo de uma pgina. os: Veja, a seguir, a sintaxe de utilizao dos eventos entos <TAG nomeEvento=Comandos JavaScript> HTML. TAG uma instruo da linguagem HTML JavaScript. Evento o nome da ao gerada pela linguagem JavaScript Comandos JavaScript so as instrues JavaScript a serem exeComandos JavaScript cutadas. Elas estaro sempre entre aspas. Caso haja mais de um comando JavaScript a ser executado para o mesmo evento evento, eles devero estar separados por ponto e vrgula (;), conforme mostrado no exem; plo a seguir: <TAG nomeEvento=JavaScript1;JavaScript2;JavaScript3">
147
148

J a v a S c r i p t
ESTRUTURA DA LINGUAGEM
149
Assim como em qualquer linguagem de programao, a JavaScript segue a mesma estrutura semntica e possui, em geral, as mesmas estruturas. A seguir, vamos conhecer essa estrutura e saber como se d sua utilizao.
VARIVEIS
Variveis nada mais so que espaos, na memria do computador, que serviro para ariveis armazenar algum tipo de informao, como um nome, um nmero, um texto etc. Quando se cria uma varivel*, seu ciclo de vida comea ao iniciar a execuo da rotina JavaScript e termina quando essa execuo se encerra.
Exemplo
disciplina = MATEMTICA valor = 102 tempo = Vero No exemplo acima, criamos uma varivel chamada disciplina que est recebendo, como valor, a palavra MATEMTICA, assim como a varivel tempo est receMATEMTIC TEMTICA bendo a palavra Vero Vero.
Variveis Nomes de Variveis

Assim, como na maioria das linguagens de programao, em JavaScript uma JavaScript, varivel declarada, dando-se um nome qualquer a ela. Porm, esse nome obedece a algumas regras. O nome de uma varivel, por exemplo, jamais poder comear com um nmero ou smbolo qualquer, mas, sempre com uma letra ou sempre, o caractere (_) underscore ou underline. Recomenda-se que o nome da varivel _ seja significativo, ou seja, indique o que ela representa. Veja alguns exemplos: VLIDO nome idade _cidade INVLIDO 2nome 31_idade &1_cidade
*Varivel Como o prprio nome indica, seria algo que varia, que no constante.
151
OBSERVAO
Case Sensitive Sensitive, A linguagem JavaScript uma linguagem Case Sensitive ou seja, faz diferenciao entre letras maisculas e minsculas. Se voc declarar uma varivel AULA, com o nome aula e, ao cham-la, voc utilizar AULA o Javascript avisar que essa varivel no existe, pois no foi declarada nenhuma varivel chamada AULA e, sim, aula Fique atento a isso, procurando evitar variveis de muitas formas aula. diferentes. Crie um padro para todas elas.
DESENVOLVIMENTO DESENVOLVIMENTO DE SCRIPTS

As instrues da linguagem JavaScript podem ser escritas em qualquer editor ASCII ASCII. O Bloco de Notas do Windows o Edit do MS-DOS ou o KWrite presentes nas Windows; KWrite, distribuies do Linux Os arquivos devem ser salvos com extenso .html ou .JS Linux. .JS. Para visualizar a execuo do script basta acess-lo atravs do Browser*. script, Abra nosso editor de desenvolvimento de pginas, o Kwrite conforme aprendeKwrite, mos no curso HTML para iniciarmos a prtica de desenvolvimento de scripts HTML, scripts. clique no boto Aplicativos (localizado no canto inferior esquerdo da tela principal do Linux Linux); Escritrio, KWrite. e no item Escritrio clique em KWrite Inicie, digitando os Tags iniciais de uma pgina HTML. HTML.
152
*Browser O mesmo que navegador da Internet (tambm conhecido como Web Browser ou simplesmente Browser Browser).
<HTML> <HEAD><TITLE>Prova de Fsica</TITLE></HEAD> <BODY> Primeiramente, vamos inserir o cdigo HTML em nosso documento, digitando as seguintes instrues: <html> <head><title>Prova de Fsica</title></head> <body> </body> </html> No corpo da pgina, vamos iniciar nosso primeiro script em JavaScript Ele ser JavaScript. colocado entre os Tags HTML <body> e </body>. Todas as vezes que voc for iniciar um script ser necessrio informar ao HTML script, que ele ser iniciado. Isso se d atravs do Tag <SCRIPT>, que dever ser fechado aps terminar todo o cdigo JavaScript JavaScript. Abaixo do Tag <body>, digite o seguinte Tag ag: <SCRIPT LANGUAGE=JAVASCRIPT> Esse Tag est informando, ao navegador, que ser iniciado um script desenvolvido na linguagem JavaScript Em seguida, vamos solicitar ao JavaScript que JavaScript. escreva algo na tela. Para isso: digite o seguinte cdigo: document.write(Prova de Fsica); Conforme voc j aprendeu sobre orientao a objetos, observe que o objeto document informa ao JavaScript que ser feito algo na pgina. E, em seguida, o mtodo write escreve algo no documento, nesse caso, a frase Prova de Fsica Fsica. Termine seu script com o Tag </SCRIPT>, e finalize seu documento HTML com os Tags </BODY> e </HTML>. Compare como nosso cdigo completo dever ficar no KWrite KWrite:
153
<HTML> <HEAD><TITLE>Prova de Fsica</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> document.write(Prova de Fsica); </SCRIPT> </BODY> </HTML> Salve esse arquivo como exemplo.html exemplo.html. Visualize, no navegador, o resultado. Para isso, voc ir abrir o Konqueror (clicar no boto de inicializao Metasys e selecionar o menu Gerenciador de Arquivos Voc pode navegar, clicando nos Arquivos). quivos diretrios sua esquerda at chegar ao diretrio que est seu arquivo.htm ou, na caixa de texto Localizao voc pode digitar o caminho at o diretrio do Localizao, arquivo e clicar Enter Os arquivos desse diretrio aparecero ao lado direito do Enter er. onqueror or. emplo.html. Konqueror Ento, clique duas vezes no arquivo exemplo.html Sua pgina ser carregada no navegador.
EXERCCIOS
Com os cdigos que aprendeu at o momento, crie uma pgina com informaes a respeito do nosso Pas: populao, localizao, capital, estados e clima. KWrite, 1 ) No editor de texto KWrite crie uma pgina HTML cujo ttulo seja Brasil e o corpo da pgina contenha as caractersticas do Pas. 2 ) O corpo da pgina dever ser feito com um script (JavaScript utiliJavaScript JavaScript), document.write zando a funo que aprendemos: document.write. pais.htm. 3 ) Salve o arquivo no diretrio sua escolha com o nome: pais.htm FireFox. 4 ) Visualize o arquivo no FireFox
154

J a v a S c r i p t
COMANDOS BSICOS
155
Vamos conhecer, agora, outros comandos bsicos existentes na linguagem JavaScript. JavaScript
MTODO DOCUMENT.WRITE() DOCUMENT.WRITE()

Conforme mostrado anteriormente, o mtodo write() pertencente ao objeto write(), document, HTML). document serve para escrever algo na pgina (documento HTML Veja pelo exemplo a seguir: document.write(Ol Mundo!);
MTODO ALERT()
A finalidade desse mtodo emitir uma caixa de mensagem para chamar a ateno em algo que algum tenha feito certo ou errado. Veja sua forma de utilizao no cdigo a seguir: alert(Parabns, Voc acertou!); O resultado desse comando geraria a seguinte mensagem no navegador:
157
EXERCCIOS
1) Crie uma pgina que possa emitir mensagens com o nome de alguns dos elementos da Tabela Peridica. Observe o modelo da pgina a seguir: <HTML> <HEAD><TITLE>Prova de Fsica</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> alert(Hidrognio); alert(Ltio); alert(Sdio); alert(Potssio); alert(Rubdio); alert(Csio); alert(Frncio); </SCRIPT></BODY> </HTML> 2) Utilize o editor de texto KWrite para redigir todo o cdigo com os elementos que voc escolheu, salve-o como tabela.html tabela.html. 3) Abra o arquivo no navegador FireFox FireFox. Voc ver resultados como estes a seguir, mas com os nomes dos elementos que digitou no cdigo.
158
MTODO CONFIRM()
Uma outra alternativa, alm do mtodo alert() o mtodo confirm() Ele exibe alert(), confirm(). Cancelar. uma caixa de dilogo e os botes de OK e Cancelar Caso seja pressionado o boto OK o mtodo retornar o valor booleano True Pressionando o boto CanOK, rue. celar, alse. celar ser retornado o valor False
159
Com isso, o usurio poder determinar uma tomada de deciso dentro de seu script como, por exemplo, construir uma avaliao com questes fechadas que tero, como resposta, Sim e No ou OK e Cancelar Cancelar. Veja sua sintaxe de utilizao: confirm(Tem Certeza??); Esse comando gerar a seguinte mensagem no navegador:
Veja, agora, pelo cdigo a seguir, um modelo de prova prtica com questes sobre estudos espaciais: <HTML> <HEAD><TITLE>Questes Espaciais</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> alert(Marque OK para sim ou CANCELAR para no) alert(O que a exposio prolongada falta de gravidade pode causar?); confirm(Perda de peso); confirm(Perda muscular); confirm(Tonturas); confirm(Nuseas); confirm(Perda ssea); confirm(Febre); confirm(Mudanas na presso sangunea); confirm(Hipotermia); confirm(Mudanas no equilbrio); confirm(Mudanas no msculo cardaco); document.write(Fonte: www.discoverynaescola.com); </SCRIPT> </BODY> </HTML>
160
EXERCCIOS
Utilizando o editor de texto KWrite faa uma pgina que: KWrite, escreva a seguinte frase na pgina, utilizando um mtodo JavaScript: JavaScript Os pases a seguir fazem parte da Amrica Latina:. Para cada pas utilize o mtodo confirm e escreva os seguintes nomes: Brasil, Equador, Itlia, Argentina, Uruguai. Utilize o mtodo alert para escrever: Fim da questo.. Salve a pgina como america.html e visualize o resultado no Firefox Firefox.
MTODO PROMPT()
O mtodo prompt uma forma de voc solicitar alguma informao ao visitante, como seu nome, sua idade etc, podendo, tais informaes, serem manipuladas na pgina. Poderamos solicitar o ano de nascimento da pessoa, por exemplo, para a pgina retornar a sua idade. A sintaxe desse mtodo segue a seguinte descrio: prompt(valor,padro); padro: padro o valor padro que ser exibido na tela do prompt para orient-lo sobre o lugar onde voc dever digitar a mensagem. Veja um exemplo da utilizao do mtodo prompt prompt: <script language=javascript> seu_nome = prompt(Digite seu Nome:,digite aqui...); document.write(seu_nome + seja Bem Vindo a sua pgina de estudos!); </script Veja o resultado do script acima:
161
Aps digitado o nome e pressionado o boto OK aparecer, na pgina, o seguinte texto: OK,
162

J a v a S c r i p t
COMANDOS CONDICIONAIS E DE REPETIO

163
No exemplo anterior com o mtodo confirm foi possvel definir opes de respostas para confirm, o usurio, porm, no houve como calcular quantas respostas estavam certas e quantas estavam erradas. Para que isso seja possvel, necessrio conhecer os comandos condicionais e/ou de repetio da linguagem. Vejamos a utilizao dos principais:
INSTRUO IF ... ELSE

Realiza determinada ao de acordo com uma condio. Sua sintaxe bsica : if (condio) { comandos } else { comandos } Caso haja mais de uma condio a ser avaliada, pode-se fazer o uso da instruo else if. if Observe sua sintaxe: if (condio1) { comandos } else if (condio2) { comandos } Vamos ver a utilizao do comando if analisando o cdigo abaixo: if, <HTML> <HEAD><TITLE>Comparando valores</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> a = 10; b = 2; if(a > b){ alert(O nmero: + a + maior que + b);
165
} else { alert(O nmero: + b + maior que + a); } </SCRIPT> </BODY> </HTML> No exemplo, foram criadas variveis na memria do computador, que como j vimos, variv ariveis so espaos para guardar algum tipo de informao durante o processamento do nosso programa. Nesse caso, foram criadas as variveis a e b, cada uma recebendo um valor. A varivel a recebeu o nmero 10 (dez) e a varivel b recebeu o nmero 2 (dois). a b Em seguida, foi feita uma comparao para que se pudesse saber qual varivel tem o maior nmero atravs da instruo if que testa se a varivel a realmente maior que a varivel b. Caso essa condio seja verdadeira, como acima, ser dada uma mensagem na tela, informando que o valor da varivel a maior que o da varivel b. E, caso contrrio, se no for (else ser dada outra resposta. Veja, a partir do exemplo acima, a resposta else), else que ser apresentada no navegador:
Teste! Faa o Teste!

Altere os valores das variveis acima. Veja, novamente, no navegador, qual valor retornado.
166
EXERCCIOS
Utilizando o editor de texto KWrite abra o arquivo america.html KWrite, america.html. 1) Reescreva o cdigo para verificar se a opo selecionada est certa ou errada. Lembre-se de que o mtodo confirm retorna uma resposta booleana (true ou false) que pode ser capturada. Por exemplo: brasil=confirm(Brasil); A varivel em questo conter os valores true ou false, dependendo da resposta do aluno. 2) Utilizando o comando if conte quantas questes o aluno acertou. if, Por exemplo: Nesse caso, necessrio, antes de iniciar o primeiro if criar uma varivel if, que conter a nota do aluno. nota=0; Ento, podemos verificar se ele acertou a questo e contar o ponto. if (brasil==true){ nota=nota+1; } 3) Utilizando o mtodo alert escreva: Fim da questo. e a nota do aluno. alert, Salve a pgina como america-nota.html e visualize o resultado no Firefox Firefox.
INSTRUO WHILE
A instruo while realiza uma ao enquanto determinada condio for satisfeita.
Entendendo melhor essa construo...

Em uma pgina, solicitado que voc informe uma senha, caso contrrio, ser exibida uma mensagem de alerta informando a voc que a senha obrigatria. Esse exemplo pode ser feito atravs da instruo while while.
167
Sua sintaxe bsica : while (expresso) { comandos } Veja, no exemplo a seguir, a utilizao do lao while que repetido por um total de 10 while, vezes: num=0; while(num<10){ document.write(Nmero: +num+<br>); num++; } No exemplo, foi declarada, na memria do computador, uma varivel chamada num que recebeu, como valor inicial, o zero Logo depois, foi usado o comando while (enzero. quanto) que faz uma comparao com esse valor, verificando se o mesmo menor que 10 (dez). Sendo verdadeira sua comparao, nesse caso, a varivel num incrementada com mais 1(um), (num++), ou seja, zero + zero + 1 = 1 E, assim, sucessivamente, at 1. o num deixar de ser menor que 10 (dez). Note tambm que, a cada vez que testada nossa condio, ser escrito, na pgina, o nmero atravs do comando document.write document.write. OBSERVAO
Alm dos mtodos condicionais apresentados, a linguagem JavaScript suporta um mtodo alternativo para criar expresses condicionais. Esse mtodo, j suportado em outras linguagens de programao, permite ao usurio construir um exemplo prtico e simples para sua utilizao. Sua sintaxe bsica tem a seguinte formao: (condio) ? Valor verdadeiro : Valor falso; condio: condio a expresso a ser avaliada. Exemplo: a < b verdadeir erdadeiro Valor verdadeiro: especifica a ao que ocorrer se a condio for verdadeira. falso: Valor falso especifica a ao que ocorrer caso a condio seja falsa.
168
INSTRUO SWITCH
Essa instruo bem semelhante estrutura if porm mais eficiente em razo da if, sua simplicidade de utilizao e entendimento. Veja a sintaxe utilizada para o uso de instrues switch switch: <HTML> <HEAD><TITLE>Verificando Resposta</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> resposta = 2; switch(resposta){ case 1: alert(O nmero 1!); break; case 2: alert(O nmero 2!); break; case 3: alert(O nmero 3!); break; } </SCRIPT> </BODY> </HTML> No exemplo apresentado, foi declarada uma varivel chamada resposta que recebeu o nmero 2. A estrutura switch tem a funo de verificar qual nmero a varivel recebeu conforme os casos apresentados nela. Quando o comando switch executado, realiza-se um estudo de caso, em que cada caso ignorado se o valor da resposta for diferente do apresentado.
169
O comando break utilizado para sair do comando switch caso a condio seja satisswitch, feita. Se no utilizar esse comando, o comando switch continua avaliando as outras opes at encontrar o seu final. switch. A opo default pode ser utilizada ao final do comando switch Nesse caso, se nenhuma comparao de case for satisfeita, ele executa o que estiver no default default.
EXERCCIOS
No editor de texto KWrite faa a seguinte pgina: KWrite, 1) Utilizando o mtodo prompt pea para o usurio digitar um nmero. prompt, 2) Conte de 0 at o nmero, utilizando o comando while while. 3) Escreva, dentro do comando while o comando switch verificando se o nwhile, switch, mero menor que 5. Toda vez que isso acontecer, escreva o nmero; e quando o nmero for maior que 5, escreva: Nmero maior que 5. 4) Utilizando o mtodo alert escreva: Fim.. alert, Salve a pgina como numeros.html e visualize o resultado no Firefox Firefox.
170

J a v a S c r i p t
FUNES
171
Funes em Ja vaScript nada mais so que uma rotina (pacote de comandos Jav JavaScript) JavaScript que possui um conjunto de instrues a ser executado. Sua sintaxe compe-se dos seguintes parmetros: function nomeFuno(argumentos) { Comandos } Se a funo possuir argumentos, estes devero estar colocados entre parnteses, aps o nome da funo conforme foi mostrado. O corpo da funo dever ser colocado entre chaves. Estas, indicaro o incio e o fim do bloco de instrues. Normalmente, as funes so definidas dentro do cabealho da pgina HTML repreHTML, sentadas pelo Tag <HEAD>. Com isso, todas as funes so carregadas assim que a pgina carregada, bem antes que o usurio pense em execut-las. Veja um exemplo simples de uma funo que exibe o significado de algumas palavras ao clicar sobre elas. Primeiramente, vamos ver como a funo ficar montada: function significado(palavra){ switch (palavra){ case Sinnimos: alert(So palavras que apresentam, mesmo significado.); break; case Antnimos: alert(So palavras que apresentam, sentidos opostos, contrrios.); break; case Homnimos: alert(So palavras iguais na forma na significao.); break; case Parnimos: alert(So palavras de significao mas de forma parecida, semelhante.); break; } }
entre si, o
entre si,
e diferentes
diferente,
173
No exemplo, construmos uma funo chamada significado que est recebendo, como argumento, a varivel palavra Essa varivel, dentro do cdigo, ser testada para sapalavra. ber qual palavra o usurio escolheu e, assim, saber seu significado Note que foi usasignificado. switch que testar qual ser a palavra. da a estrutura condio Agora, iremos desenvolver a parte HTML que mostrar as palavras nas quais o usurio dever clicar para saber o significado. Veja pelo cdigo a seguir: <BODY> <h1>O que so:</h1> <a href=javascript:significado(Sinnimos);>Sinnimos</ a><br> <a href=javascript:significado(Antnimos);>Antnimos</ a><br> <a href=javascript:significado(Homnimos);>Homnimos</ a><br> <a href=javascript:significado(Parnimos);>Parnimos</ a><br> </BODY> Essa a parte do cdigo que mostra, na pgina, as palavras Sinnimos Antnimos Sinnimos, Antnimos, Parnimos. Homnimos e Parnimos Elas sero simples links que vo chamar a funo significado, palavra) ficado passando para a varivel (palavra as palavras que desejamos testar na funpalavra o. Veja pelo detalhe do primeiro link: <a href=javascript:significado(Sinnimos);> Sinnimos</a><br> A palavra Sinnimos que exibida como link na tela, chama a funo significado e Sinnimos, passa para a varivel palavra a palavra Sinnimos Quando Sinnimos chegar palavra, Sinnimos. funo, testar, pela condio do comando switch qual a palavra. S, ento, emitir switch, um aviso com seu significado. Nesse caso, a funo daria como resposta a seguinte mensagem:
174
Veja, abaixo, o cdigo completo da pgina do significado de palavras: <HTML> <HEAD><TITLE>Significado das Palavras</TITLE> <SCRIPT LANGUAGE=JAVASCRIPT> function significado(palavra){ switch (palavra){ case Sinnimos: alert(So palavras que apresentam, entre si, o mesmo significado.); break; case Antnimos: alert(So palavras que apresentam, entre si, sentidos opostos, contrrios.); break; case Homnimos: alert(So palavras iguais na forma e diferentes na significao.); break; case Parnimos: alert(So palavras de significao diferente, mas de forma parecida, semelhante.); break; } } </SCRIPT> </HEAD> <BODY> <h1>O que so:</h1> <a href=javascript:significado(Sinnimos);>Sinnimos</ a><br> <a href=javascript:significado(Antnimos);> Antnimos</a><br> <a href=javascript:significado(Homnimos);> Homnimos</a><br>
175
<a href=javascript:significado(Parnimos);> Parnimos</a><br> <br> Fonte:http://www.algosobre.com.br/gramatica/significado-das-palavras.html </BODY> </HTML>
EXERCCIOS
1) No editor de texto KWrite construa a seguinte pgina: KWrite, 2) Utilizando o comando switch faa uma funo que, dada uma palavra (o switch, sobrenome de um escritor), retorne qual seu estilo literrio (escolha pelo menos cinco escritores; se necessrio, pesquise na Internet). 3) Utilizando o exemplo dado, crie links com os nomes dos escritores para quando se clicar no link, aparea uma caixa alert com o estilo literrio do escritor. alert Salve a pgina como escritores.html e visualize o resultado no Firefox Firefox.
176

J a v a S c r i p t
OUTROS OBJETOS DO JAVASCRIPT
177
DATE OBJETO DATE

Na linguagem JavasScript existem inmeros objetos para controle de datas, horas, textos, nmeros etc. Voc vai conhecer, agora, o objeto date, que permite ao usurio date trabalhar com datas e horas. Com ele, ser possvel a criao de pginas que permitam maior controle do tempo, como agendas, dirios, calendrios, e que avise ou d informaes referentes, por exemplo, a uma data comemorativa. Para determinar um novo objeto de data, temos as seguintes sintaxes: NomeObjeto = new Date() padro do sistema. Retorna a Data e hora atuais Retorna a data
NomeObjeto = new Date(ano,ms,dia) neste formato.
Veja exemplos conforme sintaxe apresentada anteriomente: data=new Date() atribui varivel data, a data e hora correntes. data=new Date(1975,11,23) atribui varivel data, a data 23 de novembro de 1975. Sua sintaxe padro a seguinte: NomeVarivel = new Date();
DATE MTODOS DO OBJETO DATE

Os mtodos do objeto date permitem extrair uma data ou uma hora, ou seja, valores especficos como dia, ms, ano, hora ou minutos. Se o usurio desejar utilizar seus mtodos, deve-se seguir a seguinte sintaxe: NomeObjeto.mtodo(parmetros) Veja, abaixo, a relao dos mtodos utilizados no objeto date date.
Mtodos GET
Os mtodos getDate, getDay, entre outros, possuem a finalidade de recuperar a data getDat getDa tDate tDay e a hora de um objeto date Ele poder conter a data e a hora atuais ou especficas. date. Aps a especificao do objeto date basta especificar qual o mtodo. date,
179
Veja os exemplos apresentados, abaixo: Data=new Date(); //Cria um objeto de Data. alert(Data.getDay()) // Retorna o dia da semana atual. alert(Data.getMonth()) // Retorna o ms atual. alert(Data.getYear()) // Retorna o ano atual. ATENO
Esse objeto tem a funo de armazenar a data e a hora atuais no formato mm/dd/aa hh:mm:ss Os valores do ms so contados de 0 at 11 e os dias da semana de 0 a hh:mm:ss. 6, da seguinte forma: 0 1 2 3 4 5 6 7 8 9 10 11 Janeiro Fevereiro Maro Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro 0 1 2 3 4 5 6 Domingo Segunda Tera Quarta Quinta Sexta Sbado
As horas so determinadas de 00:00 s 23:00
O objeto date pode definir data e hora a partir de 1 de janeiro de 1970. Aps a criao date do objeto date o mesmo pode ser usado com qualquer mtodo apresentado anteriordate, mente.
180
MTODOS getDate getDay getHours getMinutes getMonth getSeconds getTime getTimezoneOffset getYear Dia do ms
DESCRIO
Dia da semana (0=Domingo) Horas (0 a 23) Minutos (0 a 59) Ms do ano (0=janeiro) Segundos (0 a 59) Milissegundos desde 1 de janeiro de 1990 (00:00:00) Diferena de fuso horrio em minutos para o GMT 2 dgitos do ano at 1999. Aps 2000, 4 dgitos
Mtodo Parse e UTC

O mtodo Parse retorna o valor de milissegundos a partir de 1 de janeiro de 1970, arse 00:00:00. J, o mtodo UTC faz a mesma coisa, porm, no fuso horrio GMT Greenwich Mean Time. Vejamos um exemplo da apresentao da quantidade de Time milissegundos contados at o dia 23 de Novembro de 1975. Date.parse(Nov 23, 1975 GMT); Teste e veja se o resultado ser 185932800000 milissegundos contados desde 1 de janeiro de 1970. Altere esse cdigo, fazendo com que seja exibida a quantidade de milissegundos desde o seu nascimento. Digite o exemplo abaixo no KWrite KWrite. Salve o arquivo como exemplo3.html exemplo3.html. Visualize o resultado no navegador.
181
<html> <head> <title>Objeto Date</title> <script language=javascript> hoje=new Date(); alert(A hora atual +hoje.getHours()); alert(O dia atual +hoje.getDate()); alert(Agora so: +hoje.getHours()+:+hoje.getMinutes()); </script> </head> <body> </body> </html>
EXERCCIOS
1) No editor de texto KWrite faa a seguinte pgina, utilizando o objeto Date KWrite, do JavaScript JavaScript. 2) Com o comando prompt pea ao usurio para informar o ano, o ms e o prompt, dia em que ele nasceu. 3) Com o objeto Date verifique qual o dia, ms e ano atual. Date, 4) Faa o clculo da idade do usurio em anos e mostre-a. Salve a pgina como idade.html e visualize o resultado no Firefox Firefox.
182
Mtodo toGMTString
A definio de GMT define o fuso horrio internacional padro para configurao de relgios. Esse mtodo faz a converso de um objeto date para uma string usando string, convenes GMT. Veja, pelo exemplo a seguir, a converso da hora atual em uma string (texto) no formato GMT. Certifique-se de que o computador esteja com a definio de fuso horrio correta1 . <html> <head> <title>Objeto Date</title> <script language=javascript> data = new Date(); document.write(data.toGMTString()); </script> </head> <body> </body> </html> Veja o resultado do cdigo acima na figura a seguir:
OBS.: Quando o script colocado no head, ele executado antes de carregar o corpo da pgina.
183
Mtodo toLocaleString
O mtodo toLocaleString tem a funo de formatar a data e a hora, usando as convenes de string no computador local (USA, Reino Unido, Frana, Alemanha, Brasil, entre outros). A idia principal desse mtodo apresentar ao usurio a data e a hora de forma que ele possa entender isso de maneira simples na pgina, mesmo estando fora de sua localidade. Veja um exemplo de sua utilizao: <html> <head> <title>Objeto Date</title> <script language=javascript> data = new Date(); document.write(data.toLocaleString()); </script> </head> <body> </body> </html> Veja o resultado do cdigo acima, na figura a seguir:
184
Vejamos, agora, um exemplo que ir apresentar um relgio digital na tela atravs da criao de uma funo. Analise o cdigo apresentado a seguir: <html> <head> <script language=javascript> function relogio(){ tempo=new Date(); hora=tempo.getHours(); min=tempo.getMinutes(); sec=tempo.getSeconds(); if(sec<10){ sec=0"+sec; } if(min<10){ min=0"+min; } document.write(hora+:+min+:+sec); } </script> </head> <body onLoad=relogio();> </body> </html>
EXERCCIOS
Para cada um dos exerccios abaixo, abra o editor de texto Kwrite salve o cdigo Kwrite, e visualize o resultado no navegador. 1) Crie um script que apresente a data atual do computador na tela e, em seguida, exiba as horas, minutos e segundos atuais. 2) Crie um script que exiba o nmero do dia da semana e do ms atual.
185
3) Crie um script que exiba, na tela, a data e a hora atuais no seguinte formato: Agora so: hh:mm:ss do dia dd-mm-yy 4) Crie um script que apresente a data e a hora no formato do fuso horrio internacional. 5) Altere esse script fazendo a data e a hora apresentarem-se no formato script, atual do fuso horrio local. 6) Crie um script que apresente, na pgina, as seguintes condies: Se horas f or menor que 1 2h, exiba: BOM DIA; for 12h, exiba: DIA; estiver 12h 18h, exiba: BOA TARDE; Se horas estiv er entre 1 2h e 1 8h, e xiba: BOA TARDE; exiba: BOA MADRUG ADA UGAD estiver Se horas estiv er entre 00h e 05h, e xiba: BOA MADR UG ADA. 7) Crie um script que apresente, na pgina, a data e as horas. Veja o formato a ser apresentado na pgina: Segunda-feira, 23 de Novembro de 2001. Agora so: hh:mm:ss
186

J a v a S c r i p t
MANIPULAES DE JANELAS E FORMULRIOS

187
OBJETO WINDOW
Na linguagem JavaScript possvel controlar a janela do navegador atravs do objeto JavaScript, conhecido como window Ele responsvel pela manipulao dessa janela. Sempre window. que se abre o navegador, ele criado como representao de uma janela que est aberta. Isso feito automaticamente, sem a necessidade de executar qualquer comando da linguagem HTML ou JavaScript. O objeto window permite que o usurio crie e abra novas janelas de formas diferentes. Tudo isso possvel atravs de seus mtodos. Para utiliz-los, basta seguir a seguinte sintaxe: window.mtodo(argumentos); Para entender melhor: acesse o Site do Centro Universitrio Belas Artes de So Paulo atravs do link: www.belasartes.br; ao carregar a pgina, clique no link Galeria Virtual que mostra a galeria de alguns jovens artistas; acesse um dos artistas e, logo ao carregar a pgina, escolha uma das fotos apresentadas e clique sobre ela. Perceba que, ao clicar em uma das fotos, ser aberta uma nova janela com o tamanho da foto. Isso s foi possvel por ter sido usado o mtodo open (abrir), pertencente ao objeto window. Veja, a seguir, como utiliz-lo. window
Mtodo Open
Esse mtodo tem como objetivo abrir uma nova janela do navegador. Com ele, o usurio poder abrir uma nova janela em branco ou uma janela que contm uma pgina especfica. Sua sintaxe tem a seguinte formao: NomeJanela = window.open(URL,ttulo,opes); NomeJanela uma varivel que ser uma referncia nova janela. NomeJanela: URL: URL o endereo da janela a ser aberta. ttulo: ttulo o nome da janela que ser criada. opes: opes so os parmetros que controlam o comportamento da nova janela.
189
Para voc entender melhor como utilizar esse mtodo, siga os seguintes passos: escolha algumas imagens no Site do Centro Universitrio Belas Artes e salve-as no computador. Agora, vamos montar a pgina responsvel pelo carregamento das fotos. inicialmente, crie uma pgina simples (HTML com links chamando uma HTML) HTML funo em JavaScript JavaScript. Veja o exemplo a seguir: <a href=javascript:abreFoto();>Exibir foto</a> Agora, veja a funo em JavaScript que o link acima est chamando: <script language=javascript> function abreFoto(){ ver_foto = window.open(,,width=250,height=200"); } </script> Ao clicar no respectivo link criado na pgina, ser chamada a funo abreFoto. Voc poder notar que existe uma varivel que recebe a nova janela criada pelo mtodo window.open. No momento, no definimos qual janela chamar e nem seu nome, portanto, ser aberta, simplesmente, uma janela vazia. Mas essa janela ser aberta com um tamanho especfico, ou seja, ela ter largura de 250 pixels e altura de 200 pixels, representado pelos argumentos: width (largura) e height (altura). Veja, a seguir, o cdigo completo dessa pgina: <html> <head> <script language=javascript> function abreFoto(){ ver_foto = window.open(,,width=250,height=200"); }
190
</script> </head> <body> <a href=javascript:abreFoto();>Exibir foto</a> </body> </html> Clique no link exibido na pgina. Ser dado o seguinte resultado no navegador:
Caso houvesse uma pgina HTML com a foto j criada, bastaria alterar, no cdigo do mtodo open o primeiro argumento, informando qual o nome da pgina que se deseja open, carregar. Veja como ficaria o cdigo se existisse a pgina: ver_foto = window.open(pagina.html,,width=250,height=200"); Agora, se voc no possui uma pgina montada e deseja escrever todo o contedo dela com o JavaScript basta utilizar as propriedades que a varivel ver_foto adquiriu JavaScript, quando recebeu o mtodo open do objeto window.open window.open. Veja, a seguir, como voc faria para montar, em JavaScript o contedo da pgina JavaScript, criada pela varivel ver_foto ver_foto: <html> <head> <script language=javascript> function abreFoto(){ ver_foto = window.open(,,width=192,height=300");
191
ver_foto.document.write(<HEAD><TITLE>Aula de Artes</ TITLE></HEAD>); ver_foto.document.write(<body bgcolor=yellow>); ver_foto.document.write(<img src=foto1.jpg>); } </script> </head> <body> <a href=javascript:abreFoto();>Exibir foto</a> </body> </html> Observe o resultado na figura a seguir:
FIGURA: HTTP://WWW.BELASARTES.BR/GALERIA/MACHUPICCHU/FOTOS/3_G.JPG
Mtodo Close
Assim, como possvel abrir uma nova janela do navegador com o mtodo open, possvel fech-la com o mtodo close do objeto window que tem o objetivo de encerwindow, rar uma janela. Normalmente, utiliza-se esse mtodo atribudo a um boto de ao ou a um link. Sua sintaxe bsica tem a seguinte formao: window.close()
192
No exemplo, a seguir, temos uma pgina com um boto chamado Fechar Quando o echar har. usurio clicar sobre ele, ser acionado o evento close close. <input type=button value=Fechar onClick= window.close()> Nesse caso, foi utilizado o evento onClick que executa a instruo window.close() assim que o usurio clica sobre o boto.
EXERCCIOS
1) Crie, na funo anterior, que abre uma nova janela com uma foto, um boto ou link que, ao ser clicado, feche a janela que foi aberta. 2) Salve o arquivo como foto.html foto.html. em sua aula de sobre as praas Artes, o professor solicitou um trabalho de sua cidade.
Imagine que, de fotografia
3) Rena-se com seus colegas e faa um tour pelas praas que ficam perto da sua casa, no centro da cidade ou apenas naquelas mais conhecidas pelos moradores, e tire vrias fotos delas. Caso no seja possvel, procure fotos de praas na Internet. 4) Depois de realizada a seo de fotos, transfira-as para um computador e salve-as. Se voc quiser, poder dar um acabamento ou um tratamento naquelas que no ficaram muito ntidas, atravs do programa Gimp Saiba mais Gimp. com seu professor! 5) Em seguida, crie um lbum de fotos, a partir dos comandos do JavaScript aprendidos at o momento. Ao clicar em cada uma das fotos, voc dever visualiz-las em seu tamanho original, em uma nova janela (pop-up* pop-up*). pop-up* 6) Insira, tambm, informaes sobre a praa que est sendo exibida na foto e alguma caracterstica relevante sobre ela. 7) Ao final, junte suas fotos com as de seus colegas e faa uma exposio virtual de fotos das praas de sua cidade. 8) Salve seu arquivo como praas.html praas.html.
*Pop-up uma janela usada na Web como meio de exibir uma propaganda em uma janela diferente, com o propsito de chamar a ateno do usurio.
193
OBJETO FORM
Atravs do objeto form (formulrio da linguagem JavaScript o usurio poder formulrio) formulrio interagir melhor com os dados inseridos nos campos de formulrios que so criados na linguagem HTML Entre eles, temos os campos input checkbox radio HTML. input, checkbox, radio, textarea. select e textarea O formulrio e seus objetos podem ser facilmente manipulados atravs de scripts scripts. Propriedade O objeto form uma propriedade do objeto document Ou seja, para fazer refedocument. rncia ao formulrio, necessrio seguir a seguinte hierarquia: document.form.campo-formulario;
Veja, na tabela a seguir, a relao das propriedades do objeto form orm:
194
PROPRIEDADES Action defaultChecked defaultSelected defaultValue Checked elements[] Encoding Form Index Length Method Name options[] Selected selectedIndex Text Value
DESCRIO Especifica a URL do servidor para onde as variveis do formulrio so enviadas. Estado de seleo de uma caixa de verificao de um boto de opo. Seleo atual de lista de opes. Valor padro da caixa de texto ou rea de texto em um formulrio. Estado padro de um checkbox ou botes do tipo radio em um formulrio. Lista os elementos existentes do formulrio. Formato de cdigo MIME para o formulrio. Objeto de formulrio. Especifica uma opo de uma lista de seleo (select select) select em um formulrio. Especifica o nmero de itens de uma lista. Mtodo que determina como as informaes do formul rio sero processadas atravs dos valores Get ou Post Post. Nomeia um objeto do formulrio. Lista de opes de uma lista (select dentro do formulrio. select) select Estado atual de uma caixa de verificao ou de um boto de opo (radio radio). radio Determina a opo selecionada de uma lista de seleo (select dentro do formulrio. select) select Especifica o texto de uma opo (option de uma lista option) option de seleo (select do formulrio. select) select Nome dado ao texto de uma caixa de texto ou rea de text areatext). texto (text e areatext
Sua sintaxe a seguinte: document.NomeFormulrio.NomeCampo.propriedade
195
Mtodos do Objeto Form

MTODO blur() click() focus() select() submit() DESCRIO Quando removido o foco de um campo do tipo text textarea text, e campos de senha password password. Quando dado um clique sobre um elemento de boto em formulrio ou campos do tipo radio e checkbox checkbox. Quando dado o foco sobre um campo do tipo text textarea text, e campos de senha password password. Quando selecionado o contedo de um campo do tipo text text, password. textarea ou password Quando envia o formulrio ao servidor.
Elementos de um Formulrio Sabemos, a partir do que vimos no HTML que, em um formulrio, h diferentes HTML, componentes que auxiliam a entrada de dados do usurio. Destacamos:
Button (Boo) Reset (inicializar) Checkbox (Escolha de campos) Select (seleciona um item) Hidden (Campo oculto) Submit (enviar ao servidor) Password (Senha) Text (texto) Radio (Escolha apenas um campo) TextArea (rea de texto)
J conhecemos todos esses componentes apresentados acima atravs do uso da linguagem HTML HTML.
OBJETO TEXT
Sabemos que se podem criar campos de digitao de textos com o uso do formulrio. Atravs da linguagem JavaScript possvel a manipulao dos dados JavaScript, digitados para esse campo com o uso do objeto text text. Sua sintaxe geral : document.nomeForm.nomeText.propriedade
196
DESCRIO PROPRIEDADES Veja, abaixo, a relao das propriedades existentes para o objeto text text: defaultValue Name Value Determina o valor padro para a caixa de texto. Determina o nome do objeto para a caixa de texto. Determina o valor para a caixa de texto.
<form name=form1"> <pre> Digite seu Nome: <input type=text name=campo1"> <script language=javascript> document.form1.campo1.value = prompt(Digite seu Nome:,digite aqui...); alert(document.form1.campo1.value); </script> </form> Obs: O tag <pre> do HTML serve para manter toda a formatao original (espaos em branco, quebras de linhas e tabulaes importantes) do texto que estiver entre ela.
OBJETO PASSWORD
Esse objeto permite ao usurio controlar campos de preenchimento de Senha Senha. Sua sintaxe : document.nomeForm.campoSenha.propriedade As propriedades e mtodos desse objeto so os mesmos do objeto text apresentados anteriormente. <form name=form1"> <pre> Digite seu Nome: <input type=password name=campo1"> <script language=javascript> document.form1.campo1.value = Senha
197
alert(document.form1.campo1.value); </script> </form>
OBJETO TEXTAREA
Esse objeto tem como objetivo a criao de reas de texto compostas por vrias linhas. Sua sintaxe : document.nomeForm.campoTextArea.propriedade Suas propriedades, mtodos e eventos equivalem aos mesmos do objeto text text.
BUTTON OBJETO BUTTON

Como j foi utilizado, sabemos que esse objeto representa os botes criados em um formulrio a que atribumos aes especficas. Sua sintaxe tem a seguinte formao: document.nomeForm.nomeButton.propriedade MTODO click() EVENTO onClick DESCRIO Executa uma instruo quando dado um clique sobre o boto.
Veja, pelo exemplo do script a seguir, a exibio de uma mensagem, informando o que ser digitado na caixa de texto assim que o usurio clicar no boto: <form name=form1"> <pre> Digite seu Nome: <input type=text name=campo1"> <input type=button value=Clique Aqui onClick=alert(Voc digitou +form1.campo1.value)> </form>
198
OBJETO CHECKBOX (CAIXA DE VERIFICAO)

Esse objeto cria uma lista onde o usurio poder marcar vrias opes. Sua sintaxe equivalente s dos objetos de formulrio anteriormente apresentadas. Propriedade Esse objeto uma propriedade do objeto form form. Veja, abaixo, a relao das propriedades existentes para o objeto checkbox checkbox: PROPRIEDADES name value status defaultStatus DESCRIO Contm o contedo do atributo name name. on off Contm o valor on ou off que determina o estado on off da caixa. Valor booleano que determina o estado da caixa, selecionado (True) ou no-selecionado (False). Valor booleano que indica o estado padro do boto.
Manipuladores de Evento MTODO click() EVENTO onClick DESCRIO Executa uma instruo assim que o usurio clica sobre o elemento.
Os botes de formulrio do tipo checkbox so botes que o usurio pode ativar e desativar O atributo checked determina o estado default da caixa de verificadesativar ar. heck o. Essa propriedade assume valores booleanos: quando ativada, assume o valor true e desativada, o valor false false.
199
Exemplo
O exemplo mostra um formulrio, no qual, se as opes 1, 2 e 4 estiverem marcadas, ele retorna que a resposta correta; se no, retorna um aviso que a resposta est errada. <HTML> <HEAD> <script language=javascript> function resposta(form4) { if ( (form4.check1.checked) == true && (form4.check2.checked) == true && (form4.check3.checked) == false && (form4.check4.checked) == true) { alert( a resposta correta! ) } else { alert(Errado! Continue a tentar.) } } </SCRIPT> </HEAD> <BODY> Cheque as suas escolhas: <FORM NAME=form4"> <INPUT TYPE=CHECKBOX NAME=check1" VALUE=1">Escolha nmero 1<BR> <INPUT TYPE=CHECKBOX NAME=check2" VALUE=2">Escolha nmero 2<BR> <INPUT TYPE=CHECKBOX NAME=check3" VALUE=3">Escolha nmero 3<BR> <INPUT TYPE=CHECKBOX NAME=check4" VALUE=4">Escolha nmero 4<BR> <INPUT TYPE=buttonNAME=but VALUE=Corrigir onClick=resposta(form4)> </FORM> </BODY> </HTML>
200
EXERCCIOS
Utilizando o Kwrite para digitar o seu cdigo, faa o seguinte exerccio: 1) Elabore um exerccio de mltipla escolha com questes de Matemtica. 2) Monte um formulrio com as questes, utilizando o checkbox para cada opo. Assim que o aluno clicar em uma das opes, chame uma funo JavaScript que testar se a resposta da questo est correta ou no. 3) 4) Salve o arquivo como checkbox.html checkbox.html. Teste seu script no navegador.
OBJETO RADIO
Diferente do checkbox que permite mltipla escolha das opes listadas, o objeto radio cria, tambm, uma lista de opes. Porm, voc poder escolher apenas uma nica opo. Sua sintaxe segue os mesmos parmetros dos objetos anteriores.
Exemplo
<HTML> <HEAD> <SCRIPT language=javascript> function escolhaprop(form3) { if (form3.escolha[0].checked) { alert(A proposio + form3.escolha[0].value) }; if (form3.escolha[1].checked) { alert(A proposio + form3.escolha[1].value) }; if (form3.escolha[2].checked) { alert(A proposio + form3.escolha[2].value) }; } </SCRIPT>
201
</HEAD> <BODY> Escolha : <FORM NAME=form3"> <INPUT TYPE=radio NAME=escolha VALUE=1">Escolha nmero 1<BR> <INPUT TYPE=radio NAME=escolha VALUE=2">Escolha nmero 2<BR> <INPUT TYPE=radio NAME=escolha VALUE=3">Escolha nmero 3<BR> <INPUT TYPE=buttonNAME=but VALUE=Qual sua escolha ? onClick=escolhaprop(form3)> </FORM> </BODY> </HTML>
OBJETO SELECT
Muito comum, esse objeto representa uma lista de opes que o usurio poder selecionar. Com ele, o usurio poder determinar uma seleo nica ou mltipla. O objeto select ir permitir que o usurio controle os itens de uma lista de opes criada com o Tag HTML <SELECT>. Veja um exemplo de sua utilizao: <HTML> <HEAD> <TITLE>CHECAGEM DE DADOS</TITLE> <script language=javascript> function itens(){ alert(form1.lista.selectedIndex); } </script> <form name=form1"> <pre>
202
<select name=lista> <option>Item 0 <option>Item 1 <option>Item 2 <option>Item 3 <option>Item 4 </select> <input type=button onClick=itens() value=veja> </FORM> </head> <body> </body></html> A propriedade selectedIndex informa qual dos itens da lista foi selecionado pelo usurio. Veja, abaixo, outro exemplo que evidencia o momento quando o usurio precisa selecionar um dos itens e o valor da opo redireciona para uma determinada URL: function acessa(texto){ window.location.href=texto; } Foi criada uma funo que possui uma varivel como argumento que armazenar o valor de uma opo da lista de seleo. <select name=lista onChange=acessa(lista.options[selectedIndex].value)> <option value=http://www.mg.senac.br>Senac <option value=http://www.sp.senac.br>SenacSp </select>
EXERCCIOS
Utilizando o Kwrite para digitar o seu cdigo, faa o seguinte exerccio: 1) Crie uma pgina com uma relao de cinco Sites de estudo de diferentes reas (Fsica, Qumica, Portugus, Geografia e Matemtica).
203
2) Faa um campo de formulrio do tipo select atravs do qual, ao ser selecionado um dos Sites do campo, o usurio seja redirecionado para sua respectiva pgina. 3) Salve o arquivo como select.html. 4) Teste seu script no navegador.
LOCATION OBJETO LOCATION

Esse o ltimo objeto que vamos trabalhar. Ele bem interessante por conter informaes sobre a URL (endereo) da pgina. Cada propriedade do objeto location representa uma parte diferente do endereo. A sintaxe utilizada para esse objeto possui a seguinte composio: http:// www.endereco.com.br/nome_pgina, ou seja, protocolo, endereo do servidor, seguido da pgina que deseja carregar, caso necessite. Para definir as propriedades do objeto location siga a seguinte sintaxe: location, window.location Caso o objeto location esteja fazendo referncia janela corrente (atual), no necessrio utilizar o objeto window Caso o usurio deseje voltar URL da janela window. corrente (atual), basta utilizar o seguinte comando: location.href; // URL da janela corrente. location.host; // Parte da URL. Veja o exemplo de um hiperlink usado em um boto de formulrio: <HTML> <HEAD> <TITLE>BOTO</TITLE></HEAD> <FORM NAME=form1> <input type=button value=SENAC-MG onClick=window.location. href=http:// www.mg.senac.br/> </form> </body> </html>
204
EXERCCIOS
1) Crie uma pgina que permita ao usurio digitar seu nome e, em seguida, ao clicar sobre o boto OK seja exibida uma caixa com a seguinte OK, mensagem: Ol <nome digitado>, seja bem vindo ao nosso dicionrio online! Em seguida, escolha, no dicionrio, algumas palavras que so menos usadas no dia-a-dia e faa links com essas palavras para que, no momento em que o usurio clicar sobre cada um desses links, seja exibida uma caixa de mensagem com o significado da palavra escolhida. 2) Agora, crie, dentro de um script uma funo chamada exibe e, como script, argumento para essa funo, defina a varivel (texto Desenvolva, texto). texto para essa rotina, uma caixa de alerta que apresente o seguinte texto: Ol texto Seja Bem vindo! Agora so: hh:mm 3) No corpo da pgina, crie um campo de formulrio do tipo Texto que xto execute a funo, atribuindo varivel definida o valor digitado pelo usurio assim que ele retirar o foco do campo de texto. 4) Crie dois campos de texto e um boto que permita, quando o usurio digitar um nmero em cada um dos campos e clicar em um boto, que seja exibida a soma dos dois nmeros. 5) Crie uma pgina com dois campos de texto e quatro botes que permitam o usurio escolher quais das quatro operaes matemticas ele deseja executar. E, ao digitar os dois valores nos campos de texto, que o usurio tenha o resultado do clculo escolhido. 6) Crie, em uma pgina HTML quatro campos de formulrio do tipo radio HTML, e, em seguida, atribua um evento que faa com que, ao escolher um
205
dos botes presentes, seja alterada a cor de fundo a pgina, como no no exemplo a seguir: Azul Vermelho Amarelo Cinza
Parabns!
Agora, com os comandos JavaScript na ponta dos dedos, pginas inteligentes e sofisticadas sero criadas por voc num piscar de olhos!
206
BIBLIOGRAFIA
FLANAGAN, David. JavaScript: o Guia Definitivo. 5 edio. Ed. Bookman, 2006, 1099p. LIMA, Adriano Gomes. Javascript aplicaes interativas para a Web. Belo Javascript: Horizonte, Apostila Pessoal, 2000. McCOMB, Gordon. JavaScript Sourcebook. So Paulo: Ed. Makron Sourcebook Books, 1997, 735p. http://pt.wikipedia.org/wiki/JavaScript http://www.htmlstaff.org/secao.php?id=14
207
208

H T M L
PLANO DE TRABALHO JAVASCRIPT

209
Caro professor, Voc est participando de um projeto da Secretaria de Educao, que tem como objetivo apresentar as possibilidades da informtica na educao, fazendo com que voc se familiarize com diferentes aplicativos e utilize-os em sala de aula, buscando tornar as suas aulas mais interessantes, criativas e de fcil entendimento. Vrias ferramentas sero trabalhadas nesse projeto. Neste momento, voc aprender a tornar as pginas HTML mais dinmicas e interativas atravs dos conhecimentos sobre a linguagem JavaScript Quando conclu-lo, voc estar apto a utilizar todos os JavaScript. recursos para permitir maior interativadade nas pginas para Internet, alm de multiplicar este curso aos seus alunos, ensinando-os a elaborar trabalhos de forma muito mais interessante. Procure utilizar o computador para planejar as suas aulas, organizar e apresentar contedos em sala, para pesquisas, elaborao de material didtico etc. Quanto mais utiliz-lo, mais estar familiarizado com o recurso e descobrir, cada vez mais, possibilidades de aplicao. importante que, ao utilizar a informtica nas suas aulas, as orientaes repassadas aos alunos sejam bem claras e as atividades bem direcionadas. Defina os temas, objetivos, o tempo de trabalho, metodologia. Em caso de pesquisas na Internet, faa uma relao de sites de busca, de temas especficos, imagens etc. Defina, tambm, o resultado esperado, evitando, assim, a disperso da turma e garantindo objetividade no trabalho. A seguir, foi disponibilizado um Plano de Trabalho para orient-lo no repasse do curso aos seus alunos. Nele, constam os contedos que devem ser abordados, sugesto de carga horria, dicas de metodologia e recursos didticos. Durante o curso, podem surgir vrias idias de utilizao da ferramenta em sala de aula. No deixe de anot-las e discutir outras possibilidades com os colegas e instrutor. Aproveite o curso! Sucesso!
QUADRO 01
1h
Exposio dialogada Dinmica de apresentao
Recursos Didticos
Laboratrio de Informtica com JAVASCRIPT Quadro branco/negro Pincis Apostila Informtica Bsica Peas de hardware para demonstrao ao aluno, como funcionam o processador, memria RAM e HD.
1. Apresentao do Instrutor e Alunos 2. Apresentao Geral do Curso Metodologia de trabalho adotada no curso Critrios de Aprovao no curso
3. Informtica Bsica Na Era da Informatizao Componentes do Computador Perifricos Modem / Fax-modem Estabilizador Nobreak Sistema Operacional Conceitos e Convenes Arquivos e Pastas (viso geral) Armazenando Dados em um Computador Rede Internet Metasys Iniciando os aplicativos do Metasys Introduo ao OpenOffice Writer Introduo ao OpenOffice Calc Solues para Alguns Problemas da Informtica Qualidade de Vida no Trabalho Equipamentos
3h
Exposio dialogada avaliao diagnstica para verificar o nvel de conhecimento da turma sobre o tema. Demonstrao O instrutor deve demonstrar todos os procedimentos necessrios Prtica Supervisionada Todos os alunos devem colocar em prtica os procedimentos abordados, sob a superviso do instrutor.

Antes de iniciar a sua aula de informtica, verifique: O laboratrio est em condies adequadas? O nmero de computadores suficiente para a turma? O programa est instalado e funcionando adequadamente? A Internet est funcionando? O material didtico est disponvel para a turma? Tem giz/pincel e apagador disponveis?
DICA
No se esquea de planejar a sua aula!!! Pense em atividades extras para aqueles alunos com melhor desempenho. Talvez eles possam atuar como monitores, ajudando os outros colegas nas atividades e tirando dvidas.
Item 1 - Apresentao do Instrutor e Alunos

Cumprimente a turma e se apresente, dizendo o seu nome, em que rea atua, quais disciplinas ministra. Isso facilita a relao com a turma e diminui a distncia entre vocs. Para a apresentao dos alunos, pea turma que formem duplas. D a eles um tempo aproximado de 5 minutos para se conhecerem. Posteriormente, pea que um apresente o outro.
Item 2 - Apresentao Geral do Curso

Fale sobre o curso que ir ministrar (JavaScript fazendo um breve JavaScript), JavaScript resumo a respeito das suas funes e do que possvel criar, utilizando essa linguagem. Como este curso ser uma seqncia do HTML, aproveite para perguntar turma como foi o aprendizado no curso anterior e faa perguntas sobre alguns Tags para identificar o nvel de conhecimento dos participantes sobre o assunto.
Conte aos alunos como ser o curso, as formas que utilizar para ensinar. Diga que imprescindvel que tenham disciplina e se envolvam nas atividades propostas. Previso
Horria Diga que haver momentos em que a exposio dialogada ser necessria, que haver muita prtica e resoluo de exerccios, buscando aplicar o software realidade vivenciada em sala de aula. Carga
Fale a respeito das facilidades da linguagem sempre reforando a necessidade de colocar em prtica tudo que ser ministrado durante o curso, afinal uma linguagem de desenvolvimento para ser aplicada, para no esquecermos como utilizar as ferramentas. Diga que a participao nas aulas imprescindvel para que realmente ocorra o aprendizado e que, quando houver dvidas, basta solicitar o seu auxlio. importante informar aos alunos que somente sero aprovados se obtiverem freqncia mnima de 75% (caso aplicvel). Se no obtiverem esse resultado, no recebero o certificado de concluso.
Item 3 Informtica Bsica

Faa um levantamento na turma das pessoas que tm conhecimentos de informtica, perguntando se j fizeram algum tipo de curso, se sabem utilizar o computador, buscando identificar o grau de conhecimento para iniciar o assunto. Aproveite a oportunidade e verifique se os alunos conhecem o JavaScript. Converse com eles sobre as situaes em que pode ser utilizado e pea sugestes de temas para desenvolvimento de atividades durante o curso. Fale sobre os conceitos bsicos da informtica, apresentando as partes do computador (CPU, monitor, teclado, mouse etc), procurando demonstrar como deve ser a sua utilizao. Mostre aos alunos como o computador deve ser ligado e desligado, como se faz para abrir e criar pastas, abrir programas, acessar sites etc, permitindo a eles que exercitem todos os procedimentos.
Mostre as peas do hardware para eles, para eles visualizarem onde ficam armazenados os dados e o que faz o computador processar as informaes. Explore os dispositivos de entrada e sada e a importncia deles no dia a dia do professor Fale sobre as dificuldades que normalmente encontramos na utilizao do computador e seus perifricos Destaque a utilizao dos aplicativos Metasys. Procure nivelar os conhecimentos entre a turma, esclarecendo as dvidas que surgirem durante a aula. Demonstre todos os procedimentos aos alunos e no se esquea de deix-los praticar, pois a prtica imprescindvel para que o aprendizado realmente acontea.
QUADRO 02
2h
Exposio dialogada, citando exemplos de pginas HTML com uso do JavaScript
Recursos Didticos
Laboratrio de Informtica com Linux, KWrite e Mozzila Firefox instalados com acesso Internet Quadro branco/ negro e pincis Apostila JavaScript
4. Introduo O que a Linguagem JavaScript Java e JavaScript: Conceitos e diferenas
5. JavaScript: Linguagem Orientada a Objetos Orientao a Objetos Manipulao de Objetos Tipos de Propriedades Mtodos dos Objetos Eventos
3h
Exposio dialogada

Oriente aos alunos quanto: A real necessidade de utilizar esta linguagem. Fale de outras linguagens similares e qual a importncia de se usar JavaScript em determinadas pginas HTML. Exemplifique bem os conceitos de propriedades e mtodos, deixando claro a diferena entre eles e suas formas de utilizao.
Item 4 - Introduo
Fale sobre as caractersticas da linguagem, fazendo uma apresentao a respeito da mesma (para que serve, em que tipos de pginas pode ser utilizada etc.). Fale um pouco a respeito das linguagens da Web, comparando o JavaScript com outras similares. Use os exemplos citados na apostila para trabalhar em sala. Com base nesses exemplos, voc pode criar outros, se achar necessrio. Na apostila, h um exemplo de exerccio de fsica com questes de mltipla escolha que pode ser criado em uma pgina. Nesse momento, ele apenas um exemplo, mas posteriormente poder ser desenvolvido em sala por voc ou pelos seus alunos. Falaremos mais sobre isso um pouco mais a frente.
Item 5 - JavaScript Linguagem Orientada a Objetos

Fale o que significa uma linguagem que utiliza Orientao a Objetos. D exemplos do que so objetos da linguagem, explicando tambm o que so propriedades, mtodos e eventos dos objetos. Na apostila, h muitos exemplos que podero ser utilizados e o ajudaro a compreender melhor o assunto. Sugesto de atividade: pea aos alunos para citarem 3 objetos e descreverem 5 propriedades e 5 mtodos de cada um. Isso ir facilitar o entendimento de cada um deles.
QUADRO 03
4h
Exposio dialogada Demonstrao Prtica Supervisionada Resoluo de Exerccio na apostila
Recursos Didticos
6. Estrutura da Linguagem Variveis Nomes de Variveis Desenvolvimento de Scripts
7. Comandos Bsicos Mtodo document.write() Mtodo alert() Mtodo confirm() Mtodo prompt()
4h
Exposio dialogada Demonstrao Prtica Supervisionada Resoluo de 2 (dois) Exerccios na apostila

Demonstre como iniciar um script da linguagem, destacando cada um dos passos para desenvolvimento e lembrando que ele estar inserido em uma pgina HTML.
Item 6 Estrutura da Linguagem

Nesse momento, voc ir ensinar a turma o conceito sobre variveis, mostrando os tipos existentes na linguagem JavaScript e sua forma de aplicao. Esse contedo bastante terico, mas a partir dele j possvel comear escrever os comandos e ver alguns resultados nas pginas, conforme exemplos na apostila.
Aproveite o exemplo e execute-o juntamente com os seus alunos. No exerccio proposto, pea turma que busque informaes a respeito do Brasil, na Internet, conforme descrio na apostila, e crie uma pgina utilizando os cdigos vistos at o momento.
Item 7 Comandos Bsicos

Utilize o quadro para dar exemplos dos comandos bsicos utilizados na linguagem. Durante a aula, crie pginas para mostrar aos alunos como devem utilizar os comandos bsicos para que mensagens de alerta possam ser exibidas na pgina. Os alunos devem seguir os mesmos procedimentos junto com voc, colocando em prtica todas as etapas abordadas. Na apostila, h sugestes de exerccios para serem realizados pelos alunos. Nesse momento j possvel perceber os efeitos do JavaScript nas pginas da Internet.
QUADRO 04
5h
Exposio dialogada Demonstrao Prtica Supervisionada Resoluo de Exerccios na apostila
Recursos Didticos
8. Comandos Condicionais e de Repetio Instruo If.... else Instruo While Instruo Switch
9. Funes
Exposio dialogada Demonstrao Prtica Supervisionada: atravs de exemplos na apostila que os alunos devero colocar em prtica

Explique a necessidade da utilizao de comandos condicionais e repetio. Demonstre as diferenas entre os principais comandos desta categoria.
Item 8 Comandos Condicionais e Repetio

Mostre como formada a sintaxe dos comandos condicionais e de repetio. Mostre como fazer as expresses condicionais. Explique em que situaes devemos utilizar cada um destes comandos. Crie situaes onde cada um dos alunos raciocine sobre as melhores opes para uma determinada condio.
Item Funes It em 9 Funes

Mostre no quadro e no computador como declarar e utilizar uma funo em JavaScript JavaScript. Explique porque deve utilizar as funes. Explique sobre a reutilizao de cdigo que uma funo permite. Baseando-se nos exemplos citados na apostila, voc poder criar outros para serem aplicados em sala de aula.
QUADRO 05
6h
Exposio dialogada Demonstrao Resoluo de Exerccio na apostila
Recursos Didticos
Laboratrio de Informtica com Linux, KWrite e Mozzila Firefox instalados com acesso Internet Quadro branco/negro e pincis Apostila JavaScript
10. Outros Objetos do JavaScript Objeto DATE Mtodos do objeto DATE: Mtodos GET, Parse e UTC, to GMTString, tolocal e String
11. Manipulao de Janelas e Formulrios Objeto WINDOW
4h
Exposio dialogada Demonstrao Resoluo de 1 Exerccio em sala de aula Sugesto de exerccio para ser realizado em ambiente externo (VER APOSTILA)
Objeto FORM Objeto TEXT Objeto PASSWORD Objeto TEXTAREA Objeto CHECKBOX
3h
Demonstrao atravs de exemplos Resoluo de Exerccio na apostila
Demonstrao atravs de Objeto RADIO Objeto SELECT exemplos Resoluo de Exerccio na apostila Objeto LOCATION 1h Demonstrao atravs de exemplos Resoluo de Exerccio na apostila
contedos Todos os contedos abordados
4h
Trabalho em grupo: Divida a turma em grupos de 3 participantes. Pea-os que planejem e construam uma pgina que permita fazer clculos bsicos de uma calculadora ou escolha um tema da apostila caso necessrio. O intrutor deve dar o suporte para os grupos, porm deixando que eles raciocinem sozinhos, o mximo possvel.
Encerramento do Curso Avaliao do Curso
Verificao de atendimento s expectativas da turma.
Formulrios de avaliao do curso pelo aluno.

Para melhor assimilao do uso do Objeto Date, voc pode propor, ainda no final deste contedo, a criao de uma agenda de compromissos diria que, conforme o horrio acessado, seja exibida uma mensagem de alerta informando um determinado compromisso.
Item 10 Outros Objetos do JavaScript

Mostre como utilizar o Objeto Date para extrair e exibir datas e horas. Para exemplificar melhor, pea aos alunos que crie duas variveis e, em cada uma delas, solicite-os que guardem a data atual e a data de nascimento. Explique sobre os diferentes mtodos do Objeto Date e sua forma de aplicao. Deixe claro aos alunos que, atravs dos mtodos do objeto Date, possvel extrair valores separados de uma data como dia, ms e ano.
Pea-os novamente para criar duas variveis e, em cada uma delas, guardar o ano atual e o ano de nascimento e, em seguida, pea-os para exibir, na tela, uma caixa de alerta informando a sua idade. Aps entendimento e prtica do uso do objeto Date e seus mtodos, pea aos alunos para criar uma pgina que permita exibir a data atual, seguindo o padro brasileiro. Na apostila, h sugestes de exerccios para serem realizados pelos alunos.
Item 11 Manipulao de Janelas e Formulrios

Neste item, explique para os alunos sobre o uso de outros objetos do JavaScript que permitem manipular janelas (pop-ups) e Formulrios HTML. Pea-os que entrem em alguns sites conhecidos e mostre a necessidade do uso destes recursos, demonstrando pginas que fazem seu uso. Fale dos bloqueadores de pop-ups. Aps entendimento e demonstrao do uso de pop-ups, proponha a criao de um pequeno lbum de fotografias ou dicionrio onde, atravs da Internet, eles possam buscar algumas destas informaes e, logo mais, pea-os que criem links que ao serem clicados sejam exibidas uma nova janela com informaes e/ou detalhes do item clicado. Na apostila, h sugestes de exerccios para serem realizados pelos alunos. O segundo exerccio pode ser adaptado a sua disciplina, podendo solicitar turma uma pesquisa sobre determinado assunto que dever ser divulgado nesse formato, podendo ser salvo na Internet ou CD. Na seqncia deste tpico, inicie-o, relembrando aos alunos o que so e para que servem os campos de formulrio, deixando claro que estes so criados atravs da linguagem HTML. Pea-os que crie um formulrio de cadastro de currculos, permitindo assim, a utilizao de todos os tipos de campos j apresentados no curso de HTML. Gradativamente aps a criao de um determinado conjunto de campos, v explicando a importncia de usar a linguagem JavaScript nos campos j criados no formulrio de cadastro de currculos.
Na apostila, aps o objeto Checkbox, h sugesto de um exerccio para ser realizado pelos alunos. importante que voc, professor, realize-o antes para tirar as suas dvidas e ter segurana para orientar a turma. Na apostila, foi sugerida a criao de um exerccio de matemtica, que pode ser alterado para Geografia, Fsica etc. Na apostila, h um exerccio final onde o aluno poder executar vrios recursos vistos durante o curso. Atravs dele, voc poder verificar o aprendizado da turma, orientando e tirando as dvidas existentes. Voc poder propor tambm, aps realizao do exerccio proposto na apostila uma atividade para os alunos, desafiando-os a criar uma pgina que simule uma calculadora. A atividade pode ser desenvolvida em grupo ou individualmente. Caso queira, voc poder, tambm, alm da atividade da calculadora, optar pela realizao da ltima atividade presente na apostila que cria um dicionrio on-line. Permita que os alunos abusem da criatividade, deixando que eles possam ter liberdade de definir qual o melhor comportamento para navegar em suas pginas ou voc poder dar sugestes queles que esto com dificuldades de pensar em uma maneira de navegao adequada. Veja qual a melhor alternativa.
Encerramento do Curso
Termine o curso agradecendo aos alunos pela ateno e destacando o bom trabalho e desempenho dos mesmos. Diga que agora esto aptos para desenvolver pginas com maior interatividade. Basta tentar!

Construção de Web Sites HTML e Javascript - 2

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

Construção de Web Sites HTML e Javascript - 2

Enviado por

Direitos autorais:

Formatos disponíveis

CONSTRUO DE WEB SITES HTML E JAVASCRIPT

BELO HORIZONTE - 2009

Criando Pginas na Web, 11

Documento 17 Iniciando um Documento HTML, 17

Pargraf 31 argrafo, Estilos de Cabealho e P argraf o, 31

Inserindo Imagens em Documentos HTML <IMG>, 45

Trabalhando Hiperlinks Trabalhando com Vnculos, 55

Tabelas, Utilizando Tabelas, 73

Trabalhando com Formulrios, 95 Formulrios,

Bibliografia, 117 Bibliograf ia, 117 Anexo

CONSTRUO DE WEB SITES

Jav Objet 14 Ja v aScript Linguagem Orientada a Obje tos, 1 41

Estrutura da Linguagem, 149

Comandos Bsicos, 155

Comandos Condicionais e de Repetio, 163

Outros Objet Jav 17 Outr os Obje t os do Ja v aScript, 17 7

Manipulaes de Janelas e Formulrios, 187

Bibliografia, 207 Bibliograf ia, 207 Anexo

CONSTRUO DE WEB SITES HTML

CONSTRUO DE WEB SITES

CRIANDO PGINAS NA WEB

CONSTRUO DE WEB SITES - HTML

PASSADO... UMA PEQUENA VIAGEM AO PASSADO...

IMPLEMENTADAS PELO NORMAS IMPLEMENTADAS PELO HTML

FORMAO INICIAL PARA O TRABALHO

TIPOS DE EDITORES DE PGINAS HTML

CONSTRUO DE WEB SITES - HTML

HIPERVNCULOS HIPERTEXTOS E HIPERVNCULOS (LINKS)

FORMAO INICIAL PARA O TRABALHO

CONSTRUO DE WEB SITES

INICIANDO UM DOCUMENTO EM HTML

CONSTRUO DE WEB SITES - HTML

FORMAO INICIAL PARA O TRABALHO

VISUALIZAO DA ESTRUTURA BSICA DE UM DOCUMENTO HTML

CONSTRUO DE WEB SITES - HTML

COMANDOS DA LINGUAGEM: TAGS

FORMAO INICIAL PARA O TRABALHO

Vazio Tag Vazio

CONSTRUO DE WEB SITES - HTML

<IMG SRC = /figuras/ola.gif>

FORMAO INICIAL PARA O TRABALHO

PRINCIPAL ESTRUTURA PRINCIPAL DE UMA PGINA

CONSTRUO DE WEB SITES - HTML

FORMAO INICIAL PARA O TRABALHO

SALV SUA SALVANDO SUA PGINA

CONSTRUO DE WEB SITES - HTML

UTILIZANDO O TAG DE PARGRAFO <P>

FORMAO INICIAL PARA O TRABALHO

CONSTRUO DE WEB SITES - HTML

FORMAO INICIAL PARA O TRABALHO

CONSTRUO DE WEB SITES

ESTILOS DE CABEALHO E PARGRAFO

CONSTRUO DE WEB SITES - HTML

FORMAO INICIAL PARA O TRABALHO

melhor... Entendendo melhor...

CONSTRUO DE WEB SITES - HTML

FORMAO INICIAL PARA O TRABALHO

CONSTRUO DE WEB SITES - HTML

ATRIBUTO COLOR SOBRE O ATRIBUTO COLOR

FORMAO INICIAL PARA O TRABALHO

CORES DE FUNDO <BODY>

CONSTRUO DE WEB SITES - HTML

TAGS MAIS UTILIZADOS (RESUMO)