Construcao de Web Sites HTML e Javascript 2 PDF

CONSTRUÇÃO
DE WEB SITES
HTML E
JAVASCRIPT
50.01.01.94.021.02.0
Governador
Aécio Neves da Cunha
Secretária de Estado de Educação

Vanessa Guimarães Pinto
Secretário Adjunto de Educação

João Antônio Filocre Saraiva
Chefe de Gabinete
Felipe Estábile 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
Sônia Andère Cruz
Subsecretária de Desenvolvimento da Educação Básica

Raquel Elizabete de Souza Santos
Superintendente de Ensino Médio e Profissional

Joaquim Antônio Gonçalves
COORDENAÇÃO DO PROJETO
Superintendência Educacional Senac Minas
SUPERVISÃO PEDAGÓGICA
Flávia Alves de Almeida
RSC – Gerência de Soluções Corporativas/Senac Minas
ELABORAÇÃO DO CONTEÚDO
Adriano Gomes Lima
REVISÃO TÉCNICA
WR3 EAD Consultoria
EDITORAÇÃO
Setor de Material Didático – SEMD/Senac Minas
REVISÃO LINGÜÍSTICA/TRATAMENTO METODOLÓGICO

Setor de Material Didático – SEMD/Senac Minas
PROJETO GRÁFICO
Cézar Alves de Mariano
RAI/Senac Minas BELO HORIZONTE - 2009
APRESENTAÇÃO
APRESENTAÇÃO
Considerando a magnitude do contingente de jovens mineiros submetidos a

condições adversas de vida que afetam negativamente sua trajetória escolar,
tornou-se imperativo ao Governo de Minas elaborar e implementar políticas públicas
especialmente destinadas a eles.
Na educação, o Programa de Educação Profissional de MG (PEP), sintonizado com
as vocações econômicas regionais e destinado à preparação dos jovens para
enfrentar os desafios do mundo do trabalho, é uma expressão concreta dessas
políticas. O pressuposto desse Programa é que os jovens são sujeitos de direitos e
portadores de capacidades e potencialidades das quais a sociedade não pode
prescindir.
As altas taxas de abandono e evasão e a baixa taxa de conclusão do ensino médio
são evidências de que a escola está muito longe de corresponder às expectativas
desses jovens. Agregar à sua formação básica a possibilidade de formação profis-
sional é uma das medidas indispensáveis para tornar a escola mais alinhada com
os seus interesses e necessidades.
A inclusão de cursos de preparação inicial para o trabalho na parte diversificada
do currículo do ensino médio é parte desse Programa e constitui um esforço de
transformação desse nível de ensino nas escolas estaduais de Minas. Para isso, a
SEEMG desenvolveu nove cursos na área de informática, todos com duração entre
40 a 80 horas. São eles: Sistema Operacional Linux, Editoração Eletrônica - Draw e
Scribus, Construção de Web Sites - HTML e Java Script, Programação em Java,
Introdução a Banco de Dados - MySQL, Gimp, Computação Gráfica - Blender, Projeto
Auxiliado por Computadores QCAD, Multimídia na Educação - Impress.
Os cursos serão ministrados pelos próprios professores das escolas estaduais,
das várias disciplinas do currículo, especialmente preparados por um programa
de capacitação implementado pela SEEMG, o que amplia as suas possibilidades
de trabalho na escola e de desenvolvimento profissional.
SUMÁRIO
CONSTRUÇÃO DE WEB SITES
HTML
Criando Páginas na Web, 11
Uma Pequena Viagem ao Passado..., 13
Normas Implementadas pelo HTML, 13
Glossário, 14
Tipos de Editores de Páginas HTML, 14
Hipertextos e Hipervínculos (Link’s), 15
Exercícios, 16
Iniciando um Document
Documentoo HTML, 17
17
Estrutura da Página, 19
Exercícios, 20
Comandos da Linguagem: Tag’s, 21
Tipos de Tag’s, 22
Atributos de Tag’s, 23
Estrutura Principal de uma Página, 24
Salvando sua Página, 26
Utilizando o TAG de Parágrafo <P>, 27
Exercícios, 29
Estilos de Cabeçalho e P arágraf

Parágraf o, 3
arágrafo, 311
Tag <FONT>, 34
Exercícios, 36
Sobre o Atributo Color, 37
Exercícios, 38
Cores de Fundo <BODY> , 38
Exercícios, 39o
Tag’s mais utilizados (Resumo), 3911
Inserindo Imagens em Documentos HTML <IMG>, 45
Alinhamento de Imagens e Texto na Página, 48
Redimensionamento de Imagens, 49
Exercícios, 51
Hiperlink’s – TTrabalhando
rabalhando com Vínculos, 55
Tipos de URL’s , 57
Criando Link’s de Arquivos Locais <A>, 58
Criando Link’s para Imagens, 60
Tag’s mais Utilizados (Resumo), 61
Exercícios, 62
Criando Listas, 65
Tipos de Listas, 67
Exercícios, 71
Utilizando TTabelas,
abelas, 73
Tag <TABLE>, 76
Tag de Linha <TR>, 76
Tag de Célula <TD>, 77
Atributos da Tabela, 80
Exercícios, 84
Exercícios, 93
Trabalhando com FFormulários,

ormulários, 95
Campos de Formulário <INPUT>, 97
Criando Caixas de Texto, 98
Campos de Senha, 100
Botões de Radio, 101
Caixas de Seleção, 103
Lista de Opções <SELECT>, 106
Transmitindo Dados do Formulário, 109
Exercícios, 113
Guia de Referência Rápida, 115
Bibliograf ia, 11
Bibliografia, 1177
Anexo
JAVA SCRIPT
Introdução, 135
O que é a Linguagem JavaScript?, 137
Java e JavaScript: Conceitos e Diferenças, 139
Ja
Javv aScript – Linguagem Orientada a Obje
Objettos, 1
1441
Orientação a Objetos, 143
Manipulação de Objetos, 144
Tipos de Propriedades, 144
Métodos dos Objetos, 146
Eventos, 147
Estrutura da Linguagem, 149

Variáveis, 151
Desenvolvimento de Script’s, 152
Exercícios, 154
Comandos Básicos, 155

Método Document.Write(), 157
Método Alert(), 157
Exercícios, 158
Método Confirm(), 159
Exercícios, 161
Método Prompt(), 161
Comandos Condicionais e de Repetição, 163

Instrução If ... Else, 165
Exercícios,
Instrução While, 167
Instrução Switch, 169
Exercícios, 170
Funções, 1
1771
Exercícios, 176
Outr os Obje
Outros Objett os do Ja
Javv aScript, 177
17
Objeto Date, 179
Métodos do Objeto Date, 179
Exercícios, 185
Manipulações de Janelas e Formulários, 187

Objeto Window, 189
Exercícios, 193
Objeto Form, 194
Objeto Text, 196
Objeto Password, 197
Objeto Textarea, 198
Objeto Button, 198
Objeto Checkbox (Caixa de Verificação), 199
Exercícios, 201
Objeto Radio, 201
Objeto Select, 202
Exercícios, 203
Objeto Location, 204
Exercícios, 205
Bibliograf ia, 20
Bibliografia, 2077
Anexo
CONSTRUÇÃO
DE WEB SITES
HTML
H T M L
CRIANDO
PÁGINAS NA
WEB
11
1
Criando
Páginas
na WEB
CONSTRUÇÃO DE WEB SITES - HTML
Prepare-se! A partir de agora, você vai aprender tudo sobre como criar uma página na
Internet. O primeiro passo para isso é entender o que é a linguagem HTML (Hypertext
Hypertext
Markup Language
Language)..
Vamos lá?
Sites da Internet, terá que conhecer a principal
Para que você construa os famosos Site
linguagem de criação dessas páginas: a HTML. Apesar de muitas pessoas pensarem
que essa linguagem é fraca ou ultrapassada, em função de outras tecnologias mais
avançadas que foram criadas, saiba que a HTML oferece a base para qualquer outra
tecnologia mais usual que existe atualmente.
Um profissional que desenvolve páginas, utilizando linguagens como ASP ou PHP, que
são dinâmicas para o desenvolvimento de comércio eletrônico (e-commerce), ou
JavaScript para criar uma simples calculadora, por exemplo, não conseguiria jamais
criar tais páginas sem os conhecimentos básicos da linguagem HTML
HTML.
UMA PEQUENA VIAGEM AO PASSADO...

PASSADO...
No princípio, a linguagem HTML foi desenvolvida para fins de divulgação de dados
(textos) e catálogos. Porém, ninguém poderia imaginar que a Internet dominaria a área
da multimídia, agregando áudio e vídeos. Assim, a linguagem se fortaleceu durante o
avanço da tecnologia e, com isso, acabou recebendo padrões internacionais de confor-
midade que definem suas regras de utilização. Esses padrões são aqueles mesmos
padrões de qualidade das empresas como, por exemplo, a ISO 9001. O último padrão
criado para a linguagem HTML foi o 4.01, em dezembro de 1999.
NORMAS IMPLEMENTADAS PEL

IMPLEMENTADAS O HTML
PELO
Veja, abaixo, quais são os padrões internacionais de conformidade:
SGML – Standard Generalized Markup Language (Padrão ISO 8879) :
é uma metalinguagem na qual podem ser definidas linguagens de formatação
para documentos. Apesar de não ter sido desenvolvido para Hipertextos,
esse padrão é muito útil para descrever ligações e para transformar docu-
mentos em Hiperobjetos.
HyTime Hypermedia/Time-based Strtucturing Language (ISO

10744:1992) : define um conjunto de tipos de elementos que permite
13
FORMAÇÃO INICIAL PARA O TRABALHO
que autores de documentos SGML elaborem apresentações, utilizando

multimídia e hipertexto de uma forma padronizada.
Na verdade, um documento HTML será visto como um conjunto de comandos

que são executados durante seu tempo. Independente dos padrões utilizados
pelos processadores de textos em geral, esse padrão fornecerá a base para se
construir Hipertextos.
GLOSSÁRIO
GLOSSÁRIO
Hipertexto – É um sistema para a visualização de informações cujos documentos possuem
referências internas para outros documentos (chamadas de hiperlinks ou, simplesmente,
links, como conhecemos).
Site – Um conjunto de várias páginas HTML
HTML, vinculadas entre si e controladas por um
único usuário ou grupo de usuários, não importando seu tamanho.
Multimídia – Imagens digitais, filmes, sons e apresentações especializadas como as
criadas por programas de animação e sonorização, como por exemplo, o Impress. A
linguagem HTML é capaz de incluir diversos tipos de arquivos multimídia em uma
única Página Web (documento contendo instruções HTMLHTML).
Browser – O mesmo que navegador da Internet (também conhecido como Web Browser
ou simplesmente Browser) é um programa que permite os usuários do computador
navegarem pelos Sites e visualizarem seus documentos HTML hospedados nos servi-
dores de Internet. Ao visitarmos, por exemplo, uma loja virtual, estaremos, na verdade,
navegando no Site da loja virtual. É o mesmo quando visitamos um sítio numa cidade
do interior e percorremos a propriedade para simplesmente vê-la ou encontrarmos algo
específico nela.
TIPOS DE EDITORES DE PÁGINAS HTML

Assim como existem diferentes tipos de Browsers, há diversos tipos de programas que
são utilizados para criar as páginas HTML
HTML. Os mais conhecidos e utilizados, na plata-
forma Windows, são 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 páginas com muita facilidade, não exigindo que os usuários
14
possuam conhecimentos sobre os códigos HTML

HTML. Mas esses códigos que ficam “escondidos”
do autor em programas desse tipo, podem, muitas vezes, ser úteis na montagem de
uma página. Conhecendo esses códigos, você, com certeza, terá mais condições de se
beneficiar dos diversos recursos que a Web pode oferecer à sua página.
Web, qualquer editor ASCII* poderá ser utilizado.
Para você editar uma página Web
Para os usuários do Windows
Windows, o editor Bloco de Notas ou até o Wordpad são sufi-
cientes. Para os usuários do Mac Os
Os, o programa Simpletext ou o BBEdit Lite
Lite, resolvem.
Para usuários do Linux
Linux, existe o KWrite, que será aprendido nesta apostila para a
criação de algumas páginas. É nele que serão digitados os códigos HTML
HTML.
HIPERTEXTOS E HIPERVÍNCULOS (LINK’S)

HIPERVÍNCULOS
Entende-se por Hipertexto uma ou mais palavras que, a partir de um clique de mouse,
chama outra página que está vinculada à primeira. E por Hipervínculos, os links cria-
dos sobre figuras chamadas de Hiperobjetos.
O Hipertexto é encontrado, dentro de uma página HTML
HTML, geralmente em cor diferente de
um texto simples e sublinhado. Através de um clique no mouse, o navegador se direciona,
automaticamente, para outro local, que pode ser dentro da mesma página ou para uma
outra que esteja vinculada à página em que se encontra. Ele é diferente de um texto
normal que apenas se desloca em seqüência, ou seja, para frente e para trás.
Exemplo de um
HIPERTEXTO
Exemplo de um
HIPERVÍNCULO
*ASCII – Acrônimo para American Standard Code for Information Interchange ou Código de Padrão Americano para o
Intercâmbio de Informação: conjunto padrão de caracteres de texto que podem ser transmitidos entre vários sistemas
operacionais e lidos sem tradução. 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 navegação é feita pelos conhecidos Hiperlinks.
São eles que permitem o visitante encontrar as informações de que necessita mais
facilmente. E toda essa relação existente entre páginas HTML que formam o Site pos-
sui um endereçamento 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.
EXERCÍCIOS
Depois de compreender alguns conceitos iniciais sobre a criação de um Site
Site,
responda às questões abaixo.
Qual programa (editor de texto) será usado para criar páginas na Internet?
Firefox),
Utilizando a ferramenta Firefox (clicar duas vezes no ícone do Mozilla Firefox
entre em um Sit e da Internet à sua escolha ou em http://www.senac.com.br.
Site
Após inicializado o navegador:
1) Clique no campo de endereço para selecionar o endereço que já estiver neste
espaço ou clique no menu Arquivo e selecione a opção Abrir endereço.
2) Digite a URL da página que você deseja visitar. Aquela que você digitar, subs-
tituirá qualquer texto já existente no campo de endereço, pois este estará sele-
cionado.
3) Pressione Enter.
Identifique os Hipertextos e Hiperobjetos da página.
16
H T M L
INICIANDO UM
DOCUMENTO
EM HTML
17
2
Iniciando um
Documento
HTML
ESTRUTURA DA PÁGINA
A estrutura de uma página HTML é composta por elementos que você pode encontrar,
por exemplo, nas páginas de um livro. Nestas, existem parágrafos, títulos, listas, imagens,
cabeçalho, rodapé etc, ou seja, elementos que compõem, também, uma página HTML HTML.
Antes de iniciar o projeto de criação de uma página HTML
HTML, deve-se levar em conta o seu
processo de organização. Lembre-se de que uma página contêm muitas informações e
todas devem estar bem dispostas para que qualquer pessoa que navegue por ela enten-
da seu conteúdo e encontre o que esteja pesquisando. Por isso, suas páginas devem ser
planejadas como as de um livro, com os seguintes itens:
Título da Página – Cada documento HTML possui um título.
Cabeçalhos – Define cabeçalhos para cada assunto a ser abordado na

página.
Parágrafos – Idênticos aos de um documento simples, com recursos de

tamanho, alinhamento, estilo, entre outras opções existentes.
Linhas Horizontais – Utilizadas para dividir texto em seções/ separações.
Listas – Idênticas às de um documento simples, podendo se apresentar

como listas numeradas, listas com marcadores e listas de definição.
Tabelas – Próximas aos editores de textos comuns, ajudam na disposição

de dados dentro da página e podem ser usadas para separar diferentes
tipos de dados, mantendo, assim, a organização do Site
Site.
Exemplo
Veja, a seguir, um exemplo de uso de alguns dos principais componentes de uma

página HTML
HTML.
19
Barra de Título
Imagem
Hiperlinks
Para visualizar o código fonte de uma página HTML que está sendo exibida no seu
navegador, basta clicar na opção Exibir e depois em Código-F ont
Código-Font
ontee.
Abaixo, o código HTML que cria todo esse visual da figura do Site SENAC MINAS:
VISUALIZAÇÃO DA ESTRUTURA BÁSICA DE UM DOCUMENTO HTML
EXERCÍCIOS
Clique duas vezes no ícone FireFox-Mozilla
FireFox-Mozilla.
Após inicializado o navegador:
1) Clique no campo de endereço para selecionar o que já estiver nesse espaço ou
clique no menu Arquivo e selecione a opção Abrir endereço
endereço.
2) Digite a URL da página que você deseja visitar. Sugestão: http://www.mg.senac.br
3) Pressione Ent
Enter
er.
er
4) Visualize o código fonte desta página.
20
Procure, sempre que possível, criar páginas que ocupem somente o tamanho de uma
tela, evitando, assim, a criação de barras de rolagem que dificultam a visualização da
informação pelo usuário. Mesmo que o Site fique com muitas páginas e vínculos, pro-
cure não criar uma página grande demais, o que será útil para aqueles que se conectam
através de modems lentos, facilitando o entendimento do conteúdo da página e, con-
seqüentemente, do Site
Site.
Evite colocar, também, muitas imagens em uma página. Não se esqueça de que uma
figura é bem maior que um texto: quanto menos figuras houver, mais rápido será o
carregamento* de sua Home Page
Page*. Faça com que ela tenha um design diferente de
outras já existentes, chamando a atenção e incentivando as pessoas a visitá-la.
COMANDOS DA LINGUAGEM: TAG’S

Um Tag é simplesmente a instrução HTML (código de formatação) que mostra ao na-
vegador o que ele deve fazer ao ser executado. Assim como uma instrução de qualquer
linguagem de programação, cada Tag possui uma função específica dentro de uma
página HTML
HTML.
Poderíamos 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 página para fazer
a marcação de algo que se deseja mudar.
Uma página HTML é estruturada conforme as regras da norma que estudamos anteri-
ormente, chamada de SGMLSGML. A página será sempre composta de Tag’sag’s, formados
simplesmente por uma palavra (comando da linguagem) envolvida pelos sinais de <
(menor que) e > (maior que). Esses sinais podem ser chamados, também, de parênteses
angulares
angulares.
Quando você quiser destacar trechos de textos com grifo, inclinação e até negrito, utilize
os seguintes Tag’s
ag’s:
<B> Negrito
<I> Itálico
<U> Sublinhado(grifado)
*Carregamento – Processo dado quando uma página é aberta por um Browser

Browser.
*Home Page – Página Inicial de um Sit e. Apresenta, normalmente, o que existe no conteúdo do Sit
Site e. Também lista os
Site
links existentes. É conhecida por Porta de Entrada
21
TIPOS DE TAG’S
Depois de saber para que serve um Tag
ag, vamos entender seus tipos.
Tag de contéudo
É aquele Tag que, para ser executado, precisa, geralmente, de algum conteúdo na
página. Esse conteúdo pode ser um texto, uma palavra, uma figura, uma tabela, enfim,
tudo aquilo que pode ser colocado na página.
Esse Tag
ag, que vai sempre agir sobre algo que exista na página, possui o que chamamos
de Abertura e Fechamento
Fechamento. Quando desejar mudar algo em sua página você deverá
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 redação 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 teríamos que descrever uma Tag de Conteúdo
Conteúdo
eúdo. Veja, no
exemplo, sua sintaxe:
<tag de abertura>palavra ou texto</tag de fechamento>
O comando a seguir mostra a frase “Primeira Página¹” sublinhada.
<U> Primeira Página </U>
Viu como é fácil?

Observe que o Tag de Fec hament
echament o possui, no início, uma barra (/
hamento /) que se diferencia
do Tag de Aber tura
Abertura
tura.
Entre elas, deverá entrar a informação que sofrerá o efeito de determinado Tag de
Conteúdo
Conteúdo.
Tag Vazio
Vazio
Diferente do Tag de Cont
Conteúdo
eúdo, esse tipo de Tag não age sobre nada (palavra, texto,
eúdo
imagens etc). Ele, na verdade, serve para criar elementos na página.
1. Para que a acentuação ou símbolos apareçam corretamente, verifique no seu navegador, no menu Exibir codificação
se está selecionada a opção UNICODE (UTF-8). Caso não esteja, selecione-a.
22
Suponhamos que você tenha criado uma página que contém 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 página.
A seguir, um exemplo de Tag’s Vazios
azios:
<IMG SRC = “/figuras/ola.gif”>
<BR> — que significa mudança de linha.
Um Tag V azio é mais simples de usar, porque ele não possui fechamento como o Tag
Vazio
de Conteúdo
Conteúdo
eúdo. Você apenas deverá colocá-lo no local da página onde deseja criar algo.
ATRIBUTOS DE TAG´S
Todos esses elementos já descritos podem, também, conter o que chamamos de atri-
butos ou parâme
butos parâmetrtr os
os. Eles tornam diferente a forma de apresentação dos Tag’s
tros ag’s.
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 três 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 utilização é 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 Tag’s
ag’s:
A <i>Biologia</i> é o estudo dos seres vivos

<FONT FACE=”ARIAL”>Dicas de Gramática</FONT>
23
Veja que, no primeiro exemplo, os comandos <i> e </i> etiquetam a palavra “Biologia”
em itálico e os comandos <FONT> e </FONT> etiquetam o texto “Dicas de Gramática”
para utilizar a fonte “arial”. Isso é possível através do atributo FACE exposto no segundo
exemplo.
OBSERVAÇÃO
Não existe distinção entre letras maiúsculas ou minúsculas na

escrita de um Tag
ag.
ESTRUTURA PRINCIPAL DE UMA PÁGINA

PRINCIPAL
Agora, vamos colocar a mão na massa para darmos os primeiros passos práticos para
a construção de um perfeito Site da Internet.
Primeiramente, abra o editor de textos KWrite para digitar os códigos HTML
HTML. Para
isso:
clique no botão Aplicativos (que fica no canto inferior esquerdo da tela
principal do Linux
Linux);
no item Escritório
Escritório, clique em KWrite
KWrite.
Será aberta a tela do editor de textos do Linux

Linux, conforme mostrado a seguir:
24
Como toda linguagem de programação, a linguagem HTML possui uma estrutura prin-
cipal na criação de suas páginas. Essa estrutura é que permite ao Browser entender e
interpretar um documento HTML
HTML. Ela sempre será iniciada pelo Tag <HTML> e termi-
nada pelo Tag </HTML>. Portanto, após ter aberto o editor de texto KW rit
KWrit e, digite, na
rite
primeira linha do editor, o Tag <HTML>.
Após a entrada desse Tag
ag, nosso próximo componente é o cérebro da nossa página. Ele
conterá informações textuais e visuais e instruções da linguagem JavaScript que ofe-
recem um maior controle à nossa página como, por exemplo, solicitar ao usuário sua
data de nascimento e, a partir de um cálculo matemático, saber a idade atual do nosso
visitante.
Além disso, esse cérebro conterá o título da nossa página, aquele mostrado no início da
apostila no Sit e do SENAC. O cérebro da página será formado pelo Tag <HEAD> e
Site
finalizado com o Tag </HEAD>, que ficam entre os Tag’s <HTML> e </HTML>. Entre
estes é que vão entrar as instruções da linguagem JavaScript que veremos mais adi-
ante.
Por hora, veremos apenas a inclusão do título da página. Para incluir um título em
uma página HTML
HTML, utiliza-se o Tag <TITLE> (para iniciar) e </TITLE> (para fechar).
Complemente seu arquivo do Kwrite com as informações do exemplo. Basta copiar da
mesma forma em que está escrito.
Exemplo
Exemplo
<html>
<head>
<title>Minha Redação Pessoal</title>
</head>
</html>
Vamos incluir, agora, o código (corpo) que é o terceiro e último elemento da página. Ele
é chamado de corpo da página
página.
O corpo é a área da página onde será colocado o conteúdo. Se você está fazendo uma
página que contém uma redação, por exemplo, ela deve ficar no corpo da página. Ele é
25
formado pelo Tag <BODY> e Tag </BODY>. Após terminar o corpo da página, 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, então, devemos fechar a página com o Tag </HTML>.
Assim, temos os três componentes básicos que formam a estrutura de uma página
HTML
HTML. Os Tag’s
ag’s: <HTML> e </HTML>, <HEAD> e </HEAD> e <BODY> e </BODY>.
Então, podemos redigir todos os elementos da página no editor de texto Kwrite e seu
código deverá estar como o apresentado a seguir:
<html>
<head>
<title>Minha Redação Pessoal</title>
</head>
<body>
Devo digitar minha redação aqui!!!
</body>
</html>
SALVANDO SU
SALV A PÁGINA
SUA
Chegou o momento de saber como funcionará essa página, ou seja, como ela será
mostrada no navegador de Internet. Para isso, você deverá salvar seu arquivo no editor
Kwrite
Kwrite:
no menu Ar quivo, clique em Salv
quivo
Arquiv ar
Salvar
ar.
Será aberta uma janela que solicitará um local para guardar seu arquivo e um nome
para ele. Lembrando-se dos conceitos básicos de informática, ao salvar um arquivo,
deve-se dar um nome e uma extensão* a ele. Nesse caso, será utilizada a extensão
.htm 1 que fará com que seu sistema saiba que se trata de uma página de Internet.
Escolha um diretório de sua preferência para guardá-lo.
Digite o nome: modelo.htm
modelo.htm.
Clique no botão Salvar
Salvar
ar.
1
A extensão para arquivos HTML pode ser tanto arquivo.htm como arquivo.html.
*Extensão – Identifica o tipo de arquivo. A extensão .sxi ou .ppt
.ppt, por exemplo, identifica arquivos do Impress ou
Power Point
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 botão de inicialização Metasys e selecionar o menu
Gerenciador de Ar quiv
Arquivos
quivos
os). Você pode navegar, clicando nos diretórios à sua esquerda
até chegar ao diretório que está seu arquivo .htm ou, na caixa de texto Localização
Localização,
Enter
você pode digitar o caminho até o diretório do arquivo e clicar Enter
er. Os arquivos desse
Konquer
diretório aparecerão ao lado direito do onqueroror
or. Então, clique duas vezes no arquivo
Modelo.htm
Modelo.htm. Sua página será carregada no navegador e apresentada como mostra a
figura a seguir:
Em nosso exemplo, criamos uma página chamada modelo.htm apenas para exercitar.
Mas é importante saber que, quando estiver montada a primeira página de um SiteSite, o
nome dela deverá ser sempre index.htm
index.htm. Isso se dá por ser a primeira página, ou seja,
aquela que o navegador está programado a procurar quando digitamos o endereço de
um Site.
UTILIZANDO O TAG DE PARÁGRAFO <P>
Ao digitar o texto da página anterior, ele foi tratado como um texto puro, ou seja, se você
quisesse centralizá-lo, alinhá-lo à direita, esquerda ou, até mesmo, justificá-lo, não seria
possível. Isso acontece porque a linguagem HTML somente alinha textos caso sejam
tratados como parágrafos. E, para que isso ocorra, é necessário o uso dos Tag’s de
Parágrafo <P> e </P>.
27
Para que possamos centralizar o texto da página modelo.htm temos que transformá-lo
em um parágrafo e colocarmos o atributo align=cent er
align=center
er. Para isso:
volte ao editor de texto KWrite (clique no botão Aplicativos
Aplicativos, selecione o
item Escritório e clique em KWrite
KWrite);
abra a página modelo.htm que contém nosso código (clique em ArquivoArquivo,

no item Abrir ou clique no ícone Abrir
Abrir. Navegue pelos diretórios, clicando
duas vezes neles até chegar ao diretório que está o arquivo desejado. Clique
no arquivo e, em seguida, no botão Abrir
Abrir);
envolva a linha que descreve o texto “Devo digitar minha redação aqui!!!”
com o Tag de parágrafo, ou seja, Tag <P>, juntamente com o atributo
align=center ;
<p align=”center”>Devo digitar minha redação aqui!!!</p>
clique no botão Salvar

Salvar
ar.
Para visualizar a modificação, basta clicar no botão Recarregar do Firefox ou ir ao

menu Exibir e escolher a opção Recarregar
ecarregar. Sua página será carregada no navegador
e apresentada como mostra a figura a seguir:
Viu só como é fácil criar parágrafos? Agora, continue criando outros. Construa uma
página com o Hino do time de futebol para o qual você torce. Deixe-o centralizado em
sua página da Internet.
28
ATENÇÃO
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 parágrafos às margens direita, esquerda, no centro da

página ou com alinhamento justificado, utilize o atributo de alinhamento Align
Align.
Para isso:
através do código de sua página, acrescente ao Tag <P> o atributo Align
Align.
Veja como ficaria a sintaxe de um parágrafo justificado:
<p align=”justify”>Conheça, nos parágrafos seguintes, a ortografia

de algumas palavras do vocabulário português:</p>
Outros valores para alinhamento
<p align = “left”> Alinha o parágrafo à esquerda.
<p align= “center”> Alinha o parágrafo ao centro.
<p align= “right”> Alinha o parágrafo à direita.
<p align= “justify”> Alinha o parágrafo justificado.
EXERCÍCIOS
1 ) Pesquise em um Site de busca um poema de Carlos Drummond de Andrade
ou de um outro poeta de sua preferência.
2 ) Agora, com base nas explicações anteriores, utilizando o editor de texto
KWrite
KWrite, crie uma página cujo título é o “nome do poema – nome do autor”e
o corpo da página são as estrofes do poema.
3 ) Coloque cada estrofe do poema como um parágrafo, fazendo alinhamentos
cent
diferentes (center
er, justify
center justify, lef
leftt e right
right) para cada um deles.
4 ) Salve o arquivo como Modelo2.htm
Modelo2.htm.
5 ) Abra o arquivo no FireFox
FireFox.
29
30
H T M L
ESTILOS DE
CABEÇALHO E
PARÁGRAFO
31
Você acabou de aprender a criar parágrafos com o Tag <P>. Mas existem, também,
outros seis Tag’s de parágrafos que servem para aumentar a fonte do texto e colocá-lo
em negrito. A diferença entre cada um deles está no tamanho da fonte. Veja, pelo
exemplo do código abaixo, a diferença entre eles:
<H1>O Nível Um: é o maior de todos, normalmente utilizado

nos Títulos das Páginas HTML!</H1>
<H2>O Nível Dois: é um pouco menor, podendo ser usado em
Sub-Títulos!</H2>
<H3>O Nível Três: é bem menor que o dois, podendo ser
utilizado em Subitens de um texto!</H3>
<H4>O Nível Quatro: é bem próximo ao texto normal, sendo
um pouco mais destacado!</H4>
<P>Este é um exemplo de texto normal!</P>
<H5>O Nível Cinco: é destacado também, porém, bem menor
que o quatro</H5>
<H6>O Nível Seis: com certeza o menor de todos os exem-
plos!</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 três atributos:
Face Altera a fonte do texto.
Color Altera a cor da fonte.
Size Altera o tamanho da fonte.
Entendendo melhor...
melhor...
Inicialmente criando uma página que descreve o nome de cinco animais:
Abra o editor de texto KWrite ((clique no botão Aplicativos, no item Escri-
tório
tório, clique em KWrite
KWrite).
Digite os códigos abaixo:
<html>
<head>
<title>AULA DE BIOLOGIA</title>
</head>
<body>
<p>Cachorro</p>
<p>Elefante</p>
<p>Gato</p>
<p>Sapo</p>
<p>Leão </p>
</body>
</html>
Salve seu arquivo como Modelo3.htm (clique no botão salvar e escolha o

diretório do curso).
Visualize o código no navegador.
34
Para isso, você irá abrir o Konqueror (clicar no botão de inicialização Metasys e sele-
cionar o menu Gerenciador de Ar quiv
Arquiv os
quivos
os). Você pode navegar, clicando nos diretórios
à sua esquerda até chegar ao diretório que está seu arquivo .htm ou, na caixa de texto
Localização
Localização, você pode digitar o caminho até o diretório do arquivo e clicar Ent er
Enter
er. Os
arquivos desse diretório aparecerão ao lado direito do Konquer
onqueror or
or. Então, clique duas
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">Leão</p>
</body>
</html>
Salve seu arquivo novamente como Modelo3.htm

Modelo3.htm. Visualize o código no
navegador.
A página deve abrir conforme a figura a seguir:
35
CURIOSIDADE
Para o atributo Size

Size, é possível alterar sete tamanhos que vão de 1 a 7.
Observe a sintaxe desse Tag e veja, também, os outros atributos:
Sintaxe:
<FONT SIZE = “tamanho da ffont
ont e”
onte”
e”>Texto</FONT>
<FONT FACE = “nome da ffont
onte”
onte”
e”>Texto</FONT>
<FONT COLOR= “nome da cor”
cor”>Texto</FONT>
EXERCÍCIOS
Agora que você já aprendeu a criar uma página com parágrafos e alinhamentos,
crie uma nova página HTML
HTML.
1 ) Utilizando o editor de texto KWrite
KWrite, digite os três componentes básicos do
HTML (os Tag’s <HTML>, <HEAD> e <BODY>).
2 ) Salve o arquivo com o nome gramática.htm no diretório à sua escolha.
3 ) Insira, como título, o texto: Dicas de Gramática (Tag <HEAD>).
4 ) Pesquise na Internet, conteúdos sobre: a grafia de algumas palavras que
parecem mais difíceis (pelo menos 10 palavras): xícara, chuchu, jeito, chá-
cara, exceto, sessenta etc; regras de concordância; uso do por quê; conjuga-
ção verbal; uso da crase; do hífen; entre outros.
5 ) No corpo da página, coloque cinco dicas que você pensa que são relevantes
para quem necessita de um auxílio com o uso da nossa Língua.
6 ) Separe cada uma delas em parágrafos 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 itálico (Tag <i>).
E, por último, a quinta, coloque centralizada e sublinhada.
7 ) Salve o arquivo e visualize sua página no navegador.
36
SOBRE O ATRIBUTO COL

ATRIBUTO OR
COLOR
É possível, com o atributo Color
Color, usar nomes de cores em inglês ou através do sistema
RGB (RED [vermelho], GREEN [verde] e BLUE [azul]) para cores. Seus valores são 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 códi-
gos hexadecimais:
COR 1 CÓDIGO
AQUA #70DB93
BLACK #000000
FUCHSIA #FF00FF
GREEN #00FF00
BROWN #800000
OLIVE #808000
SILVER #E6E8FA
WHITE #FFFFFF
BLUE #0000FF
CYAN #00FFFF
GRAY #C0C0C0
LIME #32CD32
NAVY #23238E
RED #FF0000
TEAL #008080
YELLOW #FFFF00
DARK GREEN #2F4F2F
PALE GREEN #8FBC8F
DARK OLIVE GREEN #4F4F2F
DARK BROWN #5C4033
DARK TAN #97694F
BLUE VIOLET #9F5F9F
MAROON #8E236B
SPICY PINK #FF1CAE
BRONZE #8C7853
GOLD #CD7F32
ORANGE #FF7F0
37
EXERCÍCIOS
1) Abra o arquivo Modelo2.htm
Modelo2.htm, utilizando o editor de texto KWrite
KWrite.
2) Dê cor ao título do poema e coloque-o em itálico.
3) Deixe cada parágrafo com uma cor diferente.
4) Brinque com a sua página!
5) Salve as alterações. Visualize sua nova página no navegador.
Mas, lembre-se! Esses Tag’s são de Conteúdo

Conteúdo
eúdo, ou seja, eles agem sobre o texto.
Portanto, não se esqueça do seu fechamento, ok?
CORES DE FUNDO <BODY>

Já aprendemos que o Tag <BODY> é um dos principais elementos da estrutura de uma
página e, além dessa importância, ele permite atribuir, em nossas páginas, cores
(atributo BGCOLOR) e até imagens de fundo (atributo BACKGROUND).
Para isso, basta utilizar os atributos no Tag <BODY>:
Utilizando o editor de texto KWrite
KWrite, abra o arquivo Modelo3.htm
Modelo3.htm.
Exercite esses atributos, colorindo o fundo da página que criamos para a

aula de Biologia.
Destaque-a com uma outra cor.
Visualize sua página, 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
EXERCÍCIOS
1 ) Utilizando o editor de texto KWrite
KWrite, digite os três componentes básicos do
HTML (os Tag’s <HTML>, <HEAD> e <BODY>).
2 ) Salve o arquivo com o nome datas.htm no diretório à sua escolha.
3 ) Insira, como título, o texto: Datas Comemorativas (T
Comemorativas Tag <HEAD>).
4 ) Faça 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 parágrafos <P> e </
P> o conjunto de datas referentes ao mês do ano.
6 ) Mude a cor, a letra, o tamanho da fonte e sua cor de fundo, conforme o mês.
7 ) Visualize sua página no navegador.
TAG’S MAIS UTILIZADOS (RESUMO)

Segue, abaixo, um Resumo dos Tag’s mais utilizados para criação de Documentos
HTML
HTML. Esse resumo servirá como um Guia de Referência Básica para seu aprendizado.
TAG: <HTML> Comando INTERPRETADOR
Obje tiv
Objetiv
tivoo do TTag
ag
Apresenta as instruções ao navegador que está trabalhando
com documentos HTML
HTML.
Sintaxe Básica
<html>
Conjunto de TAG’s e informações.
</html>
39
TAG: <HEAD> Comando CABEÇALHO
Obje tiv
Objetiv
tivoo do TTag
ag
Responsável por diversas informações dentro de uma página
HTML
HTML, como o título da Barra de Título
Título.
Sintaxe Básica
<head>
<title>título da página</title>
</head>
TA G: <TITLE> Comando TÍTULO
Obje tiv
Objetiv
tivoo do TTag
ag
Define um texto como sendo o Título de uma Página, que é
mostrada na parte superior do Browser (na Barra de Títu-
lo
lo) e no cabeçalho de uma página impressa. O Tag <title>
deve aparecer sempre dentro do Tag <head>.
Sintaxe Básica
<title> Título da Página </title>
Exemplo
<title>Página Principal do Meu Site</title>
TAG: <BOD Y>

<BODY> Comando CORPO
Obje tiv
Objetiv
tivoo do TTag
ag
Define o conteúdo principal, o corpo do documento. Essa é a
parte do documento HTML que é exibida no navegador. No
corpo podem-se definir propriedades comuns a toda página
como cor de fundo, margens e outras formatações.
Sintaxe Básica
<body> Corpo da Página </body>
Exemplo
<title>Redação Pessoal </title>
40
TAG: <P> Comando PARÁGRAFO
Obje tiv
Objetiv
tivoo do TTag
ag
Define o encerramento do Parágrafo atual e início de um novo,
como no encerramento de um Parágrafo num documento de
texto, pressionando-se Enter
Enter
er. É utilizado aos pares se for ne-
cessária a colocação de atributos.
Sintaxe Básica
Parágrafo inicial<p>
<p> Parágrafo seguinte.
<p atrtibutos> Parágrafo </p>
Exemplo
Este é o primeiro parágrafo.<p>E este é o segundo parágrafo.
<p align=”center”> Este é o parágrafo </p>
Efeito
Este é o primeiro parágrafo.
E este é o segundo parágrafo.
Efeito
Este é o parágrafo
TAG: <BR> Comando PARÁGRAFO
Obje tiv
Objetiv
tivoo do TTag
ag
Define o encerramento do Parágrafo atual e início de um novo
Parágrafo, como no encerramento de um parágrafo num do-
cumento de texto, pressionando-se Ent er
Enter
er.
Sintaxe Básica
Parágrafo inicial<BR>
<BR> Parágrafo seguinte.
Exemplo
Este é o primeiro parágrafo.<br>E este é o segundo parágrafo.
Efeito
Este é o primeiro parágrafo.
E este é o segundo parágrafo.
41
TAG: <B> Comando NEGRITO
Obje tiv
Objetiv
tivoo do TTag
ag
Atribui o estilo Negrito em trechos específicos do texto.
Sintaxe Básica
<b> texto </b>
Exemplo
Teste de Estilo para <b>NEGRITO</b>
Efeito
Teste de Estilo para NEGRITO.
NEGRITO.
TAG: <I> Comando ATRIBUI ITÁLICO
Obje tiv
Objetiv
tivoo do TTag
ag
Atribui o estilo Itálico em trechos específicos do texto.
Sintaxe Básica
<i> texto </i>
Exemplo
Teste de Estilo para <i>ITÁLICO</i>
Efeito
Teste de Estilo para ITÁLICO.
TAG: <U> Comando SUBLINHADO
Obje tiv
Objetiv
tivoo do TTag
ag
Atribui o estilo Sublinhado em trechos específicos do texto.
Sintaxe Básica
<u> texto </u>
Exemplo
Eu criei uma <U>Página WEB.</U>
Efeito
Eu criei uma Página WEB.
42
TAG: <H1> ATÉ <H6> Comando NÍVEIS DE CABEÇALHO
Obje tiv
Objetiv
tivoo do TTag
ag
Realça os diversos níveis de cabeçalhos de modo hierárquico
numa página. Os níveis vão desde <h1> até <h6>, passando
por <h2>, <h3>, e assim por diante.
Sintaxe Básica
<h2> Cabeçalho de Nível 2</h2>
</h2>
Exemplo
<h1>Cabeçalho de Nível 1</h1>
Efeito
Cabeçalho de Nível 1
43
44
H T M L
INSERINDO
IMAGENS EM
DOCUMENTOS
HTML
45
Uma das partes mais interessantes na construção de uma página na Internet é poder usar
imagens (figuras) dentro delas. Na maioria das páginas, são utilizadas imagens animadas
para deixá-las mais bonitas, sofisticadas e com uma boa apresentação.
ATENÇÃO
Lembre-se de não colocar imagens muito grandes e com muitas cores. Isso
evita o carregamento lento de quem visita sua página.
O Tag responsável pela tarefa de inserir imagens em uma página é o Tag <IMG>. Mas
sua função é só de chamar a figura. É necessário que ela já exista num arquivo dentro
do seu computador.
Veja qual a sintaxe desse Tag para incluir uma imagem em sua página:
<IMG SRC=“nome da imagem”>
IMG: é o Tag HTML para inserção de imagens.
SRC: local onde se encontra a imagem a ser incluída na página.
Vejamos um exemplo para incluir figuras em uma página que descreve a origem dos
sinais Matemáticos. Aproveitamos para incluir títulos e parágrafos para a página. Re-
pare o código a seguir, em que utilizamos o Tag <IMG>:
<html>
<head><title>ORIGEM DOS NÚMEROS</title></head>
<body>
<font face=”arial”>
<p align=”center”><img src=”logo.gif”></p>
<h1 align=”center”>ORIGEM DOS SINAIS MATEMÁTICOS</h1>
<h3>Adição ( + ) e subtração ( - )</h3>
<p>O emprego regular do sinal + ( mais ) aparece na
Aritmética Comercial de João Widman d’Eger publicada
em Leipzig em 1489.
Entretanto, representavam não à adição ou à subtração ou aos
números positivos ou negativos, mas aos excessos e aos
déficit em problemas de negócio. Os símbolos positivos e
negativos vieram somente ter uso geral na Inglaterra
depois que foram usados por Robert Recorde em 1557. Os
símbolos 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
não. </font>
<h3>Multiplicação ( . ) e divisão ( : )</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 PÁGINA

Na maioria das vezes, o navegador não ajuda muito no alinhamento, ao mesmo tempo,
de imagens e textos em uma Página HTML.
HTML Por isso, existe o atributo do Tag <IMG>
que se chama Align
Align. Você se lembra dele quando aprendemos a alinhar parágrafos?
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 página, o que
tornará seu carregamento mais rápido. Esses atributos não afetam a imagem original
em suas dimensões, apenas apresentam a imagem na página com as dimensões mais
definidas.
Volte ao exemplo da página sobre a origem dos sinais Matemáticos e perceba que a
figura incluída ficou muito grande. Vamos diminuir, então, suas dimensões, usando o
atributo de largura Width
Width.
Veja como fica sua sintaxe:
<img src=”logo.gif” width=18%>
No código referente à figura que foi inserida, usou-se o atributo de largura que definiu
em 18% o tamanho original.
Compare:
Esta é a página do exemplo anterior. Observe o tamanho da sua imagem:
50
Esta é a página com a imagem reduzida em 18% do seu tamanho original.
EXERCÍCIOS
Seu professor de Biologia solicitou um trabalho sobre animais mamíferos: nome
científico, habitat, reino, filo, classe, ordem, família, gênero e espécie. Você poderia
realizá-lo em uma folha de papel ofício, fazendo a colagem das figuras e escre-
vendo as características de cada um. Porém, agora, você poderá criar uma página
de consulta com esse tema, fazendo uso dos recursos que aprendeu com a lin-
guagem HTMLHTML.
1 ) Busque, na Internet:
informações sobre sete animais mamíferos;
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 página mais rápida.
3 ) Em seguida, vá ao KWrite e digite todos os comandos necessários para inserir
as imagens selecionadas dos animais. Digite, no corpo da página, as informa-
ções sobre o animal que aparece em cada imagem. Não se esqueça de alinhar
os parágrafos. Verifique e, se necessário, altere altura e largura das imagens,
a cor de fundo e as cores do texto. Deixe sua página bem atraente! Salve o
arquivo como mamíf
mamífereros.htm e visualize no navegador.
eros.htm
51
Desenvolva uma página HTML que dê dicas matemáticas. Não se esqueça de

incluir imagens para ilustrar sua página! Das dicas abaixo, selecione quatro e insira
uma imagem para cada dica e uma imagem para o Título (H1).
Dica 1: multiplicar um número por 10:

basta deslocar a vírgula uma casa decimal para a direita.
Exemplo 1: 16 x 10 = 160
Exemplo 2: 15,567 x 10 = 155,67
Dica 2: multiplicar um número por 10n:

basta deslocar a vírgula n casas decimais para a direita.
Exemplo 1: 16 x 103 = 16000
Exemplo 2: 15,567 x 104 = 155670
Então, se quisermos efetuar 12 x 100, sabemos que 100=102. Então:12 x 100 =
12 x 102 = 1200.
Dica 3: dividir um número por 10:
basta deslocar a vírgula uma casa decimal para a esquerda.
Exemplo 1: 16 / 10 = 1,6
Exemplo 2: 15,567 / 10 = 1,5567
Dica 4: dividir um número por 10n:

basta deslocar a vírgula n casas decimais para a esquerda.
Exemplo 1: 16 / 103 = 0,016
Exemplo 2: 15,567 / 102 = 0,15567
Então, se quisermos efetuar a seguinte divisão: 12 / 1000, sabemos que
1000=103. Então:
12 / 1000 = 12 / 103 = 0,012.
Dica 5: multiplicar um número por 11:

quando o número for de dois algarismos, basta somar esses dois algarismos e
colocar o resultado no meio deles.
Exemplo: efetuar a seguinte multiplicação: 26 x 11.
Temos o número 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 número 34: 3+4=7, colocamos o resultado no meio
deles: 374. Portanto 34x11 = 374.
2) 81 x 11:
somamos os algarismos do número 81: 8+1=9, colocamos o resultado no meio
deles: 891. Portanto 81x11 = 891.
3) 37 x 11:
somamos os algarismos do número 37: 3+7=10
Como deu um número maior que 9, então não podemos colocar todo o número no
meio deles. Colocamos apenas o algarismo das unidades (0) e, o algarismo da
dezena (1), é somado ao primeiro algarismo do número: 407.
Portanto, 37x11 = 407.
Quando o número for de 3 algarismos, então esse número multiplicado por 11
resultará em um número de 4 algarismos. Por exemplo, vamos efetuar a seguinte
multiplicação: 135 x 11.
Temos o número 135. Somando o 1º com o 2º algarismo desse número temos
1+3=4. Somando o 2º com o 3º algarismo desse número temos 3+5=8. Esses 2
resultados serão colocados no meio do número 135, tirando o seu algarismo do
meio: 1485. Portanto 135 x 11 = 1485.
53
54
H T M L
HIPERLINK’S
TRABALHANDO
COM VíNCULOS
55
TIPOS DE URL’S
URL’S
Normalmente, quando estamos navegando na Internet, basta digitar um endereço para
que, em seguida, já nos transportamos para a Página Web ou Site em questão. Mas
existem alguns serviços da Internet que tendem a utilizar outros tipos de endereçamento.
URL
URL: abreviação de Uniform Resource Locator (Localizador Universal de Re-
cursos), é o “endereço” de qualquer recurso que está disponibilizado na Internet.
Ele permite que qualquer máquina acesse qualquer computador e/ou Site Site, sem
se importar (do ponto de vista do usuário) onde está, fisicamente, localizado.
A sintaxe básica para um URL deve seguir a seguinte estrutura:
PROTOCOLO://Servidor/NomeDoArquivo.Htm
Agora, observe seu significado:
PROTOCOLO = Protocolo de Comunicação 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 Comunicação 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 endereço abaixo:

HTTP://www.portal.mec.gov.br/index.htm
HTTP = Protocolo para Documentos HTML
HTML.
www = World Wide Web.
por tal.mec.go
tal.mec.govv.br/ = Nome do Computador Servidor.
portal.mec.go
index.htm = Página que será aberta no computador.
index.htm
CRIANDO LINK’S DE ARQUIVOS LOCAIS <A>

Para criar um link, será necessário usar o Tag <A>...</A>, também conhecido como
Âncora e, juntamente a ele, o atributo Href que diz ao navegador o URL ou página
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 Referência de Vínculo.
Arq_destino = Refere-se ao caminho do arquivo de destino.
Veja o exemplo que se segue:
<A HREF=“ESCOLA.HTM”>Curso de Programação em HTML</A>
O código HTML apresenta apenas o Texto “Cur Curso
Cur Programação
so de Programação em HTML”
HTML como
hipertexto e indica que deverá se direcionar para a página chamada ESCOLA.HTM.
Todas as vezes que você criar um link, os trechos envolvidos serão apresentados subli-
nhados, indicando ao usuário que ali existe um link para outra página ou outro endereço.
No exemplo do código a seguir, vamos criar uma página que permitirá acessar, a partir
de um link no texto Portal da Gramática da Língua Portuguesa Portuguesa, o Site
www.portugues.com.br. Veja abaixo:
KWrite;
abra o editor KWrite
digite o código abaixo.
<html>
<head><title>Links</title></head>
<body>
<a href=”http://www.portugues.com.br/”>Portal da Gra-
mática da Língua Portuguesa</a>
</body>
</html>
Salve o código e abra-o no navegador.
58
A página aberta deverá ser igual a esta:
Clique no link que apareceu na imagem. Automaticamente, você será

redirecionado para a página www .por
www.por tugues.com.br
.portugues.com.br
tugues.com.br, conforme mostra a
figura a seguir:
FONTE: HTTP://WWW.PORTUGUES.COM.BR/
Até aqui, você já deve saber que, para criar um link, é necessário saber,
também, o destino no qual você fará a ligação.
59
CRIANDO LINK’S PARA IMAGENS

PARA
Da mesma forma que podemos criar links com textos, podemos fazer para imagens.
Observe o mesmo código 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 página da UNESCO será carregada, confor-
me mostrado na figura a seguir:
FONTE: HTTP://WWW.UNESCO.ORG.BR
TAG’S MAIS UTILIZADOS (RESUMO)

Segue, abaixo, um Resumo dos TTag’s
ag’s mais utilizados para a criação de Document
Documentos
os
HTML
HTML. Esse resumo servirá como um Guia de Referência Básica para seu aprendizado:
TAG: <IMG SR C>

SRC> Comando INSERIR IMAGENS
Obje tiv
Objetiv
tivoo do TTag
ag
Insere uma imagem dentro da página.
Sintaxe Básica
<img src=”nome_da_imagem”>
Exemplo
Dê um Download nesta imagem <img src=”casa.gif”>
Efeito
Dê um Download nesta imagem
61
TAG: <A HREF> Comando CRIAR VÍNCULOS
Obje tiv
Objetiv
tivoo do TTag
ag
Insere um link na página, destacando o “endereço” com uma
linha sublinhada, permitindo o usuário, ao clicar sobre o link,
ir diretamente a outro local, desta ou de outra página.
Sintaxe Básica
Texto <a href=”endereço”>â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.
EXERCÍCIOS
1) Imagine-se como um professor de Geografia e crie uma página na Internet

com questões sobre clima, relevo, escala, vegetação, cartografia e geopolítica
da região Sudeste.
Seu Site deverá conter na página principal:
uma figura com o mapa da Região Sudeste;
um link para cada Estado da Região para páginas locais;
um link para um Site de estatística direcionado para a Região Sudeste.
Além da página principal, seu Site deverá ter uma página para cada Estado.
Nesta página, coloque, pelo menos, as informações encontradas na Internet, um
mapa do Estado, um link para a previsão de tempo na semana, um link para a
página da prefeitura da capital e uma imagem que, para você, simbolize o Estado.
Insira imagens, crie gráficos para colocar nas questões, brinque com as cores
para dar um maior dinamismo à sua página!
62
Se você conhecer o Impress, pode utilizá-lo para criar o seu gráfico.
2) Hora de pesquisar! Agora, suponha que seu professor de Matemática tenha

pedido uma pesquisa sobre a origem da calculadora. Você pode usar a Internet
para buscar informações a respeito desse tema.
O seu Sit
Site
e deverá ter, pelo menos, cinco páginas. A principal, descrevendo
sobre o que é o Site e mais quatro páginas. Cada uma delas contendo a descrição,
a época e a imagem de cada calculadora encontrada na pesquisa. As páginas
deverão ter link’s em ordem cronológica e o link de BackBack.
a ) Inicie seu trabalho, por exemplo, falando sobre o instrumento de cálculo

chamado Ábaco:
ÁBACO – Instrumento para contagem e cálculo. Calculadora com várias

hastes de metal, sustentando bolinhas que podem ser manipuladas, ser-
vindo para realizar operações matemáticas.
b ) Em seguida, faça uma pequena cronologia até os dias atuais, em que

temos calculadora até em relógios, celulares etc. Use a sua criatividade!
Trabalhe, em sua página, cores, parágrafos, imagens, textos, títulos 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
TIPOS DE LISTAS
LISTAS
Criar listas em HTML é muito simples. As listas são muito usadas para ordenar itens,
como nas questões de Geografia realizadas anteriormente. Ao invés de digitar manual-
mente os números, eles serão dados automaticamente. Veja, no exemplo, a seguir,
uma página que descreve uma lista de pedras preciosas existentes.
Exemplo
Lista ordenada
Existem cerca de 130 espécies minerais que foram utilizadas como gemas, com 50
espécies mais comuns. Estas incluem:
<HTML>
<HEAD><TITLE>PEDRAS PRECIOSAS</TITLE></HEAD>
<BODY><OL>
<!— ordenação por número>
<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 - jadeíte e nefrite
<li>Jaspe
<li>Lápis-lazúli
<li>Malaquita
<li>Obsidiana
<li>Olivina (Perídoto)
<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>Topázio
<li>Turquesa
<li>Turmalina
<li>Zircão
</ol>
<!— fim ordenação por número>
</BODY>
</HTML>
Veja o resultado desse código exibido no navegador:
Personalizando Listas Ordenadas

Para Listas Numeradas
Numeradas, é obrigatório o uso do Tag <OL>. Nos itens, tanto da Lista
Ordenada como da Lista de Marcadores
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>História</li>
<li>Matemática</li>
</ol>
Ao visualizar esse código no navegador, o resultado será o nome das matérias, ordena-
das numericamente:
1 . Geografia
2 . História
3 . Matemática
Você tem a opção, também, de ordenar sua Lista de forma diferente como, por exemplo,
por ordem alfabética, romana e, às vezes, até iniciá-la por um determinado valor que
não seja o primeiro. Para isso, observe, na Tabela, a utilização do atributo Type
ype, usado
no Tag <OL>:
Type=A t Marcadores para Ordem Alfabética em Maiúsculo.

Type=a t Marcadores para Ordem Alfabética em Minúsculo.
Type=I t Marcadores para Numerais Romanos em Maiúsculo.
Type=i t Marcadores para Numerais Romanos em Minúsculo.
Type=1 t Marcadores para Números.
Start t 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 números romanos I, II, III, IV, V etc.
<OL T YPE=a ST ART=4> Apresenta uma Lista em ordem alfabética minúscu-

START=4>
la, começando a partir da letra D.
69
Personalizando Listas Não-Ordenadas

Para Listas de Mar
Marcadores
cadores, é obrigatório o uso do Tag <UL> e, sempre, nos itens da
cadores
Lista, deverá haver, para cada item, o Tag <LI> que significa List Item, ou seja, Item da
Item
Lista
Lista. Observe este exemplo simples de Lista Não-Ordenada
Não-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 seqüência predeterminada pelo HTML que
vai desde o Disco Cheio, passando pelo Círculo Vazado e chegando ao quadrado sólido.
Cada marca vai ser representada de acordo com seu nível de identação*. O atributo
Type permite alterar tal definição que deve ser especificada assim:
Type=Disc t Marcadores de Disco Cheio
Cheio.
Type=Cir cle
ype=Circle t Marcadores de Cír culo V
Círculo azado
azado.
Vazado
Type=Square t Marcadores de Quadrado Sólido (cheio).
* Identação: dentro da computação, Identação é um termo aplicado ao código fonte de um programa para
indicar que os elementos hierarquicamente dispostos têm o mesmo avanço relativamente à posição (y,0).
Na maioria das linguagens, a Identação tem um papel meramente estético, tornando a leitura do código fonte
muito mais fácil (read-friendly), porém é obrigatória em outras. Python, Occam e Haskell, por exemplo, utilizam-
se desse recurso, tornando desnecessário o uso de certos identificadores de blocos (“begin” e/ou “end”).
A verdadeira valia desse processo é visível em arquivos de código fonte extensos, não se fazendo sentir tanto a
sua necessidade em arquivos pequenos (relativamente ao número de linhas).
Para qualquer programador, deve ser um critério a se ter em conta, principalmente, por aqueles que pretendem
partilhar o seu código com outros. A Identação facilita, também, a modificação, seja para correção ou aprimo-
ramento do código fonte.
(Fonte:
Fonte: pt.wikipedia.org/wiki/Identação)
70
EXERCÍCIOS
1) Utilizando o editor de texto KWrite, digite os três componentes básicos
do HTML (os Tag’s <HTML>, <HEAD> e <BODY>).
2) Salve o arquivo com o nome americasul.htm no diretório à sua escolha.
3) Insira, como título, o texto: Países da América do Sul (T
Tag <HEAD>).
4) Faça uma pesquisa de todos os países da América do Sul.
5) Coloque os países em uma lista ordenada.
6) Salve o arquivo e visualize sua página no navegador.
7) Modifique os atributos do Tag <OL>.
8) Salve o arquivo e visualize sua página no navegador.
71
72
H T M L
UTILIZANDO
TABELAS
73
As tabelas têm o intuito de organizar as informações dentro de uma página, permitindo

melhorar seu visual.
Poderíamos criar, por exemplo, uma tabela que listasse as letras do alfabeto grego e
seu significado.
Veja, abaixo, a tabela que iremos desenvolver:
Apha A
Beta B
Gamma G
Delta D
Epsilon E
Zeta Z
Eta H
Theta Q
Iota I
Kappa K
Lambda L
Mu M
Nu N
Xi X
Omicron O
Pi P
Rho R
Sigma S
Tau T
Upsilon U
Phi F
Chi C
Psi Y
Omega W
75
Mas antes, vamos observar a tabela a seguir:
Linha 1 – Coluna 1 Linha 1 – Coluna 2 Linha 1 – Coluna 3

Linha 2 – Coluna 1 Linha 2 – Coluna 2 Linha 2 – Coluna 3
Depois de observar a tabela, veja o código responsável por ela:
<HTML>
<TABLE BORDER>
<TR>
<TD>Linha 1 – Coluna 1</TD>
</TR>
<TR>
</TR>
</TABLE></HTML>
TAG <TABLE>
<TABLE>
Para dar início à sua tabela, é necessário que se comece com o Tag de Conteúdo <TABLE>,
Conteúdo
responsável por mostrar, ao navegador, onde apresentar a tabela na Página W eb
Web
eb. Ao
final, deve-se fechá-la, utilizando o Tag de Fec
Fec hament
echamento
hamento </TABLE>.
TAG DE LINHA <TR>

Logo após a inserção do Tag de AberAbertura
tura da tabela <TABLE>, inclua o Tag de ContConteúdo
eúdo
<TR> para definir as linhas de sua tabela. Cada linha deverá conter esse Tag
ag. Não se esqueça
de que ele é um Tag de Cont eúdo
Conteúdo
eúdo, por isso, ao final de cada linha de sua tabela, deverá ser
feito o fechamento dela através do Tag de FFec ec hament
echament
hamentoo </TR>. Se desejar criar um
cabeçalho para cada coluna, inclua-o na primeira.
76
TAG DE CÉLUL
CÉLULA <TD>
ULA
Em todas as linhas definidas pelo Tag <TR>, inclua um conjunto de Tag’s de Conteúdo
Conteúdo
Tag´s de Dados),
<TD> (T Dados para definir cada célula. Entre esses conjuntos digite o texto
para a respectiva célula.
Observe,abaixo, a sintaxe básica dos Tag’s utilizados para criação de tabelas:
<table>
<tr>
<td>linha1</td><td>célula2</td><td><célula3</td>
</tr>
<tr>
<td>linha2</td><td>célula2</td><td><célula3</td>
</tr>
</table>
Linha 1 Célula 2 Célula 3

Linha 2 Célula 2 Célula 3
Veja, agora, um exemplo de utilização de tabela. Nesta página, são mostradas as

definições dos itens da Tabela Periódica:
77
TAG DE MESCLAR CÉL

MESCLAR UL
CÉLULAS DE LINHA <COLSP
ULAS AN>
<COLSPAN>
Essa tag é utilizada, juntamente com a tag <td>, para indicar quantas colunas de uma
determinada linha estarão mescladas em uma célula.
Abaixo, um exemplo de como mesclar as células.
<HTML>
<TABLE BORDER>
<TR>
<TD COLSPAN=3>Linha 1 – Coluna 1 2 3</TD>
</TR>
<TR>
</TR>
</TABLE></HTML>
TAG DE MESCLAR CÉL

MESCLAR UL
CÉLULAS DE COL
ULAS UNA <ROWSP
COLUNA AN>
<ROWSPAN>
Essa tag é utilizada, juntamente com a tag <td>, para indicar quantas linhas de uma
determinada coluna estarão mescladas em uma célula.
<HTML>
<TABLE BORDER>
<TR>
<TD ROWSPAN=4>Linha 1 2 3 – Coluna 1</TD>
</TR>
<TR>
78
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE></HTML>
TAG DE HEADER (CABEÇALHO) <TH>

Define a célula corrente da tabela como cabeçalho da tabela. Normalmente é utilizado
nas células do topo da tabela ou nas células ao lado.
<HTML>
<TABLE BORDER>
<TR>
<TH>Coluna 1</TH>
<TH>Coluna 2</TH>
<TH>Coluna 3</TH>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE></HTML>
79
ATRIBUTOS DA TABELA
Veja, agora, uma listagem de outros atributos que podem ser definidos juntamente
com o Tag de Cont eúdo <TABLE>:
Conteúdo
Width t Especifica a largura da tabela, medida em porcentagem ou em
Pixels1 .
Height tEspecifica a altura da tabela, medida em porcentagem ou em

Pixels.
Cellpadding t Especifica o espaço entre o texto que está dentro da célula.
Cellspacing t Especifica o espaço dentro de uma célula. O padrão é 2.
Align t Alinha uma tabela dentro do navegador.
Border t Especifica a espessura da borda da tabela. O padrão é 1.
Bgcolor t Especifica a cor de segundo plano para a tabela.
Background t Especifica uma figura de segundo plano para a tabela.
Caption t Inclui uma legenda para a tabela. Seus valores, Top ou Bott
Bott om
ttom
om,
são do atributo Align
Align.
Observe que, além do espaço nas bordas, existe, agora, um espaço 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 código:
<html>
<head>
<title>ALFABETO GREGO</title>
</head>
<body>
1
Pic
Picture e El
Element: é uma medida utilizada em imagens. Um Pixel é o menor ponto que forma uma imagem
digital, sendo que o conjunto de milhares de Pixels formam a imagem inteira.
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:
EXERCÍCIOS
1) Abra o arquivo letrasgregas.htm no Kwrite
Kwrite.
Utilizando os atributos de tabela, mude a cor do fundo da tabela, centra-
lize a tabela e aumente a espessura da borda (utilizando os atrtributos
Bgcolor
Bgcolor, Align e Border
Border).
Salve o arquivo e visualize no navegador as alterações.
2) Agora, você irá criar a sua própria Tabela Periódica, ou melhor, parte dela em
uma página HTML (os Gases Nobres, os Lantanídeos e os Actinídeos).
Abra o editor de texto KWrite e mãos à obra! Ao terminar a digitação dos
códigos, salve seu arquivo como tabelaperiódica.htm
tabelaperiódica.htm.
84
<html>
<HEAD><TITLE>Tabela Periódica</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
PERIÓDICA 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>


<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>
85

<CENTER><A title=Nitrogen
href=”n.htm”><B>N</B></A><BR>14.007 </CENTER></TD>

<CENTER><A title=Oxygen
href=”o.htm”><B>O</B></A><BR>15.999 </CENTER></TD>
<CENTER><A title=Fluorine
href=”f.htm”><B>F</B></A><BR>18.998 </CENTER></TD>
<CENTER><A title=Neon
href=”ne.htm”><B>Ne</B></A><BR>20.180 </CENTER></TD>
<TR>

<CENTER><A title=Chlorine
href=”cl.htm”><B>Cl</B></A><BR>35.453 </CENTER></TD>
<CENTER><A title=Argon
href=”ar.htm”><B>Ar</B></A><BR>39.948 </CENTER></TD>
<TR>
86

<CENTER><A title=Bromine
href=”br.htm”><B>Br</B></A><BR>79.904 </CENTER></TD>

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

<CENTER><A title=Xenon
href=”xe.htm”><B>Xe</B></A><BR>131.29 </CENTER></TD>

<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">Lantanídeos<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

<CENTER><A title=Cerium
href=”ce.htm”><B>Ce</B></A><BR>140.12 </CENTER></TD>
<CENTER><A title=Praseodymium
href=”pr.htm”><B>Pr</B></A><BR>140.91 </CENTER></TD>

<CENTER><A title=Neodymium
href=”nd.htm”><B>Nd</B></A><BR>144.24 </CENTER></TD>
<CENTER><A title=Promethium
href=”pm.htm”><FONT
color=#FF00FF><B>Pm</B></A><BR>(145)
</CENTER></TD>
<CENTER><A title=Samarium
href=”sm.htm”><B>Sm</B></A><BR>150.36 </CENTER></TD>
<CENTER><A title=Europium
href=”eu.htm”><B>Eu</B></A><BR>151.96 </CENTER></TD>
<CENTER><A title=Gadolinium
href=”gd.htm”><B>Gd</B></A><BR>157.25 </CENTER></TD>

<CENTER><A title=Terbium
href=”tb.htm”><B>Tb</B></A><BR>158.93 </CENTER></TD>
<CENTER><A title=Dysprosium
href=”dy.htm”><B>Dy</B></A><BR>162.50 </CENTER></TD>
88
<CENTER><A title=Holmium
href=”ho.htm”><B>Ho</B></A><BR>164.93 </CENTER></TD>
<CENTER><A title=Erbium
href=”er.htm”><B>Er</B></A><BR>167.26 </CENTER></TD>
<CENTER><A title=Thulium
href=”tm.htm”><B>Tm</B></A><BR>168.93 </CENTER></TD>

<CENTER><A title=Ytterbium
href=”yb.htm”><B>Yb</B></A><BR>173.04 </CENTER></TD>
<CENTER><A title=Lutetium
href=”lu.htm”><B>Lu</B></A><BR>174.97 </CENTER></TD>
<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>Actinídeos</TD>
<TD bgColor=#c0e0ff height=”50">89<BR>
<CENTER><B><a title=”Actinium”
href=”ac.htm”>Ac</a></B><BR>(227) </CENTER></TD>

<CENTER><A title=Thorium
href=”th.htm”><B>Th</B></A><BR>232.04 </CENTER></TD>
89

<CENTER><A title=Protactinium
href=”pa.htm”><B>Pa</B></A><BR>231.04 </CENTER></TD>
<CENTER><A title=Uranium
href=”u.htm”><B>U</B></A><BR>238.03 </CENTER></TD>
<CENTER><A title=Neptunium
href=”np.htm”><FONT
color=#FF00FF><B>Np</B></A><BR>(237)
</CENTER></TD>
<CENTER><A title=Plutonium
href=”pu.htm”><FONT
color=#FF00FF><B>Pu</B></A><BR>(244)
</CENTER></TD>

<CENTER><A title=Americium
href=”am.htm”><FONT
color=#FF00FF><B>Am</B></A><BR>(243)
</CENTER></TD>
<CENTER><A title=Curium
href=”cm.htm”><FONT
color=#FF00FF><B>Cm</B></A><BR>(247)
</CENTER></TD>
<CENTER><A title=Berkelium
href=”bk.htm”><FONT
90
color=#FF00FF><B>Bk</B></A><BR>(247)
</CENTER></TD>
<CENTER><A title=Californium
href=”cf.htm”><FONT
color=#FF00FF><B>Cf</B></A><BR>(251)
</CENTER></TD>
<CENTER><A title=Einsteinium
href=”es.htm”><FONT
color=#FF00FF><B>Es</B></A><BR>(252)
</CENTER></TD>

<CENTER><A title=Fermium
href=”fm.htm”><FONT
color=#FF00FF><B>Fm</B></A><BR>(257)
</CENTER></TD>
<CENTER><A title=Mendelevium
href=”md.htm”><FONT
color=#FF00FF><B>Md</B></A><BR>(258)
</CENTER></TD>
<CENTER><A title=Nobelium
href=”no.htm”><FONT
color=#FF00FF><B>No</B></A><BR>(259)
</CENTER></TD>
<CENTER><A title=Lawrencium
href=”lr.htm”><FONT
91
color=#FF00FF><B>Lr</B></A><BR>(262)
</CENTER></TD>
<TR>
<TD height=”2"></TD>
<TD height=”2" width=”0"></TD>
</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
Border. A borda inserida possui uma
espessura padrão de 1, podendo ser alterada, definindo-a da seguinte forma:
<TABLE BORDER=valor para espessura>
Ignorando esse valor, o navegador atribui a espessura padrão para bordas da tabela.
Observe a figura, abaixo:
EXERCÍCIO
1) Monte uma página e distribua em uma tabela a relação 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
CAL ORIAS
ALORIAS
ovos
PRODUTO QUANTIDADE Kcal
Clara de ovo cozida Unidade 13

Clara de ovo frita Unidade 22
Gemada 1 porção (150ml) 210
Gema de ovo crua Unidade 60
Gema de ovo frita Unidade 85
Omelete 1 fatia média (100g) 104
Omelete c/ queijo 1 fatia média (100g) 266
Ovo de avestruz Unidade 39
Ovo de codorna Unidade 33
Ovo de galinha cozido Unidade 78
Ovo de galinha cru Unidade 76
Ovo de galinha frito Unidade 108
Ovo de galinha frito na margarina Unidade 90
Ovo de galinha pochê Unidade 78
Ovo de pata Unidade 129
Ovo de perua Unidade 83
Ovo mexido Unidade 120
Ovo mexido c/ queijo Unidade 180
94
H T M L
TRABALHANDO
COM FORMULÁRIOS
95
A Internet nos oferece todo tipo de serviço 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 agência de empregos, temos
que preencher algum tipo de formulário de dados para que possamos ter contato com
a empresa que está oferecendo o serviço.
Esses formulários de preenchimento contêm campos nos quais armazenamos as infor-
mações que serão enviadas a algum servidor, que as deixará disponíveis para seus
responsáveis.
Para que possamos criar um formulário de dados em uma página HTML
HTML, utilizamos o
Tag de Conteúdo <FORM>, que possui duas funções específicas:
Conteúdo
informar o local do programa que gerencia o formulário;
definir o método como os dados serão enviados ao respectivo servidor.
O Tag <FORM> utiliza o atributo Action

ction. É nele que informamos o servidor e o programa
que processará o formulário.
ction, é necessário usar, também, o atributo Me
Além do atributo Action thod
Method
thod, que indica o
método usado pelo servidor para receber o formulário.
Existem dois tipos de métodos conhecidos: Get e Post
Post. Este último é o mais usado por
transmitir todas as informações do formulário. Já o método Get junta as informações
do formulário ao endereço antes de enviá-lo.
Para entender melhor, imagine que você esteja enviando um formulário via Internet
para se comunicar com algum de seus professores. Esse formulário deverá ser enviado
pelo método Post
Post. Mas, se você estivesse exibindo um boleto bancário para pagamento,
os dados do boleto seriam enviados pelo método GetGet.
CAMPOS DE FORMULÁRIO <INPUT>

Através do Tag de Cont eúdo <INPUT>, podemos apresentar a forma de entrada de dados
Conteúdo
que o usuário poderá usar para preencher o formulário. Cada tipo de entrada de dados no
formulário é atribuída em uma variável que será definida nesse Tag
ag.
Veja a sintaxe usada pelo Tag <INPUT>:
<INPUT TYPE=“tipo de variável” NAME=“variável”
SIZE=“tamanho” MAXLENGTH=“comprimento”
97
Veja, a seguir, a lista dos parâmetros utilizados no Tag <INPUT>:
P ARÂMETR OS
ARÂMETROS FUNÇÃO
TYPE= “TIPO DE VARIÁVEL” Especifica o tipo de dados para a variável.
TYPE= “TEXT” Entrada de dados tipo caractere.
TYPE= “PASSWORD” Entrada de dados tipo senha.
TYPE= “CHECKBOX” Entrada de dados tipo lógico (sim/não).
TYPE= “RADIO” Lista de opções – aceita somente uma.
TYPE= “SUBMIT” Cria um botão para enviar os dados.
TYPE= “RESET” Cria um botão para limpar os dados.
TYPE= “HIDDEN” Cria um campo oculto.
NAME= “VARIÁVEL” Valor que receberá o conteúdo do campo.
SIZE= “TAMANHO” Tamanho do campo em caracteres.
MAXLENGTH= “COMPRIMENTO” Tamanho do campo para TEXT e PASSWORD.
CRIANDO CAIXAS DE TEXTO

Para criar Caixas de TTe
Caixas exto para entrada de dados em um formulário, utilize o parâmetro
xto
Type=T
ype=Teext para o Tag <INPUT>. Esse parâmetro criará uma caixa de texto com tama-
nho definido pelo parâmetro Size
Size, em uma única linha.
Observe o código HTML disposto, abaixo, e compare com o efeito apresentado na figura:
<html>
<body>
<H2>Responda ao Questionário abaixo:</h2>
<FORM>
98
Digite seu Nome: <INPUT type=”text” NAME=”nome”

SIZE=”40" MAXLENGTH=”40">
</FORM>
</body>
</html>
Além de incluir Caixas de TTe

Caixas exto para digitar valores, podemos definir um valor padrão
xto
para o campo a ser inserido, automaticamente, no formulário. Para utilizá-lo, basta
usar o atributo Value dentro do Tag <INPUT>.
Observe, pela figura, o exemplo de utilização desse atributo:
<html>
<body>
<FORM>
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 TTe
Caixas exto, usado em formulários, seria o campo para preenchimento
xto
de senhas. Nele, apenas os caracteres digitados são representados por * (asterisco)
como, normalmente, são utilizados nesse tipo de campo. Para atribuí-lo, basta utilizar
o parâmetro Passw ord
ord, dentro do Tag <INPUT>.
assword
<html>
<body>
<FORM>
value=”Belo Horizonte”><br>
100
Senha de Acesso: <INPUT type=”password” NAME=”nome”

SIZE=”40">
</FORM>
</body>
</html>
BOTÕES DE RADIO
Através do atributo Radio usado com o Tag <INPUT>, podemos criar opções do tipo
Botão de Radio.
Radio As opções a serem escolhidas deverão estar associadas a uma única
variável, por ser permitida apenas uma única escolha. Quando clicamos em alguma
opção, a que foi marcada anteriormente será desmarcada automaticamente.
Se desejar, poderá utilizar o parâmetro Chec
Checkked para deixar uma das opções como
valor padrão. Observe o código HTML apresentado, abaixo, e o efeito a partir da figura:
<html>
<body>
101
<FORM>
SIZE=”10"><br>
Para cada país abaixo, determine sua capital.<br><br>
<table><tr><td>
<b>Irã:</b><br>
<input name=”questao1" type=”radio”
value=”Viena”>Viena<br>
value=”Jerusalém”>Jerusalém<br>
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 hemisférios.<br>
value=”verdadeiro”>Verdadeiro
102
value=”falso”>Falso
</FORM>
</body>
</html>
CAIXAS DE SELEÇÃO
O parâmetro Chec kbo
kboxx, dentro do Tag <INPUT>, permite criar uma lista de opções que
Checkbo
condiciona a escolha de várias opções. Pode-se decidir, entre elas, quais ficarão
marcadas. Para isso, basta definir o atributo Checked em seu código.
Observe o código HTML
HTML, a seguir, e seu efeito, a partir da figura:
<html>
<body>
<FORM>
SIZE=”10"><br>
103
Para cada país abaixo, determine sua

capital.<br><br><table>
<tr><td>
<b>Irã:</b><br>
value=”Teerã”>Teerã<br></td>
<td><b>Iraque:</b><br>
Abeba<br>
value=”Amã“>Amã<br>
<input name=”questao2" type=”radio” value=”Teerã “>Te-
erã <br>
“>Bagdá <br>
value=”falso”>Falso<br><br>
Indique o nome de quatro paralelos importantes no glo-
bo terrestre: <br>
<input name=”item1" type=”checkbox” id=”item1"
value=”1">
Trópico de Câncer <br>
104

value=”2">
Greenwich <br>
value=”3">
Trópico de Capricórnio <br>
value=”4">
Círculo Polar Ártico <br>
value=”5">
Bússola <br>
value=”6">
Lua <br>
value=”7">
Sol <br>
value=”8">
Círculo Polar Antártico <br>
value=”9">
estrelas <br>
value=”10">
México
</FORM>
</body>
</html>
105
LISTA DE OPÇÕES <SELECT>

LISTA
Outro recurso que podemos adicionar em nossos formulários é o uso de menus suspensos
e/ou de rolagem para a escolha entre várias opções listadas. Esse recurso permite que
o usuário escolha uma única opção. Para isso:
utilize o Tag de Conteúdo <SELECT> que exige o atributo Name e permite
Conteúdo
informar quantas opções serão apresentadas, seqüencialmente, através do
atributo Size
Size.
utilize o atributo Selected para informar qual valor será o padrão da listagem
apresentada.
Observe o código, abaixo, com o Tag <SELECT>:
<html>
<body>
<FORM>
106

SIZE=”10"><br>
<table>
<tr><td>
<b>Irã:</b><br>
value=”Teerã”>Teerã<br> </td>
<td>
<b>Iraque:</b><br>
Abeba<br>
“>Amã<br>
<input name=”questao2" type=”radio” value=”Teerã “>Te-
erã <br>
“>Bagdá <br>
Indique o nome de quatro paralelos importantes no glo-
bo terrestre: <br>
value=”1">
107

value=”2">
Greenwich <br>
value=”3">
value=”4">
value=”5">
Bússola <br>
value=”6">
Lua <br>
value=”7">
Sol <br>
value=”8">
value=”9">
estrelas <br>
value=”10">
México<br><br>
Para que uma antena parabólica funcione, ela deve es-
tar apontada para o satélite! Como é que o instalador
da antena sabe onde está o satélite? A maneira mais
correta é achar os pontos cardeais e apontar a antena
para uma direção do céu usando as ________________<br>
<select name=”questao5">
108
<option value=”” selected=”selected”></option>

<option value=”0">estrelas do céu</option>
<option value=”1">coordenadas geográficas do satéli-
te</option>
<option value=»2">antenas de rádio</option>
<option value=»3">empresas de avião</option>
<option value=»4">ondas do mar</option>
<option value=”5">telhas da casa</option>
</select>
</FORM>
</body>
</html>
Veja o efeito desse código na figura, a seguir:
TRANSMITINDO DADOS DO FORMULÁRIO

Já entendemos que os dados de um formulário são transmitidos para o Servidor da
Internet
Internet. Para enviar os dados de um formulário, existe um botão de comando especial
chamado Submit
Submit. Ele envia todos os dados do formulário.
109
As informações do formulário, quando enviadas, utilizando o já conhecido método Get

Get,
Ser vidor
são anexadas e enviadas ao Servidor WebWeb
eb, juntamente com a URL do servidor. Utili-
Post
zando o método Post, as informações são enviadas em um bloco de dados separados
da URL
URL.
ATENÇÃO
Para que um formulário funcione dentro de uma Home Page é necessário verificar com
o Provedor de Internet, se o mesmo permite o uso de formulário no Servidor WebWeb.
Caso permita, devem-se desenvolver rotinas em alguma linguagem que o Servidor utili-
za como ASP
ASP, PHP etc. É através de uma dessas linguagens que se escrevem os pro-
gramas responsáveis pelo envio de dados de um formulário para um Servidor Web
Web.
Para que se crie um botão para envio de dados, observe a sintaxe a seguir:
<INPUT TYPE=“SUBMIT” VALUE=“Texto do botão”>
Observe, agora, no código a seguir, da página do nosso formulário, o uso do parâmetro
Submit para envio dos dados do formulário e observe o efeito na figura que segue:
<html>
<body>
<H2>Responda o Questionário abaixo:</h2>
<FORM>
SIZE=”10"><br>
<table>
<tr><td>
<b>Irã:</b><br>
<input name=”Viena” type=”radio”
value=”questao1">Viena<br>
110
value=”Teerã”>Teerã<br>
</td>
<td>
<b>Iraque:</b><br>
value=”adis”>Adis Abeba<br>
“>Amã<br>
<input name=”questao2" type=”radio” value=”Teerã
“>Teerã <br>
“>Bagdá <br>
Indique o nome de quatro paralelos importantes no
globo terrestre: <br>
value=”1">
value=”2">
Greenwich <br>
value=”3">
111
value=”4">
value=”5">
Bússola <br>
value=”6">
Lua <br>
value=”7">
Sol <br>
value=”8">
value=”9">
estrelas <br>
value=”10">
México<br><br>
Para que uma antena parabólica funcione ela deve estar
apontada para o satélite! Como é que o instalador da
antena sabe onde está o satélite? A maneira mais correta
é achar os pontos cardeais e apontar a antena para uma
direção do céu usando ______________________
<br>
<select name=”questao5">
<option value=”” selected=”selected”></option>
<option value=”0">estrelas do céu</option>
<option value=”1">coordenadas geográficas do satéli-
te</option>
<option value=»2">antenas de rádio</option>
<option value=»3">empresas de avião</option>
112
</select>
<br>
<br>
<label>
<input type=”submit” name=”Submit” value=”Responder”>
</label>
</FORM>
</body>
</html>
EXERCÍCIOS
Desenvolva um Site intitulado Estudo das Matérias Escolares
Escolares.
1) Escolha cinco matérias diferentes. A página principal terá link para as cinco
páginas das matérias.
2) Matéria 1: escreva um texto pertinente ao assunto e formate-o da maneira
mais adequada. Inclua imagens nesta página.
3) Matéria 2: crie uma lista de link’s pesquisados na Internet sobre a matéria.
4) Matéria 3: a página deverá conter uma tabela, utilizando-se todos os recur-
sos de formatação aprendidos como cores, tamanho de células, entre outros.
113
5) Matéria 4: será uma página de link’s para todas as páginas HTML feitas no
curso. Crie uma lista ordenada com link’s. Utilize de recursos de formatação
e imagens para deixar a página mais atrativa.
6) Matéria 5: será uma prova sobre o tema que você escolheu. Utilizando-se de
formulário, faça cinco questões sobre a matéria.
O objetivo deste exercício é utilizar o máximo dos recursos apresentados (imagens,

hiperlinks, tabelas, listas, formatação de fonte, estilo de parágrafo e formulário).
Procure utilizar os recursos com bastante criatividade.
Faça, também, links para os Sites que você pesquisou na Internet.
Viu como foi fácil aprender a criar uma página na Internet através da
linguagem HTML?
Agora, com os comandos estudados ao longo da apostila, você poderá
soltar a imaginação e criar inúmeras páginas personalizadas!
114
GUIA DE REFERÊNCIA RÁPIDA

As tabelas a seguir são um resumo dos principais e mais utilizados comandos HTML.
COMANDOS DE ESTRUTURA
Função Abre com Parâmetros Fecha com
Comando mestre <html> nenhum </html>
Criação de cabeçalho <head> nenhum </head>
Título do documento <title> nenhum </title>
Comentários <!— nenhum —>
backgroud =
“nome do arquivo”
Corpo do Programa <body> bgcolor=”XXXX” </body>
text=”XXXX”
link=”XXXX”
vlink=”XXXX”
COMANDOS DE TEXTO
Finalidade tag Parâmetros Fecha com
Quebra de linha <br> clear=left/right/all nenhum
Parágrafo <p> align=center/right </p>
Negrito <b> nenhum </b>
Itálico <i> nenhum </i>
Texto de máquina <tt> nenhum </tt>
Cabeçalho <h1-6> align=center/right </h1-6>
Fonte <font> face=”nome,nome”
size=+/-XX
color=”XXXX” </font>
Linha divisória <hr> size=XX
width=XX/ XX%
noshade nenhum
Block quote <blockquote> nenhum </blockquote>
Divisão <div> align=left/center/ </div>

right
115
COMANDOS DE FORMULÁRIO
Finalidade tag Parâmetros Fecha com
Form <form> method= get/put

action=”programname” </form>
Input Field <input> name=”variablename”

type=text /password /
checkbox /radio /
submit /reset /image nenhum
Selection List <select> name=”variablename”

size=XX
multiple </select>
Selection Option <option> nenhum nenhum
Scrolling Text Field <textarea> name=”variablename

rows=XX
cols=XX </textarea>
116
BIBLIOGRAFIA
LIMA, Adriano Gomes. HTML 4
4. Senac Minas, 2000. 220p.
RAMALHO, Antônio José. HTML DINÂMICO

DINÂMICO. Ed. Berkeley, 1999. 719p.
STAUFFER, Todd. HTML 6 em 1.

1 São Paulo: Berkeley Brasil, 1998.
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
ANEX
ANEXOO
PLANO DE
TRABALHO
HTML
119
Caro professor,
Você está participando de um projeto da Secretaria de Educação, que tem como objetivo
apresentar as possibilidades da informática na educação, 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 fácil entendimento.
Várias ferramentas serão trabalhadas neste projeto. Neste momento, você aprenderá a
montar páginas para a Internet através do programa KWrite onde você desenvolverá
conhecimentos sobre a linguagem HTML
HTML. Quando conclui-lo, você estará apto a utilizar
todos os recursos de diagramação para desenvolvimento de páginas para Internet, e
também, 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 con-
teúdos em sala, para pesquisas, elaboração de material didático etc. Quanto mais
utilizá-lo, mais estará familiarizado com o recurso e descobrirá, cada vez mais, possibi-
lidades de aplicação.
É importante que, ao utilizar a informática nas suas aulas, as orientações repassadas
aos alunos sejam bem claras e as atividades bem direcionadas. Defina os temas, obje-
tivos, o tempo de trabalho, metodologia. Em caso de pesquisas na internet, faça uma
relação de Sites de busca, de temas específicos, imagens etc e resultados esperados do
trabalho, evitando dispersão 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 conteúdos que devem ser abordados, sugestão de
carga horária, dicas de metodologia e recursos didáticos.
Durante o curso, podem surgir várias idéias de utilização da ferramenta em sala de
aula. Não deixe de anotá-las e discutir outras possibilidades com os colegas e instrutor.
Aproveite o curso!
Sucesso!
QUADRO 01
Conteúdos Previsão Procedimentos Recursos
Carga Metodológicos Didáticos
Horária
1. Apresentação do Instrutor e 1h – Exposição dialogada – Laboratório de

Informática com
Alunos – Dinâmica de apresentação
HTML
– Quadro branco/negro
2. Apresentação Geral do Curso – Pincéis
– Metodologia de trabalho adotada
– Apostila – Informática
no curso
Básica
– Critérios de Aprovação no curso
– Peças de hardware
para demonstração ao
aluno, como funcio-
nam o processador,
memória RAM e HD.
3. Informática Básica 3h – Exposição dialogada –
– Na Era da Informatização avaliação diagnóstica
– Componentes do Computador para verificar o nível de
Periféricos conhecimento da turma
Modem / Fax-modem sobre o tema.
Estabilizador – Demonstração – O
Nobreak instrutor deve demons-
– Sistema Operacional Conceitos e trar todos os procedi-
Convenções mentos necessários
Arquivos e Pastas (visão geral) – Prática Supervisionada
Armazenando Dados em um – Todos os alunos
Computador devem colocar em
– Rede prática os procedimen-
– Internet tos abordados, sob a
– Metasys supervisão do instrutor.
Iniciando os aplicativos do
Metasys
Introdução ao OpenOffice Writer
Introdução ao OpenOffice Calc
– Soluções para Alguns Problemas
da Informática
– Qualidade de Vida no Trabalho

Equipamentos
ORIENTAÇÕES P
ORIENTAÇÕES ARA O PROFESSOR
PARA
Antes de iniciar a sua aula de informática, verifique:
O laboratório está em condições adequadas?
O número de computadores é suficiente para a turma?
O programa está instalado e funcionando adequadamente?
A Internet está funcionando?
O material didático está disponível para a turma?
Tem giz/pincel e apagador disponíveis?
Dica
Não se esqueça 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 dúvidas.
Item 1 - Apresentação do Instrutor e Alunos

Cumprimente a turma e se apresente, dizendo o seu nome, em que área
atua, quais disciplinas ministra. Isso facilita a relação com a turma e diminui
a distância entre vocês.
Para a apresentação dos alunos, peça à turma que formem duplas. Dê a

eles um tempo aproximado de 5 minutos para se conhecerem. Posterior-
mente, peça que um apresente o outro.
Item 2 - Apresentação Geral do Curso

Fale sobre o curso que irá ministrar (HTML
HTML – Criando Páginas na Web),
fazendo um breve resumo a respeito das suas funções e do que é possível
criar utilizando essa linguagem. Você pode perguntar à turma se alguém já
teve a experiência de criar páginas ou se já navegam na Internet, buscando
identificar o nível de conhecimento dos participantes sobre o assunto. Você
pode abrir o navegador de Internet e mostrar uma Página WebWeb, e o Código
Fonte, clicando em exibir e depois em Código Fonte.
Conte aos alunos como será o curso, as formas que utilizará para ensinar.
Diga que é imprescindível que tenham disciplina e se envolvam nas atividades
propostas.
Diga que haverá momentos em que a exposição dialogada será necessária,

mas que haverá muita prática e resolução de exercícios, buscando aplicar o
software à realidade vivenciada em sala de aula.
Fale a respeito das facilidades da linguagem sempre reforçando a necessi-

dade de colocar em prática tudo que será ministrado durante o curso, afinal
uma linguagem deve ser aplicada para que as ferramentas e os benefícius
do programa possam ser assimilados pelos alunos.
Diga que a participação nas aulas é imprescindível para que realmente ocorra
o aprendizado e que, quando houver dúvidas, basta solicitar o seu auxílio.
É importante informar aos alunos que somente serão aprovados se obtive-

rem freqüência mínima de 75% (caso aplicável). Se não obtiverem esse re-
sultado, não receberão o certificado de conclusão.
Item 3 – Informática Básica

Faça um levantamento, na turma, das pessoas que têm conhecimentos de
informática, 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 apresentação de slides. Converse com
eles sobre as situações em que podem ser utilizadas e peça sugestões de
temas para desenvolvimento de atividades durante o curso.
Fale sobre os conceitos básicos da informática, apresentando as partes do

computador (CPU, monitor, teclado, mouse etc), procurando demonstrar como
deve ser a sua utilização. 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 peças do Hardware para eles, para eles visualizarem onde ficam
armazenados os dados e o que faz o computador processar as informações.
Explore os dispositivos de entrada e saída e a importância deles no dia a dia

do professor
Fale sobre as dificuldades que normalmente encontramos na utlização do

computador e seus periféricos
Destaque a utilização dos aplicativos Metasys.
Procure nivelar os conhecimentos entre a turma, esclarecendo as dúvidas

que surgirem durante a aula.
Demonstre todos os procedimentos aos alunos e não se esqueça de deixá-los

praticar, pois a prática é imprescindível para que o aprendizado realmente
aconteça.
QUADRO 02
Horária
4. Criando Páginas na Web: 4h – Exposição dialogada – Laboratório de

– Conceitos Informática com
– Consulta à Internet
KWrite e Mozzila
– Padrões de Desenvolvimento para analisar e tirar
Firefox instalados
Existentes dúvidas a respeito do
tema abordado. – Quadro branco/
– Tipos de Editores de Páginas negro
HTML – Demonstração
– Pincéis
– Hipertextos e Hipervínculos / – Resolução de Exercício
Hiperobjetos (links) na apostila – pág.12 – Apostila – HTML
ORIENTAÇÕES P
PARA
Ao abordar esses conteúdos teóricos, explique aos alunos a importância de
se preocupar com o visual das páginas que serão criadas posteriormente.
Faça com que os alunos se preocupem com layout de cada página, atribuindo
cores e fontes adequadas conforme cada tema.
Antes de iniciar a aula, consulte alguns Sites (bem elaborados e mal elabo-
rados) para demonstrar a turma durante a aula. Isso irá facilitar a condução
da sua aula.
Item 4 - Criando Páginas na Web

Fale sobre as características da linguagem e demonstre como cada Tag deve
ser utilizado, preocupando-se com sua composição e atributos. A melhor forma
de abordar esse conteúdo é através do quadro branco, onde você pode listar
as maneiras de compor cada Tag ag. Essa será uma rápida abordagem. Esses
conteúdos serão trabalhados mais adiante.
Flash, Asp
Fale das tecnologias existentes na área de Internet (Flash
Flash Asp, PHP
PHP,
JavaScript etc) e procure mostrar aos alunos as diferenças entre elas, fa-
zendo-os descobrir o interesse por cada um neste ambiente.
Fale sobre as normas internacionais que regem a forma de se desenvolver

páginas na Internet.
Defina, junto com a turma, um tema que seja interessante para eles e pla-
neje a criação 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 inúmeros editores de criação de páginas

que existem no mercado.
Fale da estrutura obrigatória que toda página na Internet deve possuir e

qual a hierarquia destes elementos. Escolha um Site de sua preferência, e
peça aos alunos para acessarem e identificarem, junto com você, os ele-
mentos abordados na aula.
Comece a criação de uma pequena página de modo a demonstrar como a
construção de uma página deve sempre ser iniciada.
Prossiga, mostrando como se deve salvar uma página e como visualizá-la

no navegador de Internet.
Gradativamente, vá incluindo outros elementos e mostrando como formatar

as fontes, cores, fundo de uma página.
Indique exercícios da apostila para fixar o conteúdo demonstrado.
QUADRO 03
Horária
5. Iniciando um Documento HTML 4h – Exposição dialogada – Laboratório de

– Estrutura de páginas – Demonstração: através Informática com
de exibição dos KWrite e Mozzila
– Elementos Existentes
procedimentos em Firefox instalados
– Comandos da Linguagem: Tag’s datashow ou desenhos – Quadro branco/negro
– Tipos de Tag’s no quadro branco
– Pincéis
– Atributos de Tag’s – Resolução de exercícios
– Apostila – HTML
na apostila pág. 30
– Estrutura principal
– Desejável Datashow
– Salvando sua página
– Tag de Parágrafo <P>
6 . Estilos de Cabeçalho e 1h – Exposição dialogada – Laboratório de

Parágrafos Informática com
– Demonstração
KWrite e Mozzila
– Tag <FONT> – Resolução de Firefox instalados
– Sobre o Atributo Color exercícios na apostila
pág. 36
– Cores de Fundo <BODY>
– Pincéis
– Resolução de
– Tag’s Mais Utilizados (resumo)
Exercícios – pág. 40 – Apostila – HTML
Item 5 - Iniciando um Documento HTML
Neste momento, você irá ensinar a turma a inserir textos nas páginas,
controlando os seus alinhamentos de margens.
Anote, no quadro, todos os passos e peça aos alunos que construam junto
com você. Assim, o resultado poderá ser observado por todos, sendo pos-
sível tirar as dúvidas durante o processo e detectar possíveis erros.
Item 6 - Estilos de Cabeçalho e Parágrafos

Dando continuidade à construção da página que está sendo criada,
inclua, gradativamente, outros elementos, mostrando como formatar
as fontes, cores e fundo de uma página.
Demonstre como os atributos de Tag’s devem ser construídos.
Indique exercícios da apostila para fixar o conteúdo demonstrado. Cada
aluno deverá desenvolver uma página com a sua orientação. Estabeleça
um tempo para conclusão da atividade e, depois, verifique o resultado.
QUADRO 04
Horária
7 . Inserindo Imagens em Docu- 4h – Exposição dialogada – Laboratório de

mentos HTML <IMG> Informática com
– Demonstração
KWrite e Mozzila
– Alinhamento de Imagens e Texto
– Resolução de Exercícios Firefox instalados
na Página
na apostila pág. 54
– Redimensionamento de
Imagens – Pincéis
ORIENTAÇÕES P
PARA
Previamente, liste e consulte alguns Sites que possuam diferentes for-
matos de imagens (fotos, animações, logomarcas). Fazendo isso, você
poderá selecionar os melhores Sites para ilustrar a sua aula.
Para demonstração dos conteúdos abordados, você pode utilizar o mesmo Site
que está sendo criado desde o início do curso ou criar novas páginas a cada
novo tema abordado. Observe o interesse e envolvimento da turma. Criar novas
páginas torna a aula mais dinâmica e interessante.
Item 7 - Inserindo Imagens em Documentos HTML <IMG>

Explique os formatos de imagens existentes e quais são os mais apropriados
para serem utilizados na Internet.
Demonstre a importância de definir tamanhos para as imagens usadas nas

páginas.
Apresente as diferenças entre as extensões de figuras existentes.
Mostre como trabalhar a disposição entre imagens e textos.
Indique exercícios da apostila para fixar o conteúdo demonstrado.
QUADRO 05
Horária
8 . Hiperlinks 4h – Exposição dialogada – Laboratório de

– Demonstração Informática com
– Tipos de URL’s
KWrite e Mozzila
– Criação de Links de Arquivos – Trabalho em Grupo: Firefox instalados
Locais Resolução de Exercícios
na apostila pág. 67 – A – Quadro branco/negro
– Criação de Links para imagem
turma deverá ser – Pincéis
– Tag’s Mais Utilizados (resumo) dividida em 2 grupos,
cada um trabalhará com
um tema (Geografia e
Origem da Calculadora).
Dica
Você pode criar páginas na Internet para abordar vários conteúdos
durante a sua aula. Conteúdos sobre anatomia humana, vegeta-
ção, animais etc., podem ser inseridos no Site, onde poderão ser
criados hiperlinks para textos ou figuras. Imagine que interessante!
Se não tiver Internet disponível na sua escola, você pode salvar as
páginas em CD e exibi-las na sala.
Item 8 - Hiperlink’s
Explique a importância dos hiperlinks existentes nas páginas da
Internet.
Acesse alguns Sites, observando as diferenças dos tipos de hiperlinks.
Aproveite as páginas criadas anteriormente e transforme alguns dos

seus elementos em hiperlinks para outros Sites.
Divida a turma em dois grupos para realização de uma atividade. Dis-

tribua os temas para que cada grupo desenvolva um conjunto de pági-
nas, utilizando os recursos apresentados, conforme os enunciados da
página 67 da apostila. Grupo 1: Site sobre Geografia.
Grupo 2: Site sobre a História da Calculadora.
QUADRO 06
Horária
9 . Criando Listas 1h – Exposição dialogada – Laboratório de

– Tipos de Listas
KWrite e Mozzila
– Personalizando Listas Ordenadas Firefox instalados
– Personalizando Listas não-
ordenadas
– Pincéis
1 0 . Utilizando TTabelas
abelas 3h - Exposição dialogada - Laboratório de
Informática com
- Demonstração
- Tag de Tabela <TABLE> KWrite e Mozzila
- Proposta de Exercício Firefox instalados
- Tag de Linha <TR> para ser realizado em
- Quadro branco/negro
- Tag de Célula <TD> casa: Tabela Periódica
- Pincéis
- Tags de mescla <colspan> e - Resolução de
<rowspan> exercícios na apostila - Apostila – HTML
pág. 107
- Tag de cabeçalho <TH>
- Atributos de tabela
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
Item 100 - Utilizando TTabelas
abelas
Fale sobre a importância das tabelas, explicando que mais de 90%
das páginas na Internet fazem uso de tabelas.
Peça para os alunos fazerem algum tipo de tabela para fixação dos Tag’s
que a englobam, como por exemplo, tabela de preços ou produtos.
Proponha um desafio para a turma. Peça-os que tentem fazer o exercício

da tabela periódica em casa. É um exercício trabalhoso que não é obriga-
tório. Você pode propor um outro tipo de exercício relacionado à sua disci-
plina, por exemplo. Sugestão: uma tabela com imagens de animais.
QUADRO 07
Horária
11
11.. TTrabalhando
rabalhando com FFormulários
ormulários 4h – Exposição dialogada – Laboratório de
– Campos de formulário <INPUT>
KWrite e Mozzila
– Criando Caixas de texto – Prática Supervisionada: Firefox instalados
– Campos de senha Trabalho Final de Curso
- Exercícios na apostila – Quadro branco/negro
– Botões de Radio
pág. 132 (o instrutor – Pincéis
– Caixas de seleção pode optar por pedir o
– Lista de opções <SELECT> trabalho individual ou
em grupo)
– Transmissão de Dados de
formulário
Encerramento do Curso Verificação de atendi- Formulário: Avaliação

mento às expectativas do Curso pelo Aluno
– Avaliação do Curso
da turma.
Item 11 - Formulários
Defina a finalidade do uso dos formulários nas páginas e quais os
métodos existentes para que os dados sejam enviados através da
Internet.
Apresente os tipos de campos que podem ser criados com HTML

HTML.
Peça aos alunos que criem um formulário para cadastro de clientes ou

até mesmo para cadastramento de currículos.
Este será o último exercício do curso. Você pode pedir a turma que faça
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 qua-
lidade.
Analise cada trabalho desenvolvido e não se esqueça de dar um

feedback para cada aluno.
Encerramento do Curso
Termine o curso agradecendo aos alunos pela atenção e destacando o
bom trabalho e desempenho dos mesmos.
Diga que agora estão aptos para desenvolver páginas com maior
interatividade. Basta tentar!
CONSTRUÇÃO
DE WEB SITES
JAVASCRIPT
J a v a S c r i p t
Introdução
135
CONSTRUÇÃO DE WEB SITES - JavaScript
O QUE É A LINGUAGEM JA
LINGUAGEM VASCRIPT?
JAV
Você está prestes a conhecer o lado funcional na criação de um Site para a Internet!
Site
O JavaScript é uma das inúmeras linguagens de programação utilizadas na
Internet. Seu principal foco é permitir uma maior funcionalidade às páginas
básicas de um Site
Site, conhecidas como HTML
HTML, que é a linguagem responsável
pela exibição dos elementos. Tudo aquilo que você observa nas páginas de um
simples Site da Internet é diagramado e montado pela linguagem HTML
HTML.
Vá a um computador mais próximo e abra a página www.chemkeys.com. Nela,
você vai encontrar materiais didáticos e textos de referência para o ensino da
Química. Você estará navegando em uma página HTML e aprendendo um pouco
mais sobre o fascinante mundo da Química.
Quando agregamos esse conteúdo da linguagem HTML aos pequenos progra-
mas do JavaScript
JavaScript, chamados script’s
script’s, conseguimos construir um Site com vários
recursos e funcionalidades interessantes que vão deixar suas páginas mais “inte-
ligentes” e sofisticadas.
Exemplo
Um exemplo de evidência do JavaScript na Internet seriam aquelas páginas que

costumam solicitar o nome do visitante e, em seguida, cumprimenta-o como “Se-
nhor” e deseja-lhe um “Bom dia!” ou uma “Boa noite!”, conforme o horário em que
esse visitante estiver acessando a página. Isso só será possível com a criação de
uma rotina ou script desenvolvido através dos comandos da linguagem JavaScript
JavaScript.
Poderíamos, também, utilizar essa linguagem para desenvolver uma Página HTML
de exercício com questões de múltipla escolha sobre a Física, por exemplo, como
as que seguem a seguir:
137
Numa residência, existem possibilidades para dois tipos de tensões: 110 V e 220
V. No mercado, encontram-se chuveiros de 2200 W idênticos, exceto pelas tensões
de operação, 110 V ou 220 V. Podemos afirmar que, para o mesmo fluxo de água:
a) de 220V gasta a metade da energia elétrica, para obter a metade do
aquecimento do de 110V.
b) de 220V gasta o dobro da energia elétrica, para obter a metade do

c) de 220V gasta o dobro da energia elétrica, para obter o dobro do aque-

cimento do de 110V.
d) de 220V gasta a metade da energia elétrica, para obter o dobro do

e) consumo de energia elétrica e o aquecimento obtido são os mesmos

nos dois chuveiros.
O fenômeno de Indução Eletromagnética é essencial para explicar o funcionamento de:

a) transformadores
b) pilhas
c) lâmpadas
d) torradeiras
e) chuveiros elétricos
Você não precisa responder

responder..
É apenas um exemplo.
O HTML só é capaz de montar os campos das alternativas e as questões.
Já o Ja
JavvaScript consegue avaliar, ao se clicar em uma das opções, qual
delas seria a correta.
138
JAVA E JA
JAV VASCRIPT
JAVASCRIPT:: CONCEITOS E DIFERENÇAS
Quando pensamos nas expressões Java e JavaScript
JavaScript, pode-se pensar que elas
teriam algo em comum. Mesmo que ainda exista uma semelhança nos nomes
dessas linguagens, saiba que são linguagens com finalidades diferentes
diferentes. O
JavaScript foi criado pela empresa Netscape e se chamava LiveScript
LiveScript. Em
meados de 1995, quando foi adotado pela empresa Sun Microsystems
Microsystems, rece-
beu o nome atual.
Falando de suas diferenças

O JavaScript é uma linguagem de script’s
script’s. Estes, possuem a função de execu-
tar comandos através dos programas que, por exemplo, usamos para navegar na
Internet, funcionando apenas nos Sites que visitamos. Todos os códigos construídos
Sites
com essa linguagem são embutidos nas páginas HTML HTML.
Já o Java é uma linguagem que não depende de navegador para ser executada.
Com ela, podem-se criar programas próprios como jogos para celular, sistemas,
entre outras aplicações.
Então quer dizer que

que…
O JavaScript é uma linguagem interpretada, ou seja, algum programa

tem que entender o seu código e executar, nesse caso, os navegadores de
Internet.
E o Java é uma linguagem compilada*, que transforma seu código em
um programa independente.
*Compilada – Tipo de tradução criada para a linguagem binária do computador.

139
140
J a v a S c r i p t
JavaScript
Linguagem
Orientada a
Objetos
141
ORIENTAÇÃO A OBJETOS
ORIENTAÇÃO
A linguagem JavaScript é uma linguagem orientada a objetos. Chamamos de
Programação Orientada a Objetos o que desenvolvemos nesse tipo de lingua-
gem. Esse é um novo conceito que muda a maneira de se desenvolver a programa-
ção, diferente do método convencional conhecido como Programação
Estruturada
Estruturada.
Programação Orientada a Objetos significa que todos os elementos de uma
página da Internet são tratados como objetos: textostextos, links
links, botões
botões, figuras
figuras,
plano de fundo da página
página, título 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
são colocadas fotos de todas as espécies, cada foto que você vê é considerada um
objeto para o Ja
JavvaScript que exerce controle sobre ele. Se você quiser, pode colo-
car uma borda ao redor desse objeto, como se fosse uma moldura.
Compreendendo melhor esse conceito...

Ao acessar uma página da Internet, o navegador que você utiliza criará um núme-
ro de objetos que possuem propriedades e métodos próprios. E são esses ele-
mentos que o JaJavvaScript consegue modificar, alterando, assim, tudo ou quase
tudo, em uma página da Internet.
As propriedades de um objeto são suas características. Cada objeto possui ca-
racterísticas próprias. Uma das propriedades de uma página da Internet, por
exemplo, é o seu plano de fundo.
fundo Podemos, através do JavaScript
JavaScript, alterar sua
cor de fundo.
Os métodos de um objeto são seus comportamentos. Cada objeto possui métodos
próprios. Por exemplo, em uma página, podemos escrever textos, inserir imagens
etc. Esses são comportamentos da página. Um botão no qual clicamos, executa
uma função. Esse é um comportamento do objeto botão.
Vamos comparar esses conceitos com objetos reais, como o corpo humano!
143
Objeto
Objeto: uma pessoa.
Propriedades: 1,73 altura, 60 kg, olhos castanhos, more-
na, cabelos negros etc., ou seja, as características do objeto.
Métodos:
Mét odos: andar, falar, sentar, pular, usar calça jeans, entre
outros., ou seja as ações que o objeto pode executar.
Se um ser humano pudesse ser controlado pela linguagem
JavaScript
JavaScript, seria possível, com um simples comando,
propriedades
alterar suas características (propriedades
propriedades) e seus compor-
métodos
tamentos (métodos
métodos).
MANIPULAÇÃO DE OBJETOS
No exemplo sobre as questões da Física, dado anteriormente, cada opção que o
usuário escolhe é um objeto
objeto. Sua característica seria estar marcado ou não, certo
ou errado, dependendo de qual alternativa o usuário escolher. E seu mét odo
método
(comportamento) é o fato de ser clicado ou não. Num momento, uma resposta
pode estar marcada e, em outro, não! Assim funcionam muitas das questões de
provas que fazemos na escola quando temos que escolher uma das opções listadas.
TIPOS DE PROPRIEDADES
Cada objeto existente na manipulação do JavaScript possui propriedades (ca-
racterísticas). Sabemos, por exemplo, que um documento HTML contém título e
corpo. Estes seriam, então, o que chamamos de propriedades existentes nesse
documento.
Existem dois tipos de propriedades
propriedades. Algumas são os objetos propriamente ditos,
enquanto outras não podem ser herdadas. Na linguagem HTML HTML, por exemplo,
existem os campos de formulário. Esses campos são dependentes de seu objeto-
pai
pai, chamado de Form
Form.
Esse formulário é criado dentro de um documento HTML
HTML, representado, em
JavaScript
JavaScript, pelo objeto Document
Document. Com isso, o objeto Form é uma proprieda-
de do objeto Document e seus campos são suas pr opriedades
opriedades. Vamos ilustrar
propriedades
esses objetos:
144
DOCUMENT
Objeto-FILHO de DOCUMENT
e PAI dos CAMPOS DE FORM
Objeto-PAI
F ORM
CAMPOS DO FFORM
ORM
Objeto-FILHO de FORM
Não possui filhos.
Exemplo
Em uma de suas aulas de Geografia, o professor ensina e demonstra os diversos conti-

nentes apresentados no mapa Mundi. Logo em seguida, algum aluno o interrompe
para fazer perguntas específicas sobre a região Sudeste do Brasil. Seu professor, pronta-
mente, lhe responde. Ou seja, até o momento da explicação sobre os diversos continen-
tes do mundo, a ação (método) do professor era demonstrar isso no mapa Mundi. Logo
após ter sido interrompido pelo aluno e ter respondido sua pergunta, sua ação mudou.
Conclusão, os métodos são alterados conforme algum evento for aplicado.
Já as propriedades podem conter valores (informações que podem ser altera-
das, mudando, assim, a propriedade do objeto). A utilização de propriedades
se dá acompanhada de seu objeto, sendo separadas dele, por um ponto apenas.
Veja, a seguir, a sintaxe de utilização de propriedades
propriedades
opriedades:
nomeObjeto.propriedade = valor;
145
Exemplo
ser_humano.altura = 1.75;
opção_fisica1.value = true;
No exemplo acima, existe um objeto chamado ser_humano que, através da sua

propriedade chamada altura
altura, terá seu valor para 1.75
1.75. E, no segundo caso, po-
demos verificar se o valor da opção 1 da questão de Física será verdadeiro (true)
ou falso (false).
MÉTODOS DOS OBJETOS

Cada objeto contém seus próprios métodos
métodos. Portanto, causaria erro se usásse-
mos um método em um objeto que não o possui.
Saiba que todo método está associado ao objeto que ele modifica.
Em um documento, por exemplo, o usuário pode usar o método para escrever
nele, exibindo um texto na página. Podemos utilizar métodos para alterar as
propriedades de um objeto ou até mesmo executar uma tarefa específica.
Veja a sintaxe de utilização dos métodos
métodos:
nomeObjeto.método(argumento);
Exemplo
ser_humano.ação(andar)
No exemplo, existe um objeto chamado ser_humano que, através de seu méto-
do chamado ação
ação, recebeu, entre suas várias ações, a que fará com que o objeto
possa andar
andar. Posteriormente, pode-se alterar sua ação para parar
parar.
Lembre-se!
Uma propriedade sempre recebe um valor e, no método
método, modificamos
seu comportamento. É por isso que, na propriedade
propriedade, utiliza-se o sinal
de igualdade = e, no método
método, utilizam-se parênteses ()
().
146
EVENTOS
Diferentes das propriedades e métodos dos objetos, que são definidos sempre pelo
JavaScript
JavaScript, os eventos são as reações externas para executar determinada ação.
Exemplo
Você está andando por uma calçada e, de repente, alguém esbarra em você e o
empurra para fora dela.
Até o momento de você ter sido empurrado, seu comportamento (métodométodo) era
método
andar sobre a calçada. Após a ação dada pela pessoa que o empurrou, seu com-
portamento mudou! Portanto, o evento trata-se da ação que acarretará na mu-
dança de qual método é chamado e/ou do valor da propriedade de um objeto.
O usuário faz isso instintivamente, clicando em botões, links da Internet, entre
outras ações.
A linguagem JavaScript disponibiliza para a página HTML inúmeros eventos e,
por isso, eles são declarados nos próprios Tag’s da linguagem.
Interligação dos TTag’s

ag’s com o HTML
Tag’s são os comandos utilizados para criar e formatar o conteúdo de uma página.
Veja, a seguir, a sintaxe de utilização dos eventos
os:
entos
<TAG nomeEvento=”Comandos JavaScript”>
TAG é uma instrução da linguagem HTML

HTML.
Evento é o nome da ação gerada pela linguagem JavaScript

JavaScript.
Comandos JavaScript
“Comandos JavaScript” são as instruções JavaScript a serem exe-
cutadas. Elas estarão sempre entre aspas.
Caso haja mais de um comando JavaScript a ser executado para o mesmo evento
evento,
eles deverão estar separados por ponto e vírgula (;;), 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 programação, a JavaScript segue a

mesma estrutura semântica e possui, em geral, as mesmas estruturas.
A seguir, vamos conhecer essa estrutura e saber como se dá sua utilização.
VARIÁVEIS
Variáveis nada mais são que espaços, na memória do computador, que servirão para
ariáveis
armazenar algum tipo de informação, como um nome, um número, um texto etc.
Quando se cria uma variável*, seu ciclo de vida começa ao iniciar a execução da
rotina JavaScript e termina quando essa execução se encerra.
Exemplo
disciplina = “MATEMÁTICA”
valor = 102
tempo = “Verão”
No exemplo acima, criamos uma variável chamada disciplina que está receben-
do, como valor, a palavra MATEMÁTIC
MATEMÁTICA, assim como a variável tempo está rece-
TEMÁTICA
bendo a palavra Verão
Verão.
Nomes de Variáveis
Variáveis
Assim, como na maioria das linguagens de programação, em JavaScript
JavaScript, uma
variável é declarada, dando-se um nome qualquer a ela. Porém, esse nome obe-
dece a algumas regras. O nome de uma variável, por exemplo, jamais poderá
começar com um número ou símbolo qualquer, mas, sempre sempre, com uma letra ou
o caractere (__) underscore ou underline. Recomenda-se que o nome da variável
seja significativo, ou seja, indique o que ela representa.
Veja alguns exemplos:
VÁLIDO INVÁLIDO
nome 2nome
idade 31_idade
_cidade &1_cidade
*Variável – Como o próprio nome indica, seria algo que varia, que não é constante.
151
OBSERVAÇÃO
Case Sensitive
A linguagem JavaScript é uma linguagem Case SensitiveSensitive, ou seja, faz dife-
renciação entre letras maiúsculas e minúsculas. Se você declarar uma variável
com o nome aula e, ao chamá-la, você utilizar AULAAULA, o Javascript avisará que
essa variável não existe, pois não foi declarada nenhuma variável chamada AULA
e, sim, aula
aula. Fique atento a isso, procurando evitar variáveis de muitas formas
diferentes. Crie um padrão para todas elas.
DESENVOLVIMENTO DE SCRIPT’S
DESENVOLVIMENTO
As instruções da linguagem JavaScript podem ser escritas em qualquer editor ASCII
ASCII.
O Bloco de Notas do Windows
Windows; o Edit do MS-DOS ou o KWrite
KWrite, presentes nas
distribuições do Linux
Linux. Os arquivos devem ser salvos com extensão .html ou .JS
.JS.
Para visualizar a execução do script
script, basta acessá-lo através do Browser*.
Abra nosso editor de desenvolvimento de páginas, o Kwrite
Kwrite, conforme aprende-
mos no curso HTML
HTML, para iniciarmos a prática de desenvolvimento de script’s
script’s.
clique no botão Aplicativos (localizado no canto inferior esquerdo da
tela principal do Linux
Linux);
e no item Escritório
Escritório, clique em KWrite
KWrite.
Inicie, digitando os Tag’s iniciais de uma página HTML

HTML..
*Browser – O mesmo que navegador da Internet (também conhecido como Web Browser
ou simplesmente Browser
Browser).
152
<HTML>
<HEAD><TITLE>Prova de Física</TITLE></HEAD>
<BODY>
Primeiramente, vamos inserir o código HTML em nosso documento, digitando as
seguintes instruções:
<html>
<head><title>Prova de Física</title></head>
<body>
</body>
</html>
No corpo da página, vamos iniciar nosso primeiro script em JavaScript

JavaScript. Ele será
colocado entre os Tag’s HTML <body> e </body>.
Todas as vezes que você for iniciar um script
script, será necessário informar ao HTML
que ele será iniciado. Isso se dá através do Tag <SCRIPT>, que deverá ser fechado
após terminar todo o código 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 desenvolvi-
do na linguagem JavaScript
JavaScript. Em seguida, vamos solicitar ao JavaScript que
escreva algo na tela. Para isso:
digite o seguinte código:
document.write(“Prova de Física”);
Conforme você já aprendeu sobre orientação a objetos, observe que o objeto
document informa ao JavaScript que será feito algo na página. E, em seguida,
o método write escreve algo no documento, nesse caso, a frase Prova de Física
Física.
Termine seu script com o Tag </SCRIPT>, e finalize seu documento HTML com
os Tag’s </BODY> e </HTML>. Compare como nosso código completo deverá fi-
car no KWrite
KWrite:
153
<HTML>
<BODY>
document.write(“Prova de Física”);
</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 botão de inicialização Metasys e
selecionar o menu Gerenciador de Ar quiv
Arquivos
quivos
os). Você pode navegar, clicando nos
diretórios à sua esquerda até chegar ao diretório que está seu arquivo.htm ou,
na caixa de texto Localização
Localização, você pode digitar o caminho até o diretório do
arquivo e clicar Enter
Enter
er. Os arquivos desse diretório aparecerão ao lado direito do
Konquer
onqueroror
or. Então, clique duas vezes no arquivo exemplo.html
emplo.html. Sua página será
carregada no navegador.
EXERCÍCIOS
Com os códigos que aprendeu até o momento, crie uma página com infor-
mações a respeito do nosso País: população, localização, capital, estados
e clima.
1 ) No editor de texto KWrite
KWrite, crie uma página HTML cujo título seja “Bra-
sil” e o corpo da página contenha as características do País.
JavaScript
2 ) O corpo da página deverá ser feito com um script (JavaScript
JavaScript), utili-
zando a função que aprendemos: document.write
document.write.
3 ) Salve o arquivo no diretório à sua escolha com o nome: pais.htm
pais.htm.
4 ) Visualize o arquivo no FireFox
FireFox.
154
J a v a S c r i p t
COMANDOS
BÁSICOS
155
Vamos conhecer, agora, outros comandos básicos existentes na linguagem

JavaScript
JavaScript.
MÉTODO DOCUMENT.WRITE()
DOCUMENT.WRITE()
Conforme mostrado anteriormente, o método write()
write(), pertencente ao objeto
document
document, serve para escrever algo na página (documento HTML
HTML). Veja pelo
exemplo a seguir:
document.write(“Olá Mundo!”);
MÉTODO ALERT()
A finalidade desse método é emitir uma caixa de mensagem para chamar a aten-
ção em algo que alguém tenha feito certo ou errado.
Veja sua forma de utilização no código a seguir:
alert(“Parabéns, Você acertou!”);
O resultado desse comando geraria a seguinte mensagem no navegador:
157
EXERCÍCIOS
1) Crie uma página que possa emitir mensagens com o nome de alguns
dos elementos da Tabela Periódica.
Observe o modelo da página a seguir:
<HTML>
<BODY>
alert(“Hidrogênio”);
alert(“Lítio”);
alert(“Sódio”);
alert(“Potássio”);
alert(“Rubídio”);
alert(“Césio”);
alert(“Frâncio”);
</SCRIPT></BODY>
</HTML>
2) Utilize o editor de texto KWrite para redigir todo o código com os ele-
mentos 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 elemen-
tos que digitou no código.
158
MÉTODO CONFIRM()
Uma outra alternativa, além do método alert()
alert(), é o método confirm()
confirm(). Ele exibe
uma caixa de diálogo e os botões de OK e Cancelar
Cancelar. Caso seja pressionado o
botão OK
OK, o método retornará o valor booleano True
rue. Pressionando o botão Can-
celar
celar, será retornado o valor False
alse.
159
Com isso, o usuário poderá determinar uma tomada de decisão dentro de seu
script como, por exemplo, construir uma avaliação com questões fechadas que
terão, como resposta, Sim e Não ou OK e Cancelar
Cancelar.
Veja sua sintaxe de utilização:
confirm(“Tem Certeza??”);
Esse comando gerará a seguinte mensagem no navegador:
Veja, agora, pelo código a seguir, um modelo de prova prática com questões sobre
estudos espaciais:
<HTML>
<HEAD><TITLE>Questões Espaciais</TITLE></HEAD>
<BODY>
alert(“Marque OK para sim ou CANCELAR para não”)
alert(“O que a exposição prolongada à falta de gra-
vidade pode causar?”);
confirm(“Perda de peso”);
confirm(“Perda muscular”);
confirm(“Tonturas”);
confirm(“Náuseas”);
confirm(“Perda óssea”);
confirm(“Febre”);
confirm(“Mudanças na pressão sanguínea”);
confirm(“Hipotermia”);
confirm(“Mudanças no equilíbrio”);
confirm(“Mudanças no músculo cardíaco”);
document.write(“Fonte: www.discoverynaescola.com”);
</SCRIPT>
</BODY>
</HTML>
160
EXERCÍCIOS
KWrite, faça uma página que:
escreva a seguinte frase na página, utilizando um método
JavaScript
JavaScript: “Os países a seguir fazem parte da América Latina:”.
Para cada país utilize o método confirm e escreva os seguintes no-
mes: Brasil, Equador, Itália, Argentina, Uruguai.
Utilize o método alert para escrever: “Fim da questão.”.
Salve a página como america.html e visualize o resultado no Firefox
Firefox.
MÉTODO PROMPT()
O método prompt é uma forma de você solicitar alguma informação ao visitante,
como seu nome, sua idade etc, podendo, tais informações, serem manipuladas
na página. Poderíamos solicitar o ano de nascimento da pessoa, por exemplo,
para a página retornar a sua idade.
A sintaxe desse método segue a seguinte descrição:
prompt(valor,padrão);
padrão
padrão: é o valor padrão que será exibido na tela do prompt para orientá-lo
sobre o lugar onde você deverá digitar a mensagem.
Veja um exemplo da utilização do método prompt
prompt:
<script language=”javascript”>
seu_nome = prompt(“Digite seu Nome:”,”digite
aqui...”);
document.write(seu_nome + “ seja Bem Vindo a sua
página de estudos!”);
</script
Veja o resultado do script acima:
161
Após digitado o nome e pressionado o botão OK

OK, aparecerá, na página, o seguinte texto:
162
J a v a S c r i p t
COMANDOS
CONDICIONAIS
E DE REPETIÇÃO
163
No exemplo anterior com o método confirm

confirm, foi possível definir opções de respostas para
o usuário, porém, não houve como calcular quantas respostas estavam certas e quantas
estavam erradas.
Para que isso seja possível, é necessário conhecer os comandos condicionais e/ou de
repetição da linguagem. Vejamos a utilização dos principais:
INSTRUÇÃO IF ... ELSE

Realiza determinada ação de acordo com uma condição. Sua sintaxe básica é:
if (condição) {
comandos
} else {
comandos
}
Caso haja mais de uma condição a ser avaliada, pode-se fazer o uso da instrução else
if
if. Observe sua sintaxe:
if (condição1) {
comandos
} else if (condição2) {
comandos
}
Vamos ver a utilização do comando if

if, analisando o código abaixo:
<HTML>
<HEAD><TITLE>Comparando valores</TITLE></HEAD>
<BODY>
a = 10;
b = 2;
if(a > b){

alert(“O número: “ + a + “ é maior que “ + b);
165
} else {
alert(“O número: “ + b + “ é maior que “ + a);
}
</SCRIPT>
</BODY>
</HTML>
No exemplo, foram criadas vvariáv

ariáveis na memória do computador, que como já vimos,
ariáveis
são espaços para guardar algum tipo de informação durante o processamento do nosso
programa. Nesse caso, foram criadas as variáveis a e b, cada uma recebendo um valor.
a” recebeu o número 10 (dez) e a variável “b
A variável “a b” recebeu o número 2 (dois).
Em seguida, foi feita uma comparação para que se pudesse saber qual variável tem o
maior número através da instrução if que testa se a variável a é realmente maior que
a variável b.
Caso essa condição seja verdadeira, como acima, será dada uma mensagem na tela,
informando que o valor da variável a é maior que o da variável b. E, caso contrário, se
else
não for (else
else), será dada outra resposta. Veja, a partir do exemplo acima, a resposta
que será apresentada no navegador:
Faça o TTeste!
este!
Altere os valores das variáveis acima.
Veja, novamente, no navegador, qual valor é

retornado.
166
EXERCÍCIOS
KWrite, abra o arquivo america.html
america.html.
1) Reescreva o código para verificar se a opção selecionada está certa ou errada.
Lembre-se de que o método confirm retorna uma resposta booleana (true
ou false) que pode ser capturada.
Por exemplo:
brasil=confirm(“Brasil”);
A variável em questão conterá os valores true ou false, dependendo da res-

posta do aluno.
2) Utilizando o comando if
if, conte quantas questões o aluno acertou.
Por exemplo:
Nesse caso, é necessário, antes de iniciar o primeiro if
if, criar uma variável
que conterá a nota do aluno.
nota=0;
Então, podemos verificar se ele acertou a questão e contar o ponto.
if (brasil==true){
nota=nota+1;
}
3) Utilizando o método alert
alert, escreva: “Fim da questão.” e a nota do aluno.
Salve a página como america-nota.html e visualize o resultado no Firefox
Firefox.
INSTRUÇÃO WHILE
A instrução while realiza uma ação enquanto determinada condição for satisfeita.
Entendendo melhor essa construção...

Em uma página, é solicitado que você informe uma senha, caso contrário, será exibida
uma mensagem de alerta informando a você que a senha é obrigatória. Esse exemplo
pode ser feito através da instrução while
while.
167
Sua sintaxe básica é:

while (expressão) {
comandos
}
Veja, no exemplo a seguir, a utilização do laço while

while, que é repetido por um total de 10
vezes:
num=0;
while(num<10){
document.write(“Número: “+num+”<br>”);
num++;
}
No exemplo, foi declarada, na memória do computador, uma variável chamada num
que recebeu, como valor inicial, o zero
zero. Logo depois, foi usado o comando while (en-
quanto) que faz uma comparação com esse valor, verificando se o mesmo é menor que
10 (dez). Sendo verdadeira sua comparação, nesse caso, a variável num é incrementada
com mais 1(um), (num++), ou seja, zero + zero + 1 = 1 1. E, assim, sucessivamente, até
o num deixar de ser menor que 10 (dez).
Note também que, a cada vez que é testada nossa condição, será escrito, na página, o
número através do comando document.write
document.write.
OBSERVAÇÃO
Além dos métodos condicionais apresentados, a linguagem JavaScript suporta

um método alternativo para criar expressões condicionais. Esse método, já supor-
tado em outras linguagens de programação, permite ao usuário construir um exem-
plo prático e simples para sua utilização. Sua sintaxe básica tem a seguinte forma-
ção:
(condição) ? Valor verdadeiro : Valor falso;
condição
condição: é a expressão a ser avaliada.
Exemplo: a < b
Valor vverdadeir
erdadeiro: especifica a ação que ocorrerá se a condição for verdadeira.
erdadeiro
Valor falso
falso: especifica a ação que ocorrerá caso a condição seja falsa.
168
INSTRUÇÃO SWITCH
Essa instrução é bem semelhante à estrutura if
if, porém é mais eficiente em razão da
sua simplicidade de utilização e entendimento. Veja a sintaxe utilizada para o uso de
instruções switch
switch:
<HTML>
<HEAD><TITLE>Verificando Resposta</TITLE></HEAD>
<BODY>
resposta = 2;
switch(resposta){
case 1:
alert(“O número é 1!”);
break;
case 2:
break;
case 3:
break;
}
</SCRIPT>
</BODY>
</HTML>
No exemplo apresentado, foi declarada uma variável chamada resposta que recebeu
o número 2. A estrutura switch tem a função de verificar qual número a variável rece-
beu 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

switch, caso a condição seja satis-
feita. Se não utilizar esse comando, o comando switch continua avaliando as outras
opções até encontrar o seu final.
A opção default pode ser utilizada ao final do comando switch

switch. Nesse caso, se nenhuma
comparação de case for satisfeita, ele executa o que estiver no default
default.
EXERCÍCIOS
No editor de texto KWrite
KWrite, faça a seguinte página:
1) Utilizando o método prompt
prompt, peça para o usuário digitar um número.
2) Conte de 0 até o número, utilizando o comando while
while.
3) Escreva, dentro do comando while
while, o comando switch
switch, verificando se o nú-
mero é menor que 5. Toda vez que isso acontecer, escreva o número; e quan-
do o número for maior que 5, escreva: “Número maior que 5”.
4) Utilizando o método alert
alert, escreva: “Fim.”.
Salve a página como numeros.html e visualize o resultado no Firefox

Firefox.
170
J a v a S c r i p t
FUNÇÕES
171
Funções em Ja JavvaScript nada mais são que uma rotina (pacote de comandos
JavaScript
JavaScript) que possui um conjunto de instruções a ser executado. Sua sintaxe com-
põe-se dos seguintes parâmetros:
function nomeFunção(argumentos) {
Comandos
}
Se a função possuir argumentos, estes deverão estar colocados entre parênteses, após
o nome da função conforme foi mostrado. O corpo da função deverá ser colocado entre
chaves. Estas, indicarão o início e o fim do bloco de instruções.
Normalmente, as funções são definidas dentro do cabeçalho da página HTML
HTML, repre-
sentadas pelo Tag <HEAD>. Com isso, todas as funções são carregadas assim que a
página é carregada, bem antes que o usuário pense em executá-las.
Veja um exemplo simples de uma função que exibe o significado de algumas palavras
ao clicar sobre elas.
Primeiramente, vamos ver como a função ficará montada:
function significado(palavra){
switch (palavra){
case “Sinônimos”:
alert(“São palavras que apresentam, entre si, o
mesmo significado.”);
break;
case “Antônimos”:
alert(“São palavras que apresentam, entre si,
sentidos opostos, contrários.”);
break;
case “Homônimos”:
alert(“São palavras iguais na forma e diferentes
na significação.”);
break;
case “Parônimos”:
alert(“São palavras de significação diferente,
mas de forma parecida, semelhante.”);
break;
}
}
173
No exemplo, construímos uma função chamada significado que está recebendo, como
argumento, a variável palavra
palavra. Essa variável, dentro do código, será testada para sa-
ber qual palavra o usuário escolheu e, assim, saber seu significado
significado. Note que foi usa-
da a estrutura condição switch que testará qual será a palavra.
Agora, iremos desenvolver a parte HTML que mostrará as palavras nas quais o usuário
deverá clicar para saber o significado. Veja pelo código a seguir:
<BODY>
<h1>O que são:</h1>
<a
href=”javascript:significado(‘Sinônimos’);”>Sinônimos</
a><br>
<a
href=”javascript:significado(‘Antônimos’);”>Antônimos</
a><br>
<a
href=”javascript:significado(‘Homônimos’);”>Homônimos</
a><br>
<a
href=”javascript:significado(‘Parônimos’);”>Parônimos</
a><br>
</BODY>
Sinônimos, Antônimos
Essa é a parte do código que mostra, na página, as palavras Sinônimos Antônimos,
Homônimos e Parônimos
Parônimos. Elas serão simples links que vão chamar a função signi-
ficado palavra
ficado, passando para a variável (palavra
palavra) as palavras que desejamos testar na fun-
ção. Veja pelo detalhe do primeiro link:
<a href=”javascript:significado(‘Sinônimos’);”>
Sinônimos</a><br>
Sinônimos, que é exibida como link na tela, chama a função significado e
A palavra Sinônimos
passa para a variável palavra
palavra, a palavra Sinônimos
Sinônimos. Quando Sinônimos chegar à
função, testará, pela condição do comando switch
switch, qual é a palavra. Só, então, emitirá
um aviso com seu significado. Nesse caso, a função daria como resposta a seguinte
mensagem:
174
Veja, abaixo, o código completo da página do significado de palavras:
<HTML>
<HEAD><TITLE>Significado das Palavras</TITLE>
function significado(palavra){
switch (palavra){
case “Sinônimos”:
alert(“São palavras que apresentam, entre si, o
mesmo significado.”);
break;
case “Antônimos”:
alert(“São palavras que apresentam, entre si,
sentidos opostos, contrários.”);
break;
case “Homônimos”:
alert(“São palavras iguais na forma e diferentes
na significação.”);
break;
case “Parônimos”:
alert(“São palavras de significação diferente,
mas de forma parecida, semelhante.”);
break;
}
}
</SCRIPT>
</HEAD>
<BODY>
<h1>O que são:</h1>
<a
href=”javascript:significado(‘Sinônimos’);”>Sinônimos</
a><br>
<a href=”javascript:significado(‘Antônimos’);”>
Antônimos</a><br>
<a href=”javascript:significado(‘Homônimos’);”>
Homônimos</a><br>
175
<a href=”javascript:significado(‘Parônimos’);”>
Parônimos</a><br>
<br>
Fonte:http://www.algosobre.com.br/gramatica/significa-
do-das-palavras.html
</BODY>
</HTML>
EXERCÍCIOS
1) No editor de texto KWrite
KWrite, construa a seguinte página:
2) Utilizando o comando switch
switch, faça uma função que, dada uma palavra (o
sobrenome de um escritor), retorne qual seu estilo literário (escolha pelo menos
cinco escritores; se necessário, pesquise na Internet).
3) Utilizando o exemplo dado, crie link’s com os nomes dos escritores para quando
se clicar no link, apareça uma caixa aler
alertt com o estilo literário do escritor.
Salve a página 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
OBJETO DATE
DATE
Na linguagem JavasScript existem inúmeros objetos para controle de datas, horas,
textos, números etc. Você vai conhecer, agora, o objeto date, que permite ao usuário
date
trabalhar com datas e horas.
Com ele, será possível a criação de páginas que permitam maior controle do tempo,
como agendas, diários, calendários, e que avise ou dê informações referentes, por exem-
plo, a uma data comemorativa.
Para determinar um novo objeto de data, temos as seguintes sintaxes:
NomeObjeto = new Date() Retorna a Data e hora atuais
padrão do sistema.
NomeObjeto = new Date(ano,mês,dia) Retorna a data
neste formato.
Veja exemplos conforme sintaxe apresentada anteriomente:

data=new Date()à atribui à variável data, a data e
hora correntes.
data=new Date(1975,11,23) à atribui à variável data, a
data 23 de novembro de 1975.
Sua sintaxe padrão é a seguinte:

NomeVariável = new Date();
MÉTODOS DO OBJETO DATE

DATE
Os métodos do objeto date permitem extrair uma data ou uma hora, ou seja, valores
específicos como dia, mês, ano, hora ou minutos.
Se o usuário desejar utilizar seus métodos, deve-se seguir a seguinte sintaxe:
NomeObjeto.método(parâmetros)
Veja, abaixo, a relação dos métodos utilizados no objeto date
date.
Métodos GET
Os métodos ge tDat
getDat e, ge
tDate tDa
tDayy, entre outros, possuem a finalidade de recuperar a data
getDa
e a hora de um objeto date
date. Ele poderá conter a data e a hora atuais ou específicas.
Após a especificação do objeto date
date, basta especificar qual o método.
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 mês atual.
alert(Data.getYear()) // Retorna o ano atual.
ATENÇÃO
Esse objeto tem a função de armazenar a data e a hora atuais no formato mm/dd/aa
– hh:mm:ss
hh:mm:ss. Os valores do mês são contados de 0 até 11 e os dias da semana de 0 a
6, da seguinte forma:
0 t Janeiro 0 t Domingo
1 t Fevereiro 1 t Segunda
2 t Março 2 t Terça
3 t Abril 3 t Quarta
4 t Maio 4 t Quinta
5 t Junho 5 t Sexta
6 t Julho 6 t Sábado
7 t Agosto As horas são
determinadas de
8 t Setembro
00:00 às 23:00
9 t Outubro
10 t Novembro
11 t Dezembro
O objeto date pode definir data e hora a partir de 1 de janeiro de 1970. Após a criação
date
do objeto date
date, o mesmo pode ser usado com qualquer método apresentado anterior-
mente.
180
MÉTODOS DESCRIÇÃO
getDate Dia do mês

getDay Dia da semana (0=Domingo)
getHours Horas (0 a 23)
getMinutes Minutos (0 a 59)
getMonth Mês do ano (0=janeiro)
getSeconds Segundos (0 a 59)
getTime Milissegundos desde 1 de janeiro de
1990 (00:00:00)
getTimezoneOffset Diferença de fuso horário em minutos
para o GMT
getYear 2 dígitos do ano até 1999. Após 2000,
4 dígitos
Método Parse e UTC

O método Par se retorna o valor de milissegundos a partir de 1 de janeiro de 1970,
arse
00:00:00. Já, o método UTC faz a mesma coisa, porém, no fuso horário GMT –
Greenwich Mean Time.
Time Vejamos um exemplo da apresentação da quantidade de
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 código, 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>
hoje=new Date();
alert(“A hora atual é “+hoje.getHours());
alert(“O dia atual é “+hoje.getDate());
alert(“Agora são:
“+hoje.getHours()+”:”+hoje.getMinutes());
</script>
</head>
<body>
</body>
</html>
EXERCÍCIOS
1) No editor de texto KWrite
KWrite, faça a seguinte página, utilizando o objeto Date
do JavaScript
JavaScript.
2) Com o comando prompt
prompt, peça ao usuário para informar o ano, o mês e o
dia em que ele nasceu.
3) Com o objeto Date
Date, verifique qual o dia, mês e ano atual.
4) Faça o cálculo da idade do usuário em anos e mostre-a.
Salve a página como idade.html e visualize o resultado no Firefox

Firefox.
182
Método toGMTString
A definição de GMT define o fuso horário internacional padrão para configuração de
relógios. Esse método faz a conversão de um objeto date para uma string
string, usando
convenções GMT.
Veja, pelo exemplo a seguir, a conversão da hora atual em uma string (texto) no formato
GMT. Certifique-se de que o computador esteja com a definição de fuso horário correta1 .
<html>
<head>
data = new Date();
document.write(data.toGMTString());
</script>
</head>
<body>
</body>
</html>
Veja o resultado do código acima na figura a seguir:
1
OBS.: Quando o script é colocado no head, ele é executado antes de carregar o corpo da página.
183
Método toLocaleString
O método toLocaleString tem a função de formatar a data e a hora, usando as con-
venções de string no computador local (USA, Reino Unido, França, Alemanha, Brasil,
entre outros). A idéia principal desse método é apresentar ao usuário a data e a hora de
forma que ele possa entender isso de maneira simples na página, mesmo estando fora
de sua localidade.
Veja um exemplo de sua utilização:
<html>
<head>
data = new Date();
document.write(data.toLocaleString());
</script>
</head>
<body>
</body>
</html>
Veja o resultado do código acima, na figura a seguir:
184
Vejamos, agora, um exemplo que irá apresentar um relógio digital na tela através da
criação de uma função. Analise o código apresentado a seguir:
<html>
<head>
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>
EXERCÍCIOS
Para cada um dos exercícios abaixo, abra o editor de texto Kwrite
Kwrite, salve o código
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 número do dia da semana e do mês atual.
185
3) Crie um script que exiba, na tela, a data e a hora atuais no seguinte formato:
Agora são: hh:mm:ss do dia dd-mm-yy
4) Crie um script que apresente a data e a hora no formato do fuso horário
internacional.
5) Altere esse script
script, fazendo a data e a hora apresentarem-se no formato
atual do fuso horário local.
6) Crie um script que apresente, na página, as seguintes condições:
Se horas ffor
or menor que 1 2h, e
12h, xiba: “BOM DIA
exiba: ”;
DIA”;
Se horas estiv er entre 1
estiver 2h e 1
12h 8h, e
18h, xiba: “BO
exiba: “BOAA TTARDE”;
ARDE”;
Se horas estiv
estiver xiba: “BO
exiba:
er entre 00h e 05h, e “BOAA MADR UG
MADRUG AD
UGAD
ADAA”.
7) Crie um script que apresente, na página, a data e as horas. Veja o formato
a ser apresentado na página:
Segunda-feira, 23 de Novembro de 2001. Agora são: hh:mm:ss
186
J a v a S c r i p t
MANIPULAÇÕES
DE JANELAS E
FORMULÁRIOS
187
OBJETO WINDOW
Na linguagem JavaScript
JavaScript, é possível controlar a janela do navegador através do objeto
conhecido como window
window. Ele é responsável pela manipulação dessa janela. Sempre
que se abre o navegador, ele é criado como representação 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 usuário crie e abra novas janelas de formas diferentes.
Tudo isso é possível através de seus métodos. Para utilizá-los, basta seguir a seguinte
sintaxe:
window.método(argumentos);
Para entender melhor:
acesse o Site do Centro Universitário Belas Artes de São Paulo através
do link: www.belasartes.br;
ao carregar a página, clique no link Galeria Virtual que mostra a galeria

de alguns jovens artistas;
acesse um dos artistas e, logo ao carregar a página, 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 possível por ter sido usado o método open (abrir), pertencente ao
objeto windo
window w. Veja, a seguir, como utilizá-lo.
Método Open
Esse método tem como objetivo abrir uma nova janela do navegador. Com ele, o usuário
poderá abrir uma nova janela em branco ou uma janela que contém uma página espe-
cífica. Sua sintaxe tem a seguinte formação:
NomeJanela = window.open(URL,título,opções);
NomeJanela
NomeJanela: é uma variável que será uma referência à nova janela.
URL
URL: é o endereço da janela a ser aberta.
título
título: é o nome da janela que será criada.
opções
opções: são os parâmetros que controlam o comportamento da nova janela.
189
Para você entender melhor como utilizar esse método, siga os seguintes passos:
escolha algumas imagens no Site do Centro Universitário Belas Artes e
salve-as no computador.
Agora, vamos montar a página responsável pelo carregamento das fotos.

inicialmente, crie uma página simples (HTML
HTML) com links chamando uma
HTML
função em JavaScript
JavaScript.
Veja o exemplo a seguir:
<a href=”javascript:abreFoto();”>Exibir foto</a>

Agora, veja a função em JavaScript que o link acima está chamando:
function abreFoto(){
ver_foto =
window.open(“”,””,”width=250,height=200");
}
</script>
Ao clicar no respectivo link criado na página, será chamada a função abreFoto.
Você poderá notar que existe uma variável que recebe a nova janela criada pelo método
window.open. No momento, não definimos qual janela chamar e nem seu nome, por-
tanto, será aberta, simplesmente, uma janela vazia.
Mas essa janela será aberta com um tamanho específico, 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 código completo dessa página:
<html>
<head>
ver_foto =
window.open(“”,””,”width=250,height=200");
}
190
</script>
</head>
<body>
</body>
</html>
Clique no link exibido na página.
Será dado o seguinte resultado no navegador:
Caso houvesse uma página HTML com a foto já criada, bastaria alterar, no código do
método open
open, o primeiro argumento, informando qual o nome da página que se deseja
carregar. Veja como ficaria o código se existisse a página:
ver_foto = window.open(“pagina.html”,””,”width=250,height=200");
Agora, se você não possui uma página montada e deseja escrever todo o conteúdo dela
com o JavaScript
JavaScript, basta utilizar as propriedades que a variável ver_foto adquiriu
quando recebeu o método open do objeto window.open
window.open.
Veja, a seguir, como você faria para montar, em Ja
JavvaScript
aScript, o conteúdo da página
criada pela variável ver_foto
ver_foto:
<html>
<head>
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>
</body>
</html>
Observe o resultado na figura a seguir:
FIGURA: HTTP://WWW.BELASARTES.BR/GALERIA/MACHUPICCHU/FOTOS/3_G.JPG
Método Close
Assim, como é possível abrir uma nova janela do navegador com o método open, é
possível fechá-la com o método close do objeto window
window, que tem o objetivo de encer-
rar uma janela. Normalmente, utiliza-se esse método atribuído a um botão de ação ou
a um link.
Sua sintaxe básica tem a seguinte formação:
window.close()
192
No exemplo, a seguir, temos uma página com um botão chamado Fec har
echar
har. Quando o
close
usuário clicar sobre ele, será acionado o evento close.
<input type=”button” value=”Fechar” onClick=

”window.close()”>
Nesse caso, foi utilizado o evento onClick que executa a instrução window.close()
assim que o usuário clica sobre o botão.
EXERCÍCIOS
1) Crie, na função anterior, que abre uma nova janela com uma foto, um botão
ou link que, ao ser clicado, feche a janela que foi aberta.
2) Salve o arquivo como foto.html
foto.html.
Imagine que, em sua aula de Artes, o professor solicitou um trabalho

de fotografia sobre as praças de sua cidade.
3) Reúna-se com seus colegas e faça um tour pelas praças que ficam perto da
sua casa, no centro da cidade ou apenas naquelas mais conhecidas pelos
moradores, e tire várias fotos delas. Caso não seja possível, procure fotos de
praças na Internet.
4) Depois de realizada a seção de fotos, transfira-as para um computador e
salve-as.
Se você quiser, poderá dar um acabamento ou um tratamento naquelas

que não ficaram muito nítidas, através do programa Gimp
Gimp. Saiba mais
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á
pop-up*
visualizá-las em seu tamanho original, em uma nova janela (pop-up*
pop-up*).
6) Insira, também, informações sobre a praça que está sendo exibida na foto e
alguma característica relevante sobre ela.
7) Ao final, junte suas fotos com as de seus colegas e faça uma exposição
virtual de fotos das praças de sua cidade.
8) Salve seu arquivo como praças.html
praças.html.
*Pop-up – É uma janela usada na Web como meio de exibir uma propaganda em uma janela diferente, com o
propósito de chamar a atenção do usuário.
193
OBJETO FORM
Através do objeto form (formulário
formulário) da linguagem JavaScript o usuário poderá
formulário
interagir melhor com os dados inseridos nos campos de formulários que são cria-
dos na linguagem HTMLHTML. Entre eles, temos os campos input
input, checkbox
checkbox, radio
radio,
select e textarea
textarea. O formulário e seus objetos podem ser facilmente manipula-
dos através de scripts
scripts.
Propriedade
O objeto form é uma propriedade do objeto document

document. Ou seja, para fazer refe-
rência ao formulário, é necessário seguir a seguinte hierarquia:
document.form.campo-formulario;
¬
Veja, na tabela a seguir, a relação das propriedades do objeto form
orm:
194
PROPRIEDADES DESCRIÇÃO
Action Especifica a URL do servidor para onde as variáveis do

formulário são enviadas.
defaultChecked Estado de seleção de uma caixa de verificação de um bo-
tão de opção.
defaultSelected Seleção atual de lista de opções.
defaultValue Valor padrão da caixa de texto ou área de texto em um
formulário.
Checked Estado padrão de um checkbox ou botões do tipo radio
em um formulário.
elements[] Lista os elementos existentes do formulário.
Encoding Formato de código MIME para o formulário.
Form Objeto de formulário.
Index Especifica uma opção de uma lista de seleção (select
select)
select
em um formulário.
Length Especifica o número de itens de uma lista.
Method Método que determina como as informações do formulá
rio serão processadas através dos valores Get ou Post
Post.
Name Nomeia um objeto do formulário.

options[] select
Lista de opções de uma lista (select
select) dentro do formulário.
Selected Estado atual de uma caixa de verificação ou de um bo-

radio
tão de opção (radio
radio).
selectedIndex Determina a opção selecionada de uma lista de seleção

select
(select
select) dentro do formulário.
Text option
Especifica o texto de uma opção (option
option) de uma lista
select
de seleção (select
select) do formulário.
Value Nome dado ao texto de uma caixa de texto ou área de
text e areatext
texto (text areatext).
Sua sintaxe é a seguinte:

document.NomeFormulário.NomeCampo.propriedade
195
Métodos do Objeto Form
MÉTODO DESCRIÇÃO
blur() Quando é removido o foco de um campo do tipo text

text, textarea
e campos de senha password
password.
click() Quando é dado um clique sobre um elemento de botão em
formulário ou campos do tipo radio e checkbox
checkbox.
focus() text, textarea
Quando é dado o foco sobre um campo do tipo text
e campos de senha password
password.
select() Quando é selecionado o conteúdo de um campo do tipo text
text,
textarea ou password
password.
submit() Quando envia o formulário ao servidor.
Elementos de um Formulário
Sabemos, a partir do que vimos no HTML

HTML, que, em um formulário, há diferentes
componentes que auxiliam a entrada de dados do usuário.
Destacamos:
Button Checkbox Hidden Password Radio

(Boão) (Escolha de campos) (Campo oculto) (Senha) (Escolha apenas um campo)
Reset Select Submit Text TextArea
(inicializar) (seleciona um item) (enviar ao servidor) (texto) (Área de texto)
Já conhecemos todos esses componentes apresentados acima através do uso da

linguagem HTML
HTML.
OBJETO TEXT
Sabemos que se podem criar campos de digitação de textos com o uso do formu-
lário. Através da linguagem JavaScript
JavaScript, é possível a manipulação dos dados
digitados para esse campo com o uso do objeto text
text.
Sua sintaxe geral é:
document.nomeForm.nomeText.propriedade
196
Veja, abaixo, a relação das propriedades existentes para o objeto text
text:
defaultValue Determina o valor padrão para a caixa de texto.
Name Determina o nome do objeto para a caixa de texto.
Value Determina o valor para a caixa de texto.
<form name=”form1">
<pre>
Digite seu Nome:
<input type=”text” name=”campo1">
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 formatação original (espaços em
branco, quebras de linhas e tabulações importantes) do texto que estiver entre ela.
OBJETO PASSWORD
Esse objeto permite ao usuário controlar campos de preenchimento de Senha
Senha.
Sua sintaxe é:
document.nomeForm.campoSenha.propriedade
As propriedades e métodos desse objeto são os mesmos do objeto text apresentados
anteriormente.
<pre>
Digite seu Nome:
<input type=”password” name=”campo1">
document.form1.campo1.value = “Senha”
197
alert(document.form1.campo1.value);
</script>
</form>
OBJETO TEXTAREA
Esse objeto tem como objetivo a criação de áreas de texto compostas por várias linhas.
Sua sintaxe é:
document.nomeForm.campoTextArea.propriedade
Suas propriedades, métodos e eventos equivalem aos mesmos do objeto text
text.
OBJETO BUT TON

BUTTON
Como já foi utilizado, sabemos que esse objeto representa os botões criados em um
formulário a que atribuímos ações específicas. Sua sintaxe tem a seguinte formação:
document.nomeForm.nomeButton.propriedade
MÉTODO EVENTO DESCRIÇÃO
click() onClick Executa uma instrução quando é dado um

clique sobre o botão.
Veja, pelo exemplo do script a seguir, a exibição de uma mensagem, informando o que
será digitado na caixa de texto assim que o usuário clicar no botão:
<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 VERIFICAÇÃO)

Esse objeto cria uma lista onde o usuário poderá marcar várias opções. Sua sintaxe é
equivalente às dos objetos de formulário anteriormente apresentadas.
Propriedade
Esse objeto é uma propriedade do objeto form

form.
Veja, abaixo, a relação das propriedades existentes para o objeto checkbox
checkbox:
name Contém o conteúdo do atributo name

name.
value on off
on” ou “off
Contém o valor “on off” que determina o estado
da caixa.
status Valor booleano que determina o estado da caixa, sele-
cionado (True) ou não-selecionado (False).
defaultStatus Valor booleano que indica o estado padrão do botão.
Manipuladores de Evento
MÉTODO EVENTO DESCRIÇÃO
click() onClick Executa uma instrução assim que o usuá-

rio clica sobre o elemento.
Os botões de formulário do tipo checkbox são botões que o usuário pode ativar
e desativ ar
ar. O atributo chec
desativar heckked determina o estado default da caixa de verifica-
ção. Essa propriedade assume valores booleanos: quando ativada, assume o va-
lor true e desativada, o valor false
false.
199
Exemplo
O exemplo mostra um formulário, no qual, se as opções 1, 2 e 4 estiverem marcadas, ele

retorna que a resposta é correta; se não, retorna um aviso que a resposta está errada.
<HTML>
<HEAD>
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 nú-
mero 1<BR>
mero 2<BR>
mero 3<BR>
mero 4<BR>
<INPUT TYPE=”button”NAME=”but” VALUE=”Corrigir”
onClick=”resposta(form4)”>
</FORM>
</BODY>
</HTML>
200
EXERCÍCIOS
Utilizando o Kwrite para digitar o seu código, faça o seguinte exercício:
1) Elabore um exercício de múltipla escolha com questões de Matemática.
2) Monte um formulário com as questões, utilizando o checkbox para cada
opção. Assim que o aluno clicar em uma das opções, chame uma função
JavaScript que testará se a resposta da questão está correta ou não.
3) Salve o arquivo como checkbox.html
checkbox.html.
4) Teste seu script no navegador.
OBJETO RADIO
Diferente do checkbox que permite múltipla escolha das opções listadas, o objeto radio
cria, também, uma lista de opções. Porém, você poderá escolher apenas uma única opção.
Sua sintaxe segue os mesmos parâmetros dos objetos anteriores.
Exemplo
<HTML>
<HEAD>
<SCRIPT language=”javascript”>
function escolhaprop(form3) {
if (form3.escolha[0].checked) {
alert(“A proposição “ + form3.escolha[0].value)
};
};
};
}
</SCRIPT>
201
</HEAD>
<BODY>
Escolha :
<FORM NAME=”form3">
<INPUT TYPE=”radio” NAME=”escolha”
VALUE=”1">Escolha número 1<BR>
<INPUT TYPE=”button”NAME=”but” VALUE=”Qual é sua
escolha ?” onClick=”escolhaprop(form3)”>
</FORM>
</BODY>
</HTML>
OBJETO SELECT
Muito comum, esse objeto representa uma lista de opções que o usuário poderá
selecionar. Com ele, o usuário poderá determinar uma seleção única ou múltipla.
O objeto select irá permitir que o usuário controle os itens de uma lista de opções
criada com o Tag HTML <SELECT>.
Veja um exemplo de sua utilização:
<HTML>
<HEAD>
<TITLE>CHECAGEM DE DADOS</TITLE>
function itens(){
alert(form1.lista.selectedIndex);
}
</script>
<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 usuário.
Veja, abaixo, outro exemplo que evidencia o momento quando o usuário precisa selecionar
um dos itens e o valor da opção redireciona para uma determinada URL:
function acessa(texto){
window.location.href=texto;
}
Foi criada uma função que possui uma variável como argumento que armazenará o
valor de uma opção da lista de seleção.
<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>
EXERCÍCIOS
Utilizando o Kwrite para digitar o seu código, faça o seguinte exercício:
1) Crie uma página com uma relação de cinco Sites de estudo de diferentes
áreas (Física, Química, Português, Geografia e Matemática).
203
2) Faça um campo de formulário do tipo select através do qual, ao ser

selecionado um dos Sites do campo, o usuário seja redirecionado para
sua respectiva página.
3) Salve o arquivo como select.html.
4) Teste seu script no navegador.
OBJETO LOCATION
LOCATION
Esse é o último objeto que vamos trabalhar. Ele é bem interessante por conter
informações sobre a URL (endereço) da página. Cada propriedade do objeto
location representa uma parte diferente do endereço.
A sintaxe utilizada para esse objeto possui a seguinte composição: http://
www.endereco.com.br/nome_página, ou seja, protocolo, endereço do servidor,
seguido da página que deseja carregar, caso necessite.
Para definir as propriedades do objeto location
location, siga a seguinte sintaxe:
window.location
Caso o objeto location esteja fazendo referência à janela corrente (atual), não é
necessário utilizar o objeto window
window. Caso o usuário deseje voltar à URL da janela
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 botão de formulário:
<HTML>
<HEAD>
<TITLE>BOTÃO</TITLE></HEAD>
<FORM NAME=“form1”>
<input type=“button” value=“SENAC-MG”
onClick=“window.location”. href=‘http://
www.mg.senac.br/’”>
</form> </body> </html>
204
EXERCÍCIOS
1) Crie uma página que permita ao usuário digitar seu nome e, em segui-
da, ao clicar sobre o botão OK
OK, seja exibida uma caixa com a seguinte
mensagem:
Olá <nome digitado>,
seja bem vindo ao nosso dicionário online!
Em seguida, escolha, no dicionário, algumas palavras que são menos usa-

das no dia-a-dia e faça links com essas palavras para que, no momento
em que o usuário clicar sobre cada um desses links, seja exibida uma cai-
xa de mensagem com o significado da palavra escolhida.
2) Agora, crie, dentro de um script
script, uma função chamada exibe e, como
texto
argumento para essa função, defina a variável (texto
texto). Desenvolva,
para essa rotina, uma caixa de alerta que apresente o seguinte texto:
“Olá” texto
Seja Bem vindo!
Agora são: hh:mm
3) No corpo da página, crie um campo de formulário do tipo Text xto

o que
execute a função, atribuindo à variável definida o valor digitado pelo
usuário assim que ele retirar o foco do campo de texto.
4) Crie dois campos de texto e um botão que permita, quando o usuário
digitar um número em cada um dos campos e clicar em um botão,
que seja exibida a soma dos dois números.
5) Crie uma página com dois campos de texto e quatro botões que permi-
tam o usuário escolher quais das quatro operações matemáticas ele
deseja executar. E, ao digitar os dois valores nos campos de texto, que
o usuário tenha o resultado do cálculo escolhido.
6) Crie, em uma página HTML
HTML, quatro campos de formulário do tipo radio
e, em seguida, atribua um evento que faça com que, ao escolher um
205
dos botões presentes, seja alterada a cor de fundo a página, como

no no exemplo a seguir: Azul
Vermelho
Amarelo
Cinza
Parabéns!
Agora, com os comandos JavaScript na ponta dos dedos,
páginas “inteligentes” e sofisticadas serão criadas por você
num “piscar de olhos”!
206
BIBLIOGRAFIA
FLANAGAN, David. JavaScript: o Guia Definitivo. 5ª edição. Ed. Bookman,
2006, 1099p.
LIMA, Adriano Gomes. Javascript

Javascript: aplicações interativas para a Web. Belo
Horizonte, Apostila Pessoal, 2000.
McCOMB, Gordon. JavaScript Sourcebook.

Sourcebook São Paulo: Ed. Makron
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 Educação, que tem como objetivo
apresentar as possibilidades da informática na educação, fazendo com que você se fa-
miliarize com diferentes aplicativos e utilize-os em sala de aula, buscando tornar as suas
aulas mais interessantes, criativas e de fácil entendimento.
Várias ferramentas serão trabalhadas nesse projeto. Neste momento, você aprenderá
a tornar as páginas HTML mais dinâmicas e interativas através dos conhecimentos
sobre a linguagem JavaScript
JavaScript. Quando concluí-lo, você estará apto a utilizar todos os
recursos para permitir maior interativadade nas páginas para Internet, além de multi-
plicar 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 con-
teúdos em sala, para pesquisas, elaboração de material didático etc. Quanto mais
utilizá-lo, mais estará familiarizado com o recurso e descobrirá, cada vez mais, possibi-
lidades de aplicação.
É importante que, ao utilizar a informática nas suas aulas, as orientações repassadas
aos alunos sejam bem claras e as atividades bem direcionadas. Defina os temas, obje-
tivos, o tempo de trabalho, metodologia. Em caso de pesquisas na Internet, faça uma
relação de sites de busca, de temas específicos, imagens etc. Defina, também, o resul-
tado esperado, evitando, assim, a dispersão 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 conteúdos que devem ser abordados, sugestão de
carga horária, dicas de metodologia e recursos didáticos.
Durante o curso, podem surgir várias idéias de utilização da ferramenta em sala de
aula. Não deixe de anotá-las e discutir outras possibilidades com os colegas e instrutor.
Aproveite o curso!
Sucesso!
QUADRO 01
Horária
1. Apresentação do Instrutor e 1h – Exposição dialogada – Laboratório de

Informática com
Alunos – Dinâmica de apresentação
JAVASCRIPT
2. Apresentação Geral do Curso
– Metodologia de trabalho adotada
no curso – Pincéis
– Critérios de Aprovação no curso – Apostila – Informática

. Básica
– Peças de hardware
para demonstração ao
aluno, como funcio-
nam o processador,
memória RAM e HD.
3. Informática Básica 3h – Exposição dialogada –

– Na Era da Informatização avaliação diagnóstica
para verificar o nível de
– Componentes do Computador
conhecimento da turma
Periféricos
sobre o tema.
Modem / Fax-modem
Estabilizador – Demonstração – O
Nobreak instrutor deve demons-
– Sistema Operacional Conceitos trar todos os procedi-
e Convenções mentos necessários
Arquivos e Pastas (visão geral) – Prática Supervisionada
Armazenando Dados em um – Todos os alunos devem
Computador colocar em prática os
– Rede procedimentos aborda-
– Internet dos, sob a supervisão do
– Metasys instrutor.
Iniciando os aplicativos do
Metasys
Introdução ao OpenOffice Writer
Introdução ao OpenOffice Calc
– Soluções para Alguns Problemas
da Informática
– Qualidade de Vida no Trabalho

Equipamentos
ORIENTAÇÕES P
PARA
Antes de iniciar a sua aula de informática, verifique:
O laboratório está em condições adequadas?
O número de computadores é suficiente para a turma?
O programa está instalado e funcionando adequadamente?
A Internet está funcionando?
O material didático está disponível para a turma?
Tem giz/pincel e apagador disponíveis?
DICA
Não se esqueça 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 dúvidas.
Item 1 - Apresentação do Instrutor e Alunos

Cumprimente a turma e se apresente, dizendo o seu nome, em que
área atua, quais disciplinas ministra. Isso facilita a relação com a tur-
ma e diminui a distância entre vocês.
Para a apresentação dos alunos, peça à turma que formem duplas.

Dê a eles um tempo aproximado de 5 minutos para se conhecerem.
Posteriormente, peça que um apresente o outro.
Item 2 - Apresentação Geral do Curso

Fale sobre o curso que irá ministrar (JavaScript
JavaScript), fazendo um breve
JavaScript
resumo a respeito das suas funções e do que é possível criar, utilizan-
do essa linguagem. Como este curso será uma seqüência do HTML,
aproveite para perguntar à turma como foi o aprendizado no curso
anterior e faça perguntas sobre alguns Tag’s para identificar o nível de
conhecimento dos participantes sobre o assunto.
Conte aos alunos como será o curso, as formas que utilizará para ensi-
nar. Diga que é imprescindível que tenham disciplina e se envolvam
nas atividades propostas.
Previsão
Carga
Diga que haverá momentos
Horáriaem que a exposição dialogada será neces-
sária, que haverá muita prática e resolução de exercícios, buscando
aplicar o software à realidade vivenciada em sala de aula.
Fale a respeito das facilidades da linguagem sempre reforçando a ne-

cessidade de colocar em prática tudo que será ministrado durante o
curso, afinal uma linguagem de desenvolvimento é para ser aplicada,
para não esquecermos como utilizar as ferramentas.
Diga que a participação nas aulas é imprescindível para que realmen-

te ocorra o aprendizado e que, quando houver dúvidas, basta solicitar
o seu auxílio.
É importante informar aos alunos que somente serão aprovados se

obtiverem freqüência mínima de 75% (caso aplicável). Se não obtive-
rem esse resultado, não receberão o certificado de conclusão.
Item 3 – Informática Básica

Faça um levantamento na turma das pessoas que têm conhecimen-
tos de informática, perguntando se já fizeram algum tipo de curso, se
sabem utilizar o computador, buscando identificar o grau de conheci-
mento para iniciar o assunto.
Aproveite a oportunidade e verifique se os alunos conhecem o

JavaScript. Converse com eles sobre as situações em que pode ser uti-
lizado e peça sugestões de temas para desenvolvimento de atividades
durante o curso.
Fale sobre os conceitos básicos da informática, apresentando as par-

tes do computador (CPU, monitor, teclado, mouse etc), procurando
demonstrar como deve ser a sua utilização. 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 exer-
citem todos os procedimentos.
Mostre as peças do hardware para eles, para eles visualizarem onde
ficam armazenados os dados e o que faz o computador processar as
informações.
Explore os dispositivos de entrada e saída e a importância deles no dia
a dia do professor
Fale sobre as dificuldades que normalmente encontramos na utiliza-
ção do computador e seus periféricos
Destaque a utilização dos aplicativos Metasys.
Procure nivelar os conhecimentos entre a turma, esclarecendo as dúvi-
das que surgirem durante a aula.
Demonstre todos os procedimentos aos alunos e não se esqueça de
deixá-los praticar, pois a prática é imprescindível para que o aprendi-
zado realmente aconteça.
QUADRO 02
Carga
Metodológicos Didáticos
Horária
4. Introdução 2h – Exposição dialogada, – Laboratório de

– O que é a Linguagem citando exemplos de Informática com
JavaScript páginas HTML com uso Linux, KWrite e
do JavaScript Mozzila Firefox
– Java e JavaScript: Conceitos instalados com
e diferenças acesso à Internet
– Quadro branco/
negro e pincéis
– Apostila– JavaScript
5. JavaScript: Linguagem 3h – Exposição dialogada – Laboratório de

Informática com
Orientada a Objetos
Linux, KWrite e
– Orientação a Objetos Mozzila Firefox
– Manipulação de Objetos instalados com
acesso à Internet
– Tipos de Propriedades
– Quadro branco/
– Métodos dos Objetos
negro e pincéis
– Eventos
– Apostila – JavaScript
ORIENTAÇÕES P
PARA
Oriente aos alunos quanto:
A real necessidade de utilizar esta linguagem.
Fale de outras linguagens similares e qual a importância de se usar

JavaScript em determinadas páginas HTML.
Exemplifique bem os conceitos de “propriedades” e “métodos”, dei-

xando claro a diferença entre eles e suas formas de utilização.
Item 4 - Introdução
Fale sobre as características da linguagem, fazendo uma apresenta-
ção a respeito da mesma (para que serve, em que tipos de páginas
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 necessário.
Na apostila, há um exemplo de exercício de física com questões de

múltipla escolha que pode ser criado em uma página. Nesse momen-
to, ele é apenas um exemplo, mas posteriormente poderá ser desen-
volvido 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 Orientação a Objetos.
Dê exemplos do que são objetos da linguagem, explicando também o

que são propriedades, métodos e eventos dos objetos.
Na apostila, há muitos exemplos que poderão ser utilizados e o ajuda-

rão a compreender melhor o assunto.
Sugestão de atividade: peça aos alunos para citarem 3 objetos e des-

creverem 5 propriedades e 5 métodos de cada um. Isso irá facilitar o
entendimento de cada um deles.
QUADRO 03
Horária
6. Estrutura da Linguagem 4h – Exposição dialogada – Laboratório de

– Variáveis Informática com
– Demonstração
Linux, KWrite e
– Nomes de Variáveis – Prática Supervisionada Mozzila Firefox
– Desenvolvimento de Script’s – Resolução de Exercício instalados com
na apostila acesso à Internet
– Quadro branco/
negro e pincéis
7. Comandos Básicos 4h – Exposição dialogada – Laboratório de

– Método document.write() Informática com
– Demonstração
Linux, KWrite e
– Método alert() – Prática Supervisionada Mozzila Firefox
– Método confirm() – Resolução de 2 (dois) instalados com
Exercícios na apostila acesso à Internet
– Método prompt()
– Quadro branco/
negro e pincéis
ORIENTAÇÕES P
PARA
Demonstre como iniciar um script da linguagem, destacando cada um
dos passos para desenvolvimento e lembrando que ele estará inserido
em uma página HTML.
Item 6 – Estrutura da Linguagem

Nesse momento, você irá ensinar a turma o conceito sobre variáveis,
mostrando os tipos existentes na linguagem JavaScript e sua forma
de aplicação.
Esse conteúdo é bastante teórico, mas a partir dele já é possível

começar escrever os comandos e ver alguns resultados nas páginas,
conforme exemplos na apostila.
Aproveite o exemplo e execute-o juntamente com os seus alunos.
No exercício proposto, peça à turma que busque informações a respei-

to do Brasil, na Internet, conforme descrição na apostila, e crie uma
página utilizando os códigos vistos até o momento.
Item 7 – Comandos Básicos

Utilize o quadro para dar exemplos dos comandos básicos utilizados
na linguagem.
Durante a aula, crie páginas para mostrar aos alunos como devem utili-
zar os comandos básicos para que mensagens de alerta possam ser
exibidas na página. Os alunos devem seguir os mesmos procedimentos
junto com você, colocando em prática todas as etapas abordadas.
Na apostila, há sugestões de exercícios para serem realizados pelos
alunos. Nesse momento já é possível perceber os efeitos do JavaScript
nas páginas da Internet.
QUADRO 04
Horária
8. Comandos Condicionais e 5h – Exposição dialogada – Laboratório de
Informática com
de Repetição – Demonstração
Linux, KWrite e
– Instrução If.... else
– Prática Supervisionada Mozzila Firefox
– Instrução While instalados com
– Resolução de Exercícios
acesso à Internet
– Instrução Switch na apostila
– Quadro branco/
negro e pincéis
9. Funções – Exposição dialogada – Laboratório de

Informática com
– Demonstração
Linux, KWrite e
– Prática Supervisionada: Mozzila Firefox
através de exemplos na instalados com
apostila que os alunos acesso à Internet
deverão colocar em – Quadro branco/
prática negro e pincéis
ORIENTAÇÕES P
PARA
Explique a necessidade da utilização de comandos condicionais e re-
petição.
Demonstre as diferenças entre os principais comandos desta categoria.
Item 8 – Comandos Condicionais e Repetição

Mostre como é formada a sintaxe dos comandos condicionais e de
repetição.
Mostre como fazer as expressões condicionais.
Explique em que situações devemos utilizar cada um destes comandos.
Crie situações onde cada um dos alunos raciocine sobre as melhores

opções para uma determinada condição.
It em 9 – FFunções
Item unções
Mostre no quadro e no computador como declarar e utilizar uma fun-
ção em JavaScript
JavaScript.
Explique porque deve utilizar as funções.
Explique sobre a reutilização de código que uma função permite.
Baseando-se nos exemplos citados na apostila, você poderá criar ou-

tros para serem aplicados em sala de aula.
QUADRO 05
Horária
10. Outros Objetos do JavaScript 6h – Exposição dialogada – Laboratório de

– Objeto DATE Informática com
– Demonstração
Linux, KWrite e
– Métodos do objeto DATE: Métodos – Resolução de Exercício na
Mozzila Firefox
GET, Parse e UTC, to GMTString, apostila instalados com acesso
tolocal e String à Internet
e pincéis
11. Manipulação de Janelas e For- 4h – Exposição dialogada – Laboratório de

mulários – Demonstração Informática com
– Objeto WINDOW – Resolução de 1 Exercício Linux, KWrite e
Mozzila Firefox
em sala de aula
instalados com acesso
– Sugestão de exercício para
à Internet
ser realizado em ambiente
externo (VER APOSTILA)
e pincéis
– Objeto FORM – Demonstração através de – Laboratório de

3h
– Objeto TEXT exemplos Informática com
– Resolução de Exercício na Linux, KWrite e
– Objeto PASSWORD
apostila Mozzila Firefox
– Objeto TEXTAREA
– Objeto CHECKBOX à Internet
– Demonstração através de – Quadro branco/negro

– Objeto RADIO exemplos e pincéis
– Objeto SELECT – Resolução de Exercício na – Apostila – JavaScript

apostila
– Objeto LOCATION 1h – Demonstração através de – Laboratório de

exemplos Informática com
– Resolução de Exercício na Linux, KWrite e
apostila Mozzila Firefox
à Internet
e pincéis
Todos os cont eúdos abordados
conteúdos 4h – Trabalho em grupo: – Laboratório de
Divida a turma em Informática com
grupos de 3 participan- Linux, KWrite e
tes. Peça-os que Mozzila Firefox
planejem e construam instalados com
uma página que acesso à Internet
permita fazer cálculos
– Quadro branco/
básicos de uma
negro e pincéis
calculadora ou escolha
um tema da apostila – Apostila– JavaScript
caso necessário.
O intrutor deve dar o
suporte para os grupos,
porém deixando que
eles raciocinem
sozinhos, o máximo
possível.
Encerramento do Curso – Verificação de atendi- – Formulários de

Avaliação do Curso mento às expectativas avaliação do curso
da turma. pelo aluno.
ORIENTAÇÕES P
PARA
Para melhor assimilação do uso do Objeto Date, você pode propor, ain-
da no final deste conteúdo, a criação de uma agenda de compromis-
sos diária que, conforme o horário acessado, seja exibida uma mensa-
gem 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, peça aos alunos que crie duas variáveis e,
em cada uma delas, solicite-os que guardem a data atual e a data de
nascimento.
Explique sobre os diferentes métodos do Objeto Date e sua forma de

aplicação. Deixe claro aos alunos que, através dos métodos do objeto
Date, é possível extrair valores separados de uma data como dia, mês
e ano.
Peça-os novamente para criar duas variáveis e, em cada uma delas,
guardar o ano atual e o ano de nascimento e, em seguida, peça-os
para exibir, na tela, uma caixa de alerta informando a sua idade.
Após entendimento e prática do uso do objeto Date e seus métodos,

peça aos alunos para criar uma página que permita exibir a data atu-
al, seguindo o padrão brasileiro.
Na apostila, há sugestões de exercícios para serem realizados pelos

alunos.
Item 11 – Manipulação de Janelas e Formulários

Neste item, explique para os alunos sobre o uso de outros objetos do
JavaScript que permitem manipular janelas (pop-up’s) e Formulários
HTML. Peça-os que entrem em alguns sites conhecidos e mostre a ne-
cessidade do uso destes recursos, demonstrando páginas que fazem
seu uso. Fale dos bloqueadores de pop-up’s.
Após entendimento e demonstração do uso de pop-up’s, proponha a

criação de um pequeno álbum de fotografias ou dicionário onde, atra-
vés da Internet, eles possam buscar algumas destas informações e,
logo mais, peça-os que criem link’s que ao serem clicados sejam exibi-
das uma nova janela com informações e/ou detalhes do item clicado.
Na apostila, há sugestões de exercícios para serem realizados pelos alu-

nos. O segundo exercício 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 seqüência deste tópico, inicie-o, relembrando aos alunos o que são

e para que servem os campos de formulário, deixando claro que estes
são criados através da linguagem HTML.
Peça-os que crie um formulário de cadastro de currículos, permitindo

assim, a utilização de todos os tipos de campos já apresentados no
curso de HTML. Gradativamente após a criação de um determinado
conjunto de campos, vá explicando a importância de usar a lingua-
gem JavaScript nos campos já criados no formulário de cadastro de
currículos.
Na apostila, após o objeto Checkbox, há sugestão de um exercício para
ser realizado pelos alunos. É importante que você, professor, realize-o
antes para tirar as suas dúvidas e ter segurança para orientar a tur-
ma. Na apostila, foi sugerida a criação de um exercício de matemáti-
ca, que pode ser alterado para Geografia, Física etc.
Na apostila, há um exercício final onde o aluno poderá executar vários

recursos vistos durante o curso. Através dele, você poderá verificar o
aprendizado da turma, orientando e tirando as dúvidas existentes.
Você poderá propor também, após realização do exercício proposto na

apostila uma atividade para os alunos, desafiando-os a criar uma
página que simule uma calculadora. A atividade pode ser desenvolvi-
da em grupo ou individualmente.
Caso queira, você poderá, também, além da atividade da calculadora,

optar pela realização da última atividade presente na apostila que cria
um dicionário on-line. Permita que os alunos abusem da criatividade,
deixando que eles possam ter liberdade de definir qual o melhor com-
portamento para navegar em suas páginas ou você poderá dar suges-
tões àqueles que estão com dificuldades de pensar em uma maneira
de navegação adequada. Veja qual é a melhor alternativa.
Encerramento do Curso
Termine o curso agradecendo aos alunos pela atenção e destacando o
bom trabalho e desempenho dos mesmos.
Diga que agora estão aptos para desenvolver páginas com maior
interatividade. Basta tentar!

Construcao de Web Sites HTML e Javascript 2 PDF

Enviado por

Dados do documento

Descrição original:

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

Construcao de Web Sites HTML e Javascript 2 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

CONSTRUÇÃO

Secretária de Estado de Educação

Secretário Adjunto de Educação

Subsecretária de Desenvolvimento da Educação Básica

Superintendente de Ensino Médio e Profissional

REVISÃO LINGÜÍSTICA/TRATAMENTO METODOLÓGICO

Considerando a magnitude do contingente de jovens mineiros submetidos a

Estilos de Cabeçalho e P arágraf

Trabalhando com FFormulários,

Estrutura da Linguagem, 149

Comandos Básicos, 155

Comandos Condicionais e de Repetição, 163

Manipulações de Janelas e Formulários, 187

UMA PEQUENA VIAGEM AO PASSADO...

NORMAS IMPLEMENTADAS PEL

HyTime Hypermedia/Time-based Strtucturing Language (ISO

que autores de documentos SGML elaborem apresentações, utilizando

Na verdade, um documento HTML será visto como um conjunto de comandos

TIPOS DE EDITORES DE PÁGINAS HTML

possuam conhecimentos sobre os códigos HTML

HIPERTEXTOS E HIPERVÍNCULOS (LINK’S)

Cabeçalhos – Define cabeçalhos para cada assunto a ser abordado na

Parágrafos – Idênticos aos de um documento simples, com recursos de

Linhas Horizontais – Utilizadas para dividir texto em seções/ separações.

Listas – Idênticas às de um documento simples, podendo se apresentar

Tabelas – Próximas aos editores de textos comuns, ajudam na disposição

Veja, a seguir, um exemplo de uso de alguns dos principais componentes de uma

VISUALIZAÇÃO DA ESTRUTURA BÁSICA DE UM DOCUMENTO HTML

COMANDOS DA LINGUAGEM: TAG’S

*Carregamento – Processo dado quando uma página é aberta por um Browser

<tag de abertura>palavra ou texto</tag de fechamento>

O comando a seguir mostra a frase “Primeira Página¹” sublinhada.

<U> Primeira Página </U>

Viu como é fácil?

<FONT FACE=“ARIAL” CLOR=“RED” SIZE=“5”>

A <i>Biologia</i> é o estudo dos seres vivos

Não existe distinção entre letras maiúsculas ou minúsculas na

ESTRUTURA PRINCIPAL DE UMA PÁGINA

Será aberta a tela do editor de textos do Linux

UTILIZANDO O TAG DE PARÁGRAFO <P>

abra a página modelo.htm que contém nosso código (clique em ArquivoArquivo,

<p align=”center”>Devo digitar minha redação aqui!!!</p>

clique no botão Salvar

Para visualizar a modificação, basta clicar no botão Recarregar do Firefox ou ir ao

Para alinhar alguns de seus parágrafos às margens direita, esquerda, no centro da

Veja como ficaria a sintaxe de um parágrafo justificado:

<p align=”justify”>Conheça, nos parágrafos seguintes, a ortografia

Outros valores para alinhamento

<p align = “left”> Alinha o parágrafo à esquerda.

<p align= “center”> Alinha o parágrafo ao centro.

<p align= “right”> Alinha o parágrafo à direita.

<p align= “justify”> Alinha o parágrafo justificado.

<H1>O Nível Um: é o maior de todos, normalmente utilizado

Agora, veja o resultado no navegador:

Digite os códigos abaixo:

Salve seu arquivo como Modelo3.htm (clique no botão salvar e escolha o

Visualize o código no navegador.

Salve seu arquivo novamente como Modelo3.htm

Para o atributo Size

SOBRE O ATRIBUTO COL

Mas, lembre-se! Esses Tag’s são de Conteúdo

CORES DE FUNDO <BODY>