CONSTRUÇÃO DE WEB SITES HTML E JAVASCRIPT_2

CONSTRUÇÃODE WEB SITES

HTML EJAVASCRIPT

50.01.01.94.021.02.0

G o v e r n a d o rG o v e r n a d o rG o v e r n a d o rG o v e r n a d o rG o v e r n a d o r

S e c r e t á r i a d e E s t a d o d e E d u c a ç ã oS e c r e t á r i a d e E s t a d o d e E d u c a ç ã oS e c r e t á r i a d e E s t a d o d e E d u c a ç ã oS e c r e t á r i a d e E s t a d o d e E d u c a ç ã oS e c r e t á r i a d e E s t a d o d e E d u c a ç ã o

S e c r e t á r i o A d j u n t o d e E d u c a ç ã oS e c r e t á r i o A d j u n t o d e E d u c a ç ã oS e c r e t á r i o A d j u n t o d e E d u c a ç ã oS e c r e t á r i o A d j u n t o d e E d u c a ç ã oS e c r e t á r i o A d j u n t o d e E d u c a ç ã o

C h e f e d e G a b i n e t eC h e f e d e G a b i n e t eC h e f e d e G a b i n e t eC h e f e d e G a b i n e t eC h e f e d e G a b i n e t e

S u b s e c r e t á r iS u b s e c r e t á r iS u b s e c r e t á r iS u b s e c r e t á r iS u b s e c r e t á r i aaaaa d e I n f o r m a ç õ e s e T d e I n f o r m a ç õ e s e T d e I n f o r m a ç õ e s e T d e I n f o r m a ç õ e s e T 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 se c n o l o g i a s E d u c a c i o n a i se c n o l o g i a s E d u c a c i o n a i se c n o l o g i a s E d u c a c i o n a i se c n o l o g i a s E d u c a c i o n a i s

S u b s e c r e t á r i a d e D e s e n v o l v i m e n t o d a E d u c a ç ã o B á s i c aS u b s e c r e t á r i a d e D e s e n v o l v i m e n t o d a E d u c a ç ã o B á s i c aS u b s e c r e t á r i a d e D e s e n v o l v i m e n t o d a E d u c a ç ã o B á s i c aS u b s e c r e t á r i a d e D e s e n v o l v i m e n t o d a E d u c a ç ã o B á s i c aS u b s e c r e t á r i a d e D e s e n v o l v i m e n t o d a E d u c a ç ã o B á s i c a

S u p e r i n t e n d e n t e d e E n s i n o M é d i o eS u p e r i n t e n d e n t e d e E n s i n o M é d i o eS u p e r i n t e n d e n t e d e E n s i n o M é d i o eS u p e r i n t e n d e n t e d e E n s i n o M é d i o eS u p e r i n t e n d e n t e d e E n s i n o M é d i o e P r o f i s s i o n a lP r o f i s s i o n a lP r o f i s s i o n a lP r o f i s s i o n a lP r o f i s s i o n a l

Aécio Neves da Cunha

Vanessa Guimarães Pinto

João Antônio Filocre Saraiva

Felipe Estábile Morais

Sônia Andère Cruz

Raquel Elizabete de Souza Santos

Joaquim Antônio Gonçalves

COORDENAÇÃO DO PROJETOSuperintendência Educacional Senac Minas

SUPERVISÃO PEDAGÓGICAFlávia Alves de AlmeidaRSC – Gerência de Soluções Corporativas/Senac Minas

ELABORAÇÃO DO CONTEÚDOAdriano Gomes Lima

REVISÃO TÉCNICAWR3 EAD Consultoria

EDITORAÇÃOSetor de Material Didático – SEMD/Senac Minas

REVISÃO LINGÜÍSTICA/TRATAMENTO METODOLÓGICOSetor de Material Didático – SEMD/Senac Minas

PROJETO GRÁFICOCézar Alves de MarianoRAI/Senac Minas BELO HORIZONTE - 2009

APRESENTAPRESENTAPRESENTAPRESENTAPRESENTAÇÃOAÇÃOAÇÃOAÇÃOAÇÃO

Considerando a magnitude do contingente de jovens mineiros submetidos acondições adversas de vida que afetam negativamente sua trajetória escolar,tornou-se imperativo ao Governo de Minas elaborar e implementar políticas públicasespecialmente destinadas a eles.

Na educação, o Programa de Educação Profissional de MG (PEP), sintonizado comas vocações econômicas regionais e destinado à preparação dos jovens paraenfrentar os desafios do mundo do trabalho, é uma expressão concreta dessaspolíticas. O pressuposto desse Programa é que os jovens são sujeitos de direitos eportadores de capacidades e potencialidades das quais a sociedade não podeprescindir.

As altas taxas de abandono e evasão e a baixa taxa de conclusão do ensino médiosão evidências de que a escola está muito longe de corresponder às expectativasdesses 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 comos seus interesses e necessidades.

A inclusão de cursos de preparação inicial para o trabalho na parte diversificadado currículo do ensino médio é parte desse Programa e constitui um esforço detransformação desse nível de ensino nas escolas estaduais de Minas. Para isso, aSEEMG desenvolveu nove cursos na área de informática, todos com duração entre40 a 80 horas. São eles: Sistema Operacional Linux, Editoração Eletrônica - Draw eScribus, 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, ProjetoAuxiliado 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 programade capacitação implementado pela SEEMG, o que amplia as suas possibilidadesde trabalho na escola e de desenvolvimento profissional.

Criando Páginas na Web, 11Criando Páginas na Web, 11Criando Páginas na Web, 11Criando Páginas na Web, 11Criando Páginas na Web, 11Uma 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 DocumentIniciando um DocumentIniciando um DocumentIniciando um DocumentIniciando um Documento HTML, 1o HTML, 1o HTML, 1o HTML, 1o HTML, 177777Estrutura 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 PEstilos de Cabeçalho e PEstilos de Cabeçalho e PEstilos de Cabeçalho e PEstilos de Cabeçalho e Parágrafarágrafarágrafarágrafarágrafo, 3o, 3o, 3o, 3o, 311111Tag <FONT>, 34

Exercícios, 36

Sobre o Atributo Color, 37

Exercícios, 38

Cores de Fundo <BODY> , 38

Exercícios, 39oooooTag’s mais utilizados (Resumo), 3911

S U M Á R I OS U M Á R I OS U M Á R I OS U M Á R I OS U M Á R I O

HTMLHTMLHTMLHTMLHTMLCONSTRUÇÃO DE WEB SITES

Inserindo Imagens em Documentos HTML <IMG>, 45Inserindo Imagens em Documentos HTML <IMG>, 45Inserindo Imagens em Documentos HTML <IMG>, 45Inserindo Imagens em Documentos HTML <IMG>, 45Inserindo Imagens em Documentos HTML <IMG>, 45Alinhamento de Imagens e Texto na Página, 48

Redimensionamento de Imagens, 49Exercícios, 51

Hiperlink’s – THiperlink’s – THiperlink’s – THiperlink’s – THiperlink’s – Trabalhando com Vínculos, 55rabalhando com Vínculos, 55rabalhando com Vínculos, 55rabalhando com Vínculos, 55rabalhando com Vínculos, 55Tipos de URL’s , 57

Criando Link’s de Arquivos Locais <A>, 58

Criando Link’s para Imagens, 60

Tag’s mais Utilizados (Resumo), 61Exercícios, 62

Criando Listas, 65Criando Listas, 65Criando Listas, 65Criando Listas, 65Criando Listas, 65Tipos de Listas, 67

Exercícios, 71

Utilizando TUtilizando TUtilizando TUtilizando TUtilizando Tabelas, 73abelas, 73abelas, 73abelas, 73abelas, 73Tag <TABLE>, 76

Tag de Linha <TR>, 76

Tag de Célula <TD>, 77

Atributos da Tabela, 80Exercícios, 84Exercícios, 93

TTTTTrabalhando com Frabalhando com Frabalhando com Frabalhando com Frabalhando com Formulários, 95ormulários, 95ormulários, 95ormulários, 95ormulários, 95Campos 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, 109Exercícios, 113Guia de Referência Rápida, 115

BibliografBibliografBibliografBibliografBibliografia, 11ia, 11ia, 11ia, 11ia, 1177777

AnexoAnexoAnexoAnexoAnexo

JAJAJAJAJAVVVVVAAAAASCRIPTSCRIPTSCRIPTSCRIPTSCRIPTIntrodução, 135Introdução, 135Introdução, 135Introdução, 135Introdução, 135

O que é a Linguagem JavaScript?, 137

Java e JavaScript: Conceitos e Diferenças, 139

JaJaJaJaJavvvvvaScript – Linguagem Orientada a ObjeaScript – Linguagem Orientada a ObjeaScript – Linguagem Orientada a ObjeaScript – Linguagem Orientada a ObjeaScript – Linguagem Orientada a Objetttttos, 1os, 1os, 1os, 1os, 14444411111Orientação a Objetos, 143

Manipulação de Objetos, 144

Tipos de Propriedades, 144

Métodos dos Objetos, 146

Eventos, 147

Estrutura da Linguagem, 149Estrutura da Linguagem, 149Estrutura da Linguagem, 149Estrutura da Linguagem, 149Estrutura da Linguagem, 149Variáveis, 151

Desenvolvimento de Script’s, 152

Exercícios, 154

Comandos Básicos, 155Comandos Básicos, 155Comandos Básicos, 155Comandos Básicos, 155Comandos Básicos, 155Mé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, 163Comandos Condicionais e de Repetição, 163Comandos Condicionais e de Repetição, 163Comandos Condicionais e de Repetição, 163Comandos Condicionais e de Repetição, 163Instrução If ... Else, 165

Exercícios,

Instrução While, 167

Instrução Switch, 169

Exercícios, 170

CONSTRUÇÃO DE WEB SITES

FFFFFunções, 1unções, 1unções, 1unções, 1unções, 17777711111Exercícios, 176

OutrOutrOutrOutrOutros Objeos Objeos Objeos Objeos Objetttttos do Jaos do Jaos do Jaos do Jaos do JavvvvvaScript, 1aScript, 1aScript, 1aScript, 1aScript, 17777777777Objeto Date, 179

Métodos do Objeto Date, 179

Exercícios, 185

Manipulações de Janelas e Formulários, 187Manipulações de Janelas e Formulários, 187Manipulações de Janelas e Formulários, 187Manipulações de Janelas e Formulários, 187Manipulações de Janelas e Formulários, 187Objeto 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

BibliografBibliografBibliografBibliografBibliografia, 20ia, 20ia, 20ia, 20ia, 2077777

AnexoAnexoAnexoAnexoAnexo

CONSTRUÇÃOCONSTRUÇÃOCONSTRUÇÃOCONSTRUÇÃOCONSTRUÇÃODE WEB SITESDE WEB SITESDE WEB SITESDE WEB SITESDE WEB SITES

HTMLHTMLHTMLHTMLHTML

H T M LH T M LH T M LH T M LH T M LCONSTRUÇÃO DE WEB SITESCONSTRUÇÃO DE WEB SITESCONSTRUÇÃO DE WEB SITESCONSTRUÇÃO DE WEB SITESCONSTRUÇÃO DE WEB SITES

11

CRIANDOPÁGINAS NA

WEB

11111CriandoPáginasna WEB

13

C O N S T R U Ç Ã O D E W E B S I T E S - H T M LH T M LH T M LH T M LH T M L

Prepare-se! A partir de agora, você vai aprender tudo sobre como criar uma página naInternet. O primeiro passo para isso é entender o que é a linguagem HTML HTML HTML HTML HTML (HypertextHypertextHypertextHypertextHypertextMarkup LanguageMarkup LanguageMarkup LanguageMarkup LanguageMarkup Language).....

Vamos lá?

Para que você construa os famosos SiteSiteSiteSiteSites da Internet, terá que conhecer a principallinguagem de criação dessas páginas: a HTML.HTML.HTML.HTML.HTML. Apesar de muitas pessoas pensaremque essa linguagem é fraca ou ultrapassada, em função de outras tecnologias maisavançadas que foram criadas, saiba que a HTMLHTMLHTMLHTMLHTML oferece a base para qualquer outratecnologia mais usual que existe atualmente.

Um profissional que desenvolve páginas, utilizando linguagens como ASP ou PHP, quesão dinâmicas para o desenvolvimento de comércio eletrônico (e-commerce), ouJavaScript JavaScript JavaScript JavaScript JavaScript para criar uma simples calculadora, por exemplo, não conseguiria jamaiscriar tais páginas sem os conhecimentos básicos da linguagem HTMLHTMLHTMLHTMLHTML.

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

No princípio, a linguagem HTMLHTMLHTMLHTMLHTML foi desenvolvida para fins de divulgação de dados(textos) e catálogos. Porém, ninguém poderia imaginar que a Internet dominaria a áreada multimídia, agregando áudio e vídeos. Assim, a linguagem se fortaleceu durante oavanç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 mesmospadrões de qualidade das empresas como, por exemplo, a ISO 9001. O último padrãocriado para a linguagem HTMLHTMLHTMLHTMLHTML foi o 4.01, em dezembro de 1999.

NORMAS IMPLEMENTNORMAS IMPLEMENTNORMAS IMPLEMENTNORMAS IMPLEMENTNORMAS IMPLEMENTADAS PELADAS PELADAS PELADAS PELADAS PELO HTMLO HTMLO HTMLO HTMLO HTML

Veja, abaixo, quais são os padrões internacionais de conformidade:

SGML – Standard Generalized Markup Language (Padrão ISO 8879)SGML – Standard Generalized Markup Language (Padrão ISO 8879)SGML – Standard Generalized Markup Language (Padrão ISO 8879)SGML – Standard Generalized Markup Language (Padrão ISO 8879)SGML – Standard Generalized Markup Language (Padrão ISO 8879) :é uma metalinguagem na qual podem ser definidas linguagens de formataçãopara 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 (ISOHyTime Hypermedia/Time-based Strtucturing Language (ISOHyTime Hypermedia/Time-based Strtucturing Language (ISOHyTime Hypermedia/Time-based Strtucturing Language (ISOHyTime Hypermedia/Time-based Strtucturing Language (ISO11111000007777744:1992) 44:1992) 44:1992) 44:1992) 44:1992) : define um conjunto de tipos de elementos que permite

14

F O R M A Ç Ã O I N I C I A L P A R A O T R A B A L H O

que autores de documentos SGML elaborem apresentações, utilizandomultimídia e hipertexto de uma forma padronizada.

Na verdade, um documento HTML HTML HTML HTML HTML será visto como um conjunto de comandosque são executados durante seu tempo. Independente dos padrões utilizadospelos processadores de textos em geral, esse padrão fornecerá a base para seconstruir Hipertextos.

GLGLGLGLGLOSSÁRIOOSSÁRIOOSSÁRIOOSSÁRIOOSSÁRIO

HipertextoHipertextoHipertextoHipertextoHipertexto – É um sistema para a visualização de informações cujos documentos possuemreferências internas para outros documentos (chamadas de hiperlinks ou, simplesmente,links, como conhecemos).

SiteSiteSiteSiteSite – Um conjunto de várias páginas HTMLHTMLHTMLHTMLHTML, vinculadas entre si e controladas por umúnico usuário ou grupo de usuários, não importando seu tamanho.

MultimídiaMultimídiaMultimídiaMultimídiaMultimídia – Imagens digitais, filmes, sons e apresentações especializadas como ascriadas por programas de animação e sonorização, como por exemplo, o Impress. Alinguagem HTMLHTMLHTMLHTMLHTML é capaz de incluir diversos tipos de arquivos multimídia em umaúnica Página Web (documento contendo instruções HTMLHTMLHTMLHTMLHTML).

BrowserBrowserBrowserBrowserBrowser – O mesmo que navegador da Internet (também conhecido como Web Browserou simplesmente Browser) é um programa que permite os usuários do computadornavegarem pelos Sites e visualizarem seus documentos HTMLHTMLHTMLHTMLHTML 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 cidadedo interior e percorremos a propriedade para simplesmente vê-la ou encontrarmos algoespecífico nela.

TIPOS DE EDITORES DE PÁGINAS HTMLTIPOS DE EDITORES DE PÁGINAS HTMLTIPOS DE EDITORES DE PÁGINAS HTMLTIPOS DE EDITORES DE PÁGINAS HTMLTIPOS DE EDITORES DE PÁGINAS HTML

Assim como existem diferentes tipos de Browsers, há diversos tipos de programas quesão utilizados para criar as páginas HTMLHTMLHTMLHTMLHTML. Os mais conhecidos e utilizados, na plata-forma Windows, são o Dreamweaver e o Frontpage. Já, na plataforma Linux, existe oQuanta Plus, NVU (dito, New View), KompoZer, SeaMonkey Amaya. Esses programasforam projetados para criar páginas com muita facilidade, não exigindo que os usuários

15


possuam conhecimentos sobre os códigos HTMLHTMLHTMLHTMLHTML. Mas esses códigos que ficam “escondidos”do autor em programas desse tipo, podem, muitas vezes, ser úteis na montagem deuma página. Conhecendo esses códigos, você, com certeza, terá mais condições de sebeneficiar dos diversos recursos que a Web pode oferecer à sua página.

Para você editar uma página WebWebWebWebWeb, qualquer editor ASCII*ASCII*ASCII*ASCII*ASCII* poderá ser utilizado.

Para os usuários do WindowsWindowsWindowsWindowsWindows, o editor Bloco de NotasBloco de NotasBloco de NotasBloco de NotasBloco de Notas ou até o Wordpad Wordpad Wordpad Wordpad Wordpad são sufi-cientes. Para os usuários do Mac OsMac OsMac OsMac OsMac Os, o programa SimpletextSimpletextSimpletextSimpletextSimpletext ou o BBEdit LiteBBEdit LiteBBEdit LiteBBEdit LiteBBEdit Lite, resolvem.Para usuários do LinuxLinuxLinuxLinuxLinux, existe o KWrite, KWrite, KWrite, KWrite, KWrite, que será aprendido nesta apostila para acriação de algumas páginas. É nele que serão digitados os códigos HTMLHTMLHTMLHTMLHTML.

HIPERTEXTOS E HIPERVÍNCULHIPERTEXTOS E HIPERVÍNCULHIPERTEXTOS E HIPERVÍNCULHIPERTEXTOS E HIPERVÍNCULHIPERTEXTOS E HIPERVÍNCULOS (LINK’S)OS (LINK’S)OS (LINK’S)OS (LINK’S)OS (LINK’S)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 HTMLHTMLHTMLHTMLHTML, geralmente em cor diferente deum 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 umaoutra que esteja vinculada à página em que se encontra. Ele é diferente de um textonormal que apenas se desloca em seqüência, ou seja, para frente e para trás.

*ASCII – Acrônimo para American Standard Code for Information Interchange ou Código de Padrão Americano para oIntercâmbio de Informação: conjunto padrão de caracteres de texto que podem ser transmitidos entre vários sistemasoperacionais e lidos sem tradução. A maioria dos programas conhecidos como editores de texto salva e abre documentos emformato texto ASCII.

Exemplo de umHIPERTEXTO

Exemplo de umHIPERVÍNCULO

16


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 maisfacilmente. E toda essa relação existente entre páginas HTMLHTMLHTMLHTMLHTML que formam o Site pos-sui um endereçamento que o identifica, o que chamamos de URLURLURLURLURL (Uniform ResourceLocator).

Agora, vamos exercitar um pouco para que você comece a dar os primeiros passos paraentender como é formado um SiteSiteSiteSiteSite da Internet.

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSDepois de compreender alguns conceitos iniciais sobre a criação de um SiteSiteSiteSiteSite,responda às questões abaixo.

Qual programa (editor de texto) será usado para criar páginas na Internet?

Utilizando a ferramenta FirefoxFirefoxFirefoxFirefoxFirefox (clicar duas vezes no ícone do Mozilla FirefoxMozilla FirefoxMozilla FirefoxMozilla FirefoxMozilla Firefox),entre em um SitSitSitSitSiteeeee da Internet à sua escolha ou em http://www.senac.com.br.

Após inicializado o navegador:

1) Clique no campo de endereço para selecionar o endereço que já estiver nesteespaç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.


17

INICIANDO UMDOCUMENTO

EM HTML

22222Iniciando um

DocumentoHTML

19


ESTRUTURA DA PÁGINAESTRUTURA DA PÁGINAESTRUTURA DA PÁGINAESTRUTURA DA PÁGINAESTRUTURA DA PÁGINA

A estrutura de uma página HTML HTML HTML HTML 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 HTMLHTMLHTMLHTMLHTML.

Antes de iniciar o projeto de criação de uma página HTMLHTMLHTMLHTMLHTML, deve-se levar em conta o seuprocesso de organização. Lembre-se de que uma página contêm muitas informações etodas 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 serplanejadas como as de um livro, com os seguintes itens:

Título da Página – Título da Página – Título da Página – Título da Página – Título da Página – Cada documento HTMLHTMLHTMLHTMLHTML possui um título.

Cabeçalhos – Cabeçalhos – Cabeçalhos – Cabeçalhos – Cabeçalhos – Define cabeçalhos para cada assunto a ser abordado napágina.

Parágrafos – Parágrafos – Parágrafos – Parágrafos – Parágrafos – Idênticos aos de um documento simples, com recursos detamanho, alinhamento, estilo, entre outras opções existentes.

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

Listas – Listas – Listas – Listas – Listas – Idênticas às de um documento simples, podendo se apresentarcomo listas numeradas, listas com marcadores e listas de definição.

TTTTTabelas – abelas – abelas – abelas – abelas – Próximas aos editores de textos comuns, ajudam na disposiçãode dados dentro da página e podem ser usadas para separar diferentestipos de dados, mantendo, assim, a organização do SiteSiteSiteSiteSite.

ExemploExemploExemploExemploExemplo

Veja, a seguir, um exemplo de uso de alguns dos principais componentes de umapágina HTMLHTMLHTMLHTMLHTML.

20


Para visualizar o código fonte de uma página HTMLHTMLHTMLHTMLHTML que está sendo exibida no seunavegador, basta clicar na opção ExibirExibirExibirExibirExibir e depois em Código-FCódigo-FCódigo-FCódigo-FCódigo-Fontontontontonteeeee.Abaixo, o código HTMLHTMLHTMLHTMLHTML que cria todo esse visual da figura do SiteSiteSiteSiteSite SENAC MINAS:

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

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSClique duas vezes no ícone FireFox-MozillaFireFox-MozillaFireFox-MozillaFireFox-MozillaFireFox-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 ArquivoArquivoArquivoArquivoArquivo e selecione a opção AbrirAbrirAbrirAbrirAbrir endereçoendereçoendereçoendereçoendereço.2) Digite a URLURLURLURLURL da página que você deseja visitar. Sugestão: http://www.mg.senac.br3) Pressione EntEntEntEntEntererererer.4) Visualize o código fonte desta página.

Imagem

Hiperlinks

Barra de Título

21


Procure, sempre que possível, criar páginas que ocupem somente o tamanho de umatela, evitando, assim, a criação de barras de rolagem que dificultam a visualização dainformação pelo usuário. Mesmo que o SiteSiteSiteSiteSite 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 conectamatravés de modems lentos, facilitando o entendimento do conteúdo da página e, con-seqüentemente, do SiteSiteSiteSiteSite.

Evite colocar, também, muitas imagens em uma página. Não se esqueça de que umafigura é bem maior que um texto: quanto menos figuras houver, mais rápido será ocarregamento* de sua Home PageHome PageHome PageHome PageHome Page*. Faça com que ela tenha um design diferente deoutras já existentes, chamando a atenção e incentivando as pessoas a visitá-la.

COMANDOS DA LINGUAGEM: TAG’SCOMANDOS DA LINGUAGEM: TAG’SCOMANDOS DA LINGUAGEM: TAG’SCOMANDOS DA LINGUAGEM: TAG’SCOMANDOS DA LINGUAGEM: TAG’S

Um TTTTTagagagagag é simplesmente a instrução HTMLHTMLHTMLHTMLHTML (código de formatação) que mostra ao na-vegador o que ele deve fazer ao ser executado. Assim como uma instrução de qualquerlinguagem de programação, cada TTTTTagagagagag possui uma função específica dentro de umapágina HTMLHTMLHTMLHTMLHTML.

Poderíamos comparar um TTTTTagagagagag a um marcador de texto. Você pode, por exemplo, quererdemarcar algumas frases de um texto qualquer que esteja lendo. Para isso, você usaum marcador. Da mesma forma, todo TTTTTagagagagag é colocado dentro de uma página para fazera marcação de algo que se deseja mudar.

Uma página HTMLHTMLHTMLHTMLHTML é estruturada conforme as regras da norma que estudamos anteri-ormente, chamada de SGMLSGMLSGMLSGMLSGML. A página será sempre composta de TTTTTag’sag’sag’sag’sag’s, formadossimplesmente por uma palavra (comando da linguagem) envolvida pelos sinais de <<<<<(menor que) e >>>>> (maior que). Esses sinais podem ser chamados, também, de parêntesesparêntesesparêntesesparêntesesparêntesesangularesangularesangularesangularesangulares.

Quando você quiser destacar trechos de textos com grifo, inclinação e até negrito, utilizeos seguintes TTTTTag’sag’sag’sag’sag’s:

<B> Negrito

<I> Itálico

<U> Sublinhado(grifado)

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

*Home Page – – – – – Página Inicial de um SitSitSitSitSiteeeee. Apresenta, normalmente, o que existe no conteúdo do SitSitSitSitSiteeeee. Também lista oslinks existentes. É conhecida por Porta de EntradaPorta de EntradaPorta de EntradaPorta de EntradaPorta de Entrada

22


TIPOS DE TAG’STIPOS DE TAG’STIPOS DE TAG’STIPOS DE TAG’STIPOS DE TAG’S

Depois de saber para que serve um TTTTTagagagagag, vamos entender seus tipos.

TTTTTag de contéudoag de contéudoag de contéudoag de contéudoag de contéudo

É aquele TTTTTagagagagag que, para ser executado, precisa, geralmente, de algum conteúdo napá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 TTTTTagagagagag, que vai sempre agir sobre algo que exista na página, possui o que chamamosde AberturaAberturaAberturaAberturaAbertura e FechamentoFechamentoFechamentoFechamentoFechamento. Quando desejar mudar algo em sua página você deveráutilizar um TTTTTag de Aberag de Aberag de Aberag de Aberag de Aberturaturaturaturatura antes do objeto que se deseja mudar e, um TTTTTag deag deag deag deag deFechamentoFechamentoFechamentoFechamentoFechamento 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 TTTTTagagagagag quegrifa a palavra antes dela (Abertura) e, logo depois da palavra, deverá colocar o TTTTTagagagagagque termina de grifá-la (Fechamento).

Agora, vamos entender como teríamos que descrever uma TTTTTag de Contag de Contag de Contag de Contag de Conteúdoeúdoeúdoeúdoeúdo. Veja, noexemplo, 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?Viu como é fácil?Viu como é fácil?Viu como é fácil?Viu como é fácil?

Observe que o TTTTTagagagagag dedededede FFFFFececececechamenthamenthamenthamenthamentooooo possui, no início, uma barra (/////) que se diferenciado TTTTTag deag deag deag deag de AberAberAberAberAberturaturaturaturatura.

Entre elas, deverá entrar a informação que sofrerá o efeito de determinado TTTTTag deag deag deag deag deConteúdoConteúdoConteúdoConteúdoConteúdo.

TTTTTag Vag Vag Vag Vag Vazioazioazioazioazio

Diferente do TTTTTagagagagag de Contde Contde Contde Contde Conteúdoeúdoeúdoeúdoeúdo, esse tipo de TTTTTagagagagag não age sobre nada (palavra, texto,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çãose está selecionada a opção UNICODE (UTF-8). Caso não esteja, selecione-a.

23


Suponhamos que você tenha criado uma página que contém um texto. Entretanto, resolveinserir uma figura nesse texto para deixá-lo mais sofisticado. Como você está inserindoalgo, deverá usar um TTTTTagagagagag VVVVVazioazioazioazioazio que permite inserir uma figura na página.

A seguir, um exemplo de TTTTTag’sag’sag’sag’sag’s VVVVVaziosaziosaziosaziosazios:<IMG SRC = “/figuras/ola.gif”>

<BR> — que significa mudança de linha.

Um TTTTTag Vag Vag Vag Vag Vazioazioazioazioazio é mais simples de usar, porque ele não possui fechamento como o TTTTTagagagagagde Contde Contde Contde Contde Conteúdoeúdoeúdoeúdoeúdo. Você apenas deverá colocá-lo no local da página onde deseja criar algo.

ATRIBUTOS DE TAG´SATRIBUTOS DE TAG´SATRIBUTOS DE TAG´SATRIBUTOS DE TAG´SATRIBUTOS DE TAG´S

Todos esses elementos já descritos podem, também, conter o que chamamos de atri-atri-atri-atri-atri-butbutbutbutbutososososos ou parâmeparâmeparâmeparâmeparâmetrtrtrtrtrososososos. Eles tornam diferente a forma de apresentação dos TTTTTag’sag’sag’sag’sag’s.Existe um TTTTTagagagagag na linguagem HTMLHTMLHTMLHTMLHTML como, por exemplo, o TTTTTagagagagag <FONT>, que muda afonte (letra), o tamanho e a cor de um texto. Ou seja, ele possui três atributos quepoderemos aplicar: fonte (atributo FACE), cor (atributo COLOR) e tamanho (atributoSIZE). 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>

FaceFaceFaceFaceFace = Tipo de Fonte

Color Color Color Color Color = Cor da Fonte

SizeSizeSizeSizeSize = Tamanho da Fonte

Com base na sintaxe exposta, observe alguns exemplos de uso de TTTTTag’sag’sag’sag’sag’s:

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

<FONT FACE=”ARIAL”>Dicas de Gramática</FONT>

ExemploExemploExemploExemploExemploExemploExemploExemploExemploExemplo

24


OBSERVAÇÃOOBSERVAÇÃOOBSERVAÇÃOOBSERVAÇÃOOBSERVAÇÃO

Não existe distinção entre letras maiúsculas ou minúsculas naescrita de um TTTTTagagagagag.

ESTRUTURA PRINCIPESTRUTURA PRINCIPESTRUTURA PRINCIPESTRUTURA PRINCIPESTRUTURA PRINCIPAL DE UMA PÁGINAAL DE UMA PÁGINAAL DE UMA PÁGINAAL DE UMA PÁGINAAL DE UMA PÁGINA

Agora, vamos colocar a mão na massa para darmos os primeiros passos práticos paraa construção de um perfeito SiteSiteSiteSiteSite da Internet.

Primeiramente, abra o editor de textos KWriteKWriteKWriteKWriteKWrite para digitar os códigos HTMLHTMLHTMLHTMLHTML. Paraisso:

clique no botão Aplicativos Aplicativos Aplicativos Aplicativos Aplicativos (que fica no canto inferior esquerdo da telaprincipal do LinuxLinuxLinuxLinuxLinux);

no item EscritórioEscritórioEscritórioEscritórioEscritório, clique em KWriteKWriteKWriteKWriteKWrite.

Será aberta a tela do editor de textos do LinuxLinuxLinuxLinuxLinux, conforme mostrado a seguir:

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

25


Como toda linguagem de programação, a linguagem HTMLHTMLHTMLHTMLHTML possui uma estrutura prin-cipal na criação de suas páginas. Essa estrutura é que permite ao Browser Browser Browser Browser Browser entender einterpretar um documento HTMLHTMLHTMLHTMLHTML. Ela sempre será iniciada pelo TTTTTagagagagag <HTML> e termi-nada pelo TTTTTagagagagag </HTML>. Portanto, após ter aberto o editor de texto KWKWKWKWKWritritritritriteeeee, digite, naprimeira linha do editor, o TTTTTagagagagag <HTML>.

Após a entrada desse TTTTTagagagagag, nosso próximo componente é o cérebro da nossa página. Eleconterá informações textuais e visuais e instruções da linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript que ofe-recem um maior controle à nossa página como, por exemplo, solicitar ao usuário suadata de nascimento e, a partir de um cálculo matemático, saber a idade atual do nossovisitante.

Além disso, esse cérebro conterá o título da nossa página, aquele mostrado no início daapostila no SitSitSitSitSiteeeee do SENAC. O cérebro da página será formado pelo TTTTTagagagagag <HEAD> efinalizado com o TTTTTagagagagag </HEAD>, que ficam entre os TTTTTag’sag’sag’sag’sag’s <HTML> e </HTML>. Entreestes é que vão entrar as instruções da linguagem JavaScript JavaScript JavaScript JavaScript JavaScript que veremos mais adi-ante.

Por hora, veremos apenas a inclusão do título da página. Para incluir um título emuma página HTMLHTMLHTMLHTMLHTML, utiliza-se o TTTTTagagagagag <TITLE> (para iniciar) e </TITLE> (para fechar).

Complemente seu arquivo do KwriteKwriteKwriteKwriteKwrite com as informações do exemplo. Basta copiar damesma forma em que está escrito.

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áginacorpo da páginacorpo da páginacorpo da páginacorpo da página.

O corpo é a área da página onde será colocado o conteúdo. Se você está fazendo umapágina que contém uma redação, por exemplo, ela deve ficar no corpo da página. Ele é


26


formado pelo TTTTTagagagagag <BODY> e TTTTTagagagagag </BODY>. Após terminar o corpo da página, devemosencerrar o primeiro TTTTTagagagagag que foi aberto.

Você se lembra de que falamos que o TTTTTagagagagag <HTML> é o primeiro que se abre e o últimoque se fecha? Terminado o corpo, então, devemos fechar a página com o TTTTTagagagagag </HTML>.

Assim, temos os três componentes básicos que formam a estrutura de uma páginaHTMLHTMLHTMLHTMLHTML. Os TTTTTag’sag’sag’sag’sag’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 KwriteKwriteKwriteKwriteKwrite e seucó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>

SALSALSALSALSALVVVVVANDO SUANDO SUANDO SUANDO SUANDO SUA PÁGINAA PÁGINAA PÁGINAA PÁGINAA PÁGINA

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

no menu ArArArArArquivquivquivquivquivooooo, clique em SalvSalvSalvSalvSalvararararar.

Será aberta uma janela que solicitará um local para guardar seu arquivo e um nomepara 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 .htm .htm .htm .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.htmmodelo.htmmodelo.htmmodelo.htmmodelo.htm.

Clique no botão SalvSalvSalvSalvSalvararararar.

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.sxi.sxi.sxi.sxi ou .ppt.ppt.ppt.ppt.ppt, por exemplo, identifica arquivos do ImpressImpressImpressImpressImpress ouPower PointPower PointPower PointPower PointPower Point.

27


Pronto! Agora, vá até o local onde você guardou seu arquivo e abra-o. Para isso, você iráabrir o KonquerorKonquerorKonquerorKonquerorKonqueror (clicar no botão de inicialização MetasysMetasysMetasysMetasysMetasys e selecionar o menuGerenciador de ArGerenciador de ArGerenciador de ArGerenciador de ArGerenciador de Arquivquivquivquivquivososososos). Você pode navegar, clicando nos diretórios à sua esquerdaaté chegar ao diretório que está seu arquivo .htm.htm.htm.htm.htm ou, na caixa de texto LocalizaçãoLocalizaçãoLocalizaçãoLocalizaçãoLocalização,você pode digitar o caminho até o diretório do arquivo e clicar EntEntEntEntEntererererer. Os arquivos dessediretório aparecerão ao lado direito do KKKKKonqueronqueronqueronqueronquerororororor. Então, clique duas vezes no arquivoModelo.htmModelo.htmModelo.htmModelo.htmModelo.htm. Sua página será carregada no navegador e apresentada como mostra afigura a seguir:

Em nosso exemplo, criamos uma página chamada modelo.htmmodelo.htmmodelo.htmmodelo.htmmodelo.htm apenas para exercitar.Mas é importante saber que, quando estiver montada a primeira página de um SiteSiteSiteSiteSite, onome dela deverá ser sempre index.htmindex.htmindex.htmindex.htmindex.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 deum Site.Site.Site.Site.Site.

UTILIZANDO O TAG DE PARÁGRAFO <P>UTILIZANDO O TAG DE PARÁGRAFO <P>UTILIZANDO O TAG DE PARÁGRAFO <P>UTILIZANDO O TAG DE PARÁGRAFO <P>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 seriapossível. Isso acontece porque a linguagem HTMLHTMLHTMLHTMLHTML somente alinha textos caso sejamtratados como parágrafos. E, para que isso ocorra, é necessário o uso dos TTTTTag’sag’sag’sag’sag’s dededededeParágrafoParágrafoParágrafoParágrafoParágrafo <P> e </P>.

28


Para que possamos centralizar o texto da página modelo.htmmodelo.htmmodelo.htmmodelo.htmmodelo.htm temos que transformá-loem um parágrafo e colocarmos o atributo align=centalign=centalign=centalign=centalign=centererererer. Para isso:

volte ao editor de texto KWrite KWrite KWrite KWrite KWrite (clique no botão AplicativosAplicativosAplicativosAplicativosAplicativos, selecione oitem EscritórioEscritórioEscritórioEscritórioEscritório e clique em KWriteKWriteKWriteKWriteKWrite);

abra a página modelo.htm modelo.htm modelo.htm modelo.htm modelo.htm que contém nosso código (clique em ArquivoArquivoArquivoArquivoArquivo,no item AbrirAbrirAbrirAbrirAbrir ou clique no ícone AbrirAbrirAbrirAbrirAbrir. Navegue pelos diretórios, clicandoduas vezes neles até chegar ao diretório que está o arquivo desejado. Cliqueno arquivo e, em seguida, no botão AbrirAbrirAbrirAbrirAbrir);

envolva a linha que descreve o texto “Devo digitar minha redação aqui!!!”“Devo digitar minha redação aqui!!!”“Devo digitar minha redação aqui!!!”“Devo digitar minha redação aqui!!!”“Devo digitar minha redação aqui!!!”com o TTTTTagagagagag de parágrafo, ou seja, TTTTTagagagagag <P>, juntamente com o atributoalign=center ;

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

clique no botão SalvSalvSalvSalvSalvararararar.

Para visualizar a modificação, basta clicar no botão RecarregarRecarregarRecarregarRecarregarRecarregar do FirefoxFirefoxFirefoxFirefoxFirefox ou ir aomenu ExibirExibirExibirExibirExibir e escolher a opção RRRRRecarregarecarregarecarregarecarregarecarregar. Sua página será carregada no navegadore apresentada como mostra a figura a seguir:

Viu só como é fácil criar parágrafos? Agora, continue criando outros. Construa umapágina com o Hino do time de futebol para o qual você torce. Deixe-o centralizado emsua página da Internet.

29


AAAAATENÇÃOTENÇÃOTENÇÃOTENÇÃOTENÇÃ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 dapágina ou com alinhamento justificado, utilize o atributo de alinhamento AlignAlignAlignAlignAlign.

Para isso:Para isso:Para isso:Para isso:Para isso:

através do código de sua página, acrescente ao TTTTTagagagagag <P> o atributo AlignAlignAlignAlignAlign.

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ÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1)1)1 )1 )1 ) Pesquise em um SiteSiteSiteSiteSite de busca um poema de Carlos Drummond de Andrade

ou de um outro poeta de sua preferência.

2 )2 )2 )2 )2 ) Agora, com base nas explicações anteriores, utilizando o editor de textoKWriteKWriteKWriteKWriteKWrite, crie uma página cujo título é o “nome do poema – nome do autor”eo corpo da página são as estrofes do poema.

3 )3 )3 )3 )3 ) Coloque cada estrofe do poema como um parágrafo, fazendo alinhamentosdiferentes (centcentcentcentcentererererer, justifyjustifyjustifyjustifyjustify, leflefleflefleft t t t t e rightrightrightrightright) para cada um deles.

4 )4 )4 )4 )4 ) Salve o arquivo como Modelo2.htmModelo2.htmModelo2.htmModelo2.htmModelo2.htm.

5)5 )5 )5 )5 ) Abra o arquivo no FireFoxFireFoxFireFoxFireFoxFireFox.

30



31

ESTILOS DECABEÇALHO E

PARÁGRAFO

33


Você acabou de aprender a criar parágrafos com o TTTTTagagagagag <P>. Mas existem, também,outros seis TTTTTag’sag’sag’sag’sag’s de parágrafos que servem para aumentar a fonte do texto e colocá-loem negrito. A diferença entre cada um deles está no tamanho da fonte. Veja, peloexemplo 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:

34


TAG <FONT>TAG <FONT>TAG <FONT>TAG <FONT>TAG <FONT>

A partir de agora, esses textos podem ser formatados com cores, tipos de letras e tamanho.Para isso, existe o TTTTTagagagagag <FONT> e </FONT> que possui três atributos:

FaceFaceFaceFaceFace Altera a fonte do texto.

ColorColorColorColorColor Altera a cor da fonte.

SizeSizeSizeSizeSize Altera o tamanho da fonte.

Entendendo melhorEntendendo melhorEntendendo melhorEntendendo melhorEntendendo melhor...............

Inicialmente criando uma página que descreve o nome de cinco animais:

Abra o editor de texto KWrite (KWrite (KWrite (KWrite (KWrite (clique no botão Aplicativos, Aplicativos, Aplicativos, Aplicativos, Aplicativos, no item Escri-Escri-Escri-Escri-Escri-tóriotóriotóriotóriotório, clique em KWriteKWriteKWriteKWriteKWrite).

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 Modelo3.htm Modelo3.htm Modelo3.htm Modelo3.htm (clique no botão salvar e escolha odiretório do curso).

Visualize o código no navegador.

35


Para isso, você irá abrir o KonquerorKonquerorKonquerorKonquerorKonqueror (clicar no botão de inicialização MetasysMetasysMetasysMetasysMetasys e sele-cionar o menu Gerenciador de ArGerenciador de ArGerenciador de ArGerenciador de ArGerenciador de Arquivquivquivquivquivososososos). Você pode navegar, clicando nos diretóriosà sua esquerda até chegar ao diretório que está seu arquivo .htm.htm.htm.htm.htm ou, na caixa de textoLocalizaçãoLocalizaçãoLocalizaçãoLocalizaçãoLocalização, você pode digitar o caminho até o diretório do arquivo e clicar EntEntEntEntEntererererer. Osarquivos desse diretório aparecerão ao lado direito do KKKKKonqueronqueronqueronqueronquerororororor. Então, clique duasvezes no arquivo Modelo3.htmModelo3.htmModelo3.htmModelo3.htmModelo3.htm.

No arquivo modelo3.htm, use o TTTTTagagagagag <FONT> para mudar a letra, o tamanho e a cor decada 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.htmModelo3.htmModelo3.htmModelo3.htmModelo3.htm. Visualize o código nonavegador.

A página deve abrir conforme a figura a seguir:

36


CURIOSIDADECURIOSIDADECURIOSIDADECURIOSIDADECURIOSIDADE

Para o atributo SizeSizeSizeSizeSize, é possível alterar sete tamanhos que vão de 1 a 7.Observe a sintaxe desse TTTTTagagagagag e veja, também, os outros atributos:

Sintaxe:Sintaxe:Sintaxe:Sintaxe:Sintaxe:

<FONT SIZE = “tamanho da f“tamanho da f“tamanho da f“tamanho da f“tamanho da fontontontontonte”e”e”e”e”>Texto</FONT><FONT FACE = “nome da f“nome da f“nome da f“nome da f“nome da fontontontontonte”e”e”e”e”>Texto</FONT><FONT COLOR= “nome da cor” “nome da cor” “nome da cor” “nome da cor” “nome da cor”>Texto</FONT>

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSAgora que você já aprendeu a criar uma página com parágrafos e alinhamentos,crie uma nova página HTMLHTMLHTMLHTMLHTML.

1 )1 )1 )1 )1 ) Utilizando o editor de texto KWriteKWriteKWriteKWriteKWrite, digite os três componentes básicos doHTMLHTMLHTMLHTMLHTML (os TTTTTag’sag’sag’sag’sag’s <HTML>, <HEAD> e <BODY>).

22222 ))))) Salve o arquivo com o nome gramática.htm gramática.htm gramática.htm gramática.htm gramática.htm no diretório à sua escolha.

33333) Insira, como título, o texto: Dicas de Gramática (Tag <HEAD>).

4 )4 )4 )4 )4 ) Pesquise na Internet, conteúdos sobre: a grafia de algumas palavras queparecem 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 )5 )5 )5 )5 ) No corpo da página, coloque cinco dicas que você pensa que são relevantespara quem necessita de um auxílio com o uso da nossa Língua.

6 )6 )6 )6 )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 )7 )7 )7 )7 ) Salve o arquivo e visualize sua página no navegador.

37


SOBRE O ASOBRE O ASOBRE O ASOBRE O ASOBRE O ATRIBUTO COLTRIBUTO COLTRIBUTO COLTRIBUTO COLTRIBUTO COLORORORORORÉ possível, com o atributo ColorColorColorColorColor, usar nomes de cores em inglês ou através do sistemaRGBRGBRGBRGBRGB (RED [vermelho], GREEN [verde] e BLUE [azul]) para cores. Seus valores são dadosem hexadecimais, que permitem inserir intensidades de cores como azul escuro ou azulclaro.Veja, a partir da tabela abaixo, a listagem de algumas cores com seus respectivos códi-gos hexadecimais:

CORCORCORCORCOR11111 CÓDIGOCÓDIGOCÓDIGOCÓDIGOCÓDIGOAQUA #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

38


EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1) Abra o arquivo Modelo2.htmModelo2.htmModelo2.htmModelo2.htmModelo2.htm, utilizando o editor de texto KWriteKWriteKWriteKWriteKWrite.

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 TTTTTag’sag’sag’sag’sag’s são de ContContContContConteúdoeúdoeúdoeúdoeúdo, ou seja, eles agem sobre o texto.Portanto, não se esqueça do seu fechamento, ok?

CORES DE FUNDO <BODY>CORES DE FUNDO <BODY>CORES DE FUNDO <BODY>CORES DE FUNDO <BODY>CORES DE FUNDO <BODY>

Já aprendemos que o TTTTTagagagagag <BODY> é um dos principais elementos da estrutura de umapá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 TTTTTagagagagag <BODY>:

Utilizando o editor de texto KWriteKWriteKWriteKWriteKWrite, abra o arquivo Modelo3.htmModelo3.htmModelo3.htmModelo3.htmModelo3.htm.

Exercite esses atributos, colorindo o fundo da página que criamos para aaula de Biologia.

Destaque-a com uma outra cor.

Visualize sua página, usando o navegador.

Mas, lembre-se: o atributo BGCOLBGCOLBGCOLBGCOLBGCOLOROROROROR deve ser usado dentro do TTTTTag ag ag ag ag <BODY>.

Veja sua sintaxe:

<BODY BGCOLOR=“cor desejada”>

39


EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1)1)1 )1 )1 ) Utilizando o editor de texto KWriteKWriteKWriteKWriteKWrite, digite os três componentes básicos do

HTMLHTMLHTMLHTMLHTML (os TTTTTag’sag’sag’sag’sag’s <HTML>, <HEAD> e <BODY>).

2 )2 )2 )2 )2 ) Salve o arquivo com o nome datas.htmdatas.htmdatas.htmdatas.htmdatas.htm no diretório à sua escolha.

3 )3 )3 )3 )3 ) Insira, como título, o texto: Datas ComemorativDatas ComemorativDatas ComemorativDatas ComemorativDatas Comemorativasasasasas (TTTTTagagagagag <HEAD>).

4 )4 )4 )4 )4 ) Faça uma pesquisa das principais datas comemorativas durante o ano de2008 — dia e motivo.

5 )5 )5 )5 )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.

66666 ))))) Mude a cor, a letra, o tamanho da fonte e sua cor de fundo, conforme o mês.

7 )7 )7 )7 )7 ) Visualize sua página no navegador.

TAG’S MAIS UTILIZADOS (RESUMO)TAG’S MAIS UTILIZADOS (RESUMO)TAG’S MAIS UTILIZADOS (RESUMO)TAG’S MAIS UTILIZADOS (RESUMO)TAG’S MAIS UTILIZADOS (RESUMO)

Segue, abaixo, um RRRRResumo dosesumo dosesumo dosesumo dosesumo dos TTTTTag’sag’sag’sag’sag’s mais utilizados para criação de DocumentosHTMLHTMLHTMLHTMLHTML. Esse resumo servirá como um Guia de Referência Básica para seu aprendizado.

TTTTTAAAAAG:G:G:G:G: <HTML><HTML><HTML><HTML><HTML> ComandoComandoComandoComandoComando INTERPRETADOR

ObjeObjeObjeObjeObjetivtivtivtivtivo do To do To do To do To do Tagagagagag

Apresenta as instruções ao navegador que está trabalhandocom documentos HTMLHTMLHTMLHTMLHTML.

Sintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe Básica<html>Conjunto de TAG’s e informações.

</html></html></html></html></html>

40


TTTTTAAAAAG:G:G:G:G: <HEAD><HEAD><HEAD><HEAD><HEAD> ComandoComandoComandoComandoComando CABEÇALHO


Responsável por diversas informações dentro de uma páginaHTMLHTMLHTMLHTMLHTML, como o título da Barra de TítuloBarra de TítuloBarra de TítuloBarra de TítuloBarra de Título.

Sintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe Básica

<head><head><head><head><head><title>título da página</title>

</head></head></head></head></head>

TTTTTAAAAAG:G:G:G:G: <TITLE><TITLE><TITLE><TITLE><TITLE> ComandoComandoComandoComandoComando TÍTULO


Define um texto como sendo o Título de uma Página, que émostrada na parte superior do Browser Browser Browser Browser Browser (na Barra de Títu-Barra de Títu-Barra de Títu-Barra de Títu-Barra de Títu-lololololo) e no cabeçalho de uma página impressa. O TTTTTagagagagag <title>deve aparecer sempre dentro do TTTTTag ag ag ag ag <head>.


<title><title><title><title><title> Título da Página </title></title></title></title></title>

ExemploExemploExemploExemploExemplo<title>Página Principal do Meu Site</title>

TTTTTAAAAAG:G:G:G:G: <BOD<BOD<BOD<BOD<BODY>Y>Y>Y>Y> ComandoComandoComandoComandoComando CORPO


Define o conteúdo principal, o corpo do documento. Essa é aparte do documento HTMLHTMLHTMLHTMLHTML que é exibida no navegador. Nocorpo podem-se definir propriedades comuns a toda páginacomo cor de fundo, margens e outras formatações.


<body><body><body><body><body> Corpo da Página </body></body></body></body></body>

ExemploExemploExemploExemploExemplo<title>Redação Pessoal </title>

41


TTTTTAAAAAG:G:G:G:G: <P><P><P><P><P> ComandoComandoComandoComandoComando PARÁGRAFO


Define o encerramento do Parágrafo atual e início de um novo,como no encerramento de um Parágrafo num documento detexto, pressionando-se EntEntEntEntEntererererer. É utilizado aos pares se for ne-cessária a colocação de atributos.

Sintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe BásicaParágrafo inicial<p><p><p><p><p> Parágrafo seguinte.<p atrtibutos> Parágrafo </p>

ExemploExemploExemploExemploExemploEste é o primeiro parágrafo.<p>E este é o segundo parágrafo.

<p align=”center”> Este é o parágrafo </p>

EfeitoEfeitoEfeitoEfeitoEfeitoEste é o primeiro parágrafo.E este é o segundo parágrafo.

EfeitoEfeitoEfeitoEfeitoEfeitoEste é o parágrafo

TTTTTAAAAAG:G:G:G:G: <BR><BR><BR><BR><BR> ComandoComandoComandoComandoComando PARÁGRAFO

ObjeObjeObjeObjeObjetivtivtivtivtivo do To do To do To do To do TagagagagagDefine o encerramento do Parágrafo atual e início de um novoParágrafo, como no encerramento de um parágrafo num do-cumento de texto, pressionando-se EntEntEntEntEntererererer.

Sintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe BásicaParágrafo inicial<BR><BR><BR><BR><BR> Parágrafo seguinte.

ExemploExemploExemploExemploExemploEste é o primeiro parágrafo.<br>E este é o segundo parágrafo.

EfeitoEfeitoEfeitoEfeitoEfeitoEste é o primeiro parágrafo.E este é o segundo parágrafo.

42


TTTTTAAAAAG:G:G:G:G: <B><B><B><B><B> Comando Comando Comando Comando Comando NEGRITO

ObjeObjeObjeObjeObjetivtivtivtivtivo do To do To do To do To do TagagagagagAtribui o estilo Negrito em trechos específicos do texto.


<b><b><b><b><b> texto </b></b></b></b></b>

ExemploExemploExemploExemploExemploTeste de Estilo para <b>NEGRITO</b>

EfeitoEfeitoEfeitoEfeitoEfeitoTeste de Estilo para NEGRITNEGRITNEGRITNEGRITNEGRITO.O.O.O.O.

TTTTTAAAAAG:G:G:G:G: <I><I><I><I><I> Comando Comando Comando Comando Comando ATRIBUI ITÁLICO

ObjeObjeObjeObjeObjetivtivtivtivtivo do To do To do To do To do TagagagagagAtribui o estilo Itálico em trechos específicos do texto.


<i><i><i><i><i> texto </i></i></i></i></i>

ExemploExemploExemploExemploExemploTeste de Estilo para <i>ITÁLICO</i>

EfeitoEfeitoEfeitoEfeitoEfeitoTeste de Estilo para ITÁLICO.

TTTTTAAAAAG:G:G:G:G: <U><U><U><U><U> Comando Comando Comando Comando Comando SUBLINHADO

ObjeObjeObjeObjeObjetivtivtivtivtivo do To do To do To do To do TagagagagagAtribui o estilo Sublinhado em trechos específicos do texto.


<u><u><u><u><u> texto </u></u></u></u></u>

ExemploExemploExemploExemploExemploEu criei uma <U>Página WEB.</U>

EfeitoEfeitoEfeitoEfeitoEfeitoEu criei uma Página WEB.

43


TTTTTAAAAAG:G:G:G:G: <H1><H1><H1><H1><H1> AAAAATÉ <H6>TÉ <H6>TÉ <H6>TÉ <H6>TÉ <H6> Comando Comando Comando Comando Comando NÍVEIS DE CABEÇALHO

ObjeObjeObjeObjeObjetivtivtivtivtivo do To do To do To do To do TagagagagagRealça os diversos níveis de cabeçalhos de modo hierárquiconuma página. Os níveis vão desde <h1> até <h6>, passandopor <h2>, <h3>, e assim por diante.


<h2><h2><h2><h2><h2> Cabeçalho de Nível 2</h2></h2></h2></h2></h2>

ExemploExemploExemploExemploExemplo<h1>Cabeçalho de Nível 1</h1><h2>Cabeçalho de Nível 2</h2><h3>Cabeçalho de Nível 3</h3>

EfeitoEfeitoEfeitoEfeitoEfeito

Cabeçalho de Nível 1Cabeçalho de Nível 2Cabeçalho de Nível 3

44



45

INSERINDOIMAGENS EM

DOCUMENTOSHTML

47



Uma das partes mais interessantes na construção de uma página na Internet é poder usarimagens (figuras) dentro delas. Na maioria das páginas, são utilizadas imagens animadaspara deixá-las mais bonitas, sofisticadas e com uma boa apresentação.

Lembre-se de não colocar imagens muito grandes e com muitas cores. Issoevita o carregamento lento de quem visita sua página.

O TTTTTagagagagag responsável pela tarefa de inserir imagens em uma página é o TTTTTagagagagag <IMG>. Massua função é só de chamar a figura. É necessário que ela já exista num arquivo dentrodo seu computador.Veja qual a sintaxe desse TTTTTagagagagag para incluir uma imagem em sua página:

<IMG SRC=“nome da imagem”>

IMG:IMG:IMG:IMG:IMG: é o TTTTTagagagagag HTMLHTMLHTMLHTMLHTML para inserção de imagens.SRC:SRC:SRC:SRC: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 dossinais 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 TTTTTagagagagag <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

48


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 TTTTTagagagagag na figura a seguir, com a imagem sendo mostrada a partir donavegador:

FONTE: HTTP://WWW.SOMATEMATICA.COM.BR/SINAIS.PHP

ALINHAMENTO DE IMAGENS E TEXTO NA PÁGINAALINHAMENTO DE IMAGENS E TEXTO NA PÁGINAALINHAMENTO DE IMAGENS E TEXTO NA PÁGINAALINHAMENTO DE IMAGENS E TEXTO NA PÁGINAALINHAMENTO 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 HTMLPágina HTMLPágina HTMLPágina HTMLPágina HTML. Por isso, existe o atributo do TTTTTagagagagag <IMG>que se chama AlignAlignAlignAlignAlign. Você se lembra dele quando aprendemos a alinhar parágrafos?

Observe, abaixo, sua sintaxe:Observe, abaixo, sua sintaxe:Observe, abaixo, sua sintaxe:Observe, abaixo, sua sintaxe:Observe, abaixo, sua sintaxe:<IMG ALIGN=atributo SRC=nome_da_imagem>

Agora, veja os valores utilizados para esse atributo ao alinhar uma imagem:

TTTTTop op op op op = Alinha o texto à parte superior da imagem.

49


MiddleMiddleMiddleMiddleMiddle = Alinha o texto ao meio da imagem.

Bottom = Bottom = Bottom = Bottom = Bottom = Alinha o texto à parte inferior da imagem.

Abaixo, seguem exemplos de alinhamento de imagem e texto, especificadosanteriormente:

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

50


REDIMENSIONAMENTO DE IMAGENSREDIMENSIONAMENTO DE IMAGENSREDIMENSIONAMENTO DE IMAGENSREDIMENSIONAMENTO DE IMAGENSREDIMENSIONAMENTO DE IMAGENS

Se você quiser, poderá alterar a Largura e a Altura das imagens de sua página, o quetornará seu carregamento mais rápido. Esses atributos não afetam a imagem originalem suas dimensões, apenas apresentam a imagem na página com as dimensões maisdefinidas.

Volte ao exemplo da página sobre a origem dos sinais Matemáticos e perceba que afigura incluída ficou muito grande. Vamos diminuir, então, suas dimensões, usando oatributo de largura Width Width Width 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 definiuem 18% 18% 18% 18% 18% o tamanho original.

Compare:

Esta é a página do exemplo anterior. Observe o tamanho da sua imagem:

51


Esta é a página com a imagem reduzida em 18%18%18%18%18% do seu tamanho original.

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSSeu professor de Biologia solicitou um trabalho sobre animais mamíferos: nomecientífico, habitat, reino, filo, classe, ordem, família, gênero e espécie. Você poderiarealizá-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áginade consulta com esse tema, fazendo uso dos recursos que aprendeu com a lin-guagem HTMLHTMLHTMLHTMLHTML.

1 )1 )1 )1 )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 )2 )2 )2 )2 ) Salve em seu computador todos os dados pesquisados. Lembre-se de queimagens menores deixam a página mais rápida.

33333 ))))) Em seguida, vá ao KWriteKWriteKWriteKWriteKWrite e digite todos os comandos necessários para inseriras 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 alinharos 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 oarquivo como mamífmamífmamífmamífmamíferererereros.htmos.htmos.htmos.htmos.htm e visualize no navegador.

52


Desenvolva uma página HTMLHTMLHTMLHTMLHTML que dê dicas matemáticas. Não se esqueça deincluir imagens para ilustrar sua página! Das dicas abaixo, selecione quatro e insirauma imagem para cada dica e uma imagem para o TítuloTítuloTítuloTítuloTítulo (H1).

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

Dica 2:Dica 2:Dica 2:Dica 2:Dica 2: multiplicar um número por 10n:basta deslocar a vírgula nnnnn casas decimais para a direita.Exemplo 1: 16 x 103 = 16000Exemplo 2: 15,567 x 104 = 155670Então, se quisermos efetuar 12 x 100, sabemos que 100=102. Então:12 x 100 =12 x 102 = 1200.

Dica 3:Dica 3:Dica 3:Dica 3:Dica 3: dividir um número por 10:basta deslocar a vírgula uma casa decimal para a esquerda.Exemplo 1: 16 / 10 = 1,6Exemplo 2: 15,567 / 10 = 1,5567

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

Dica 5:Dica 5:Dica 5:Dica 5:Dica 5: multiplicar um número por 11:quando o número for de dois algarismos, basta somar esses dois algarismos ecolocar 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.

53


Outros exemplos:Outros exemplos:Outros exemplos:Outros exemplos:Outros exemplos:1) 34 x 11:

somamos os algarismos do número 34: 3+4=7, colocamos o resultado no meiodeles: 374. Portanto 34x11 = 374.

2) 81 x 11:somamos os algarismos do número 81: 8+1=9, colocamos o resultado no meiodeles: 891. Portanto 81x11 = 891.

3) 37 x 11:somamos os algarismos do número 37: 3+7=10Como deu um número maior que 9, então não podemos colocar todo o número nomeio deles. Colocamos apenas o algarismo das unidades (0) e, o algarismo dadezena (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 11resultará em um número de 4 algarismos. Por exemplo, vamos efetuar a seguintemultiplicação: 135 x 11.

Temos o número 135. Somando o 1º com o 2º algarismo desse número temos1+3=4. Somando o 2º com o 3º algarismo desse número temos 3+5=8. Esses 2resultados serão colocados no meio do número 135, tirando o seu algarismo domeio: 1485. Portanto 135 x 11 = 1485.

54



55

HIPERLINK’STRABALHANDOCOM VíNCULOS

57


TIPOS DE URLTIPOS DE URLTIPOS DE URLTIPOS DE URLTIPOS DE URL’S’S’S’S’S

Normalmente, quando estamos navegando na Internet, basta digitar um endereço paraque, em seguida, já nos transportamos para a Página WebPágina WebPágina WebPágina WebPágina Web ou SiteSiteSiteSiteSite em questão. Masexistem alguns serviços da Internet que tendem a utilizar outros tipos de endereçamento.

URLURLURLURLURL: abreviação de Uniform Resource LocatorUniform Resource LocatorUniform Resource LocatorUniform Resource LocatorUniform 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 SiteSiteSiteSiteSite, semse importar (do ponto de vista do usuário) onde está, fisicamente, localizado.

A sintaxe básica para um URLURLURLURLURL deve seguir a seguinte estrutura:PROTOCOLO://Servidor/NomeDoArquivo.Htm

Agora, observe seu significado:

PROTOCOLO PROTOCOLO PROTOCOLO PROTOCOLO PROTOCOLO = Protocolo de Comunicação que deverá ser utilizado. Ex: http://http://http://http://http://

SERVIDOR SERVIDOR SERVIDOR SERVIDOR SERVIDOR = Nome do Computador Servidor que será acessado. Ex: mg.senac: mg.senac: mg.senac: mg.senac: mg.senac

NOMEDOARQUIVO.HTM NOMEDOARQUIVO.HTM NOMEDOARQUIVO.HTM NOMEDOARQUIVO.HTM NOMEDOARQUIVO.HTM = Documento .html .html .html .html .html que será aberto. Ex: index.htmindex.htmindex.htmindex.htmindex.htm

PROTOCOLO PROTOCOLO PROTOCOLO PROTOCOLO PROTOCOLO = Protocolo de Comunicação que deverá ser utilizado. Ex: http://http://http://http://http://

SERVIDOR SERVIDOR SERVIDOR SERVIDOR SERVIDOR = Nome do Computador Servidor que será acessado. Ex: mg.senac: mg.senac: mg.senac: mg.senac: mg.senac

NOMEDOARQUIVO.HTM NOMEDOARQUIVO.HTM NOMEDOARQUIVO.HTM NOMEDOARQUIVO.HTM NOMEDOARQUIVO.HTM = Documento .html .html .html .html .html que será aberto. Ex: index.htmindex.htmindex.htmindex.htmindex.htm

Compare os dados apresentados anteriormente com o endereço abaixo:Compare os dados apresentados anteriormente com o endereço abaixo:Compare os dados apresentados anteriormente com o endereço abaixo:Compare os dados apresentados anteriormente com o endereço abaixo:Compare os dados apresentados anteriormente com o endereço abaixo:

HTTP://www.portal.mec.gov.br/index.htm

HTTP HTTP HTTP HTTP HTTP = Protocolo para Documentos HTMLHTMLHTMLHTMLHTML.

www www www www www = World Wide Web.

porporporporportal.mec.gotal.mec.gotal.mec.gotal.mec.gotal.mec.govvvvv.br/ .br/ .br/ .br/ .br/ = Nome do Computador Servidor.

indeindeindeindeindex.htm = x.htm = x.htm = x.htm = x.htm = Página que será aberta no computador.

CRIANDO LINK’S DE ARQUIVOS LOCAIS <A>CRIANDO LINK’S DE ARQUIVOS LOCAIS <A>CRIANDO LINK’S DE ARQUIVOS LOCAIS <A>CRIANDO LINK’S DE ARQUIVOS LOCAIS <A>CRIANDO LINK’S DE ARQUIVOS LOCAIS <A>

Para criar um link, será necessário usar o TTTTTagagagagag <A>...</A>, também conhecido comoÂncoraÂncoraÂncoraÂncoraÂncora e, juntamente a ele, o atributo HrefHrefHrefHrefHref que diz ao navegador o URLURLURLURLURL ou página

58


que deverá ser chamado.

Sendo assim, para que se crie um link, deve-se saber para qual SitSitSitSitSiteeeee você deseja ir.

Veja a sintaxe do TTTTTagagagagag <A>, abaixo:<A HREF=“Arq_destino”>ÂNCORA</A>

HREFHREFHREFHREFHREF= Significa Referência de Vínculo.

Arq_destino Arq_destino Arq_destino Arq_destino 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 HTMLHTMLHTMLHTMLHTML apresenta apenas o Texto “CurCurCurCurCurso de Prso de Prso de Prso de Prso de Programação em HTMLogramação em HTMLogramação em HTMLogramação em HTMLogramação em HTML” comohipertexto 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 partirde um link no texto Portal da Gramática da Língua PortuguesaPortal da Gramática da Língua PortuguesaPortal da Gramática da Língua PortuguesaPortal da Gramática da Língua PortuguesaPortal da Gramática da Língua Portuguesa, o SiteSiteSiteSiteSitewww.portugues.com.br. Veja abaixo:

abra o editor KWriteKWriteKWriteKWriteKWrite;

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.

59


A página aberta deverá ser igual a esta:

Clique no link que apareceu na imagem. Automaticamente, você seráredirecionado para a página wwwwwwwwwwwwwww.por.por.por.por.portugues.com.brtugues.com.brtugues.com.brtugues.com.brtugues.com.br, conforme mostra afigura 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.

60


CRIANDO LINK’S PCRIANDO LINK’S PCRIANDO LINK’S PCRIANDO LINK’S PCRIANDO LINK’S PARA IMAGENSARA IMAGENSARA IMAGENSARA IMAGENSARA IMAGENS

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, onavegador será redirecionado para o SiteSiteSiteSiteSite 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 azulao seu redor, indicando um Hiperlink.

61


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)TAG’S MAIS UTILIZADOS (RESUMO)TAG’S MAIS UTILIZADOS (RESUMO)TAG’S MAIS UTILIZADOS (RESUMO)TAG’S MAIS UTILIZADOS (RESUMO)

Segue, abaixo, um RRRRResumo dos Tesumo dos Tesumo dos Tesumo dos Tesumo dos Tag’sag’sag’sag’sag’s mais utilizados para a criação de DocumentDocumentDocumentDocumentDocumentosososososHTMLHTMLHTMLHTMLHTML. Esse resumo servirá como um Guia de Referência Básica para seu aprendizado:

TTTTTAAAAAG:G:G:G:G: <IMG SR<IMG SR<IMG SR<IMG SR<IMG SRC>C>C>C>C> ComandoComandoComandoComandoComando INSERIR IMAGENS

ObjeObjeObjeObjeObjetivtivtivtivtivo do To do To do To do To do TagagagagagInsere uma imagem dentro da página.

Sintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe BásicaSintaxe Básica<img src=”nome_da_imagem”>

ExemploExemploExemploExemploExemploDê um Download nesta imagem <img src=”casa.gif”>

EfeitoEfeitoEfeitoEfeitoEfeitoDê um Download nesta imagem

62


TTTTTAAAAAG:G:G:G:G: <A HREF><A HREF><A HREF><A HREF><A HREF> ComandoComandoComandoComandoComando CRIAR VÍNCULOS


Insere um link na página, destacando o “endereço” com umalinha sublinhada, permitindo o usuário, ao clicar sobre o link,ir diretamente a outro local, desta ou de outra página.


Texto <a href=”endereço”>âncora</a> mais texto.....


Bate-Papo, <a HREF=”http://www.unesco.com.br/”>CliqueAqui!!!</a> e divirta-se.

EfeitoEfeitoEfeitoEfeitoEfeito

Bate-Papo, Clique Aqui!!! e Divirta-se.

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS

1) Imagine-se como um professor de Geografia e crie uma página na Internetcom questões sobre clima, relevo, escala, vegetação, cartografia e geopolíticada região Sudeste.

Seu SiteSiteSiteSiteSite deverá conter na página principal:

uma figura com o mapa da Região Sudeste;

um linklinklinklinklink para cada Estado da Região para páginas locais;

um link link link link link para um SiteSiteSiteSiteSite de estatística direcionado para a Região Sudeste.

Além da página principal, seu SiteSiteSiteSiteSite deverá ter uma página para cada Estado.Nesta página, coloque, pelo menos, as informações encontradas na Internet, ummapa do Estado, um link para a previsão de tempo na semana, um link para apá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 corespara dar um maior dinamismo à sua página!

63


Se você conhecer o Impress,Impress,Impress,Impress,Impress, pode utilizá-lo para criar o seu gráfico.

2) Hora de pesquisar! Agora, suponha que seu professor de Matemática tenhapedido uma pesquisa sobre a origem da calculadora. Você pode usar a Internetpara buscar informações a respeito desse tema.

O seu SitSitSitSitSiteeeee deverá ter, pelo menos, cinco páginas. A principal, descrevendosobre 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áginasdeverão ter link’slink’slink’slink’slink’s em ordem cronológica e o link de Backlink de Backlink de Backlink de Backlink de Back.

a )a )a )a )a ) Inicie seu trabalho, por exemplo, falando sobre o instrumento de cálculochamado Ábaco:

ÁBACO – ÁBACO – ÁBACO – ÁBACO – ÁBACO – Instrumento para contagem e cálculo. Calculadora com váriashastes de metal, sustentando bolinhas que podem ser manipuladas, ser-vindo para realizar operações matemáticas.

b )b )b )b )b ) Em seguida, faça uma pequena cronologia até os dias atuais, em quetemos 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 asfases da calculadora!

64



65

CRIANDOLISTAS

67


TIPOS DE LISTTIPOS DE LISTTIPOS DE LISTTIPOS DE LISTTIPOS DE LISTASASASASASCriar listas em HTML HTML HTML HTML 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.

Lista ordenadaLista ordenadaLista ordenadaLista ordenadaLista ordenada

Existem cerca de 130 espécies minerais que foram utilizadas como gemas, com 50espé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


68


<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 OrdenadasPersonalizando Listas OrdenadasPersonalizando Listas OrdenadasPersonalizando Listas OrdenadasPersonalizando Listas Ordenadas

Para Listas NumeradasListas NumeradasListas NumeradasListas NumeradasListas Numeradas, é obrigatório o uso do TTTTTag ag ag ag ag <OL>. Nos itens, tanto da ListaListaListaListaListaOrdenadaOrdenadaOrdenadaOrdenadaOrdenada como da Lista de MarcadoresLista de MarcadoresLista de MarcadoresLista de MarcadoresLista de Marcadores, deverá haver sempre, para cada item daLista, o TTTTTagagagagag <LI> que significa (List Item), ou seja, ItItItItItem da Listaem da Listaem da Listaem da Listaem da Lista.

69


Observe este exemplo simples de Lista OrdenadaLista OrdenadaLista OrdenadaLista OrdenadaLista 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 .1 .1 .1 .1 . Geografia

2.2 .2 .2 .2 . História

3.3 .3 .3 .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 quenão seja o primeiro. Para isso, observe, na Tabela, a utilização do atributo TTTTTypeypeypeypeype, usadono TTTTTagagagagag <OL>:

TTTTType=Aype=Aype=Aype=Aype=A Marcadores para Ordem Alfabética em Maiúsculo.

TTTTType=aype=aype=aype=aype=a Marcadores para Ordem Alfabética em Minúsculo.

TTTTType=Iype=Iype=Iype=Iype=I Marcadores para Numerais Romanos em Maiúsculo.

TTTTType=iype=iype=iype=iype=i Marcadores para Numerais Romanos em Minúsculo.

TTTTType=1ype=1ype=1ype=1ype=1 Marcadores para Números.

StartStartStartStartStart Indica um valor inicial de marcadores na Lista atualLista atualLista atualLista atualLista atual.

Veja exemplosVeja exemplosVeja exemplosVeja exemplosVeja exemplos de uso desses atributos:

<OL T<OL T<OL T<OL T<OL TYPE=A>YPE=A>YPE=A>YPE=A>YPE=A> Apresenta uma Lista de letras com itens numerados A, B, C, D etc.

<OL T<OL T<OL T<OL T<OL TYPE=I>YPE=I>YPE=I>YPE=I>YPE=I> Apresenta uma Lista que usa números romanos I, II, III, IV, V etc.

<OL T<OL T<OL T<OL T<OL TYPE=a STYPE=a STYPE=a STYPE=a STYPE=a START=4>ART=4>ART=4>ART=4>ART=4> Apresenta uma Lista em ordem alfabética minúscu-la, começando a partir da letra D.

70


Personalizando Listas Não-OrdenadasPersonalizando Listas Não-OrdenadasPersonalizando Listas Não-OrdenadasPersonalizando Listas Não-OrdenadasPersonalizando Listas Não-Ordenadas

Para Listas de MarListas de MarListas de MarListas de MarListas de Marcadorescadorescadorescadorescadores, é obrigatório o uso do TTTTTag ag ag ag ag <UL> e, sempre, nos itens daLista, deverá haver, para cada item, o TTTTTagagagagag <LI> que significa List Item, ou seja, ItItItItItem daem daem daem daem daListaListaListaListaLista. Observe este exemplo simples de Lista Não-OrdenadaLista Não-OrdenadaLista Não-OrdenadaLista Não-OrdenadaLista 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 HTMLHTMLHTMLHTMLHTML quevai 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 atributoTTTTTypeypeypeypeype permite alterar tal definição que deve ser especificada assim:

TTTTType=Discype=Discype=Discype=Discype=Disc Marcadores de Disco CheioDisco CheioDisco CheioDisco CheioDisco Cheio.

TTTTType=Cirype=Cirype=Cirype=Cirype=Circleclecleclecle Marcadores de CírCírCírCírCírculo Vculo Vculo Vculo Vculo Vazadoazadoazadoazadoazado.

TTTTType=Squareype=Squareype=Squareype=Squareype=Square Marcadores de Quadrado Sólido (cheio).

* Identação: dentro da computação, Identação é um termo aplicado ao código fonte de um programa paraindicar 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 fontemuito 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 asua 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 pretendempartilhar 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:Fonte:Fonte:Fonte: pt.wikipedia.org/wiki/Identação)

71


EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1) Utilizando o editor de texto KWrite, digite os três componentes básicos

do HTMLHTMLHTMLHTMLHTML (os TTTTTag’sag’sag’sag’sag’s <HTML>, <HEAD> e <BODY>).

2) Salve o arquivo com o nome americasul.htmamericasul.htmamericasul.htmamericasul.htmamericasul.htm no diretório à sua escolha.

3) Insira, como título, o texto: PPPPPaísesaísesaísesaísesaíses da América do Sulda América do Sulda América do Sulda América do Sulda América do Sul (TTTTTagagagagag <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 TTTTTagagagagag <OL>.

8) Salve o arquivo e visualize sua página no navegador.

72



73

UTILIZANDOTABELAS

75


As tabelas têm o intuito de organizar as informações dentro de uma página, permitindomelhorar seu visual.

Poderíamos criar, por exemplo, uma tabela que listasse as letras do alfabeto grego eseu significado.

Veja, abaixo, a tabela que iremos desenvolver:

Apha ABeta BGamma GDelta DEpsilon EZeta ZEta HTheta QIota IKappa KLambda LMu MNu NXi XOmicron OPi PRho RSigma STau TUpsilon UPhi FChi CPsi YOmega W

76


Mas antes, vamos observar a tabela a seguir:

Depois de observar a tabela, veja o código responsável por ela:

<HTML><TABLE BORDER><TR><TD>Linha 1 – Coluna 1</TD><TD>Linha 1 – Coluna 2</TD><TD>Linha 1 – Coluna 3</TD></TR><TR><TD>Linha 2 – Coluna 1</TD><TD>Linha 2 – Coluna 2</TD><TD>Linha 2 – Coluna 3</TD></TR></TABLE></HTML>

TAG <TTAG <TTAG <TTAG <TTAG <TABLE>ABLE>ABLE>ABLE>ABLE>

Para dar início à sua tabela, é necessário que se comece com o TTTTTag de Contag de Contag de Contag de Contag de Conteúdoeúdoeúdoeúdoeúdo <TABLE>,responsável por mostrar, ao navegador, onde apresentar a tabela na Página WPágina WPágina WPágina WPágina Webebebebeb. Aofinal, deve-se fechá-la, utilizando o TTTTTag de Fag de Fag de Fag de Fag de Fececececechamenthamenthamenthamenthamentooooo </TABLE>.

TAG DE LINHA <TR>TAG DE LINHA <TR>TAG DE LINHA <TR>TAG DE LINHA <TR>TAG DE LINHA <TR>

Logo após a inserção do TTTTTag de Aberag de Aberag de Aberag de Aberag de Aberturaturaturaturatura da tabela <TABLE>, inclua o TTTTTag de Contag de Contag de Contag de Contag de Conteúdoeúdoeúdoeúdoeúdo<TR> para definir as linhas de sua tabela. Cada linha deverá conter esse TTTTTagagagagag. Não se esqueçade que ele é um TTTTTag de Contag de Contag de Contag de Contag de Conteúdoeúdoeúdoeúdoeúdo, por isso, ao final de cada linha de sua tabela, deverá serfeito o fechamento dela através do TTTTTag de Fag de Fag de Fag de Fag de Fececececechamenthamenthamenthamenthamentooooo </TR>. Se desejar criar umcabeçalho para cada coluna, inclua-o na primeira.

Linha 1 – Coluna 1 Linha 1 – Coluna 2 Linha 1 – Coluna 3

Linha 2 – Coluna 1 Linha 2 – Coluna 2 Linha 2 – Coluna 3

77


TAG DE CÉLTAG DE CÉLTAG DE CÉLTAG DE CÉLTAG DE CÉLULULULULULA <TD>A <TD>A <TD>A <TD>A <TD>

Em todas as linhas definidas pelo TTTTTagagagagag <TR>, inclua um conjunto de TTTTTag’s de Contag’s de Contag’s de Contag’s de Contag’s de Conteúdoeúdoeúdoeúdoeúdo<TD> (TTTTTag´s de Dadosag´s de Dadosag´s de Dadosag´s de Dadosag´s de Dados), para definir cada célula. Entre esses conjuntos digite o textopara a respectiva célula.

Observe,abaixo, a sintaxe básica dos TTTTTag’sag’sag’sag’sag’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>

Veja, agora, um exemplo de utilização de tabela. Nesta página, são mostradas asdefinições dos itens da Tabela Periódica:

Linha 1 Célula 2 Célula 3

Linha 2 Célula 2 Célula 3

78


TAG DE MESCLTAG DE MESCLTAG DE MESCLTAG DE MESCLTAG DE MESCLAR CÉLAR CÉLAR CÉLAR CÉLAR CÉLULULULULULAS DE LINHA <COLSPAS DE LINHA <COLSPAS DE LINHA <COLSPAS DE LINHA <COLSPAS DE LINHA <COLSPAN>AN>AN>AN>AN>

Essa tag é utilizada, juntamente com a tag <td>, para indicar quantas colunas de umadeterminada 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>

<TD>Linha 2 – Coluna 1</TD>



</TR>

</TABLE></HTML>

TAG DE MESCLTAG DE MESCLTAG DE MESCLTAG DE MESCLTAG DE MESCLAR CÉLAR CÉLAR CÉLAR CÉLAR CÉLULULULULULAS DE COLAS DE COLAS DE COLAS DE COLAS DE COLUNA <ROWSPUNA <ROWSPUNA <ROWSPUNA <ROWSPUNA <ROWSPAN>AN>AN>AN>AN>

Essa tag é utilizada, juntamente com a tag <td>, para indicar quantas linhas de umadeterminada coluna estarão mescladas em uma célula.


<HTML>

<TABLE BORDER>

<TR>

<TD ROWSPAN=4>Linha 1 2 3 – Coluna 1</TD>

</TR>

<TR>



79


</TR>

<TR>



</TR>

<TR>



</TR>

</TABLE></HTML>

TAG DE TAG DE TAG DE TAG DE TAG DE HEADER HEADER HEADER HEADER HEADER (CABEÇALHO) <TH>(CABEÇALHO) <TH>(CABEÇALHO) <TH>(CABEÇALHO) <TH>(CABEÇALHO) <TH>

Define a célula corrente da tabela como cabeçalho da tabela. Normalmente é utilizadonas 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>

80


ATRIBUTOS DA TABELAATRIBUTOS DA TABELAATRIBUTOS DA TABELAATRIBUTOS DA TABELAATRIBUTOS DA TABELA

Veja, agora, uma listagem de outros atributos que podem ser definidos juntamentecom o TTTTTag de Contag de Contag de Contag de Contag de Conteúdoeúdoeúdoeúdoeúdo <TABLE>:

WidthWidthWidthWidthWidth Especifica a largura da tabela, medida em porcentagem ou emPixels1 .

Height Height Height Height Height Especifica a altura da tabela, medida em porcentagem ou emPixels.

Cellpadding Cellpadding Cellpadding Cellpadding Cellpadding Especifica o espaço entre o texto que está dentro da célula.

CellspacingCellspacingCellspacingCellspacingCellspacing Especifica o espaço dentro de uma célula. O padrão é 2.

Align Align Align Align Align Alinha uma tabela dentro do navegador.

Border Border Border Border Border Especifica a espessura da borda da tabela. O padrão é 1.

BgcolorBgcolorBgcolorBgcolorBgcolor Especifica a cor de segundo plano para a tabela.

BackgroundBackgroundBackgroundBackgroundBackground Especifica uma figura de segundo plano para a tabela.

CaptionCaptionCaptionCaptionCaption Inclui uma legenda para a tabela. Seus valores, TTTTTopopopopop ou BoBoBoBoBottttttttttomomomomom,são do atributo AlignAlignAlignAlignAlign.

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

e digite o seguinte código:

<html>

<head>

<title>ALFABETO GREGO</title>

</head>

<body>

11111 PicPicPicPicPicture e ElElElElElement: é uma medida utilizada em imagens. Um PixelPixelPixelPixelPixel é o menor ponto que forma uma imagemdigital, sendo que o conjunto de milhares de Pixels formam a imagem inteira.

81


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

82


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

83


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

84


Ao terminar de digitar, salve seu arquivo como leleleleletrasgregas.htmtrasgregas.htmtrasgregas.htmtrasgregas.htmtrasgregas.htm.

Em seguida, abra o arquivo no navegador e observe o resultado, conformemostrado na figura abaixo:

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1) Abra o arquivo letrasgregas.htmletrasgregas.htmletrasgregas.htmletrasgregas.htmletrasgregas.htm no KwriteKwriteKwriteKwriteKwrite.

Utilizando os atributos de tabela, mude a cor do fundo da tabela, centra-lize a tabela e aumente a espessura da borda (utilizando os atrtributosBgcolorBgcolorBgcolorBgcolorBgcolor, Align Align Align Align Align e Border Border Border 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 emuma página HTMLHTMLHTMLHTMLHTML (os Gases Nobres, os Lantanídeos e os Actinídeos).

Abra o editor de texto KWriteKWriteKWriteKWriteKWrite e mãos à obra! Ao terminar a digitação doscódigos, salve seu arquivo como tabelaperiódica.htmtabelaperiódica.htmtabelaperiódica.htmtabelaperiódica.htmtabelaperiódica.htm.

85


<html>

<HEAD><TITLE>Tabela Periódica</TITLE></HEAD>

<body>

<TABLE cellSpacing=1 cellPadding=3 align=center border=0height=”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>



86



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




87




<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<fontcolor=”#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>

88



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

89



<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=20height=”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>

90



<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

91


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

92


color=#FF00FF><B>Lr</B></A><BR>(262)

</CENTER></TD>


<TR>

<TD height=”2"></TD>

<TD height=”2" width=”0"></TD>



















</table>

</body>

</html>

93


Se quiser, você pode fazer com que o navegador apresente a grade da tabela, bastando,para isso, adicionar ao TTTTTagagagagag <TABLE>, o atributo BorderBorderBorderBorderBorder. A borda inserida possui umaespessura 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ÍCIOEXERCÍCIOEXERCÍCIOEXERCÍCIOEXERCÍCIO1) Monte uma página e distribua em uma tabela a relação das calorias existentesnos ovos. Veja pelo exemplo da figura a seguir. Salve seu arquivo comocalorias.htmcalorias.htmcalorias.htmcalorias.htmcalorias.htm.

94


Clara de ovo cozida

Clara de ovo frita

Gemada

Gema de ovo crua

Gema de ovo frita

Omelete

Omelete c/ queijo

Ovo de avestruz

Ovo de codorna

Ovo de galinha cozido

Ovo de galinha cru

Ovo de galinha frito

Ovo de galinha frito na margarina

Ovo de galinha pochê

Ovo de pata

Ovo de perua

Ovo mexido

Ovo mexido c/ queijo

Unidade

Unidade

1 porção (150ml)

Unidade

Unidade

1 fatia média (100g)

1 fatia média (100g)

Unidade

Unidade

Unidade

Unidade

Unidade

Unidade

Unidade

Unidade

Unidade

Unidade

Unidade

13

22

210

60

85

104

266

39

33

78

76

108

90

78

129

83

120

180

PRODUTOPRODUTOPRODUTOPRODUTOPRODUTO QUANTIDADEQUANTIDADEQUANTIDADEQUANTIDADEQUANTIDADE KcalKcalKcalKcalKcal

TTTTTABELA DE CABELA DE CABELA DE CABELA DE CABELA DE CALALALALALORIASORIASORIASORIASORIAS

ovos


95

TRABALHANDOCOM FORMULÁRIOS

97


A Internet nos oferece todo tipo de serviço que podemos imaginar, desde consultas alivros da biblioteca de alguma universidade, até compras pelo computador. Nessescasos, de compras ou até de cadastramento em alguma agência de empregos, temosque preencher algum tipo de formulário de dados para que possamos ter contato coma 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 seusresponsáveis.

Para que possamos criar um formulário de dados em uma página HTMLHTMLHTMLHTMLHTML, utilizamos oTTTTTag de Contag de Contag de Contag de Contag de Conteúdo eúdo eúdo eúdo eúdo <FORM>, que possui duas funções específicas:

informar o local do programa que gerencia o formulário;

definir o método como os dados serão enviados ao respectivo servidor.

O TTTTTag ag ag ag ag <FORM> utiliza o atributo AAAAActionctionctionctionction. É nele que informamos o servidor e o programaque processará o formulário.

Além do atributo AAAAActionctionctionctionction, é necessário usar, também, o atributo MeMeMeMeMethodthodthodthodthod, que indica ométodo usado pelo servidor para receber o formulário.

Existem dois tipos de métodos conhecidos: Get Get Get Get Get e PostPostPostPostPost. Este último é o mais usado portransmitir todas as informações do formulário. Já o método GetGetGetGetGet junta as informaçõesdo formulário ao endereço antes de enviá-lo.

Para entender melhor, imagine que você esteja enviando um formulário via Internetpara se comunicar com algum de seus professores. Esse formulário deverá ser enviadopelo método PostPostPostPostPost. Mas, se você estivesse exibindo um boleto bancário para pagamento,os dados do boleto seriam enviados pelo método GetGetGetGetGet.

CAMPOS DE FORMULÁRIO <INPUT>CAMPOS DE FORMULÁRIO <INPUT>CAMPOS DE FORMULÁRIO <INPUT>CAMPOS DE FORMULÁRIO <INPUT>CAMPOS DE FORMULÁRIO <INPUT>

Através do TTTTTag de Contag de Contag de Contag de Contag de Conteúdoeúdoeúdoeúdoeúdo <INPUT>, podemos apresentar a forma de entrada de dadosque o usuário poderá usar para preencher o formulário. Cada tipo de entrada de dados noformulário é atribuída em uma variável que será definida nesse TTTTTagagagagag.

Veja a sintaxe usada pelo TTTTTag ag ag ag ag <INPUT>:

<INPUT TYPE=“tipo de variável” NAME=“variável”SIZE=“tamanho” MAXLENGTH=“comprimento”

98


PPPPPARÂMETRARÂMETRARÂMETRARÂMETRARÂMETROSOSOSOSOS

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.

FUNÇÃOFUNÇÃOFUNÇÃOFUNÇÃOFUNÇÃO

CRIANDO CAIXAS DE TEXTOCRIANDO CAIXAS DE TEXTOCRIANDO CAIXAS DE TEXTOCRIANDO CAIXAS DE TEXTOCRIANDO CAIXAS DE TEXTO

Para criar CaixCaixCaixCaixCaixas de Tas de Tas de Tas de Tas de Teeeeextxtxtxtxtooooo para entrada de dados em um formulário, utilize o parâmetroTTTTType=Type=Type=Type=Type=Teeeeextxtxtxtxt para o TTTTTagagagagag <INPUT>. Esse parâmetro criará uma caixa de texto com tama-nho definido pelo parâmetro SizeSizeSizeSizeSize, em uma única linha.

Observe o código HTMLHTMLHTMLHTMLHTML disposto, abaixo, e compare com o efeito apresentado na figura:

<html>

<body>

<H2>Responda ao Questionário abaixo:</h2>

<FORM>

Veja, a seguir, a lista dos parâmetros utilizados no Tag <INPUT>:

99


Digite seu Nome: <INPUT type=”text” NAME=”nome”

SIZE=”40" MAXLENGTH=”40">

</FORM>

</body>

</html>

Além de incluir CaixCaixCaixCaixCaixas de Tas de Tas de Tas de Tas de Teeeeextxtxtxtxtooooo para digitar valores, podemos definir um valor padrãopara o campo a ser inserido, automaticamente, no formulário. Para utilizá-lo, bastausar o atributo VVVVValuealuealuealuealue dentro do TTTTTag ag ag ag ag <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”>

100


</FORM>

</body>

</html>

CAMPOS DE SENHACAMPOS DE SENHACAMPOS DE SENHACAMPOS DE SENHACAMPOS DE SENHA

Outro tipo de CaixCaixCaixCaixCaixas de Tas de Tas de Tas de Tas de Teeeeextxtxtxtxtooooo, usado em formulários, seria o campo para preenchimentode senhas. Nele, apenas os caracteres digitados são representados por * (asterisco)como, normalmente, são utilizados nesse tipo de campo. Para atribuí-lo, basta utilizaro parâmetro PPPPPasswasswasswasswasswordordordordord, dentro do TTTTTagagagagag <INPUT>.

<html>

<body>


<FORM>




value=”Belo Horizonte”><br>

101


Senha de Acesso: <INPUT type=”password” NAME=”nome”

SIZE=”40">

</FORM>

</body>

</html>

BOTÕES DE RADIOBOTÕES DE RADIOBOTÕES DE RADIOBOTÕES DE RADIOBOTÕES DE RADIO

Através do atributo RadioRadioRadioRadioRadio usado com o TTTTTag ag ag ag ag <INPUT>, podemos criar opções do tipoBotão de RadioBotão de RadioBotão de RadioBotão de RadioBotão de Radio. As opções a serem escolhidas deverão estar associadas a uma únicavariável, por ser permitida apenas uma única escolha. Quando clicamos em algumaopção, a que foi marcada anteriormente será desmarcada automaticamente.

Se desejar, poderá utilizar o parâmetro ChecChecChecChecCheckkkkkededededed para deixar uma das opções comovalor padrão. Observe o código HTMLHTMLHTMLHTMLHTML apresentado, abaixo, e o efeito a partir da figura:

<html>

<body>


102


<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


103


value=”falso”>Falso

</FORM>

</body>

</html>

CAIXAS DE SELEÇÃOCAIXAS DE SELEÇÃOCAIXAS DE SELEÇÃOCAIXAS DE SELEÇÃOCAIXAS DE SELEÇÃO

O parâmetro ChecChecChecChecCheckbokbokbokbokboxxxxx, dentro do TTTTTagagagagag <INPUT>, permite criar uma lista de opções quecondiciona a escolha de várias opções. Pode-se decidir, entre elas, quais ficarãomarcadas. Para isso, basta definir o atributo CheckedCheckedCheckedCheckedChecked em seu código.

Observe o código HTMLHTMLHTMLHTMLHTML, a seguir, e seu efeito, a partir da figura:

<html>

<body>


<FORM>






SIZE=”10"><br>

104


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>

105



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>

106


LISTLISTLISTLISTLISTA DE OPÇÕES <SELECT>A DE OPÇÕES <SELECT>A DE OPÇÕES <SELECT>A DE OPÇÕES <SELECT>A DE OPÇÕES <SELECT>

Outro recurso que podemos adicionar em nossos formulários é o uso de menus suspensose/ou de rolagem para a escolha entre várias opções listadas. Esse recurso permite queo usuário escolha uma única opção. Para isso:

utilize o TTTTTag de Contag de Contag de Contag de Contag de Conteúdoeúdoeúdoeúdoeúdo <SELECT> que exige o atributo Name Name Name Name Name e permiteinformar quantas opções serão apresentadas, seqüencialmente, através doatributo SizeSizeSizeSizeSize.

utilize o atributo SelectedSelectedSelectedSelectedSelected para informar qual valor será o padrão da listagemapresentada.

Observe o código, abaixo, com o TTTTTagagagagag <SELECT>:

<html>

<body>


<FORM>





107



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

108




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

109


<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ÁRIOTRANSMITINDO DADOS DO FORMULÁRIOTRANSMITINDO DADOS DO FORMULÁRIOTRANSMITINDO DADOS DO FORMULÁRIOTRANSMITINDO DADOS DO FORMULÁRIO

Já entendemos que os dados de um formulário são transmitidos para o Servidor daServidor daServidor daServidor daServidor daInternetInternetInternetInternetInternet. Para enviar os dados de um formulário, existe um botão de comando especialchamado SubmitSubmitSubmitSubmitSubmit. Ele envia todos os dados do formulário.

110



As informações do formulário, quando enviadas, utilizando o já conhecido método GetGetGetGetGet,são anexadas e enviadas ao SerSerSerSerServidor Wvidor Wvidor Wvidor Wvidor Webebebebeb, juntamente com a URL URL URL URL URL do servidor. Utili-zando o método PostPostPostPostPost, as informações são enviadas em um bloco de dados separadosda URLURLURLURLURL.

Para que um formulário funcione dentro de uma Home PageHome PageHome PageHome PageHome Page é necessário verificar como Provedor de Internet, se o mesmo permite o uso de formulário no Servidor WebServidor WebServidor WebServidor WebServidor Web.Caso permita, devem-se desenvolver rotinas em alguma linguagem que o Servidor utili-za como ASPASPASPASPASP, PHPPHPPHPPHPPHP 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 WebServidor WebServidor WebServidor WebServidor 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âmetroSubmitSubmitSubmitSubmitSubmit 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>


111






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



112


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>

113


</select>

<br>

<br>

<label>

<input type=”submit” name=”Submit” value=”Responder”>

</label>

</FORM>

</body>

</html>

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSDesenvolva um SiteSiteSiteSiteSite intitulado Estudo das Matérias EscolaresEstudo das Matérias EscolaresEstudo das Matérias EscolaresEstudo das Matérias EscolaresEstudo das Matérias Escolares.

1) Escolha cinco matérias diferentes. A página principal terá link para as cincopáginas das matérias.

2) Matéria 1: escreva um texto pertinente ao assunto e formate-o da maneiramais 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.

114


5) Matéria 4: será uma página de link’s para todas as páginas HTMLHTMLHTMLHTMLHTML feitas nocurso. Crie uma lista ordenada com link’s. Utilize de recursos de formataçãoe imagens para deixar a página mais atrativa.

6) Matéria 5: será uma prova sobre o tema que você escolheu. Utilizando-se deformulá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 Sites Sites Sites Sites que você pesquisou na Internet.

Viu como foi fácilViu como foi fácilViu como foi fácilViu como foi fácilViu como foi fácil aprender a criar uma página na Internet através daatravés daatravés daatravés daatravés dalinguagem HTML?linguagem HTML?linguagem HTML?linguagem HTML?linguagem HTML?

Agora, com os comandos estudados ao longo da apostila, você poderásoltar a imaginação e criar inúmeras páginas personalizadas!

115


COMANDOS DE ESTRUTURACOMANDOS DE ESTRUTURACOMANDOS DE ESTRUTURACOMANDOS DE ESTRUTURACOMANDOS 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”

GUIA DE REFERÊNCIA RÁPIDAGUIA DE REFERÊNCIA RÁPIDAGUIA DE REFERÊNCIA RÁPIDAGUIA DE REFERÊNCIA RÁPIDAGUIA DE REFERÊNCIA RÁPIDA

As tabelas a seguir são um resumo dos principais e mais utilizados comandos HTML.HTML.HTML.HTML.HTML.

COMANDOS DE TEXTOCOMANDOS DE TEXTOCOMANDOS DE TEXTOCOMANDOS DE TEXTOCOMANDOS 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=+/-XXcolor=”XXXX” </font>

Linha divisória <hr> size=XXwidth=XX/ XX%noshade nenhum

Block quote <blockquote> nenhum </blockquote>

Divisão <div> align=left/center/ </div>right

116


COMANDOS DE FORMULÁRIOCOMANDOS DE FORMULÁRIOCOMANDOS DE FORMULÁRIOCOMANDOS DE FORMULÁRIOCOMANDOS DE FORMULÁRIO

Finalidade tag Parâmetros Fecha com

Form <form> method= get/putaction=”programname” </form>

Input Field <input> name=”variablename”type=text /password /checkbox /radio /submit /reset /image nenhum

Selection List <select> name=”variablename”size=XXmultiple </select>

Selection Option <option> nenhum nenhum

Scrolling Text Field <textarea> name=”variablenamerows=XXcols=XX </textarea>

117


BIBLIOGRAFIABIBLIOGRAFIABIBLIOGRAFIABIBLIOGRAFIABIBLIOGRAFIA

LIMA, Adriano Gomes. HTML 4HTML 4HTML 4HTML 4HTML 4. Senac Minas, 2000. 220p.

RAMALHO, Antônio José. HTML DINÂMICOHTML DINÂMICOHTML DINÂMICOHTML DINÂMICOHTML DINÂMICO. Ed. Berkeley, 1999. 719p.

STAUFFER, Todd. HTML 6 em 1HTML 6 em 1HTML 6 em 1HTML 6 em 1HTML 6 em 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

h t t p : / / w w w . c c u e c . u n i c a m p . b r / t r e i n a m e n t o _ i n t 2 0 0 4 /conf_webpages_basico/pagina1.html

http://www.lsi.usp.br/~help/html/comandos.html

ANEXANEXANEXANEXANEXOOOOO

PLANO DETRABALHO

HTML

119

Caro professor,

Você está participando de um projeto da Secretaria de Educação, que tem como objetivoapresentar as possibilidades da informática na educação, fazendo com que você sefamiliarize com diferentes aplicativos e utilize-os em sala de aula, buscando tornar assuas aulas mais interessantes, criativas e de fácil entendimento.

Várias ferramentas serão trabalhadas neste projeto. Neste momento, você aprenderá amontar páginas para a Internet através do programa KWriteKWriteKWriteKWriteKWrite onde você desenvolveráconhecimentos sobre a linguagem HTMLHTMLHTMLHTMLHTML. Quando conclui-lo, você estará apto a utilizartodos os recursos de diagramação para desenvolvimento de páginas para Internet, etambém, multiplicar esse curso aos seus alunos, ensinando-os elaborar trabalhos edivulgá-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 maisutilizá-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 repassadasaos 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 umarelação de Sites de busca, de temas específicos, imagens etc e resultados esperados dotrabalho, evitando dispersão da turma e garantindo objetividade no trabalho.

A seguir, foi disponibilizado um “Plano de Trabalho” para orientá-lo no repasse do cursoaos seus alunos. Nele, constam os conteúdos que devem ser abordados, sugestão decarga 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 deaula. Não deixe de anotá-las e discutir outras possibilidades com os colegas e instrutor.

Aproveite o curso!

Sucesso!

QUADRO 01QUADRO 01QUADRO 01QUADRO 01QUADRO 01ConteúdosConteúdosConteúdosConteúdosConteúdos ProcedimentosProcedimentosProcedimentosProcedimentosProcedimentos

MetodológicosMetodológicosMetodológicosMetodológicosMetodológicos

RecursosRecursosRecursosRecursosRecursos

DidáticosDidáticosDidáticosDidáticosDidáticos

1. Apresentação do Instrutor e1. Apresentação do Instrutor e1. Apresentação do Instrutor e1. Apresentação do Instrutor e1. Apresentação do Instrutor e

AlunosAlunosAlunosAlunosAlunos

2. Apresentação Geral do Curso2. Apresentação Geral do Curso2. Apresentação Geral do Curso2. Apresentação Geral do Curso2. Apresentação Geral do Curso– Metodologia de trabalho adotada

no curso

– Critérios de Aprovação no curso

3. Informática Básica3. Informática Básica3. Informática Básica3. Informática Básica3. Informática Básica– Na Era da Informatização

– Componentes do ComputadorPeriféricosModem / Fax-modemEstabilizadorNobreak

– Sistema Operacional Conceitos eConvençõesArquivos e Pastas (visão geral)Armazenando Dados em umComputador

– Rede

– Internet

– Metasys

Iniciando os aplicativos doMetasysIntrodução ao OpenOffice WriterIntrodução ao OpenOffice Calc

– Soluções para Alguns Problemasda Informática

– Qualidade de Vida no TrabalhoEquipamentos

– Laboratório deInformática comHTML

– Quadro branco/negro

– Pincéis

– Apostila – InformáticaBásica

– Peças de hardwarepara demonstração aoaluno, como funcio-nam o processador,memória RAM e HD.

– Exposição dialogada

– Dinâmica de apresentação

– Exposição dialogada –avaliação diagnósticapara verificar o nível deconhecimento da turmasobre o tema.

– Demonstração – Oinstrutor deve demons-trar todos os procedi-mentos necessários

– Prática Supervisionada– Todos os alunosdevem colocar emprática os procedimen-tos abordados, sob asupervisão do instrutor.

1h

3h

PrevisãoPrevisãoPrevisãoPrevisãoPrevisãoCargaCargaCargaCargaCarga

HoráriaHoráriaHoráriaHoráriaHorária

ORIENTORIENTORIENTORIENTORIENTAÇÕES PAÇÕES PAÇÕES PAÇÕES PAÇÕES PARA O PROFESSORARA O PROFESSORARA O PROFESSORARA O PROFESSORARA O PROFESSOR

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?

DicaDicaDicaDicaDica

Não se esqueça de planejar a sua aula!!! Pense em atividades extras paraaqueles 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 AlunosItem 1 - Apresentação do Instrutor e AlunosItem 1 - Apresentação do Instrutor e AlunosItem 1 - Apresentação do Instrutor e AlunosItem 1 - Apresentação do Instrutor e AlunosCumprimente a turma e se apresente, dizendo o seu nome, em que áreaatua, quais disciplinas ministra. Isso facilita a relação com a turma e diminuia distância entre vocês.

Para a apresentação dos alunos, peça à turma que formem duplas. Dê aeles um tempo aproximado de 5 minutos para se conhecerem. Posterior-mente, peça que um apresente o outro.

Item 2 - Apresentação Geral do CursoItem 2 - Apresentação Geral do CursoItem 2 - Apresentação Geral do CursoItem 2 - Apresentação Geral do CursoItem 2 - Apresentação Geral do CursoFale sobre o curso que irá ministrar (HTMLHTMLHTMLHTMLHTML – Criando Páginas na Web),fazendo um breve resumo a respeito das suas funções e do que é possívelcriar 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 WebPágina WebPágina WebPágina WebPágina Web, e o CódigoFonte, 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 atividadespropostas.

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 osoftware à 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, afinaluma linguagem deve ser aplicada para que as ferramentas e os benefíciusdo programa possam ser assimilados pelos alunos.

Diga que a participação nas aulas é imprescindível para que realmente ocorrao 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ásicaItem 3 – Informática BásicaItem 3 – Informática BásicaItem 3 – Informática BásicaItem 3 – Informática BásicaFaça um levantamento, na turma, das pessoas que têm conhecimentos deinformática, perguntando se já fizeram algum tipo de curso, se sabem utilizaro computador, buscando identificar o grau de conhecimento para iniciar oassunto.

Aproveite a oportunidade e verifique se os alunos conhecem o OpenOfficeImpress ou se já assistiram alguma apresentação de slides. Converse comeles sobre as situações em que podem ser utilizadas e peça sugestões detemas para desenvolvimento de atividades durante o curso.

Fale sobre os conceitos básicos da informática, apresentando as partes docomputador (CPU, monitor, teclado, mouse etc), procurando demonstrar comodeve 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 ficamarmazenados 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 diado professor

Fale sobre as dificuldades que normalmente encontramos na utlização docomputador e seus periféricos

Destaque a utilização dos aplicativos Metasys.

Procure nivelar os conhecimentos entre a turma, esclarecendo as dúvidasque surgirem durante a aula.

Demonstre todos os procedimentos aos alunos e não se esqueça de deixá-lospraticar, pois a prática é imprescindível para que o aprendizado realmenteaconteça.

QUADRO 02QUADRO 02QUADRO 02QUADRO 02QUADRO 02

ConteúdosConteúdosConteúdosConteúdosConteúdos ProcedimentosProcedimentosProcedimentosProcedimentosProcedimentos




4. Criando Páginas na Web:4. Criando Páginas na Web:4. Criando Páginas na Web:4. Criando Páginas na Web:4. Criando Páginas na Web:– Conceitos

– Padrões de DesenvolvimentoExistentes

– Tipos de Editores de PáginasHTML

– Hipertextos e Hipervínculos /Hiperobjetos (links)


– Consulta à Internetpara analisar e tirardúvidas a respeito dotema abordado.

– Demonstração

– Resolução de Exercíciona apostila – pág.12

– Laboratório deInformática comKWrite e MozzilaFirefox instalados


– Pincéis

– Apostila – HTMLHTMLHTMLHTMLHTML

4h




Ao abordar esses conteúdos teóricos, explique aos alunos a importância dese 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, atribuindocores 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çãoda sua aula.

Item 4 - Criando Páginas na WebItem 4 - Criando Páginas na WebItem 4 - Criando Páginas na WebItem 4 - Criando Páginas na WebItem 4 - Criando Páginas na Web

Fale sobre as características da linguagem e demonstre como cada TTTTTagagagagag deveser utilizado, preocupando-se com sua composição e atributos. A melhor formade abordar esse conteúdo é através do quadro branco, onde você pode listaras maneiras de compor cada TTTTTagagagagag. Essa será uma rápida abordagem. Essesconteúdos serão trabalhados mais adiante.

Fale das tecnologias existentes na área de Internet (FlashFlashFlashFlashFlash, AspAspAspAspAsp, PHPPHPPHPPHPPHP,JavaScript JavaScript JavaScript JavaScript 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 desenvolverpá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 elespossam publicar na Internet. Por enquanto, é só um planejamento! Odesenvolvimento será feito depois.

Explique para os alunos sobre os inúmeros editores de criação de páginasque existem no mercado.

Fale da estrutura obrigatória que toda página na Internet deve possuir equal a hierarquia destes elementos. Escolha um Site de sua preferência, epeça aos alunos para acessarem e identificarem, junto com você, os ele-mentos abordados na aula.





5.5.5.5.5. Iniciando um Documento HTMLIniciando um Documento HTMLIniciando um Documento HTMLIniciando um Documento HTMLIniciando um Documento HTML– Estrutura de páginas

– Elementos Existentes

– Comandos da Linguagem: TTTTTag’sag’sag’sag’sag’s

– Tipos de TTTTTag’sag’sag’sag’sag’s

– Atributos de TTTTTag’sag’sag’sag’sag’s

– Estrutura principal

– Salvando sua página

– Tag de Parágrafo <P>

6 .6 .6 .6 .6 . Estilos de Cabeçalho eEstilos de Cabeçalho eEstilos de Cabeçalho eEstilos de Cabeçalho eEstilos de Cabeçalho eParágrafosParágrafosParágrafosParágrafosParágrafos

– Tag <FONT>

– Sobre o Atributo Color

– Cores de Fundo <BODY>

––––– TTTTTag’sag’sag’sag’sag’s Mais Utilizados (resumo)


– Demonstração: atravésde exibição dosprocedimentos emdatashow ou desenhosno quadro branco

– Resolução de exercíciosna apostila pág. 30

4h

1h



– Pincéis


– Desejável Datashow


– Demonstração

– Resolução deexercícios na apostilapág. 36

– Resolução deExercícios – pág. 40



– Pincéis


Comece a criação de uma pequena página de modo a demonstrar como aconstrução de uma página deve sempre ser iniciada.

Prossiga, mostrando como se deve salvar uma página e como visualizá-lano navegador de Internet.

Gradativamente, vá incluindo outros elementos e mostrando como formataras fontes, cores, fundo de uma página.

Indique exercícios da apostila para fixar o conteúdo demonstrado.




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.

Item 5 - Iniciando um Documento HTMLItem 5 - Iniciando um Documento HTMLItem 5 - Iniciando um Documento HTMLItem 5 - Iniciando um Documento HTMLItem 5 - Iniciando um Documento HTMLNeste 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 juntocom 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ágrafosItem 6 - Estilos de Cabeçalho e ParágrafosItem 6 - Estilos de Cabeçalho e ParágrafosItem 6 - Estilos de Cabeçalho e ParágrafosItem 6 - Estilos de Cabeçalho e ParágrafosDando continuidade à construção da página que está sendo criada,inclua, gradativamente, outros elementos, mostrando como formataras fontes, cores e fundo de uma página.

Demonstre como os atributos de TTTTTag’sag’sag’sag’sag’s devem ser construídos.

Indique exercícios da apostila para fixar o conteúdo demonstrado. Cadaaluno deverá desenvolver uma página com a sua orientação. Estabeleçaum tempo para conclusão da atividade e, depois, verifique o resultado.





77777..... Inserindo Imagens em Docu-Inserindo Imagens em Docu-Inserindo Imagens em Docu-Inserindo Imagens em Docu-Inserindo Imagens em Docu-mentos HTML <IMG>mentos HTML <IMG>mentos HTML <IMG>mentos HTML <IMG>mentos HTML <IMG>

– Alinhamento de Imagens e Textona Página

– Redimensionamento deImagens


– Demonstração

– Resolução de Exercíciosna apostila pág. 54

4h – Laboratório deInformática comKWrite e MozzilaFirefox instalados


– Pincéis








88888 ..... HiperlinksHiperlinksHiperlinksHiperlinksHiperlinks

– Tipos de URL’s

– Criação de Links de ArquivosLocais

– Criação de Links para imagem

– TTTTTag’sag’sag’sag’sag’s Mais Utilizados (resumo)


– Demonstração

– Trabalho em Grupo:Resolução de Exercíciosna apostila pág. 67 – Aturma deverá serdividida em 2 grupos,cada um trabalhará comum tema (Geografia eOrigem da Calculadora).



– Pincéis


DicaDicaDicaDicaDica

Você pode criar páginas na Internet para abordar vários conteúdosdurante a sua aula. Conteúdos sobre anatomia humana, vegeta-ção, animais etc., podem ser inseridos no Site, onde poderão sercriados hiperlinks para textos ou figuras. Imagine que interessante!

Se não tiver Internet disponível na sua escola, você pode salvar aspáginas em CD e exibi-las na sala.

Para demonstração dos conteúdos abordados, você pode utilizar o mesmo Siteque está sendo criado desde o início do curso ou criar novas páginas a cadanovo tema abordado. Observe o interesse e envolvimento da turma. Criar novaspáginas torna a aula mais dinâmica e interessante.

Item 7 - Inserindo Imagens em Documentos HTML <IMG>Item 7 - Inserindo Imagens em Documentos HTML <IMG>Item 7 - Inserindo Imagens em Documentos HTML <IMG>Item 7 - Inserindo Imagens em Documentos HTML <IMG>Item 7 - Inserindo Imagens em Documentos HTML <IMG>Explique os formatos de imagens existentes e quais são os mais apropriadospara serem utilizados na Internet.

Demonstre a importância de definir tamanhos para as imagens usadas naspá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.



Item 8 - Hiperlink’sItem 8 - Hiperlink’sItem 8 - Hiperlink’sItem 8 - Hiperlink’sItem 8 - Hiperlink’sExplique a importância dos hiperlinks existentes nas páginas daInternet.

Acesse alguns Sites, observando as diferenças dos tipos de hiperlinks.

Aproveite as páginas criadas anteriormente e transforme alguns dosseus 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 dapágina 67 da apostila. Grupo 1: Site sobre Geografia.Grupo 2: Site sobre a História da Calculadora.





9 .9 .9 .9 .9 . Criando ListasCriando ListasCriando ListasCriando ListasCriando Listas

– Tipos de Listas

– Personalizando Listas Ordenadas

– Personalizando Listas não-ordenadas


– Demonstração



– Pincéis


111110 . Utilizando T0 . Utilizando T0 . Utilizando T0 . Utilizando T0 . Utilizando Tabelasabelasabelasabelasabelas

- Tag de Tabela <TABLE>

- Tag de Linha <TR>

- Tag de Célula <TD>

- Tags de mescla <colspan> e<rowspan>

- Tag de cabeçalho <TH>

- Atributos de tabela

- Exposição dialogada

- Demonstração

- Proposta de Exercíciopara ser realizado emcasa: Tabela Periódica

- Resolução deexercícios na apostilapág. 107

- Laboratório deInformática comKWrite e MozzilaFirefox instalados

- Quadro branco/negro

- Pincéis

- Apostila – HTML

3h



Item 9 - Criando ListasItem 9 - Criando ListasItem 9 - Criando ListasItem 9 - Criando ListasItem 9 - Criando ListasExplique sobre os tipos de listas presentes na linguagem e qual suafinalidade.

Mostre como modificar os marcadores de cada lista.

ItItItItItem 1em 1em 1em 1em 10 - Utilizando T0 - Utilizando T0 - Utilizando T0 - Utilizando T0 - Utilizando TabelasabelasabelasabelasabelasFale 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 TTTTTag’sag’sag’sag’sag’sque 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ícioda 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 07QUADRO 07QUADRO 07QUADRO 07QUADRO 07ConteúdosConteúdosConteúdosConteúdosConteúdos PrevisãoPrevisãoPrevisãoPrevisãoPrevisão

CargaCargaCargaCargaCargaHoráriaHoráriaHoráriaHoráriaHorária

ProcedimentosProcedimentosProcedimentosProcedimentosProcedimentos




1111111111. T. T. T. T. Trabalhando com Frabalhando com Frabalhando com Frabalhando com Frabalhando com Formuláriosormuláriosormuláriosormuláriosormulários

– Campos de formulário <INPUT>

– Criando Caixas de texto

– Campos de senha

– Botões de Radio

– Caixas de seleção

– Lista de opções <SELECT>

– Transmissão de Dados deformulário


– Demonstração

– Prática Supervisionada:Trabalho Final de Curso- Exercícios na apostilapág. 132 (o instrutorpode optar por pedir otrabalho individual ouem grupo)



– Pincéis


Encerramento do CursoEncerramento do CursoEncerramento do CursoEncerramento do CursoEncerramento do Curso

– Avaliação do Curso

Verificação de atendi-mento às expectativasda turma.

Formulário: Avaliaçãodo Curso pelo Aluno

Item 11 - FormuláriosItem 11 - FormuláriosItem 11 - FormuláriosItem 11 - FormuláriosItem 11 - FormuláriosDefina a finalidade do uso dos formulários nas páginas e quais osmétodos existentes para que os dados sejam enviados através daInternet.

Apresente os tipos de campos que podem ser criados com HTMLHTMLHTMLHTMLHTML.

Peça aos alunos que criem um formulário para cadastro de clientes ouaté mesmo para cadastramento de currículos.

Este será o último exercício do curso. Você pode pedir a turma que façaa atividade prevista na apostila pode propor uma atividade diferenteou deixar que eles escolham um tema do seu interesse. É importanteque utilizem todos os recursos vistos no curso, com criatividade e qua-lidade.

Analise cada trabalho desenvolvido e não se esqueça de dar umfeedback para cada aluno.


Termine o curso agradecendo aos alunos pela atenção e destacando obom trabalho e desempenho dos mesmos.

Diga que agora estão aptos para desenvolver páginas com maiorinteratividade. Basta tentar!

CONSTRUÇÃOCONSTRUÇÃOCONSTRUÇÃOCONSTRUÇÃOCONSTRUÇÃODE WEB SITESDE WEB SITESDE WEB SITESDE WEB SITESDE WEB SITES

JAJAJAJAJAVVVVVAAAAASCRIPTSCRIPTSCRIPTSCRIPTSCRIPT

J a v a S c r i p tJ a v a S c r i p tJ a v a S c r i p tJ a v a S c r i p tJ a v a S c r i p tCONSTRUÇÃO DE WEB SITESCONSTRUÇÃO DE WEB SITESCONSTRUÇÃO DE WEB SITESCONSTRUÇÃO DE WEB SITESCONSTRUÇÃO DE WEB SITES

135

Introdução

137

C O N S T R U Ç Ã O D E W E B S I T E S - J a v a S c r i p tJ a v a S c r i p tJ a v a S c r i p tJ a v a S c r i p tJ a v a S c r i p t

O QUE É A LINGUO QUE É A LINGUO QUE É A LINGUO QUE É A LINGUO QUE É A LINGUAGEM JAAGEM JAAGEM JAAGEM JAAGEM JAVVVVVASCRIPT?ASCRIPT?ASCRIPT?ASCRIPT?ASCRIPT?

Você está prestes a conhecer o lado funcional na criação de um SitSitSitSitSite e e e e para a Internet!

O JavaScriptJavaScriptJavaScriptJavaScriptJavaScript é uma das inúmeras linguagens de programação utilizadas naInternet. Seu principal foco é permitir uma maior funcionalidade às páginaspáginaspáginaspáginaspáginasbásicasbásicasbásicasbásicasbásicas de um SiteSiteSiteSiteSite, conhecidas como HTMLHTMLHTMLHTMLHTML, que é a linguagem responsávelpela exibição dos elementos. Tudo aquilo que você observa nas páginas de umsimples SiteSiteSiteSiteSite da Internet é diagramado e montado pela linguagem HTMLHTMLHTMLHTMLHTML.

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 daQuímica. Você estará navegando em uma página HTMLHTMLHTMLHTMLHTML e aprendendo um poucomais sobre o fascinante mundo da Química.

Quando agregamos esse conteúdo da linguagem HTML HTML HTML HTML HTML aos pequenos progra-mas do JavaScriptJavaScriptJavaScriptJavaScriptJavaScript, chamados script’sscript’sscript’sscript’sscript’s, conseguimos construir um SiteSiteSiteSiteSite com váriosrecursos e funcionalidades interessantes que vão deixar suas páginas mais “inte-ligentes” e sofisticadas.

Um exemplo de evidência do JavaScriptJavaScriptJavaScriptJavaScriptJavaScript na Internet seriam aquelas páginas quecostumam 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 queesse visitante estiver acessando a página. Isso só será possível com a criação deuma rotina ou scriptscriptscriptscriptscript desenvolvido através dos comandos da linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript.

Poderíamos, também, utilizar essa linguagem para desenvolver uma PáginaPáginaPáginaPáginaPágina HTMLHTMLHTMLHTMLHTMLde exercício com questões de múltipla escolha sobre a Física, por exemplo, comoas que seguem a seguir:


138


Numa residência, existem possibilidades para dois tipos de tensões: 110 V e 220V. No mercado, encontram-se chuveiros de 2200 W idênticos, exceto pelas tensõesde 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 doaquecimento do de 110V.

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

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 doaquecimento do de 110V.

e) consumo de energia elétrica e o aquecimento obtido são os mesmosnos 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

VVVVVocê não precisa responderocê não precisa responderocê não precisa responderocê não precisa responderocê não precisa responder.....

É apenas um exemplo.

O HTML HTML HTML HTML HTML só é capaz de montar os campos das alternativas e as questões.Já o JaJaJaJaJavvvvvaScriptaScriptaScriptaScriptaScript consegue avaliar, ao se clicar em uma das opções, qualdelas seria a correta.

139


JAJAJAJAJAVVVVVA E JAA E JAA E JAA E JAA E JAVVVVVASCRIPTASCRIPTASCRIPTASCRIPTASCRIPT: CONCEITOS E DIFERENÇAS: CONCEITOS E DIFERENÇAS: CONCEITOS E DIFERENÇAS: CONCEITOS E DIFERENÇAS: CONCEITOS E DIFERENÇAS

Quando pensamos nas expressões JavaJavaJavaJavaJava e JavaScriptJavaScriptJavaScriptJavaScriptJavaScript, pode-se pensar que elasteriam algo em comum. Mesmo que ainda exista uma semelhança nos nomesdessas linguagens, saiba que são linguagens com finalidades diferentesdiferentesdiferentesdiferentesdiferentes. OJavaScript JavaScript JavaScript JavaScript JavaScript foi criado pela empresa Netscape Netscape Netscape Netscape Netscape e se chamava LiveScriptLiveScriptLiveScriptLiveScriptLiveScript. Emmeados de 1995, quando foi adotado pela empresa Sun MicrosystemsSun MicrosystemsSun MicrosystemsSun MicrosystemsSun Microsystems, rece-beu o nome atual.

Falando de suas diferençasFalando de suas diferençasFalando de suas diferençasFalando de suas diferençasFalando de suas diferenças

O JavaScriptJavaScriptJavaScriptJavaScriptJavaScript é uma linguagem de script’sscript’sscript’sscript’sscript’s. Estes, possuem a função de execu-tar comandos através dos programas que, por exemplo, usamos para navegar naInternet, funcionando apenas nos SitSitSitSitSiteseseseses que visitamos. Todos os códigos construídoscom essa linguagem são embutidos nas páginas HTMLHTMLHTMLHTMLHTML.

Já o JavaJavaJavaJavaJava é 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.

*Compilada – Tipo de tradução criada para a linguagem binária do computador.

Então quer dizer queEntão quer dizer queEntão quer dizer queEntão quer dizer queEntão quer dizer que…

O JavaScript JavaScript JavaScript JavaScript JavaScript é uma linguagem interpretada, ou seja, algum programatem que entender o seu código e executar, nesse caso, os navegadores deInternet.

E o JavaJavaJavaJavaJava é uma linguagem compilada*, que transforma seu código emum programa independente.

140



141

JavaScriptLinguagem

Orientada aObjetos

143


ORIENTORIENTORIENTORIENTORIENTAÇÃO A OBJETOSAÇÃO A OBJETOSAÇÃO A OBJETOSAÇÃO A OBJETOSAÇÃO A OBJETOS

A linguagem JavaScript JavaScript JavaScript JavaScript JavaScript é uma linguagem orientada a objetos. Chamamos deProgramação Orientada a Objetos Programação Orientada a Objetos Programação Orientada a Objetos Programação Orientada a Objetos 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çãoProgramaçãoProgramaçãoProgramaçãoProgramaçãoEstruturadaEstruturadaEstruturadaEstruturadaEstruturada.

Programação Orientada a ObjetosProgramação Orientada a ObjetosProgramação Orientada a ObjetosProgramação Orientada a ObjetosProgramação Orientada a Objetos significa que todos os elementos de umapágina da Internet são tratados como objetos: textostextostextostextostextos, linkslinkslinkslinkslinks, botõesbotõesbotõesbotõesbotões, figurasfigurasfigurasfigurasfiguras,plano de fundo da páginaplano de fundo da páginaplano de fundo da páginaplano de fundo da páginaplano de fundo da página, títulotítulotítulotítulotítulo etc, ou seja, tudo aquilo que, conforme jáexplicado, é feito pela linguagem HTMLHTMLHTMLHTMLHTML.

Se você estiver navegando em um SiteSiteSiteSiteSite de estudo de peixes, por exemplo, em quesão colocadas fotos de todas as espécies, cada foto que você vê é considerada umobjeto para o JaJaJaJaJavvvvvaScriptaScriptaScriptaScriptaScript 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...Compreendendo melhor esse conceito...Compreendendo melhor esse conceito...Compreendendo melhor esse conceito...Compreendendo melhor esse conceito...

Ao acessar uma página da Internet, o navegador que você utiliza criará um núme-ro de objetosobjetosobjetosobjetosobjetos que possuem propriedadespropriedadespropriedadespropriedadespropriedades e métodosmétodosmétodosmétodosmétodos próprios. E são esses ele-mentos que o JaJaJaJaJavvvvvaScriptaScriptaScriptaScriptaScript consegue modificar, alterando, assim, tudo ou quasetudo, em uma página da Internet.

As propriedades propriedades propriedades propriedades propriedades de um objeto são suas características. Cada objeto possui ca-racterísticas próprias. Uma das propriedadespropriedadespropriedadespropriedadespropriedades de uma página da Internet, porexemplo, é o seu plano de fundoplano de fundoplano de fundoplano de fundoplano de fundo. Podemos, através do JavaScriptJavaScriptJavaScriptJavaScriptJavaScript, alterar suacor de fundo.

Os métodosmétodosmétodosmétodosmétodos de um objeto são seus comportamentos. Cada objeto possui métodosmétodosmétodosmétodosmétodospróprios. Por exemplo, em uma página, podemos escrever textos, inserir imagensetc. Esses são comportamentos da página. Um botão no qual clicamos, executauma função. Esse é um comportamento do objeto botão.

Vamos comparar esses conceitos com objetos reais, como o corpo humano!


144


ObjetoObjetoObjetoObjetoObjeto: uma pessoa.

Propriedades:Propriedades:Propriedades:Propriedades:Propriedades: 1,73 altura, 60 kg, olhos castanhos, more-na, cabelos negros etc., ou seja, as características do objeto.

MétMétMétMétMétodos:odos:odos:odos:odos: andar, falar, sentar, pular, usar calça jeans, entreoutros., ou seja as ações que o objeto pode executar.

Se um ser humano pudesse ser controlado pela linguagemJavaScriptJavaScriptJavaScriptJavaScriptJavaScript, seria possível, com um simples comando,alterar suas características (propriedadespropriedadespropriedadespropriedadespropriedades) e seus compor-tamentos (métodosmétodosmétodosmétodosmétodos).

MANIPULAÇÃO DE OBJETOSMANIPULAÇÃO DE OBJETOSMANIPULAÇÃO DE OBJETOSMANIPULAÇÃO DE OBJETOSMANIPULAÇÃO DE OBJETOS

No exemplo sobre as questões da Física, dado anteriormente, cada opção que ousuário escolhe é um objetoobjetoobjetoobjetoobjeto. Sua característica seria estar marcado ou não, certoou errado, dependendo de qual alternativa o usuário escolher. E seu métmétmétmétmétodoodoodoodoodo(comportamento) é o fato de ser clicado ou não. Num momento, uma respostapode estar marcada e, em outro, não! Assim funcionam muitas das questões deprovas que fazemos na escola quando temos que escolher uma das opções listadas.

TIPOS DE PROPRIEDADESTIPOS DE PROPRIEDADESTIPOS DE PROPRIEDADESTIPOS DE PROPRIEDADESTIPOS DE PROPRIEDADES

Cada objeto existente na manipulação do JavaScript JavaScript JavaScript JavaScript JavaScript possui propriedadespropriedadespropriedadespropriedadespropriedades (ca-racterísticas). Sabemos, por exemplo, que um documento HTMLHTMLHTMLHTMLHTML contém título ecorpo. Estes seriam, então, o que chamamos de propriedadespropriedadespropriedadespropriedadespropriedades existentes nessedocumento.

Existem dois tipos de propriedadespropriedadespropriedadespropriedadespropriedades. Algumas são os objetos propriamente ditos,enquanto outras não podem ser herdadas. Na linguagem HTMLHTMLHTMLHTMLHTML, por exemplo,existem os campos de formulário. Esses campos são dependentes de seu objeto-objeto-objeto-objeto-objeto-paipaipaipaipai, chamado de FormFormFormFormForm.

Esse formulário é criado dentro de um documento HTMLHTMLHTMLHTMLHTML, representado, emJavaScriptJavaScriptJavaScriptJavaScriptJavaScript, pelo objeto DocumentDocumentDocumentDocumentDocument. Com isso, o objeto FormFormFormFormForm é uma proprieda-proprieda-proprieda-proprieda-proprieda-dedededede do objeto Document Document Document Document Document e seus campos são suas prprprprpropriedadesopriedadesopriedadesopriedadesopriedades. Vamos ilustraresses objetos:

145


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 interrompepara 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. Logoapós ter sido interrompido pelo aluno e ter respondido sua pergunta, sua ação mudou.Conclusão, os métodos métodos métodos métodos métodos são alterados conforme algum eventoeventoeventoeventoevento for aplicado.

Já as propriedadespropriedadespropriedadespropriedadespropriedades podem conter valores valores valores valores valores (informações que podem ser altera-das, mudando, assim, a propriedade propriedade propriedade propriedade propriedade do objeto). A utilização de propriedadespropriedadespropriedadespropriedadespropriedadesse dá acompanhada de seu objeto, sendo separadas dele, por um ponto apenas.

Veja, a seguir, a sintaxe de utilização de prprprprpropriedadesopriedadesopriedadesopriedadesopriedades:

nomeObjeto.propriedade = valor;

DOCUMENTDOCUMENTDOCUMENTDOCUMENTDOCUMENT

FFFFFORMORMORMORMORM

CCCCCAMPOS DO FAMPOS DO FAMPOS DO FAMPOS DO FAMPOS DO FORMORMORMORMORM

Objeto-FILHO de DOCUMENTe PAI dos CAMPOS DE FORM

Objeto-PAI

Objeto-FILHO de FORMNão possui filhos.


146


ser_humano.altura = 1.75;

opção_fisica1.value = true;

No exemplo acima, existe um objeto chamado ser_humano ser_humano ser_humano ser_humano ser_humano que, através da suapropriedade chamada alturaalturaalturaalturaaltura, terá seu valor para 1.751.751.751.751.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 OBJETOSMÉTODOS DOS OBJETOSMÉTODOS DOS OBJETOSMÉTODOS DOS OBJETOSMÉTODOS DOS OBJETOS

Cada objeto contém seus próprios métodosmétodosmétodosmétodosmétodos. Portanto, causaria erro se usásse-mos um métodométodométodométodométodo em um objeto que não o possui.

Saiba que todo métodométodométodométodométodo está associado ao objetoobjetoobjetoobjetoobjeto que ele modifica.

Em um documento, por exemplo, o usuário pode usar o métodométodométodométodométodo para escrevernele, exibindo um texto na página. Podemos utilizar métodosmétodosmétodosmétodosmétodos para alterar aspropriedadespropriedadespropriedadespropriedadespropriedades de um objeto ou até mesmo executar uma tarefa específica.

Veja a sintaxe de utilização dos métodosmétodosmétodosmétodosmétodos:

nomeObjeto.método(argumento);

ser_humano.ação(andar)

No exemplo, existe um objeto chamado ser_humanoser_humanoser_humanoser_humanoser_humano que, através de seu méto-méto-méto-méto-méto-dododododo chamado açãoaçãoaçãoaçãoação, recebeu, entre suas várias ações, a que fará com que o objetopossa andarandarandarandarandar. Posteriormente, pode-se alterar sua ação para pararpararpararpararparar.

Lembre-se!Lembre-se!Lembre-se!Lembre-se!Lembre-se!

Uma propriedadepropriedadepropriedadepropriedadepropriedade sempre recebe um valor e, no métodométodométodométodométodo, modificamosseu comportamento. É por isso que, na propriedadepropriedadepropriedadepropriedadepropriedade, utiliza-se o sinalde igualdade ===== e, no métodométodométodométodométodo, utilizam-se parênteses ()()()()().



147


EVENTOSEVENTOSEVENTOSEVENTOSEVENTOS

Diferentes das propriedadespropriedadespropriedadespropriedadespropriedades e métodosmétodosmétodosmétodosmétodos dos objetos, que são definidos sempre peloJavaScriptJavaScriptJavaScriptJavaScriptJavaScript, os eventoseventoseventoseventoseventos são as reações externas para executar determinada ação.

Você está andando por uma calçada e, de repente, alguém esbarra em você e oempurra para fora dela.

Até o momento de você ter sido empurrado, seu comportamento (métodométodométodométodométodo) eraandar sobre a calçada. Após a ação dada pela pessoa que o empurrou, seu com-portamento mudou! Portanto, o eventoeventoeventoeventoevento trata-se da ação que acarretará na mu-dança de qual métodométodométodométodométodo é chamado e/ou do valor da propriedadepropriedadepropriedadepropriedadepropriedade de um objeto.O usuário faz isso instintivamente, clicando em botões, links da Internet, entreoutras ações.

A linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript disponibiliza para a página HTMLHTMLHTMLHTMLHTML inúmeros eventoseventoseventoseventoseventos e,por isso, eles são declarados nos próprios TTTTTag’sag’sag’sag’sag’s da linguagem.

Interligação dos TInterligação dos TInterligação dos TInterligação dos TInterligação dos Tag’s com o HTMLag’s com o HTMLag’s com o HTMLag’s com o HTMLag’s com o HTML

TTTTTag’sag’sag’sag’sag’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 eeeeevvvvventententententososososos:

<TAG nomeEvento=”Comandos JavaScript”>

TTTTTAAAAAG G G G G é uma instrução da linguagem HTMLHTMLHTMLHTMLHTML.

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

“Comandos JavaScriptComandos JavaScriptComandos JavaScriptComandos JavaScriptComandos JavaScript” são as instruções JavaScriptJavaScriptJavaScriptJavaScriptJavaScript a serem exe-cutadas. Elas estarão sempre sempre sempre sempre sempre entre aspas.

Caso haja mais de um comando JavaScriptJavaScriptJavaScriptJavaScriptJavaScript a ser executado para o mesmo eventoeventoeventoeventoevento,eles deverão estar separados por ponto e vírgula (;;;;;), conforme mostrado no exem-plo a seguir:

<TAG nomeEvento=”JavaScript1;JavaScript2;JavaScript3">


148



149

ESTRUTURA DALINGUAGEM

151


Assim como em qualquer linguagem de programação, a JavaScript JavaScript JavaScript JavaScript JavaScript segue amesma 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ÁVEISVARIÁVEISVARIÁVEISVARIÁVEISVARIÁVEISVVVVVariávariávariávariávariáveiseiseiseiseis nada mais são que espaços, na memória do computador, que servirão paraarmazenar 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 darotina JavaScriptJavaScriptJavaScriptJavaScriptJavaScript e termina quando essa execução se encerra.

disciplina = “MATEMÁTICA”

valor = 102

tempo = “Verão”

No exemplo acima, criamos uma variável chamada disciplinadisciplinadisciplinadisciplinadisciplina que está receben-do, como valor, a palavra MAMAMAMAMATEMÁTICTEMÁTICTEMÁTICTEMÁTICTEMÁTICAAAAA, assim como a variável tttttempoempoempoempoempo está rece-bendo a palavra VerãoVerãoVerãoVerãoVerão.

Nomes de VNomes de VNomes de VNomes de VNomes de Variáveisariáveisariáveisariáveisariáveis

Assim, como na maioria das linguagens de programação, em JavaScriptJavaScriptJavaScriptJavaScriptJavaScript, umavariá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, sempresempresempresempresempre, com uma letra ouo caractere (_____) underscore ou underline. Recomenda-se que o nome da variávelseja significativo, ou seja, indique o que ela representa.Veja alguns exemplos:


*Variável – Como o próprio nome indica, seria algo que varia, que não é constante.

VÁLIDOVÁLIDOVÁLIDOVÁLIDOVÁLIDO INVÁLIDO INVÁLIDO INVÁLIDO INVÁLIDO INVÁLIDO

nome 2nome

idade 31_idade

_cidade &1_cidade

152



Case Sensitive

A linguagem JavaScript JavaScript JavaScript JavaScript JavaScript é uma linguagem Case SensitiveCase SensitiveCase SensitiveCase SensitiveCase Sensitive, ou seja, faz dife-renciação entre letras maiúsculas e minúsculas. Se você declarar uma variávelcom o nome aulaaulaaulaaulaaula e, ao chamá-la, você utilizar AULAAULAAULAAULAAULA, o Javascript Javascript Javascript Javascript Javascript avisará queessa variável não existe, pois não foi declarada nenhuma variável chamada AULAAULAAULAAULAAULAe, sim, aulaaulaaulaaulaaula. Fique atento a isso, procurando evitar variáveis de muitas formasdiferentes. Crie um padrão para todas elas.

DESENVOLDESENVOLDESENVOLDESENVOLDESENVOLVIMENTO DE SCRIPT’SVIMENTO DE SCRIPT’SVIMENTO DE SCRIPT’SVIMENTO DE SCRIPT’SVIMENTO DE SCRIPT’S

As instruções da linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript podem ser escritas em qualquer editor ASCIIASCIIASCIIASCIIASCII.O Bloco de NotasBloco de NotasBloco de NotasBloco de NotasBloco de Notas do WindowsWindowsWindowsWindowsWindows; o EditEditEditEditEdit do MS-DOSMS-DOSMS-DOSMS-DOSMS-DOS ou o KWriteKWriteKWriteKWriteKWrite, presentes nasdistribuições do LinuxLinuxLinuxLinuxLinux. Os arquivos devem ser salvos com extensão .html.html.html.html.html ou .JS.JS.JS.JS.JS.

Para visualizar a execução do scriptscriptscriptscriptscript, basta acessá-lo através do Browser*.

Abra nosso editor de desenvolvimento de páginas, o KwriteKwriteKwriteKwriteKwrite, conforme aprende-mos no curso HTMLHTMLHTMLHTMLHTML, para iniciarmos a prática de desenvolvimento de script’sscript’sscript’sscript’sscript’s.

clique no botão Aplicativos Aplicativos Aplicativos Aplicativos Aplicativos (localizado no canto inferior esquerdo datela principal do LinuxLinuxLinuxLinuxLinux);

e no item EscritórioEscritórioEscritórioEscritórioEscritório, clique em KWriteKWriteKWriteKWriteKWrite.

Inicie, digitando os TTTTTag’s ag’s ag’s ag’s ag’s iniciais de uma página HTMLHTMLHTMLHTMLHTML.....

*Browser – O mesmo que navegador da Internet (também conhecido como Web BrowserWeb BrowserWeb BrowserWeb BrowserWeb Browserou simplesmente BrowserBrowserBrowserBrowserBrowser).

153


<HTML>

<HEAD><TITLE>Prova de Física</TITLE></HEAD>

<BODY>

Primeiramente, vamos inserir o código HTMLHTMLHTMLHTMLHTML em nosso documento, digitando asseguintes instruções:

<html>

<head><title>Prova de Física</title></head>

<body>

</body>

</html>

No corpo da página, vamos iniciar nosso primeiro scriptscriptscriptscriptscript em JavaScriptJavaScriptJavaScriptJavaScriptJavaScript. Ele serácolocado entre os TTTTTag’sag’sag’sag’sag’s HTMLHTMLHTMLHTMLHTML <body> e </body>.

Todas as vezes que você for iniciar um scriptscriptscriptscriptscript, será necessário informar ao HTMLHTMLHTMLHTMLHTMLque ele será iniciado. Isso se dá através do TTTTTagagagagag <SCRIPT>, que deverá ser fechadoapós terminar todo o código JavaScriptJavaScriptJavaScriptJavaScriptJavaScript.

Abaixo do TTTTTag ag ag ag ag <body>, digite o seguinte TTTTTagagagagag:

<SCRIPT LANGUAGE=”JAVASCRIPT”>

Esse TTTTTagagagagag está informando, ao navegador, que será iniciado um script script script script script desenvolvi-do na linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript. Em seguida, vamos solicitar ao JavaScript JavaScript JavaScript JavaScript JavaScript queescreva 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 objetodocument document document document document informa ao JavaScriptJavaScriptJavaScriptJavaScriptJavaScript que será feito algo na página. E, em seguida,o método writewritewritewritewrite escreve algo no documento, nesse caso, a frase Prova de FísicaProva de FísicaProva de FísicaProva de FísicaProva de Física.

Termine seu script script script script script com o TTTTTagagagagag </SCRIPT>, e finalize seu documento HTMLHTMLHTMLHTMLHTML comos TTTTTag’sag’sag’sag’sag’s </BODY> e </HTML>. Compare como nosso código completo deverá fi-car no KWriteKWriteKWriteKWriteKWrite:

154


<HTML>


<BODY>


document.write(“Prova de Física”);

</SCRIPT>

</BODY>

</HTML>

Salve esse arquivo como exemplo.htmlexemplo.htmlexemplo.htmlexemplo.htmlexemplo.html.

Visualize, no navegador, o resultado.

Para isso, você irá abrir o KonquerorKonquerorKonquerorKonquerorKonqueror (clicar no botão de inicialização MetasysMetasysMetasysMetasysMetasys eselecionar o menu Gerenciador de ArGerenciador de ArGerenciador de ArGerenciador de ArGerenciador de Arquivquivquivquivquivososososos). Você pode navegar, clicando nosdiretórios à sua esquerda até chegar ao diretório que está seu arquivo.htmarquivo.htmarquivo.htmarquivo.htmarquivo.htm ou,na caixa de texto LocalizaçãoLocalizaçãoLocalizaçãoLocalizaçãoLocalização, você pode digitar o caminho até o diretório doarquivo e clicar EntEntEntEntEntererererer. Os arquivos desse diretório aparecerão ao lado direito doKKKKKonqueronqueronqueronqueronquerororororor. Então, clique duas vezes no arquivo eeeeexxxxxemplo.htmlemplo.htmlemplo.htmlemplo.htmlemplo.html. Sua página serácarregada no navegador.

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSCom 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, estadose clima.

1 )1 )1 )1 )1 ) No editor de texto KWriteKWriteKWriteKWriteKWrite, crie uma página HTMLHTMLHTMLHTMLHTML cujo título seja “Bra-sil” e o corpo da página contenha as características do País.

2 )2 )2 )2 )2 ) O corpo da página deverá ser feito com um script script script script script (JavaScriptJavaScriptJavaScriptJavaScriptJavaScript), utili-zando a função que aprendemos: document.writedocument.writedocument.writedocument.writedocument.write.

3 )3 )3 )3 )3 ) Salve o arquivo no diretório à sua escolha com o nome: pais.htmpais.htmpais.htmpais.htmpais.htm.

4)4 )4 )4 )4 ) Visualize o arquivo no FireFoxFireFoxFireFoxFireFoxFireFox.


155

COMANDOSBÁSICOS

157


Vamos conhecer, agora, outros comandos básicos existentes na linguagemJavaScriptJavaScriptJavaScriptJavaScriptJavaScript.

MÉTODO DOCUMENTMÉTODO DOCUMENTMÉTODO DOCUMENTMÉTODO DOCUMENTMÉTODO DOCUMENT.WRITE().WRITE().WRITE().WRITE().WRITE()

Conforme mostrado anteriormente, o método write()write()write()write()write(), pertencente ao objetodocumentdocumentdocumentdocumentdocument, serve para escrever algo na página (documento HTMLHTMLHTMLHTMLHTML). Veja peloexemplo a seguir:

document.write(“Olá Mundo!”);

MÉTODO ALERT()MÉTODO ALERT()MÉTODO ALERT()MÉTODO ALERT()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:

158


EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1) 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 KWriteKWriteKWriteKWriteKWrite para redigir todo o código com os ele-mentos que você escolheu, salve-o como tabela.htmltabela.htmltabela.htmltabela.htmltabela.html.

3) Abra o arquivo no navegador FireFoxFireFoxFireFoxFireFoxFireFox.

Você verá resultados como estes a seguir, mas com os nomes dos elemen-tos que digitou no código.

159


MÉTODO CONFIRM()MÉTODO CONFIRM()MÉTODO CONFIRM()MÉTODO CONFIRM()MÉTODO CONFIRM()

Uma outra alternativa, além do método alert()alert()alert()alert()alert(), é o método confirm()confirm()confirm()confirm()confirm(). Ele exibeuma caixa de diálogo e os botões de OKOKOKOKOK e CancelarCancelarCancelarCancelarCancelar. Caso seja pressionado obotão OKOKOKOKOK, o método retornará o valor booleano TTTTTrueruerueruerue. Pressionando o botão Can-Can-Can-Can-Can-celarcelarcelarcelarcelar, será retornado o valor FFFFFalsealsealsealsealse.

160


Com isso, o usuário poderá determinar uma tomada de decisão dentro de seuscriptscriptscriptscriptscript como, por exemplo, construir uma avaliação com questões fechadas queterão, como resposta, SimSimSimSimSim e NãoNãoNãoNãoNão ou OKOKOKOKOK e CancelarCancelarCancelarCancelarCancelar.

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

161


EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSUtilizando o editor de texto KWriteKWriteKWriteKWriteKWrite, faça uma página que:

escreva a seguinte frase na página, utilizando um métodoJavaScriptJavaScriptJavaScriptJavaScriptJavaScript: “Os países a seguir fazem parte da América Latina:”.

Para cada país utilize o método confirmconfirmconfirmconfirmconfirm e escreva os seguintes no-mes: Brasil, Equador, Itália, Argentina, Uruguai.

Utilize o método alertalertalertalertalert para escrever: “Fim da questão.”.

Salve a página como america.htmlamerica.htmlamerica.htmlamerica.htmlamerica.html e visualize o resultado no FirefoxFirefoxFirefoxFirefoxFirefox.

MÉTODO PROMPT()MÉTODO PROMPT()MÉTODO PROMPT()MÉTODO PROMPT()MÉTODO PROMPT()

O método promptpromptpromptpromptprompt é uma forma de você solicitar alguma informação ao visitante,como seu nome, sua idade etc, podendo, tais informações, serem manipuladasna 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ãopadrãopadrãopadrãopadrão: é o valor padrão que será exibido na tela do promptpromptpromptpromptprompt para orientá-losobre o lugar onde você deverá digitar a mensagem.

Veja um exemplo da utilização do método promptpromptpromptpromptprompt:

<script language=”javascript”>

seu_nome = prompt(“Digite seu Nome:”,”digiteaqui...”);

document.write(seu_nome + “ seja Bem Vindo a suapágina de estudos!”);

</script

Veja o resultado do script script script script script acima:

162


Após digitado o nome e pressionado o botão OKOKOKOKOK, aparecerá, na página, o seguinte texto:


163

COMANDOSCONDICIONAIS

E DE REPETIÇÃO

165


No exemplo anterior com o método confirmconfirmconfirmconfirmconfirm, foi possível definir opções de respostas parao usuário, porém, não houve como calcular quantas respostas estavam certas e quantasestavam erradas.

Para que isso seja possível, é necessário conhecer os comandos condicionais e/ou derepetição da linguagem. Vejamos a utilização dos principais:

INSTRUÇÃO IF ... ELSEINSTRUÇÃO IF ... ELSEINSTRUÇÃO IF ... ELSEINSTRUÇÃO IF ... ELSEINSTRUÇÃ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 elseelseelseelseelseififififif. Observe sua sintaxe:

if (condição1) {

comandos

} else if (condição2) {

comandos

}

Vamos ver a utilização do comando ififififif, 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);

166


} else {

alert(“O número: “ + b + “ é maior que “ + a);

}

</SCRIPT>

</BODY>

</HTML>

No exemplo, foram criadas v v v v variávariávariávariávariáveiseiseiseiseis na memória do computador, que como já vimos,são espaços para guardar algum tipo de informação durante o processamento do nossoprograma. Nesse caso, foram criadas as variáveis a a a a a e bbbbb, cada uma recebendo um valor.A variável “aaaaa” recebeu o número 10 (dez) e a variável “bbbbb” recebeu o número 2 (dois).

Em seguida, foi feita uma comparação para que se pudesse saber qual variável tem omaior número através da instrução ififififif que testa se a variável a a a a a é realmente maior quea variável bbbbb.

Caso essa condição seja verdadeira, como acima, será dada uma mensagem na tela,informando que o valor da variável a a a a a é maior que o da variável bbbbb. E, caso contrário, senão for (elseelseelseelseelse), será dada outra resposta. Veja, a partir do exemplo acima, a respostaque será apresentada no navegador:

FFFFFaça o Taça o Taça o Taça o Taça o Teste!este!este!este!este!Altere os valores das variáveis acima.

Veja, novamente, no navegador, qual valor éretornado.

167


EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSUtilizando o editor de texto KWriteKWriteKWriteKWriteKWrite, abra o arquivo america.htmlamerica.htmlamerica.htmlamerica.htmlamerica.html.

1) Reescreva o código para verificar se a opção selecionada está certa ou errada.Lembre-se de que o método confirmconfirmconfirmconfirmconfirm retorna uma resposta booleana (trueou false) que pode ser capturada.

Por exemplo:Por exemplo:Por exemplo:Por exemplo: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 ififififif, conte quantas questões o aluno acertou.

Por exemplo:Por exemplo:Por exemplo:Por exemplo:Por exemplo:Nesse caso, é necessário, antes de iniciar o primeiro ififififif, criar uma variávelque 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 alertalertalertalertalert, escreva: “Fim da questão.” e a nota do aluno.

Salve a página como america-nota.htmlamerica-nota.htmlamerica-nota.htmlamerica-nota.htmlamerica-nota.html e visualize o resultado no FirefoxFirefoxFirefoxFirefoxFirefox.

INSTRUÇÃO WHILEINSTRUÇÃO WHILEINSTRUÇÃO WHILEINSTRUÇÃO WHILEINSTRUÇÃO WHILE

A instrução whilewhilewhilewhilewhile realiza uma ação enquanto determinada condição for satisfeita.

Entendendo melhor essa construção...Entendendo melhor essa construção...Entendendo melhor essa construção...Entendendo melhor essa construção...Entendendo melhor essa construção...Em uma página, é solicitado que você informe uma senha, caso contrário, será exibidauma mensagem de alerta informando a você que a senha é obrigatória. Esse exemplopode ser feito através da instrução whilewhilewhilewhilewhile.

168



Sua sintaxe básica é:while (expressão) {

comandos

}

Veja, no exemplo a seguir, a utilização do laço whilewhilewhilewhilewhile, que é repetido por um total de 10vezes:

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 numnumnumnumnumque recebeu, como valor inicial, o zerozerozerozerozero. Logo depois, foi usado o comando whilewhilewhilewhilewhile (en-quanto) que faz uma comparação com esse valor, verificando se o mesmo é menor que10 (dez). Sendo verdadeira sua comparação, nesse caso, a variável numnumnumnumnum é incrementadacom mais 1(um), (num++), ou seja, zero + zero + 1 = 1zero + zero + 1 = 1zero + zero + 1 = 1zero + zero + 1 = 1zero + zero + 1 = 1. E, assim, sucessivamente, atéo numnumnumnumnum deixar de ser menor que 10 (dez).

Note também que, a cada vez que é testada nossa condição, será escrito, na página, onúmero através do comando document.writedocument.writedocument.writedocument.writedocument.write.

Além dos métodos condicionais apresentados, a linguagem JavaScript JavaScript JavaScript JavaScript JavaScript suportaum 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çãocondiçãocondiçãocondiçãocondição: é a expressão a ser avaliada.

Exemplo: a < b

VVVVValor valor valor valor valor verdadeirerdadeirerdadeirerdadeirerdadeirooooo: especifica a ação que ocorrerá se a condição for verdadeira.

VVVVValor falsoalor falsoalor falsoalor falsoalor falso: especifica a ação que ocorrerá caso a condição seja falsa.

169


INSTRUÇÃO SWITCHINSTRUÇÃO SWITCHINSTRUÇÃO SWITCHINSTRUÇÃO SWITCHINSTRUÇÃO SWITCH

Essa instrução é bem semelhante à estrutura ififififif, porém é mais eficiente em razão dasua simplicidade de utilização e entendimento. Veja a sintaxe utilizada para o uso deinstruções switchswitchswitchswitchswitch:

<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 respostarespostarespostarespostaresposta que recebeuo número 22222. A estrutura switchswitchswitchswitchswitch tem a função de verificar qual número a variável rece-beu conforme os casos apresentados nela.

Quando o comando switchswitchswitchswitchswitch é executado, realiza-se um estudo de caso, em que cadacaso é ignorado se o valor da resposta for diferente do apresentado.

170


O comando breakbreakbreakbreakbreak é utilizado para sair do comando switchswitchswitchswitchswitch, caso a condição seja satis-feita. Se não utilizar esse comando, o comando switchswitchswitchswitchswitch continua avaliando as outrasopções até encontrar o seu final.

A opção defaultdefaultdefaultdefaultdefault pode ser utilizada ao final do comando switchswitchswitchswitchswitch. Nesse caso, se nenhumacomparação de case for satisfeita, ele executa o que estiver no defaultdefaultdefaultdefaultdefault.


No editor de texto KWriteKWriteKWriteKWriteKWrite, faça a seguinte página:

1) Utilizando o método promptpromptpromptpromptprompt, peça para o usuário digitar um número.

2) Conte de 0 até o número, utilizando o comando whilewhilewhilewhilewhile.

3) Escreva, dentro do comando whilewhilewhilewhilewhile, o comando switchswitchswitchswitchswitch, 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 alertalertalertalertalert, escreva: “Fim.”.

Salve a página como numeros.htmlnumeros.htmlnumeros.htmlnumeros.htmlnumeros.html e visualize o resultado no FirefoxFirefoxFirefoxFirefoxFirefox.


171

FUNÇÕES

173


Funções em JaJaJaJaJavvvvvaScriptaScriptaScriptaScriptaScript nada mais são que uma rotina (pacote de comandosJavaScriptJavaScriptJavaScriptJavaScriptJavaScript) 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óso nome da função conforme foi mostrado. O corpo da função deverá ser colocado entrechaves. 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 HTMLHTMLHTMLHTMLHTML, repre-sentadas pelo TTTTTagagagagag <HEAD>. Com isso, todas as funções são carregadas assim que apá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 palavrasao 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, omesmo 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 diferentesna significação.”);

break;

case “Parônimos”:

alert(“São palavras de significação diferente,mas de forma parecida, semelhante.”);

break;

}

}

174


No exemplo, construímos uma função chamada significadosignificadosignificadosignificadosignificado que está recebendo, comoargumento, a variável palavrapalavrapalavrapalavrapalavra. Essa variável, dentro do código, será testada para sa-ber qual palavra o usuário escolheu e, assim, saber seu significadosignificadosignificadosignificadosignificado. Note que foi usa-da a estrutura condição switchswitchswitchswitchswitch que testará qual será a palavra.

Agora, iremos desenvolver a parte HTML HTML HTML HTML HTML que mostrará as palavras nas quais o usuáriodeverá clicar para saber o significado. Veja pelo código a seguir:

<BODY>

<h1>O que são:</h1>

<ahref=”javascript:significado(‘Sinônimos’);”>Sinônimos</a><br>

<ahref=”javascript:significado(‘Antônimos’);”>Antônimos</a><br>

<ahref=”javascript:significado(‘Homônimos’);”>Homônimos</a><br>

<ahref=”javascript:significado(‘Parônimos’);”>Parônimos</a><br>

</BODY>

Essa é a parte do código que mostra, na página, as palavras SinônimosSinônimosSinônimosSinônimosSinônimos, Antônimos Antônimos Antônimos Antônimos Antônimos,HomônimosHomônimosHomônimosHomônimosHomônimos e Parônimos Parônimos Parônimos Parônimos Parônimos. Elas serão simples links que vão chamar a função signi-signi-signi-signi-signi-ficadoficadoficadoficadoficado, passando para a variável (palavrapalavrapalavrapalavrapalavra) as palavras que desejamos testar na fun-ção. Veja pelo detalhe do primeiro link:

<a href=”javascript:significado(‘Sinônimos’);”>

Sinônimos</a><br>

A palavra SinônimosSinônimosSinônimosSinônimosSinônimos, que é exibida como link na tela, chama a função significadosignificadosignificadosignificadosignificado epassa para a variável palavrapalavrapalavrapalavrapalavra, a palavra SinônimosSinônimosSinônimosSinônimosSinônimos. Quando Sinônimos Sinônimos Sinônimos Sinônimos Sinônimos chegar àfunção, testará, pela condição do comando switchswitchswitchswitchswitch, qual é a palavra. Só, então, emitiráum aviso com seu significado. Nesse caso, a função daria como resposta a seguintemensagem:

175


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, omesmo 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 diferentesna 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>

<ahref=”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>

176


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


1) No editor de texto KWriteKWriteKWriteKWriteKWrite, construa a seguinte página:

2) Utilizando o comando switchswitchswitchswitchswitch, faça uma função que, dada uma palavra (osobrenome de um escritor), retorne qual seu estilo literário (escolha pelo menoscinco escritores; se necessário, pesquise na Internet).

3) Utilizando o exemplo dado, crie link’s com os nomes dos escritores para quandose clicar no link, apareça uma caixa aleraleraleraleralerttttt com o estilo literário do escritor.

Salve a página como escritores.htmlescritores.htmlescritores.htmlescritores.htmlescritores.html e visualize o resultado no FirefoxFirefoxFirefoxFirefoxFirefox.


177

OUTROS OBJETOSDO JAVASCRIPT

179


OBJETO DAOBJETO DAOBJETO DAOBJETO DAOBJETO DATETETETETE

Na linguagem JavasScript JavasScript JavasScript JavasScript JavasScript existem inúmeros objetos para controle de datas, horas,textos, números etc. Você vai conhecer, agora, o objeto datdatdatdatdateeeee, que permite ao usuáriotrabalhar 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 DAMÉTODOS DO OBJETO DAMÉTODOS DO OBJETO DAMÉTODOS DO OBJETO DAMÉTODOS DO OBJETO DATETETETETE

Os métodos do objeto datedatedatedatedate permitem extrair uma data ou uma hora, ou seja, valoresespecí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 datedatedatedatedate.

Métodos GETMétodos GETMétodos GETMétodos GETMétodos GET

Os métodos gegegegegetDattDattDattDattDateeeee, gegegegegetDatDatDatDatDayyyyy, entre outros, possuem a finalidade de recuperar a datae a hora de um objeto datedatedatedatedate. Ele poderá conter a data e a hora atuais ou específicas.Após a especificação do objeto datedatedatedatedate, basta especificar qual o método.

180



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.

Esse objeto tem a função de armazenar a data e a hora atuais no formato mm/dd/aamm/dd/aamm/dd/aamm/dd/aamm/dd/aa– hh:mm:sshh:mm:sshh:mm:sshh:mm:sshh:mm:ss. Os valores do mês são contados de 0 até 11 e os dias da semana de 0 a6, da seguinte forma:

0 Janeiro 0 Domingo

1 Fevereiro 1 Segunda

2 Março 2 Terça

3 Abril 3 Quarta

4 Maio 4 Quinta

5 Junho 5 Sexta

6 Julho 6 Sábado

7 Agosto

8 Setembro

9 Outubro

10 Novembro

11 Dezembro

O objeto datdatdatdatdateeeee pode definir data e hora a partir de 1 de janeiro de 1970. Após a criaçãodo objeto datedatedatedatedate, o mesmo pode ser usado com qualquer método apresentado anterior-mente.

As horas sãodeterminadas de00:00 às 23:00

181


MÉTODOSMÉTODOSMÉTODOSMÉTODOSMÉTODOS DESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃ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 de1990 (00:00:00)

getTimezoneOffset Diferença de fuso horário em minutospara o GMT

getYear 2 dígitos do ano até 1999. Após 2000,4 dígitos

Método Parse e UTCMétodo Parse e UTCMétodo Parse e UTCMétodo Parse e UTCMétodo Parse e UTC

O método PPPPParararararsesesesese retorna o valor de milissegundos a partir de 1 de janeiro de 1970,00:00:00. Já, o método UTCUTCUTCUTCUTC faz a mesma coisa, porém, no fuso horário GMT –Greenwich Mean TimeGreenwich Mean TimeGreenwich Mean TimeGreenwich Mean TimeGreenwich Mean Time. Vejamos um exemplo da apresentação da quantidade demilissegundos contados até o dia 23 de Novembro de 1975.

Date.parse(“Nov 23, 1975 GMT”);

Teste e veja se o resultado será 111118593280000085932800000859328000008593280000085932800000 milissegundos contados desde 1 dejaneiro de 1970. Altere esse código, fazendo com que seja exibida a quantidade demilissegundos desde o seu nascimento.

Digite o exemplo abaixo no KWriteKWriteKWriteKWriteKWrite.

Salve o arquivo como exemplo3.htmlexemplo3.htmlexemplo3.htmlexemplo3.htmlexemplo3.html.

Visualize o resultado no navegador.

182


<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ÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1) No editor de texto KWriteKWriteKWriteKWriteKWrite, faça a seguinte página, utilizando o objeto DateDateDateDateDate

do JavaScriptJavaScriptJavaScriptJavaScriptJavaScript.

2) Com o comando promptpromptpromptpromptprompt, peça ao usuário para informar o ano, o mês e odia em que ele nasceu.

3) Com o objeto DateDateDateDateDate, 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 idade.html idade.html idade.html idade.html e visualize o resultado no FirefoxFirefoxFirefoxFirefoxFirefox.

183


Método toGMTStringMétodo toGMTStringMétodo toGMTStringMétodo toGMTStringMétodo toGMTString

A definição de GMT define o fuso horário internacional padrão para configuração derelógios. Esse método faz a conversão de um objeto datedatedatedatedate para uma stringstringstringstringstring, usandoconvenções GMT.

Veja, pelo exemplo a seguir, a conversão da hora atual em uma stringstringstringstringstring (texto) no formatoGMT. 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.

184


Método toLocaleStringMétodo toLocaleStringMétodo toLocaleStringMétodo toLocaleStringMétodo toLocaleString

O método toLocaleString toLocaleString toLocaleString toLocaleString toLocaleString tem a função de formatar a data e a hora, usando as con-venções de stringstringstringstringstring 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 deforma que ele possa entender isso de maneira simples na página, mesmo estando forade 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:

185


Vejamos, agora, um exemplo que irá apresentar um relógio digital na tela através dacriaçã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ÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSPara cada um dos exercícios abaixo, abra o editor de texto KwriteKwriteKwriteKwriteKwrite, salve o códigoe visualize o resultado no navegador.

1) Crie um scriptscriptscriptscriptscript que apresente a data atual do computador na tela e, emseguida, exiba as horas, minutos e segundos atuais.

2) Crie um scriptscriptscriptscriptscript que exiba o número do dia da semana e do mês atual.

186


3) Crie um scriptscriptscriptscriptscript 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 scriptscriptscriptscriptscript que apresente a data e a hora no formato do fuso horáriointernacional.

5) Altere esse scriptscriptscriptscriptscript, fazendo a data e a hora apresentarem-se no formatoatual do fuso horário local.

6) Crie um script script script script script que apresente, na página, as seguintes condições:

Se horas fSe horas fSe horas fSe horas fSe horas for menor que 1or menor que 1or menor que 1or menor que 1or menor que 12h, e2h, e2h, e2h, e2h, exiba: “BOM DIAxiba: “BOM DIAxiba: “BOM DIAxiba: “BOM DIAxiba: “BOM DIA”;”;”;”;”;

Se horas estivSe horas estivSe horas estivSe horas estivSe horas estiver entre 1er entre 1er entre 1er entre 1er entre 12h e 12h e 12h e 12h e 12h e 18h, e8h, e8h, e8h, e8h, exiba: “BOxiba: “BOxiba: “BOxiba: “BOxiba: “BOA TA TA TA TA TARDE”;ARDE”;ARDE”;ARDE”;ARDE”;

Se horas estivSe horas estivSe horas estivSe horas estivSe horas estiver entre 00h e 05h, eer entre 00h e 05h, eer entre 00h e 05h, eer entre 00h e 05h, eer entre 00h e 05h, exiba: “BOxiba: “BOxiba: “BOxiba: “BOxiba: “BOA MADRA MADRA MADRA MADRA MADRUGUGUGUGUGADADADADADAAAAA”.”.”.”.”.

7) Crie um scriptscriptscriptscriptscript que apresente, na página, a data e as horas. Veja o formatoa ser apresentado na página:

Segunda-feira, 23 de Novembro de 2001. Agora são: hh:mm:ssSegunda-feira, 23 de Novembro de 2001. Agora são: hh:mm:ssSegunda-feira, 23 de Novembro de 2001. Agora são: hh:mm:ssSegunda-feira, 23 de Novembro de 2001. Agora são: hh:mm:ssSegunda-feira, 23 de Novembro de 2001. Agora são: hh:mm:ss


187

MANIPULAÇÕESDE JANELAS EFORMULÁRIOS

189


OBJETO WINDOWOBJETO WINDOWOBJETO WINDOWOBJETO WINDOWOBJETO WINDOW

Na linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript, é possível controlar a janela do navegador através do objetoconhecido como windowwindowwindowwindowwindow. Ele é responsável pela manipulação dessa janela. Sempreque se abre o navegador, ele é criado como representação de uma janela que estáaberta. Isso é feito automaticamente, sem a necessidade de executar qualquer comandoda linguagem HTMLHTMLHTMLHTMLHTML ou JavaScript.JavaScript.JavaScript.JavaScript.JavaScript.O objeto windowwindowwindowwindowwindow 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 seguintesintaxe:

window.método(argumentos);

Para entender melhor:Para entender melhor:Para entender melhor:Para entender melhor:Para entender melhor:

acesse o SiteSiteSiteSiteSite do Centro Universitário Belas Artes de São PauloCentro Universitário Belas Artes de São PauloCentro Universitário Belas Artes de São PauloCentro Universitário Belas Artes de São PauloCentro Universitário Belas Artes de São Paulo atravésdo link: www.belasartes.br;

ao carregar a página, clique no link Galeria VirtualGaleria VirtualGaleria VirtualGaleria VirtualGaleria Virtual que mostra a galeriade alguns jovens artistas;

acesse um dos artistas e, logo ao carregar a página, escolha uma das fotosapresentadas e clique sobre ela.

Perceba que, ao clicar em uma das fotos, será aberta uma nova janela com o tamanhoda foto. Isso só foi possível por ter sido usado o método openopenopenopenopen (abrir), pertencente aoobjeto windowindowindowindowindowwwww. Veja, a seguir, como utilizá-lo.

Método OpenMétodo OpenMétodo OpenMétodo OpenMétodo Open

Esse método tem como objetivo abrir uma nova janela do navegador. Com ele, o usuáriopoderá 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);

NomeJanelaNomeJanelaNomeJanelaNomeJanelaNomeJanela: é uma variável que será uma referência à nova janela.

URLURLURLURLURL: é o endereço da janela a ser aberta.

títulotítulotítulotítulotítulo: é o nome da janela que será criada.

opçõesopçõesopçõesopçõesopções: são os parâmetros que controlam o comportamento da nova janela.

190


Para você entender melhor como utilizar esse método, siga os seguintes passos:

escolha algumas imagens no Site Site Site Site Site do Centro Universitário Belas Artes Centro Universitário Belas Artes Centro Universitário Belas Artes Centro Universitário Belas Artes Centro Universitário Belas Artes esalve-as no computador.

Agora, vamos montar a página responsável pelo carregamento das fotos.

inicialmente, crie uma página simples (HTMLHTMLHTMLHTMLHTML) com links chamando umafunção em JavaScriptJavaScriptJavaScriptJavaScriptJavaScript.

Veja o exemplo a seguir:

<a href=”javascript:abreFoto();”>Exibir foto</a>

Agora, veja a função em JavaScriptJavaScriptJavaScriptJavaScriptJavaScript 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étodowindow.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 de250 pixels e altura de 200 pixels, representado pelos argumentos: width (largura) eheight (altura).

Veja, a seguir, o código completo dessa página:

<html>

<head>



ver_foto =window.open(“”,””,”width=250,height=200");

}

191


</script>

</head>

<body>


</body>

</html>

Clique no link exibido na página.

Será dado o seguinte resultado no navegador:

Caso houvesse uma página HTMLHTMLHTMLHTMLHTML com a foto já criada, bastaria alterar, no código dométodo openopenopenopenopen, o primeiro argumento, informando qual o nome da página que se desejacarregar. 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 delacom o JavaScriptJavaScriptJavaScriptJavaScriptJavaScript, basta utilizar as propriedades que a variável ver_fotover_fotover_fotover_fotover_foto adquiriuquando recebeu o método open open open open open do objeto window.openwindow.openwindow.openwindow.openwindow.open.

Veja, a seguir, como você faria para montar, em JaJaJaJaJavvvvvaScriptaScriptaScriptaScriptaScript, o conteúdo da páginacriada pela variável ver_fotover_fotover_fotover_fotover_foto:

<html>

<head>



ver_foto = window.open(“”,””,”width=192,height=300");

192


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:FIGURA:FIGURA:FIGURA:FIGURA: HTTP://WWW.BELASARTES.BR/GALERIA/MACHUPICCHU/FOTOS/3_G.JPG

Método CloseMétodo CloseMétodo CloseMétodo CloseMétodo Close

Assim, como é possível abrir uma nova janela do navegador com o método open, open, open, open, open, épossível fechá-la com o método closecloseclosecloseclose do objeto windowwindowwindowwindowwindow, que tem o objetivo de encer-rar uma janela. Normalmente, utiliza-se esse método atribuído a um botão de ação oua um link.

Sua sintaxe básica tem a seguinte formação:

window.close()

193


No exemplo, a seguir, temos uma página com um botão chamado FFFFFecececececharharharharhar. Quando ousuário clicar sobre ele, será acionado o evento closecloseclosecloseclose.

<input type=”button” value=”Fechar” onClick=

”window.close()”>

Nesse caso, foi utilizado o evento onClickonClickonClickonClickonClick que executa a instrução window.close()window.close()window.close()window.close()window.close()assim que o usuário clica sobre o botão.

EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1) 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.htmlfoto.htmlfoto.htmlfoto.htmlfoto.html.

Imagine que, em sua aula de Artes, o professor solicitou um trabalhoImagine que, em sua aula de Artes, o professor solicitou um trabalhoImagine que, em sua aula de Artes, o professor solicitou um trabalhoImagine que, em sua aula de Artes, o professor solicitou um trabalhoImagine que, em sua aula de Artes, o professor solicitou um trabalhode fotografia sobre as praças de sua cidade.de fotografia sobre as praças de sua cidade.de fotografia sobre as praças de sua cidade.de fotografia sobre as praças de sua cidade.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 dasua casa, no centro da cidade ou apenas naquelas mais conhecidas pelosmoradores, e tire várias fotos delas. Caso não seja possível, procure fotos depraças na Internet.

4) Depois de realizada a seção de fotos, transfira-as para um computador esalve-as.

Se você quiser, poderá dar um acabamento ou um tratamento naquelasque não ficaram muito nítidas, através do programa GimpGimpGimpGimpGimp. Saiba maiscom seu professor!

5) Em seguida, crie um álbum de fotos, a partir dos comandos do JavaScriptJavaScriptJavaScriptJavaScriptJavaScriptaprendidos até o momento. Ao clicar em cada uma das fotos, você deverávisualizá-las em seu tamanho original, em uma nova janela (pop-up*pop-up*pop-up*pop-up*pop-up*).

6) Insira, também, informações sobre a praça que está sendo exibida na foto ealguma característica relevante sobre ela.

7) Ao final, junte suas fotos com as de seus colegas e faça uma exposiçãovirtual de fotos das praças de sua cidade.

8) Salve seu arquivo como praças.htmlpraças.htmlpraças.htmlpraças.htmlpraças.html.

*Pop-up – É uma janela usada na WebWebWebWebWeb como meio de exibir uma propaganda em uma janela diferente, com opropósito de chamar a atenção do usuário.

194


OBJETO FORMOBJETO FORMOBJETO FORMOBJETO FORMOBJETO FORM

Através do objeto form form form form form (formulárioformulárioformulárioformulárioformulário) da linguagem JavaScript JavaScript JavaScript JavaScript JavaScript o usuário poderáinteragir melhor com os dados inseridos nos campos de formulários que são cria-dos na linguagem HTMLHTMLHTMLHTMLHTML. Entre eles, temos os campos inputinputinputinputinput, checkbox checkbox checkbox checkbox checkbox, radioradioradioradioradio,select select select select select e textareatextareatextareatextareatextarea. O formulário e seus objetos podem ser facilmente manipula-dos através de scriptsscriptsscriptsscriptsscripts.

PropriedadePropriedadePropriedadePropriedadePropriedade

O objeto formformformformform é uma propriedade do objeto documentdocumentdocumentdocumentdocument. 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 ffffformormormormorm:

195


PROPRIEDADESPROPRIEDADESPROPRIEDADESPROPRIEDADESPROPRIEDADES DESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃO

Action Especifica a URLURLURLURLURL do servidor para onde as variáveis doformulá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 umformulário.

Checked Estado padrão de um checkbox checkbox checkbox checkbox checkbox ou botões do tipo radioradioradioradioradioem um formulário.

elements[] Lista os elementos existentes do formulário.

Encoding Formato de código MIMEMIMEMIMEMIMEMIME para o formulário.

Form Objeto de formulário.

Index Especifica uma opção de uma lista de seleção (selectselectselectselectselect)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 GetGetGetGetGet ou PostPostPostPostPost.

Name Nomeia um objeto do formulário.

options[] Lista de opções de uma lista (selectselectselectselectselect) dentro do formulário.

Selected Estado atual de uma caixa de verificação ou de um bo-tão de opção (radioradioradioradioradio).

selectedIndex Determina a opção selecionada de uma lista de seleção(selectselectselectselectselect) dentro do formulário.

Text Especifica o texto de uma opção (optionoptionoptionoptionoption) de uma listadeseleção (selectselectselectselectselect) do formulário.

Value Nome dado ao texto de uma caixa de texto ou área detexto (text text text text text e areatextareatextareatextareatextareatext).

Sua sintaxe é a seguinte:document.NomeFormulário.NomeCampo.propriedade

196


Métodos do Objeto FormMétodos do Objeto FormMétodos do Objeto FormMétodos do Objeto FormMétodos do Objeto Form

MÉTODOMÉTODOMÉTODOMÉTODOMÉTODO DESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃO

blur() Quando é removido o foco de um campo do tipo texttexttexttexttext, textareatextareatextareatextareatextareae campos de senha passwordpasswordpasswordpasswordpassword.

click() Quando é dado um clique sobre um elemento de botão emformulário ou campos do tipo radio radio radio radio radio e checkboxcheckboxcheckboxcheckboxcheckbox.

focus() Quando é dado o foco sobre um campo do tipo texttexttexttexttext, textareatextareatextareatextareatextareae campos de senha passwordpasswordpasswordpasswordpassword.

select() Quando é selecionado o conteúdo de um campo do tipo texttexttexttexttext,textareatextareatextareatextareatextarea ou password password password password password.

submit() Quando envia o formulário ao servidor.

Elementos de um Formulário

Sabemos, a partir do que vimos no HTMLHTMLHTMLHTMLHTML, que, em um formulário, há diferentescomponentes que auxiliam a entrada de dados do usuário.

Destacamos:

Já conhecemos todos esses componentes apresentados acima através do uso dalinguagem HTML HTML HTML HTML HTML.

OBJETO TEXTOBJETO TEXTOBJETO TEXTOBJETO TEXTOBJETO TEXT

Sabemos que se podem criar campos de digitação de textos com o uso do formu-lário. Através da linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript, é possível a manipulação dos dadosdigitados para esse campo com o uso do objeto texttexttexttexttext.

Sua sintaxe geral é:

document.nomeForm.nomeText.propriedade

Button(Boão)Reset

(inicializar)

Checkbox(Escolha de campos)

Select(seleciona um item)

Hidden(Campo oculto)

Submit(enviar ao servidor)

Password(Senha)

Text(texto)

Radio(Escolha apenas um campo)

TextArea(Área de texto)

197


Veja, abaixo, a relação das propriedades existentes para o objeto texttexttexttexttext:

<form name=”form1">

<pre>

Digite seu Nome:

<input type=”text” name=”campo1">


document.form1.campo1.value = prompt(“Digite seuNome:”,”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 embranco, quebras de linhas e tabulações importantes) do texto que estiver entre ela.

OBJETO PASSWORDOBJETO PASSWORDOBJETO PASSWORDOBJETO PASSWORDOBJETO PASSWORD

Esse objeto permite ao usuário controlar campos de preenchimento de SenhaSenhaSenhaSenhaSenha.Sua sintaxe é:

document.nomeForm.campoSenha.propriedade

As propriedades e métodos desse objeto são os mesmos do objeto texttexttexttexttext apresentadosanteriormente.


<pre>

Digite seu Nome:

<input type=”password” name=”campo1">


document.form1.campo1.value = “Senha”


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.

198


alert(document.form1.campo1.value);

</script>

</form>

OBJETO TEXTAREAOBJETO TEXTAREAOBJETO TEXTAREAOBJETO TEXTAREAOBJETO 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 texttexttexttexttext.

OBJETO BUTOBJETO BUTOBJETO BUTOBJETO BUTOBJETO BUTTONTONTONTONTON

Como já foi utilizado, sabemos que esse objeto representa os botões criados em umformulário a que atribuímos ações específicas. Sua sintaxe tem a seguinte formação:

document.nomeForm.nomeButton.propriedade

MÉTODOMÉTODOMÉTODOMÉTODOMÉTODO DESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃOEVENTOEVENTOEVENTOEVENTOEVENTO

click() onClick Executa uma instrução quando é dado umclique sobre o botão.

Veja, pelo exemplo do scriptscriptscriptscriptscript a seguir, a exibição de uma mensagem, informando o queserá 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>

199



name Contém o conteúdo do atributo namenamenamenamename.

value Contém o valor “ononononon” ou “offoffoffoffoff” que determina o estadoda 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

Os botões de formulário do tipo checkbox checkbox checkbox checkbox checkbox são botões que o usuário pode ativarativarativarativarativare desativdesativdesativdesativdesativararararar. O atributo ccccchechechechecheckkkkkededededed determina o estado default da caixa de verifica-ção. Essa propriedade assume valores booleanos: quando ativada, assume o va-lor true true true true true e desativada, o valor falsefalsefalsefalsefalse.

MÉTODOMÉTODOMÉTODOMÉTODOMÉTODO DESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃODESCRIÇÃOEVENTOEVENTOEVENTOEVENTOEVENTO

click() onClick Executa uma instrução assim que o usuá-rio clica sobre o elemento.

OBJETO CHECKBOXOBJETO CHECKBOXOBJETO CHECKBOXOBJETO CHECKBOXOBJETO CHECKBOX (CAIXA DE VERIFICAÇÃO) (CAIXA DE VERIFICAÇÃO) (CAIXA DE VERIFICAÇÃO) (CAIXA DE VERIFICAÇÃO) (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.

PropriedadePropriedadePropriedadePropriedadePropriedade

Esse objeto é uma propriedade do objeto formformformformform.

Veja, abaixo, a relação das propriedades existentes para o objeto checkboxcheckboxcheckboxcheckboxcheckbox:

200



O exemplo mostra um formulário, no qual, se as opções 1, 2 e 4 estiverem marcadas, eleretorna 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>




<INPUT TYPE=”button”NAME=”but” VALUE=”Corrigir”onClick=”resposta(form4)”>

</FORM>

</BODY>

</HTML>

201


EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSUtilizando o KwriteKwriteKwriteKwriteKwrite 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 checkboxcheckboxcheckboxcheckboxcheckbox para cadaopção. Assim que o aluno clicar em uma das opções, chame uma funçãoJavaScript JavaScript JavaScript JavaScript JavaScript que testará se a resposta da questão está correta ou não.

3) Salve o arquivo como checkbox.htmlcheckbox.htmlcheckbox.htmlcheckbox.htmlcheckbox.html.

4) Teste seu script script script script script no navegador.

OBJETO RADIOOBJETO RADIOOBJETO RADIOOBJETO RADIOOBJETO RADIO

Diferente do checkbox checkbox checkbox checkbox checkbox que permite múltipla escolha das opções listadas, o objeto radioradioradioradioradiocria, 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.

<HTML>

<HEAD>

<SCRIPT language=”javascript”>

function escolhaprop(form3) {

if (form3.escolha[0].checked) {

alert(“A proposição “ + form3.escolha[0].value)

};



};



};

}

</SCRIPT>


202


</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 é suaescolha ?” onClick=”escolhaprop(form3)”>

</FORM>

</BODY>

</HTML>

OBJETO SELECTOBJETO SELECTOBJETO SELECTOBJETO SELECTOBJETO 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 selectselectselectselectselect irá permitir que o usuário controle os itens de uma lista de opçõescriada com o TTTTTag HTMLag HTMLag HTMLag HTMLag HTML <SELECT>.

Veja um exemplo de sua utilização:

<HTML>

<HEAD>

<TITLE>CHECAGEM DE DADOS</TITLE>


function itens(){

alert(form1.lista.selectedIndex);

}

</script>


<pre>

203


<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 selecionarum 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á ovalor 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ÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSUtilizando o Kwrite Kwrite Kwrite Kwrite 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).

204


2) Faça um campo de formulário do tipo select através do qual, ao serselecionado um dos Sites do campo, o usuário seja redirecionado parasua respectiva página.

3) Salve o arquivo como select.html.

4) Teste seu script no navegador.

OBJETO LOCAOBJETO LOCAOBJETO LOCAOBJETO LOCAOBJETO LOCATIONTIONTIONTIONTION

Esse é o último objeto que vamos trabalhar. Ele é bem interessante por conterinformações sobre a URLURLURLURLURL (endereço) da página. Cada propriedade do objetolocationlocationlocationlocationlocation 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 locationlocationlocationlocationlocation, siga a seguinte sintaxe:

window.location

Caso o objeto locationlocationlocationlocationlocation esteja fazendo referência à janela corrente (atual), não énecessário utilizar o objeto windowwindowwindowwindowwindow. Caso o usuário deseje voltar à URLURLURLURLURL da janelacorrente (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>

205


EXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOSEXERCÍCIOS1) Crie uma página que permita ao usuário digitar seu nome e, em segui-

da, ao clicar sobre o botão OKOKOKOKOK, seja exibida uma caixa com a seguintemensagem:

Olá <nome digitado>,Olá <nome digitado>,Olá <nome digitado>,Olá <nome digitado>,Olá <nome digitado>,

seja bem vindo ao nosso dicionário online!seja bem vindo ao nosso dicionário online!seja bem vindo ao nosso dicionário online!seja bem vindo ao nosso dicionário online!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 momentoem 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 scriptscriptscriptscriptscript, uma função chamada exibeexibeexibeexibeexibe e, comoargumento para essa função, defina a variável (textotextotextotextotexto). Desenvolva,para essa rotina, uma caixa de alerta que apresente o seguinte texto:

“Olá” texto“Olá” texto“Olá” texto“Olá” texto“Olá” textoSeja Bem vindo!Seja Bem vindo!Seja Bem vindo!Seja Bem vindo!Seja Bem vindo!

Agora são: hh:mmAgora são: hh:mmAgora são: hh:mmAgora são: hh:mmAgora são: hh:mm

3) No corpo da página, crie um campo de formulário do tipo TTTTTeeeeextxtxtxtxto o o o o queexecute a função, atribuindo à variável definida o valor digitado pelousuá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áriodigitar 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 eledeseja executar. E, ao digitar os dois valores nos campos de texto, queo usuário tenha o resultado do cálculo escolhido.

6) Crie, em uma página HTMLHTMLHTMLHTMLHTML, quatro campos de formulário do tipo radioradioradioradioradioe, em seguida, atribua um evento que faça com que, ao escolher um

206


Parabéns!Parabéns!Parabéns!Parabéns!Parabéns!Agora, com os comandos JavaScriptJavaScriptJavaScriptJavaScriptJavaScript na ponta dos dedos,páginas “inteligentes” e sofisticadas serão criadas por vocênum “piscar de olhos”!

Azul

Vermelho

Amarelo

Cinza

dos botões presentes, seja alterada a cor de fundo a página, como

no no exemplo a seguir:

207


BIBLIOGRAFIABIBLIOGRAFIABIBLIOGRAFIABIBLIOGRAFIABIBLIOGRAFIA

FLANAGAN, David. JavaScript: JavaScript: JavaScript: JavaScript: JavaScript: o Guia Definitivo. 5ª edição. Ed. Bookman,2006, 1099p.

LIMA, Adriano Gomes. JavascriptJavascriptJavascriptJavascriptJavascript: aplicações interativas para a Web. BeloHorizonte, Apostila Pessoal, 2000.

McCOMB, Gordon. JavaScript SourcebookJavaScript SourcebookJavaScript SourcebookJavaScript SourcebookJavaScript Sourcebook. São Paulo: Ed. Makron

Books, 1997, 735p.

http://pt.wikipedia.org/wiki/JavaScript

http://www.htmlstaff.org/secao.php?id=14

208



209

PLANO DETRABALHO

JAVASCRIPT

Caro professor,

Você está participando de um projeto da Secretaria de Educação, que tem como objetivoapresentar 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 suasaulas 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 conhecimentossobre a linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript. Quando concluí-lo, você estará apto a utilizar todos osrecursos 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 muitomais 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 maisutilizá-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 repassadasaos 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 umarelaçã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 notrabalho.

A seguir, foi disponibilizado um “Plano de Trabalho” para orientá-lo no repasse do cursoaos seus alunos. Nele, constam os conteúdos que devem ser abordados, sugestão decarga 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 deaula. Não deixe de anotá-las e discutir outras possibilidades com os colegas e instrutor.

Aproveite o curso!

Sucesso!






1. Apresentação do Instrutor e1. Apresentação do Instrutor e1. Apresentação do Instrutor e1. Apresentação do Instrutor e1. Apresentação do Instrutor e

AlunosAlunosAlunosAlunosAlunos

2. Apresentação Geral do Curso2. Apresentação Geral do Curso2. Apresentação Geral do Curso2. Apresentação Geral do Curso2. Apresentação Geral do Curso– Metodologia de trabalho adotada

no curso

– Critérios de Aprovação no curso

– Laboratório deInformática comJAVASCRIPT


– Pincéis

– Apostila – InformáticaBásica

– Peças de hardwarepara demonstração aoaluno, como funcio-nam o processador,memória RAM e HD.


– Dinâmica de apresentação

.

1h

3h3. Informática Básica3. Informática Básica3. Informática Básica3. Informática Básica3. Informática Básica– Na Era da Informatização

– Componentes do ComputadorPeriféricosModem / Fax-modemEstabilizadorNobreak

– Sistema Operacional Conceitose ConvençõesArquivos e Pastas (visão geral)Armazenando Dados em umComputador

– Rede

– Internet

– Metasys

Iniciando os aplicativos doMetasysIntrodução ao OpenOffice WriterIntrodução ao OpenOffice Calc

– Soluções para Alguns Problemasda Informática

– Qualidade de Vida no TrabalhoEquipamentos

– Exposição dialogada –avaliação diagnósticapara verificar o nível deconhecimento da turmasobre o tema.

– Demonstração – Oinstrutor deve demons-trar todos os procedi-mentos necessários

– Prática Supervisionada– Todos os alunos devemcolocar em prática osprocedimentos aborda-dos, sob a supervisão doinstrutor.




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?

DICADICADICADICADICA

Não se esqueça de planejar a sua aula!!! Pense em atividades extraspara aqueles alunos com melhor desempenho. Talvez eles possamatuar como “monitores”, ajudando os outros colegas nas atividades etirando dúvidas.

Item 1 - Apresentação do Instrutor e AlunosItem 1 - Apresentação do Instrutor e AlunosItem 1 - Apresentação do Instrutor e AlunosItem 1 - Apresentação do Instrutor e AlunosItem 1 - Apresentação do Instrutor e AlunosCumprimente 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 CursoItem 2 - Apresentação Geral do CursoItem 2 - Apresentação Geral do CursoItem 2 - Apresentação Geral do CursoItem 2 - Apresentação Geral do CursoFale sobre o curso que irá ministrar (JavaScriptJavaScriptJavaScriptJavaScriptJavaScript), fazendo um breveresumo 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 cursoanterior e faça perguntas sobre alguns Tag’s para identificar o nível deconhecimento 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 envolvamnas atividades propostas.

Diga que haverá momentos em que a exposição dialogada será neces-sária, que haverá muita prática e resolução de exercícios, buscandoaplicar 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 ocurso, 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 solicitaro seu auxílio.

É importante informar aos alunos que somente serão aprovados seobtiverem 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ásicaItem 3 – Informática BásicaItem 3 – Informática BásicaItem 3 – Informática BásicaItem 3 – Informática BásicaFaça um levantamento na turma das pessoas que têm conhecimen-tos de informática, perguntando se já fizeram algum tipo de curso, sesabem utilizar o computador, buscando identificar o grau de conheci-mento para iniciar o assunto.

Aproveite a oportunidade e verifique se os alunos conhecem oJavaScript. Converse com eles sobre as situações em que pode ser uti-lizado e peça sugestões de temas para desenvolvimento de atividadesdurante o curso.

Fale sobre os conceitos básicos da informática, apresentando as par-tes do computador (CPU, monitor, teclado, mouse etc), procurandodemonstrar como deve ser a sua utilização. Mostre aos alunos como ocomputador deve ser ligado e desligado, como se faz para abrir e criarpastas, 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 ondeficam armazenados os dados e o que faz o computador processar asinformações.

Explore os dispositivos de entrada e saída e a importância deles no diaa 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 dedeixá-los praticar, pois a prática é imprescindível para que o aprendi-zado realmente aconteça.





4. Introdução4. Introdução4. Introdução4. Introdução4. Introdução– O que é a Linguagem

JavaScriptJavaScriptJavaScriptJavaScriptJavaScript

– Java e JavaScript: JavaScript: JavaScript: JavaScript: JavaScript: Conceitose diferenças

– Exposição dialogada,citando exemplos depáginas HTML com usodo JavaScriptJavaScriptJavaScriptJavaScriptJavaScript

– Laboratório deInformática comLinux, KWrite eMozzila Firefoxinstalados comacesso à Internet

– Quadro branco/negro e pincéis

– Apostila– JavaScriptJavaScriptJavaScriptJavaScriptJavaScript

2h

5. JavaScript: Linguagem5. JavaScript: Linguagem5. JavaScript: Linguagem5. JavaScript: Linguagem5. JavaScript: Linguagem

Orientada a ObjetosOrientada a ObjetosOrientada a ObjetosOrientada a ObjetosOrientada a Objetos

– Orientação a Objetos

– Manipulação de Objetos

– Tipos de Propriedades

– Métodos dos Objetos

– Eventos

3h – Exposição dialogada – Laboratório deInformática comLinux, KWrite eMozzila Firefoxinstalados comacesso à Internet


– Apostila – JavaScriptJavaScriptJavaScriptJavaScriptJavaScript




Oriente aos alunos quanto:

A real necessidade de utilizar esta linguagem.

Fale de outras linguagens similares e qual a importância de se usarJavaScriptJavaScriptJavaScriptJavaScriptJavaScript 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çãoItem 4 - IntroduçãoItem 4 - IntroduçãoItem 4 - IntroduçãoItem 4 - IntroduçãoFale sobre as características da linguagem, fazendo uma apresenta-ção a respeito da mesma (para que serve, em que tipos de páginaspode ser utilizada etc.).

Fale um pouco a respeito das linguagens da Web, comparando oJavaScriptJavaScriptJavaScriptJavaScriptJavaScript com outras similares.

Use os exemplos citados na apostila para trabalhar em sala. Com basenesses exemplos, você pode criar outros, se achar necessário.

Na apostila, há um exemplo de exercício de física com questões demú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 sobreisso um pouco mais a frente.

Item 5 - JavaScript – Linguagem Orientada a ObjetosItem 5 - JavaScript – Linguagem Orientada a ObjetosItem 5 - JavaScript – Linguagem Orientada a ObjetosItem 5 - JavaScript – Linguagem Orientada a ObjetosItem 5 - JavaScript – Linguagem Orientada a ObjetosFale o que significa uma linguagem que utiliza Orientação a Objetos.

Dê exemplos do que são objetos da linguagem, explicando também oque 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 oentendimento de cada um deles.






6. Estrutura da Linguagem6. Estrutura da Linguagem6. Estrutura da Linguagem6. Estrutura da Linguagem6. Estrutura da Linguagem– Variáveis

– Nomes de Variáveis

– Desenvolvimento de Script’s


– Demonstração

– Prática Supervisionada

– Resolução de Exercíciona apostila




4h

77777. Comandos Básicos. Comandos Básicos. Comandos Básicos. Comandos Básicos. Comandos Básicos– Método document.write()

– Método alert()

– Método confirm()

– Método prompt()


– Demonstração


– Resolução de 2 (dois)Exercícios na apostila




4h


Demonstre como iniciar um script da linguagem, destacando cada umdos passos para desenvolvimento e lembrando que ele estará inseridoem uma página HTML.

Item 6 – Estrutura da LinguagemItem 6 – Estrutura da LinguagemItem 6 – Estrutura da LinguagemItem 6 – Estrutura da LinguagemItem 6 – Estrutura da LinguagemNesse momento, você irá ensinar a turma o conceito sobre variáveis,mostrando os tipos existentes na linguagem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript e sua formade aplicação.

Esse conteúdo é bastante teórico, mas a partir dele já é possívelcomeç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 umapágina utilizando os códigos vistos até o momento.

Item 7 – Comandos BásicosItem 7 – Comandos BásicosItem 7 – Comandos BásicosItem 7 – Comandos BásicosItem 7 – Comandos BásicosUtilize o quadro para dar exemplos dos comandos básicos utilizadosna 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 serexibidas na página. Os alunos devem seguir os mesmos procedimentosjunto com você, colocando em prática todas as etapas abordadas.

Na apostila, há sugestões de exercícios para serem realizados pelosalunos. Nesse momento já é possível perceber os efeitos do JavaScriptJavaScriptJavaScriptJavaScriptJavaScriptnas páginas da Internet.






8. Comandos Condicionais e8. Comandos Condicionais e8. Comandos Condicionais e8. Comandos Condicionais e8. Comandos Condicionais e

de Repetiçãode Repetiçãode Repetiçãode Repetiçãode Repetição– Instrução If.... else

– Instrução While

– Instrução Switch


– Demonstração


– Resolução de Exercíciosna apostila




5h

9. Funções9. Funções9. Funções9. Funções9. Funções – Exposição dialogada

– Demonstração

– Prática Supervisionada:através de exemplos naapostila que os alunosdeverão colocar emprática







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çãoItem 8 – Comandos Condicionais e RepetiçãoItem 8 – Comandos Condicionais e RepetiçãoItem 8 – Comandos Condicionais e RepetiçãoItem 8 – Comandos Condicionais e RepetiçãoMostre como é formada a sintaxe dos comandos condicionais e derepetiçã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 melhoresopções para uma determinada condição.

ItItItItItem 9 – Fem 9 – Fem 9 – Fem 9 – Fem 9 – FunçõesunçõesunçõesunçõesunçõesMostre no quadro e no computador como declarar e utilizar uma fun-ção em JavaScriptJavaScriptJavaScriptJavaScriptJavaScript.

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.






10. Outros Objetos do JavaScript10. Outros Objetos do JavaScript10. Outros Objetos do JavaScript10. Outros Objetos do JavaScript10. Outros Objetos do JavaScript– Objeto DATE

– Métodos do objeto DATE: MétodosGET, Parse e UTC, to GMTString,tolocal e String

– Laboratório deInformática comLinux, KWrite eMozzila Firefoxinstalados com acessoà Internet

– Quadro branco/negroe pincéis



– Demonstração

– Resolução de Exercício na

apostila

6h

4h11. Manipulação de Janelas e For-11. Manipulação de Janelas e For-11. Manipulação de Janelas e For-11. Manipulação de Janelas e For-11. Manipulação de Janelas e For-

muláriosmuláriosmuláriosmuláriosmulários– Objeto WINDOW

– Objeto FORM

– Objeto TEXT

– Objeto PASSWORD

– Objeto TEXTAREA

– Objeto CHECKBOX

– Objeto RADIO

– Objeto SELECT


– Demonstração

– Resolução de 1 Exercício

em sala de aula

– Sugestão de exercício para

ser realizado em ambiente

externo (VER APOSTILA)

3h – Demonstração através deexemplos

– Resolução de Exercício naapostila

– Demonstração através deexemplos

– Resolução de Exercício na

apostila







– Objeto LOCATION 1h – Demonstração através deexemplos

– Resolução de Exercício naapostila






TTTTTodos os contodos os contodos os contodos os contodos os conteúdos abordadoseúdos abordadoseúdos abordadoseúdos abordadoseúdos abordados – Trabalho em grupo:Divida a turma emgrupos de 3 participan-tes. Peça-os queplanejem e construamuma página quepermita fazer cálculosbásicos de umacalculadora ou escolhaum tema da apostilacaso necessário.

O intrutor deve dar osuporte para os grupos,porém deixando queeles raciocinemsozinhos, o máximopossível.




4h


Avaliação do Curso

– Verificação de atendi-mento às expectativasda turma.

– Formulários deavaliação do cursopelo aluno.


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 JavaScriptItem 10 – Outros Objetos do JavaScriptItem 10 – Outros Objetos do JavaScriptItem 10 – Outros Objetos do JavaScriptItem 10 – Outros Objetos do JavaScriptMostre 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 denascimento.

Explique sobre os diferentes métodos do Objeto Date e sua forma deaplicação. Deixe claro aos alunos que, através dos métodos do objetoDate, é possível extrair valores separados de uma data como dia, mêse 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-ospara 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 pelosalunos.

Item 11 – Manipulação de Janelas e FormuláriosItem 11 – Manipulação de Janelas e FormuláriosItem 11 – Manipulação de Janelas e FormuláriosItem 11 – Manipulação de Janelas e FormuláriosItem 11 – Manipulação de Janelas e FormuláriosNeste item, explique para os alunos sobre o uso de outros objetos doJavaScriptJavaScriptJavaScriptJavaScriptJavaScript que permitem manipular janelas (pop-up’s) e FormuláriosHTML. Peça-os que entrem em alguns sites conhecidos e mostre a ne-cessidade do uso destes recursos, demonstrando páginas que fazemseu uso. Fale dos bloqueadores de pop-up’s.

Após entendimento e demonstração do uso de pop-up’s, proponha acriaçã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, podendosolicitar à 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ãoe para que servem os campos de formulário, deixando claro que estessão criados através da linguagem HTML.

Peça-os que crie um formulário de cadastro de currículos, permitindoassim, a utilização de todos os tipos de campos já apresentados nocurso de HTML. Gradativamente após a criação de um determinadoconjunto de campos, vá explicando a importância de usar a lingua-gem JavaScriptJavaScriptJavaScriptJavaScriptJavaScript nos campos já criados no formulário de cadastro decurrículos.

Na apostila, após o objeto Checkbox, há sugestão de um exercício paraser realizado pelos alunos. É importante que você, professor, realize-oantes 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áriosrecursos vistos durante o curso. Através dele, você poderá verificar oaprendizado da turma, orientando e tirando as dúvidas existentes.

Você poderá propor também, após realização do exercício proposto naapostila uma atividade para os alunos, desafiando-os a criar umapá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 criaum 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 maneirade navegação adequada. Veja qual é a melhor alternativa.

Encerramento do Curso Encerramento do Curso Encerramento do Curso Encerramento do Curso Encerramento do CursoTermine o curso agradecendo aos alunos pela atenção e destacando obom trabalho e desempenho dos mesmos.

Diga que agora estão aptos para desenvolver páginas com maiorinteratividade. Basta tentar!

Documents

CONSTRUÇÃO DE WEB SITES HTML E JAVASCRIPT_2