HTML Css Javascript PDF

WEB
HTML, CSS e
JavaScript
Agosto de 2007
Versão 1
Web, HTML, CSS e JavaScript
Todos os direitos reservados para Alfamídia Prow LTDA.
AVISO DE RESPONSABILIDADE
As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM

QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as
precauções tenham sido tomadas na preparação deste material, a Processor Alfamídia
LTDA. não tem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito
à responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou
indiretamente, pelas instruções contidas neste material ou pelo software de computador e
produtos de hardware aqui descritos.
01/08/2007
Alfamídia Prow LTDA

Av. Cristóvão Colombo 1496
Porto Alegre, RS
(51) 3073-2100
http://www.alfamidia.com.br
2 2007  Alfamidia Prow LTDA.

WEB,
HTML, CSS e
JavaScript
UNIDADE 1 ARQUITETURA DE APLICAÇÕES WEB................................................................................................. 7

1.1 INTERNET – UM POUCO DE HISTÓRIA ............................................................................................... 7
1.2 PÁGINAS ESTÁTICAS ....................................................................................................................... 7
1.3 INTRODUÇÃO A CLIENT SIDE SCRIPTS E SERVER SIDE SCRIPTS ...................................................... 8
1.3.1 Client Side Scripts e Server Side Scripts ................................................................................... 8
1.3.2 Client Side scripts – Javascript ................................................................................................. 8
1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP ..................................................................... 9
1.4 AMBIENTE DE DESENVOLVIMENTO ............................................................................................... 11
1.5 SERVIDORES WEB E DE APLICAÇÃO ............................................................................................. 11
1.5.1 O que é um Servidor WEB? ..................................................................................................... 11
1.5.2 O que é um servidor de aplicações? ........................................................................................ 13
1.6 NAVEGADORES ............................................................................................................................. 13
1.6.1 Padronização e protocolos de acesso ...................................................................................... 14
1.6.2 HTTPS (HyperText Transfer Protocol Secure) ....................................................................... 14
UNIDADE 2 INTRODUÇÃO AO HTML E WEB STANDARDS.................................................................................. 16
2.1 A LINGUAGEM HTML E A INTERNET ............................................................................................ 16
2.2 AS LIMITAÇÕES DO HTML ........................................................................................................... 16
2.3 OS WEB STANDARDS .................................................................................................................... 17
2.4 W3C ............................................................................................................................................. 17
2.5 IMPORTÂNCIA DOS WEB STANDARDS ........................................................................................... 17
UNIDADE 3 HTML – RECURSOS BÁSICOS ............................................................................................................. 19
3.1 POR QUE ENTENDER O HTML? ..................................................................................................... 19
3.2 CONCEITOS BÁSICOS DE HTML ................................................................................................... 19
3.3 TAGS BÁSICAS .............................................................................................................................. 20
3.3.1 Exemplo de HTML com Tags Básicas ..................................................................................... 20
3.3.2 Familiarizando-se com o HTML ............................................................................................. 21
3.4 FORMATAÇÃO DE TEXTOS ............................................................................................................ 21
3.4.1 Exemplo de Títulos e Subtítulos ............................................................................................... 22
3.4.2 Exemplo de Alinhamentos ....................................................................................................... 23
3.4.3 Exemplo de Formatação de Textos.......................................................................................... 25
3.5 CORES EM HTML ......................................................................................................................... 26
3.5.1 Utilizando o Vermelho ............................................................................................................. 27
3.5.2 Utilizando o Vermelho com Verde ........................................................................................... 28
UNIDADE 4 INCLUINDO IMAGENS EM UMA PÁGINA ............................................................................................ 29
4.1 FAZENDO REFERÊNCIA A OUTROS DOCUMENTOS ......................................................................... 29
4.1.1 Referência Relativa ................................................................................................................. 29
4.1.2 Referência Absoluta................................................................................................................. 29
4.1.3 Referência Externa .................................................................................................................. 30

4.2 INCLUINDO IMAGENS COM A TAG IMG ......................................................................................... 30

4.2.1 Incluindo Imagens – Exemplo 1 .............................................................................................. 30
4.2.2 Alinhando Imagens – Exemplo2 .............................................................................................. 31
4.3 INCLUINDO IMAGENS NO FUNDO DA PÁGINA – TAG BODY ......................................................... 33
4.3.1 Fundo com Padronagem ......................................................................................................... 34
UNIDADE 5 CRIANDO LINKS .................................................................................................................................... 35
5.1 HIPERLINKS................................................................................................................................... 35
5.1.1 Página com Links – Exemplo 1 ............................................................................................... 35
UNIDADE 6 CRIANDO TABELAS .............................................................................................................................. 37
6.1 TABELAS E LAYOUT DE PÁGINAS .................................................................................................. 37
6.2 CONSTRUINDO UMA TABELA ........................................................................................................ 37
6.2.1 Exemplo de uma Tabela Simples ............................................................................................. 38
6.2.2 Tabelas Mais Sofisticadas ....................................................................................................... 39
6.2.3 Construindo uma Tabela mais Sofisticada .............................................................................. 43
6.2.4 Integrando Recursos em Tabelas............................................................................................. 44
UNIDADE 7 FORMULÁRIOS ...................................................................................................................................... 45
7.1 INTRODUÇÃO A FORMULÁRIOS ..................................................................................................... 45
7.2 CRIANDO UM FORMULÁRIO .......................................................................................................... 45
7.3 UM PRIMEIRO FORMULÁRIO ......................................................................................................... 46
7.4 FORMULÁRIOS COM DIFERENTES TIPOS DO INPUT ...................................................................... 47
7.5 ENTRADA DE VÁRIAS LINHAS DE TEXTO - TEXTAREA ................................................................ 49
7.6 MENUS COM OPÇÕES - SELECT ................................................................................................... 50
UNIDADE 8 INTRODUÇÃO A ESTILOS CSS ............................................................................................................ 52
8.1 O CSS ........................................................................................................................................... 52
8.2 BENEFÍCIOS EM UTILIZAR CSS ..................................................................................................... 52
8.3 CSS PARA SEPARAR CONTEÚDO DA APRESENTAÇÃO ................................................................... 53
8.4 PÁGINAS COM SEMÂNTICA CORRETA ........................................................................................... 54
8.5 SINTAXE DO CSS .......................................................................................................................... 55
8.6 APLICANDO ESTILOS A UMA PÁGINA ............................................................................................. 56
8.6.1 Aplicando estilos a toda a página HTML ................................................................................ 56
8.6.2 Aplicando estilos à apenas uma tag HTML específica ............................................................ 56
8.6.3 Utilizando um arquivo de estilos externo ................................................................................ 57
8.7 FORMAS DE UTILIZAÇÃO DOS SELETORES ..................................................................................... 57
8.7.1 Aplicando estilos à uma tag: ................................................................................................... 57
8.7.2 Definindo estilos para mais um grupo de tags ........................................................................ 58
8.7.3 Definindo uma classe de estilos ............................................................................................... 59
8.7.4 Definindo um ID de estilos ...................................................................................................... 59
8.8 EXERCÍCIOS .................................................................................................................................. 62
UNIDADE 9 CSS NA PRÁTICA .................................................................................................................................. 63
9.1 UTILIZANDO CSS EM SITUAÇÕES REAIS ....................................................................................... 63
9.2 CRIANDO TABELAS COM ESTILOS CSS ......................................................................................... 63
9.3 DADOS EXIBIDOS EM UMA TABELA COM CSS............................................................................... 63
9.4 ALTERANDO O ESTILO CSS .......................................................................................................... 65
9.5 DADOS E FORMULÁRIOS COM CSS................................................................................................ 66
9.6 EXERCÍCIOS COM CSS................................................................................................................... 68
UNIDADE 10 INTRODUÇÃO AO JAVASCRIPT ..................................................................................................... 69

10.1 O QUE É JAVASCRIPT?................................................................................................................... 69

10.2 ONDE OS SCRIPT PODEM SER EXECUTADOS ? ................................................................................ 69
UNIDADE 11 NOÇÕES BÁSICAS DE JAVASCRIPT ............................................................................................. 70
11.1 UTILIZANDO COMENTÁRIOS ......................................................................................................... 70
11.2 TIPOS DE DADOS............................................................................................................................ 70
11.2.1 Tipos de dados Primitivos (por valor) ................................................................................ 71
11.2.2 Tipos de dados Compostos (por referência) ....................................................................... 71
11.2.3 Tipos de dados especiais (undefined e Null) ....................................................................... 71
11.3 VARIÁVEIS .................................................................................................................................... 72
11.4 OPERADORES ................................................................................................................................ 73
11.5 A ESTRUTURA DE UM SCRIPT JAVASCRIPT .................................................................................... 74
11.6 CRIANDO UM SCRIPT EM UMA PÁGINA HTML............................................................................... 75
11.7 ESTRUTURAS DE TESTE ................................................................................................................. 75
11.8 ESTRUTURAS DE REPETIÇÃO ......................................................................................................... 77
11.8.1 While ................................................................................................................................... 77
11.8.2 For ...................................................................................................................................... 77
UNIDADE 12 UTILIZANDO FUNÇÕES ................................................................................................................... 79
12.1 UTILIZANDO FUNÇÕES NO JAVASCRIPT......................................................................................... 79
12.2 AS FUNÇÕES INTRÍNSECAS DO JAVASCRIPT ................................................................................... 79
12.2.1 A função Eval() ................................................................................................................... 79
12.2.2 A função parseInt() e parseFloat() ..................................................................................... 80
12.2.3 Função escape() e unescape() ............................................................................................ 81
12.2.4 A função isNaN() ................................................................................................................ 81
12.3 FUNÇÕES CRIADAS PELO USUÁRIO ................................................................................................ 81
UNIDADE 13 UTILIZANDO OBJETOS ................................................................................................................... 83
13.1 OBJETOS INTRÍNSECOS .................................................................................................................. 83
13.1.1 O Objeto Date ..................................................................................................................... 83
13.1.2 O Objeto Array ................................................................................................................... 84
13.1.3 O Objeto Math .................................................................................................................... 85
13.1.4 O Objeto String ................................................................................................................... 86
13.2 OBJETOS CRIADOS PELO USUÁRIO ................................................................................................. 86
13.3 MÉTODOS...................................................................................................................................... 87
13.3.1 Métodos estáticos................................................................................................................ 87
13.3.2 A declaração this ............................................................................................................ 87
13.3.3 A declaração with ............................................................................................................ 87
UNIDADE 14 CONHECENDO OBJECTS DOM ...................................................................................................... 89
14.1 INTRODUÇÃO A DOM: .................................................................................................................. 89
14.2 O QUE É HTML DOM? ................................................................................................................ 89
14.3 QUANDO DEVEMOS USAR JAVASCRIPT ......................................................................................... 89
14.4 AS DIVISÕES DE DOM ................................................................................................................... 89
14.5 ALTERAR CONTEÚDO COM HTML DOM ...................................................................................... 89
14.6 DOCUMENT OBJECTS .................................................................................................................... 90
14.7 PROPRIEDADES DO OBJETO BODY .................................................................................................. 90
14.8 OBJETO FORM ............................................................................................................................... 91
14.8.1 Atributos do Form............................................................................................................... 93
14.8.2 Métodos de um FORM ........................................................................................................ 93
14.8.3 Eventos de um form ............................................................................................................ 93
14.8.4 “Elements” de um FORM................................................................................................... 94

14.9 MÉTODO GETELEMENTBYID......................................................................................................... 94

14.10 OBJETO FRAMESET ....................................................................................................................... 95
14.10.1 Atributos do Objeto frameset .............................................................................................. 96
14.10.2 Metodos de Objeto Frameset .............................................................................................. 96
14.10.3 Eventos de objeto de um Frameset ..................................................................................... 96
UNIDADE 15 MANIPULANDO FORMS COM DOM ................................................................................................ 98
15.1 TUTORIAL ..................................................................................................................................... 98
15.2 MAPEANDO EVENTOS DE UM FORMULÁRIO ................................................................................. 102
15.2.1 Mapeando Eventos através da tag script .......................................................................... 102
15.2.2 Mapeando eventos através de funções .............................................................................. 103
15.2.3 Mapeamento de eventos através de atribuição ................................................................. 104
15.3 EXTRAINDO INFORMAÇÕES DOS FORMULÁRIOS HTML .............................................................. 105
15.3.1 Buscando informações de formulários não nomeados ..................................................... 105
15.3.2 Buscando informações de formulários nomeados ............................................................ 106
15.4 VALIDANDO INFORMAÇÕES NO FORMULÁRIO ............................................................................. 107
15.4.1 Validando informações de caixas de texto ........................................................................ 107
15.4.2 Validando listas de seleção simples e múltipla (Combo e ListBox) .................................. 108
15.4.3 Validando caixas de escolha simples e múltipla (RadioButton e CheckBox) ................... 110
15.4.4 Criando uma função para mascaras de campos ............................................................... 112
15.5 VALIDAÇÃO COM REGULAR EXPRESSIONS (REGEX)................................................................... 114
UNIDADE 16 OBJETO WINDOW .......................................................................................................................... 115
7.1 MÉTODOS DO OBJETO WINDOW ................................................................................................... 115
UNIDADE 17 - ANEXO 1 PRINCIPAIS TAGS ....................................................................................................... 119
UNIDADE 18 - ANEXO 2 FRAMES ....................................................................................................................... 124
18.1 ESTRUTURA BÁSICA - FRAMESET................................................................................................ 124
18.1.1 Atributos de Frameset ....................................................................................................... 125
18.1.2 Frame................................................................................................................................ 130

Unidade 1
Arquitetura de Aplicações WEB
1.1 Internet – um pouco de história
A Internet teve início nos Estados Unidos em 1969 sob o nome de ARPANET. Composta
inicialmente de quatro computadores interligados, ela tinha como finalidade demonstrar
as potencialidades da construção de redes usando computadores dispersos em uma grande
área. Em 1972, 50 universidades e instituições militares já possuíam conexões.
Hoje a Internet é uma arquitetura de software e hardware interligados que são mantidas
por organizações comerciais e governamentais. Uma de suas principais características é
que não possui um proprietário único, responsável pelo seu funcionamento. Existem
apenas associações e grupos que se dedicam a desenvolver protocolos e procedimentos
para suportar a interligação entre os computadores, ratificar padrões e resolver questões
operacionais.
1.2 Páginas Estáticas

A exibição de páginas estáticas na Web inclui dois componentes: o navegador e o
servidor Web. O processo é o seguinte:
1. O usuário solicita a página digitando a URL em um navegador.
2. O navegador solicita a página ao servidor Web usando o HTTP (Hypertext Transfer
Protocol).
3. O servidor Web envia a página ao navegador no formato HTML.

Solicitação HTTP
4. O navegador interpreta o HTML e exibe a página para o usuário. Ele também

interpreta algumas linguagens de script, como JavaScript.
Processamento de página pelo navegador
1.3 Introdução a Client Side Scripts e Server Side Scripts
1.3.1 Client Side Scripts e Server Side Scripts

Embora existam diversas linguagens com diferentes objetivos, nos exemplos práticos
deste curso estaremos nos concentrando em dois tipos de linguagens muito utilizados em
aplicações Web: client side scripts e server side scripts.
1.3.2 Client Side scripts – Javascript

São códigos de programa que são processados pela estação cliente. Geralmente em
aplicações voltadas à Internet, o código que é executado no cliente cuida apenas de
pequenas consistências de telas e validações de entrada de dados.

Tratando-se de páginas web, os client-side scripts terão de ser processados por um

browser. O maior problema de se utilizar este tipo de artifício em uma aplicação é a
incompatibilidade de interpretação da linguagem entre os browsers. O Microsoft Internet
Explorer, por exemplo, é capaz de interpretar o Visual Basic Script, porém o Netscape
não o faz sem o auxílio de um plug in (que foi desenvolvido por terceiros). Há ainda o
problema de versões muito antigas de navegadores, que não conseguem interpretar
nenhum script.
Em grande parte das situações, não é possível exigir que o usuário final disponha de
determinado produto para acessar a aplicação. Portanto é importante pesar todos estes
fatores ao planejar alguma aplicação com client-side scripts.
A linguagem script mais indicada para se construir client-side scripts é o JavaScript,
devido a sua compatibilidade com os diversos browsers (Internet Explorer, FireFox,
Opera, Safári, etc).
Os scripts client-side são geralmente indicados para:
 menus dinâmicos
 movimento e trocas dinâmicas de imagens e textos
 validação de campos de formulários sem acesso ao servidor
 efeitos na página de acordo com o movimento do mouse
Funcionamento de scripts client-side
1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP

São códigos de programa que são processados no servidor. Devido a este fato, não é
necessário preocupar-se com a linguagem que o código foi criado: o servidor é quem se
encarrega de interpretá-lo e de devolver uma resposta para o cliente. Em páginas Asp, são
esses códigos os maiores responsáveis pelos resultados apresentados, e a linguagem
default utilizada é o Visual Basic Script. Em páginas PHP, a linguagem é o próprio PHP.
Em páginas JSP, a linguagem utilizada é o Java.

A cada acesso a uma página, estes scripts geram dinamicamente uma página que é
enviada para o browser. Desta forma, diferente de scripts no cliente, estes nunca são
vistos pelo cliente, não podendo ser copiados.
Os scripts server-side são geralmente indicados para:
 acesso a bancos de dados
 criação de páginas em tempo real
 lojas virtuais com carrinhos de compra
 sistemas de cadastro e consulta de dados
 sites de busca na Internet
Requisição Normal
Requisição de página dinâmica

1.4 Ambiente de desenvolvimento

Como scripts, sejam server-side (ASP, PHP) ou client-side (Javascript) são arquivos do
tipo texto (ASCII), eles podem ser escritos em um editor de textos comum – Edit ou
Notepad, por exemplo. Para o desenvolvimento em ASP existe também o MS Visual
Studio(ASP.NET), que proporciona um ambiente mais agradável de desenvolvimento,
mas exige os mesmos conhecimentos do programador.
Diferentes fabricantes desenvolvem ambientes de desenvolvimento, que podem ou não
ser específicos para uma linguagem. A Adobe, por exemplo, tem como produto o
Dreamweaver, que além de definir a digramação de sites, pode da mesma forma ser
utilizado como ambiente de desenvolvimento
Também em software livre existem inúmeros ambientes de desenvolvimento para Java,
PHP e mesmo para linguagens proprietárias como ASP.
1.5 Servidores WEB e de Aplicação
1.5.1 O que é um Servidor WEB?

Um servidor web é um aplicativo responsável por fornecer ao computador do cliente
(usuários de sites e páginas eletrônicas), em tempo real, os dados solicitados. O processo
se inicia com a conexão entre o computador onde está instalado o servidor e o
computador do cliente; como na web não é possível prever a que hora se dará essa
conexão, os servidores precisam estar disponíveis dia e noite. A partir daí é processado o
pedido do cliente, e conforme as restrições de segurança e a existência da informação
solicitada, o servidor devolve os dados.
Quando falamos em servidor web, estamos na verdade falando de servidores capazes de
lidar com o protocolo HTTP, que é o padrão para transmissão de hipertexto. Muitos
servidores trabalham, paralelamente, com outros protocolos, como HTTPS (que é o
HTTP "seguro"), FTP, RPC, etc.
Além de transmitir páginas HTML, imagens e aplicativos (Java, Microsoft, etc), os
servidores também podem executar programas e scripts, interagindo mais com o usuário.

 Computador Cliente: Computador utilizado pelo usuário.

 Computador Servidor: Computador utilizado para armazenar sites, sistemas,
arquivos e conteúdos em geral.
Resumo: Servidor WEB é um programa de computador que responde requisições.

Exemplo: quando digito www.alfamidia.com.br na barra de endereços do navegador e
teclo ENTER, o meu computador localiza o servidor onde está hospedado o site, que
responde a minha solicitação. Os servidores mais comuns são o IIS da Microsoft, o
Apache da Apache Software Foundation e o TomCat da Apache Jakarta Project. Abaixo,
listamos alguns servidores existentes no mercado:
 Apache HTTP Server
 BadBlue
 Boa
 Caudium, uma derivação do Roxen
 Covalent Enterprise Ready Server, baseado no Apache HTTP Server
 Fnord
 IBM HTTP Server (baseado no Apache HTTP Server), antigo Domino Go
Webserver
 Internet Information Services (IIS) da Microsoft, incluso no Windows
 Light HTTP Server (lighttpd)
 NaviServer
 Oracle HTTP Server, baseado no Apache HTTP Server
 Roxen
 TomCat da Apache Jakarta Project.
 thttpd da ACME Laboratories
 Zeus Web Server

1.5.2 O que é um servidor de aplicações?

Um servidor de aplicação é um software que disponibiliza um ambiente para a instalação
e execução de certas aplicações. O objetivo é disponibilizar uma plataforma, que abstraia
do desenvolvedor de software algumas das complexidades de um sistema computacional.
No desenvolvimento de aplicações comerciais, por exemplo, o foco dos desenvolvedores
deve ser a resolução de problemas relacionados ao negócio da empresa, e não de questões
de infraestrutura da aplicação. O servidor de aplicações responde a algumas questões
comuns à todas as aplicações, como segurança, garantia de disponibilidade,
balanceamento de carga e tratamento de exceções.
1.5.2.1 J2EE(Java 2 Enterprise Edition)

Devido a popularização da plataforma Java, o termo servidor de aplicação é
frequentemente uma referência a "Servidor de aplicação J2EE". O servidor WebSphere
Application Server da IBM e o WebLogic Server da BEA Systems são dois dos mais
conhecidos servidores J2EE comerciais. Alguns servidores de software livre também são
muito utilizados, como JBoss, JOnAS e Apache Geronimo. Como mencionado, a
linguagem de programação destes softwares é Java. Os módulos Web são implementados
através de servlets e JSP e a lógica de negócio através de EJBs. A plataforma J2EE
disponibiliza padrões para os containers Web e EJB. O Tomcat é um exemplo de
container de software livre, onde os módulos Web podem ser publicados.
1.5.2.2 NET
Na plataforma Microsoft .NET, o servidor de aplicação não é visto como um elemento
separado. O sistema operacional Windows 2003 contém a infraestrutura necessária para
servir aplicações, como o IIS, COM+ e Framework .NET.
1.6 Navegadores
Um dos aspectos mais visados pelos usuários e desenvolvedores é a segurança dos
navegadores, devido ao crescimento e as inovações das técnicas de invasões e infecções
que existem hoje em dia na internet.
Atualmente, os navegadores são “obrigados” a ter proteções contra scripts maliciosos,
javascripts entre outros conteúdos que poderiam existir em sites que os mesmos acessam.
Atualmente o Mozilla Firefox é considerado o navegador mais seguro (principalmente em
relação ao Internet Explorer), mas a Microsoft está lançando periodicamente atualizações
em seu Windows Update. Na área de segurança o Firefox possui um interruptor de scripts
(caso venham a atrapalhar sua navegação ou caso sejam maliciosos) e uma proteção
contra sites falsos que podem ocasionar em ataques do tipo phishing entre outros.

1.6.1 Padronização e protocolos de acesso

Navegadores se comunicam com servidores Web usando o protocolo HTTP (HyperText
Transfer Protocol), que são por sua vez identificadas por uma URL (ex:
http://www.alfamidia.com.br). O protocolo HTTP permite aos navegadores tanto
recuperar como submeter informações para um servidor de Internet. O formato de
arquivo que uma página usa geralmente é o HTML, sendo identificado no protocolo
HTTP através de um indicador do seu tipo de conteúdo (content type) MIME.
A maioria dos navegadores suporta uma grande variedade de formatos em adição ao
HTML, tais como JPEG, GIF e PNG para imagens, e também podem geralmente ser
estendidos para suportar outros formatos através de plugins. Da mesma forma, muitos
navegadores suportam vários outros tipos de URLs com seus protocolos correspondentes,
tais como ftp, gopher, https(uma versão encriptada via SSL do HTTP). A combinação do
tipo de conteúdo e da URL do protocolo de transferência de arquivos permite que
desenvolvedores de páginas Web publiquem imagens, animações, sons e vídeo nas
mesmas, ou tornem tais conteúdos acessíveis através dessas páginas.
1.6.2 HTTPS (HyperText Transfer Protocol Secure)

É uma implementação do protocolo HTTP sobre uma camada SSL (Secure Sockets
Layer), criado pela Netscape Corporation e vem se tornando sinônimo de segurança para
aplicações que utilizam a internet para efetuarem negócios on-line. O SSL foi concebido
primordialmente pela necessidade de se ter um mecanismo que possibilitasse o sigilo
absoluto dos dados e a garantia de autenticidade dos mesmos nas transações eletrônicas
on-line. Desde sua concepção, o protocolo SSL vem se tornando padrão de fato a cada
dia. As principais características do SSL são:
 Segurança em conexões cliente/servidor: o SSL garante o sigilo dos dados trocados
entre as partes envolvidas na conexão através do uso de criptografia simétrica. A fim
de evitar que as mensagens, mesmo decifradas, sejam modificadas e com isso um
ataque de escuta ativa seja possível, o SSL adiciona à todas as mensagens um MAC
(Message Authentication Code). Calculado a partir de funções de hash seguras, o
MAC garante a integridade das mensagens trocadas. Além de sigilo e integridade, o
SSL ainda provê a autenticação das partes envolvidas a fim de garantir e verificar a
identidade das mesmas. Neste processo, o SSL utiliza criptografia assimétrica e
certificados digitais (ex: todas as URLs que aparecem o https:// antes do endereço).
 Independência de protocolo: o SSL roda sobre qualquer protocolo de transporte
confiável. Porém, a maioria das implementações são feitas para redes TCP/IP.
 Interoperabilidade: dado a sua especificação bem detalhada e o uso de algoritmos
criptográficos conhecidos, diferentes implementações do protocolo tem a garantia de
interagir entre si.
 Extensibilidade: dado a necessidade, permitir que novos parâmetros e métodos de
criptografia (assimétrica ou simétrica) sejam incorporados ao protocolo, sem que seja
necessária a criação de um novo protocolo ou a implementação inteira de uma nova
biblioteca.

 Eficiência: devido a demanda por recursos computacionais que este tipo de operação
requer, o protocolo dispõe da opção de armazenamento em cache de informações
referentes a sessão, diminuindo desta forma o esforço computacional em sucessivas
conexões.
 Vantagens: O SSL preenche todos os critérios que o fazem aceitável para o uso nas
transmissões das mais sensíveis informações, como dados pessoais e números do
cartão de crédito. A aplicação pode optar entre utilizar todos ou somente uma parte
desses critérios dependendo do tipo e natureza das transações que estão sendo
efetuadas.
A criptografia é a arte de empregar certas regras em mensagens ou informações de forma
a esconder seu verdadeiro conteúdo. A mensagem ou informação codificada pelo uso da
criptografia, que pode ser transmitida por meios de comunicação considerados inseguros,
pois só o receptor, conhecedor das regras poderá reverter o processo e ler o documento
original.
Com o SSL, uma conexão é estabelecida onde todos os dados trafegam criptografados
pela rede, sem que haja o risco de serem interceptados e decifrados por alguém. Para
garantir a integridade dos dados, é necessário um protocolo seguro para orientar a
conexão, como por exemplo, o TCP/IP. O uso do SSL se disseminou por meio de sua
implementação nos EURZVHUV da Netscape, fornecendo aos usuários uma forma
segura de acessar servidores ZHE, permitindo inclusive a execução de transações
comerciais. Sua versão mais recente é a 3.0.
Seu funcionamento ocorre por meio do sistema de criptografia de chaves públicas e
privadas desenvolvido por Rivest, Shamir e Adleman, o RSA. O SSL é mais usado nos
browsers, como Mozilla, Internet Explorer entre outros.

Unidade 2
Introdução ao HTML e
Web Standards
2.1 A Linguagem HTML e a Internet
Um dos principais elementos que levaram a popularização da Internet foi a World Wide
Web (teia de abrangência mundial), também conhecida como WWW. Trata-se de uma
nova forma dos usuários navegarem pelas informações e arquivos disponíveis nos vários
computadores ligados a Internet. O modelo WWW é tratar todos os dados da Internet
como hipertexto, isto é, vinculações entre diferentes documentos, para permitir que as
informações sejam exploradas interativamente e não apenas de uma forma linear.
A principal linguagem que popularizou a Web, e que ainda é a linguagem mais utilizada é
o HTML (Hypertext Markup Language), uma linguagem criada com o objetivo de
formatar informações de um texto e definir os hiperlinks entre um texto e outro, ou seja,
os pontos de vinculação entre documentos.
Hoje existem diversas ferramentas que permitem navegar na Internet e visualizar as
páginas HTML. Estas ferramentas são popularmente conhecidas como navegadores ou
browsers. Da mesma forma, existem também inúmeros editores visuais, dos quais o
Adobe Dreamweaver é o mais utilizado, que gravam arquivos no formato HTML.
2.2 As Limitações do HTML

A linguagem HTML originalmente tinha como propósito apenas definir a estrutura de um
documento e os hiperlinks entre documentos. Assim, ela permitia especificar quando
iniciava e terminava um parágrafo, definir títulos, sub-títulos, listas numeradas, textos em
itálico e negrito e outras características semelhantes.
Quase que imediatamente após seu surgimento, porém, novos recursos começaram a ser
criados, principalmente voltados para a construção de layouts mais sofisticados. Neste
momento surgiram recursos para especificar imagens de fundo, alinhar elementos em
tabelas, posicionar imagens, entre outros. Muitas destas novidades eram iniciativa das
empresas que desenvolviam os principais navegadores utilizados na internet, o que muitas
vezes obrigava o Web Designer a criar páginas diferentes para cada navegador, para
aproveitar ao máximo os novos recursos recém lançados.
Dois problemas tiveram sua origem derivada deste contexto: a falta de uma padronização,
pois diferentes empresas criavam novos recursos próprios para o HTML, e a mistura entre
layout e conteúdo. Ambos, problemas endereçados pelos Web Standards, como será visto
ao longo deste curso.

2.3 Os Web Standards

O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos
reguladores, estabeleceu tecnologias para criação e interpretação de conteúdo para a Web,
visando resolver de forma definitiva os problemas mencionados anteriormente.
Estas tecnologias, a que chamamos Web Standards, têm como objetivo principal fazer
com que o conteúdo desenvolvido dentro destes padrões possa ser visualizado
independente do equipamento (computador, PDA, celular), do tipo do navegador (IE,
Mozilla, Opera, Netscape, etc) e da forma (banda de conexão) com que o usuário estiver
acessando a Internet. É um conceito de acessibilidade estendido.
Um dos objetivos dos Web Standards é a separação do conteúdo, definido através de
linguagens estruturais como XHTML e XML, e do layout, definido através de linguagens
de apresentação, em particular o CSS (Cascading Style Sheet). Outros Web Standards,
como o DOM (Document Object Model) e o ECMAScript 262 (versão padrão do
JavaScript) são voltados para a programação em páginas Web.
2.4 W3C
O que é o W3C?
O World Wide Web Consortium (W3C) é um consorcio de indústrias dedicado em levar a
Web ao seu potencial máximo. Fundada em 1994 por Tim Berners-Lee (invertor da
Web), o W3C tem mais de 450 organizações associadas, incluindo Microsoft, America
Online (incorporou a Netscape Communications), Apple ,Adobe, Macromedia, Sun
Microsystems, e uma variedade de outras empresas fabricantes de hardware e software,
provedores de conteúdo, instituições acadêmicas e empresas de telecomunicações. O
consórcio tem o apoio (estrutura física e intelectual) de três instituições de pesquisa: MIT
nos EUA, INRIA na Europa e Keio University no Japão.
Qual a sua função?
O W3C desenvolve especificações abertas (padrões) para aumentar a interoperabilidade
de produtos relacionados com a Web. As recomendações do W3C são desenvolvidas por
grupos de trabalhos originados das organizações membros e experts convidados.
2.5 Importância dos Web Standards

Conceber e construir sites usando estes padrões simplifica o processo e reduz os custos de
produção, obtendo-se ao mesmo tempo sites acessíveis a um maior número de pessoas e
dispositivos com acesso a Internet. Os sites desenvolvidos desta forma continuarão a
funcionar corretamente à medida que os browsers tradicionais evoluem e novos
dispositivos de Internet surgem no mercado.
"Web standards têm o objetivo de ser uma base comum... um fundamento para a World
Wide Web para que navegadores e outros programas compreendam o mesmo
vocabulário básico".

Eric Meyer – Autor do livro Cascading Style Sheets: The Definitive Guide.

Unidade 3
HTML – Recursos Básicos
3.1 Por que Entender o HTML?
O HTML é uma linguagem de marcação utilizada para criar e formatar páginas ou
documentos Web. Com o tempo passou a ser utilizado para descrever a estrutura dos
documentos. O HTML permite criar documentos com componentes como cabeçalhos
(h1,h2,....), parágrafos (p), quebras de linha (br), tabelas (table, tr, td, th), listas (li, ul, ol),
imagens (img) e links (a). Uma tecnologia complementar foi criada, o Cascading Style
Sheets (CSS), responsável pela apresentação (formatação visual) dos documentos.
Novas especificações HTML não serão mais definidas. HTML 4.1 é o último padrão
HTML, e agora substituído pelo XHTML 1.0. No entanto, o XHTML não é
substancialmente diferente do HTML, sendo na verdade um subconjunto do HTML que
segue as regras do XML. Assim sendo, ao dominarmos o HTML, estaremos também
adquirindo os conhecimentos necessários para desenvolver também em XHTML.
3.2 Conceitos Básicos de HTML

Quando um browser exibe uma página HTML, ele lê um arquivo texto (que pode ser
aberto em qualquer editor de texto) com o conteúdo do site e marcações, chamadas tags,
que informam os elementos da página e sua formatação.
As marcações do HTML - tags - consistem do sinal (<), (o símbolo de "menor que"),
seguida pelo nome da marcação e fechada por (>) ("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O
símbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido
por uma barra (/) e precedido pelo texto referente.
No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível de
cabeçalho e </H1> avisa que o cabeçalho acabou.
Há tags que não exigem o fechamento, funcionando – via de regra – com ou sem a
definição de uma tag de fechamento, como é o caso da tag de definição de parágrafo <P>.
O padrão mais recente de uso do HTML, entretanto, recomenda que esta tag seja sempre
fechada, para termos um padrão mais próximo do utilizado em XHTML, como será
explicado nas unidades finais desta apostila.
Outras tags efetivamente não tem marcações de final, como a tag <BR> que apenas
define uma linha em branco, e a tag <HR> que exibe uma linha divisória.
Este tutorial tem por objetivo mostrar como criar e exibir páginas HTML. Tais páginas
são criadas a partir de arquivos texto ASCII, contendo caracteres de marcação da
linguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão .html
ou .htm

3.3 Tags Básicas

A seguir apresentamos as tags básicas de uma página HTML, que são suficientes para
criar uma página mínima. Nas lições seguintes apresentaremos diretamente exercícios
que incluirão novas tags que permitirão controlar diversas características da página.
Estas e todas as futuras tags são mostradas dentro de uma estrutura de tabela, para
facilitar sua consulta, e são repetidas em anexo ao final deste material, de forma a facilitar
seu uso no futuro como material de referência.
TAG O QUE FAZ
 Insere comentários nas páginas
<html> Toda página HTML deve estar entre o tag de início de um

documento HTML e o tag de fim deste documento.
<head> Envolvem a seção de cabeçalho do documento, no qual são

especificadas informações que não são exibidas na página,
como título do documento e informações sobre o assunto da
página.
<title> Indica o título do documento para o Browser. Geralmente os

Browsers apresentam este título na barra de título da sua
Janela no Windows
<body> Envolvem a seção de corpo do documento. Aqui fica o

conteúdo principal da Home Page. Opcionalmente podemos
indicar um arquivo de imagem para formar o fundo, usando
a opção: BACKGROUND.
<br> Insere uma quebra de linha
3.3.1 Exemplo de HTML com Tags Básicas

Todo documento HTML deve ser identificado como HTML ( <html>...</html> ), ter uma
área de cabeçalho ( <head>...</head> ) com o nome do documento ( <title> </title> ), um
título principal e uma área definida como corpo ( <body>...</body> ) do conteúdo do
documento. Como o exemplo a seguir, basico1.html:
<html>
<head>
<title>Minha primeira página</title>
</head>
<body>


Minha Primeira Página

</body>
</html>
3.3.2 Familiarizando-se com o HTML

Seguindo as orientações do instrutor, construa agora a sua primeira página HTML. Copie
ou crie um texto, utilizando o Dreamweaver, o bloco de notas do Windows ou qualquer
editor de texto. Salve e abra pelo browser que estiver instalado no computador.
Apenas com os códigos acima apresentados, é fácil perceber limitações. Não há ainda
como definir títulos, salientar palavras ou frases ou fazer qualquer tipo de estruturação da
informação, exceto quebrar os parágrafos utilizando a tag <BR>.
Para começar a melhorar sua primeira página, observe a seção seguinte. Acompanhe os
exemplos mostrados com o instrutor e desenvolva novas páginas conforme orientação.
3.4 Formatação de Textos

Mesmo em uma página apenas com textos, é fundamental podermos estruturar a
informação, de forma a deixá-la mais legível. Para tanto, novas tags se fazem necessárias,
como as mostradas na próxima tabela.
TAG O QUE FAZ
<hn> Marca um título. Sendo que “n” representa um valor que

pode ser de 1 a 6, o tamanho muda de forma decrescente,
ou seja, o número 1 é o maior tamanho do título.
<hr> Insere uma linha horizontal
<p> Marca um parágrafo
<center> Centraliza todo o conteúdo entre as tags <center> e

</center>
<b> Coloca o texto em negrito
<i> Coloca o texto em itálico

<u> Coloca o texto sublinhado
<tt> Coloca o texto em fonte monoespaçada. (fonte

Courier,como máquina de escrever)
<font> Modifica a formatação do texto.

Atributos:
Size = define o tamanho da letra. Ex: <font
size=5>Texto</font>
Face = define o estilo da letra. Ex: <font
face=verdana>Texto</font>
Color = define a cor da letra. Ex:<font
color=red>Texto</font>
<pre> Marca um trecho formatado com fonte monoespaçada. A

formatação com espaços e entrada de parágrafos é
respeitada.
<basefont> Modifica a formatação padrão do texto.

Ex: <basefont size=5>
3.4.1 Exemplo de Títulos e Subtítulos

Na listagem abaixo faremos um novo exemplo e utilizaremos algumas das novas tags.
Digite a listagem abaixo e salve com o nome basico2.html.


<html>
<head>
<title>Melhorando minha home page</title>
</head>

<body>
<h1>Este é o título Principal</h1>
<h2>Este é o título Secundário</h2>
<h3>Estou adorando criar páginas</h3>
<hr>
<p>Este é o 1º primeiro paragráfo
<br>Esta é 2ª linha do 1º paragráfo
</p>
<p>Com este recurso inicio um paragráfo
<br>E com este recurso quebro uma linha

</p>
<hr>

</body>
</html>

Veja o resultado no browser.
3.4.2 Exemplo de Alinhamentos

O alinhamento padrão que vem configurado nos navegadores é a esquerda, porém em
muitos casos podemos querer que todo ou parte do texto tenha outros alinhamentos Para
entender isto, digite a listagem abaixo, e salve como basico3.html, e acompanhe o
conceito de tag que marcam o alinhamento dos títulos e parágrafos nas páginas.
<html>
<head>
<title>Tags para Alinhamentos</title>
</head>
<body>
<h4 align=center>Título Centralizado</h4>
<h4 align=right>Título À Direita</h4>
<h4 align=left> Título À Esquerda<h4>
<hr>
<p align=center > Parágrafo ao Centro </p>
<p align=right >Parágrafo à direita </p>

<p align=left >Paragráfo à esquerda </p>

<p align=justify >Este é um texto justificado. Na linguagem HTML temos vários tipos de
alinhamentos que você poderá aplicar em sua página. Nesta parte do livro,veremos como
alinhar linhas, parágrafos e cabeçalhos. </p>
<br>
<br>
<hr width=50% align=center >
<blockquote>Texto com mais margem</blockquote >
<blockquote><blockquote>Tem com mais margem ainda </blockquote> </blockquote>
</body>
</html>
Para ver o resultado deste exemplo abra o browser:

3.4.3 Exemplo de Formatação de Textos

Neste exemplo trabalharemos com a formatação das letras bem como cor, tamanho de
fonte e estilo. Para entender isto, digite a listagem abaixo, e salve como basico4.html,
<html>
<head>
<title>Formatando Estilos</title>
</head>
<body>
<center>Mudando o Estilo dos Caracteres</center>
<p>
<b>Texto em Negrito</b><br>
<i>Texto em Itálico</i><br>
<u>Texto sublinhado</u><br>
<tt>Texto Monoespaçado</tt><br>
<br><font color=red >Texto em Vermelho</font>
<br><font size=5>Texto em Tamanho 5</font>
<br><font face=verdana>Texto com a letra Verdana</font>
<br><center>
<font color=blue face=verdana size=5><b>Olá Mundo!!!</b></font></center>
<br>Você poderá os atributos para cada tipo de letra!
<br>
<font color=blue size=6>O</font><font color=red size=4>lá Mundo</font>
<br>
<pre>
Estamos progredindo
no curso de HTML.
Este tag permite que todos os espaços feitos no código fonte
sejam respeitados. Certo?
</pre>
</p>
</body>
</html>

3.5 Cores em HTML

A definição de cores já foi vista como atributo da tag <font>. Entretanto, para
efetivamente utilizarmos as cores de forma eficiente no código HTML e necessário
entender como as mesmas são especificadas na linguagem.
O uso de cores em HTML pode ser feito através de duas formas básicas, utilizando o
nome em inglês de algumas cores específicas ou fazendo uso do código hexadecimal
RGB. O segundo método é mais recomendável pois permite a definição de todas as cores
possíveis.
Exemplos de uso de cores em fonte:
<font color=#000000>texto em preto</font>

<font color=#ffffff>texto em branco</font>
<font color=#ff0000>texto em vermelho</font>
Nos exemplos acima, valores diferentes de código permitem a definição de cores

diferentes. É importante entendermos como estas cores são formadas para podermos
manipular estes códigos, porém na prática geralmente normalmente será utilizado algum

editor visual para escolher a cor desejada. Abaixo vamos fazer alguns exercícios para
entendermos melhor o uso de cores, utilizando as tags que já vimos anteriormente.
3.5.1 Utilizando o Vermelho

Digite o código abaixo como cores1.html
<html>
<head><title>vermelhos</title></head>
<body>
<br>
<font color=#330000>vermelho escuro, apenas 51 de vermelho e 0 de verde e azul
</font>
<br>
<font color=#660000>vermelho menos escuro
</font>
<br>
<font color=#990000>vermelhos cada vez mais claros
</font>
<br>
<font color=#cc0000>vermelho claro
</font>
<br>
<font color=#ff0000>o vermelho mais claro e puro possível
</font>
</body>
</html>
Observe o resultado em seu browser para poder conferir as tonalidades e note que não
foram utilizadas as cores verde e azul. Obviamente podemos criar vários tons de
vermelho com parcelas também das outras cores.

3.5.2 Utilizando o Vermelho com Verde

O exemplo abaixo, cores2.html, utiliza cores misturando tons vermelhos e verde. Abaixo,
uma imagem mostra a tela resultante, mas é recomendável visualizar no browser para
observar as cores em si.
<html>
<head>
<title>vermelhos e verdes</title>
</head>
<body>
<br><font color=#ff9900>laranja: vermelho com algum verde</font>
<br><font color =#ffff00>amarelo (vermelho + verde)</font>
<br><font color =#99ff00>amarelo esverdeado</font>
<br><font color =#00ff00>verde puro</font>
</body>
</html>
Observe a imagem abaixo em seu browser para poder conferir as cores:

Unidade 4
Incluindo Imagens em uma Página
4.1 Fazendo Referência a Outros Documentos
Como foi mostrado anteriormente, uma página HTML é apenas uma texto com algumas
tags que definem características da página. Entretanto, quando observamos uma página
HTML normalmente visualizamos elementos gráficos que não podem ser definidos desta
forma, como, por exemplo, fotos.
A forma que o HTML trata esta questão é muito simples: todas as imagens da página –
assim como muitos outros elementos que veremos ao longo deste curso – não estão no
mesmo arquivo da página HTML, mas sim em outros arquivos.
Antes de analisarmos a tag que define a utilização de imagens, vamos primeiro entender
algumas formas de referência externa que podemos encontrar em documentos HTML
4.1.1 Referência Relativa

Vamos imaginar que os arquivos que desejamos referenciar estejam no mesmo diretório
de nossa página HTML. Neste caso, a referência pode ser feita simplesmente
especificando o nome do arquivo em questão. Observe a parte em negrito do exemplo
abaixo (os outros elementos serão estudados em seguida):
<img src=banner1.jpg>
Também podemos ter uma imagem ou outro arquivo referenciado que esteja em outro
diretório, acima ou abaixo do diretório em que está nossa página HTML, como nos
exemplos abaixo:
<img src=imagens/banner1jpg>
<img src=../banner1.jpg>
4.1.2 Referência Absoluta

Em alguns casos, pode não ser interessante mantermos apenas referências relativas, em
especial se nosso site for um pouco mais complexo. Podemos ter muitas páginas que
desejamos colocar em diferentes diretórios que utilizem uma mesma imagem. Nestes
casos, muitas vezes é mais interessante criarmos um diretório padrão que seja
referenciado por todas as páginas da mesma forma, independente da localização de cada
página. O exemplo abaixo mostra este caso, fazendo uso de um diretório imagens na raiz
do site:
<img src=/imagens/banner1.jpg>

4.1.3 Referência Externa

Poderemos ter ainda situações em que temos sites em diferentes domínios fazendo
referência ao mesmo arquivo, ou podemos querer utilizar, por exemplo, uma imagem que
esteja localizada em outro site da Internet. Nestes casos fazemos uma referência externa
especificando a URL completa do site:
<img src=http://www.alfamidia.com.br/imagens/banner1.jpg>
Obs: nestes casos nos podemos nos abster de incluir a especificação http://, de outro
modo o browser não tem como saber que não se trata de um diretório local.
4.2 Incluindo Imagens com a Tag IMG

Uma vez entendido o conceito de fazer referências a outros arquivos, incluir imagens se
tornou bastante simples, basta conhecermos algumas características da tag imagem,
conforme apresentado na tabela abaixo.
TAG O QUE FAZ
<img> Insere uma imagem

Atributos
src=indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da
imagem
align=left faz a imagem flutuar a esquerda enquanto o texto
circunda imagem à direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto
circunda imagem à esquerda.
alt=”n” indica o texto para ser exibido quando o navegador
não exibe a imagem. Sendo que n é o título que identifique
a imagem.
Exemplo: <img src=fig.jp alt=”Esta é uma imagem legal”>
4.2.1 Incluindo Imagens – Exemplo 1

Neste exercício exercitaremos os tags que permitem a inserção de imagens em uma
página. Utilizaremos uma imagem do próprio site da Alfamídia. Crie o arquivo como
imagem1.html
<html>

<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos trabalhando com imagens</h1>
<img src=http://www.alfamidia.com.br/images/banner1.jpg>
<br>O comando acima inseriu uma imagem do site da Alfamídia nesta página.
</body>
</html>
4.2.2 Alinhando Imagens – Exemplo2

Neste exemplo trabalharemos com o alinhamento da imagem e do texto. Para entender
isto, digite a listagem a seguir, e salve como imagens2.html
<html>
<head><title>Imagens</title>
</head>
<body>
Note neste exemplo que a imagem <img src=imagem1.gif> está entre o texto
<br><hr><br>
<img src=imagem1.gif align=top>

Neste exemplo a imagem está à esquerda e o texto está no topo.
Observe que quando o texto continua na linha seguinte ele segue para abaixo da imagem
<br><hr><br>

<img src=imagem1.gif align=middle>A imagem está à esquerda e o texto no centro, porém a

situação da quebra de linha persiste, com o texto seguindo, na linha seguinte, para
abaixo da imagem.
<br><hr><br>
<img src=imagem1.gif align=left>Neste exemplo a imagem ficou alinhada à esquerda,

permitindo que o texto ficasse todo à direita ao redor da imagem. Utilize este recurso
toda vez que desejar que o texto fique ao lado da imagem
<br><hr><br>
<img src=imagem1.gif align=right>Neste exemplo a imagem ficou alinhada à direita,

permitindo que o texto ficasse todo à esquerda ao redor da imagem.
</body>
</html>
Acompanhe com o professor como cada comando de alinhamento posiciona de forma
diferente o texto e a imagem.

4.3 Incluindo Imagens no Fundo da Página – Tag BODY

É muito comum encontrarmos páginas com uma imagem ou padronagem como fundo.
Para entendermos como isto é feito, teremos que utilizar um parâmetro de uma tag vista
anteriormente, a tag <BODY>.

Quando definimos uma imagem para o fundo de uma página, se a página mostrada for
maior que a imagem, ela será replicada na horizontal, vertical ou em ambas as dimensões.

Esta característica pode inclusive ser utilizada com um recurso de layout, permitindo, por
exemplo, a repetição de um padrão.
4.3.1 Fundo com Padronagem

No exemplo a seguir, imagem3.html, uma padronagem é utilizada como fundo. Em geral,
para um resultado esteticamente interessante, são utilizadas padronagens muito mais
suaves, ou imagens maiores que a tela.
<html>
<head><title>Exemplo com Fundo</title>
</head>
<body background=padrao.gif>
<img src=imagem1.gif>
</body>
</html>

Unidade 5
Criando Links
5.1 Hiperlinks
Hiperlink é o elemento fundamental da navegação pela internet. O conceito é simples:
selecionando-se determinado elemento em uma página Web, somos levados para uma
nova página.
Para criarmos um site inteiro precisamos fazer uso destes links para estabelecer a ligação
entre as páginas de nosso site, de forma que, através de um único clique sobre a frase ou
imagem, navegarmos para algum lugar no site ou na WEB.
Como padrão em nosso curso, observe a tag utilizada para a definição dos hiperlinks e
trabalhe junto com o instrutor nos exemplos:
TAG O QUE FAZ
<a> Define um link

Atributos
Href = indica o endereço do link.
Target = define onde o link será aberto:
 _blank define que será aberta uma nova janela.
 _top define que irá abrir na mesma janela.
 _self define que será aberto no mesmo Frame.
 _parent define que irá abrir a em um Frame Pai.
5.1.1 Página com Links – Exemplo 1

Confira a página link1.html:
<html>
<head><title>Estudando links</title></head>
<body>
<h3>Exemplo de links internos</h3>
<a href=exemplo1.html>Exemplo1</a>
<a href=exemplo2.html>Exemplo2</a>
<hr>
<h3>Exemplo de links externos</h3>

<a href=http://www.alfamidia.com.br>Visite o site da alfamídia</a>

<br><a href=http://www.adobe.com>Site da Adobe</a>
<h3>Você também pode usar imagens como links, mas é recomendável utilizar borda=0 para
não aparecer uma moldura de link.. Observe que neste exemplo o link abre em uma nova
janela</h3>
<a href=exemplo3.html target=_top><img src= imagem1.gif></a>
</body>
</html>
Veja o resultado na figura a seguir:

Unidade 6
Criando TABELAS
6.1 Tabelas e Layout de Páginas
O recurso de tabelas foi originalmente criado, no HTML, com o objetivo de organizar
informações e exibir dados na forma de planilhas. Este ainda é um dos principais usos de
planilhas em HTML, e será bastante explorado nesta unidade.
Entretanto, com este recurso também foi possível exercer um controle muito maior sobre
o layout de uma página HTML. Utilizando uma série de técnicas envolvendo imagens de
1 pixel de altura, planilhas com bordas invisíveis e formas inteligentes de posicionar
imagens, é possível criar layouts bastante sofisticados.
Esta técnica está caindo em desuso, porém, pois com o HTML 4.1 e o CSS é possível
controlar de forma bastante precisa a diagramação de um site sem ter que utilizar as
tabelas como um subterfúgio. Nas próximas unidades serão apresentadas técnicas de
diagramação sem o uso de tabelas (tableless design), enquanto que nesta unidade o foco é
no uso de tabelas para a exibição de informações em planilhas.
6.2 Construindo uma Tabela

Tabelas são definidas, em HTML, com a definição das linhas e, dentro das linhas, das
células de cada coluna. Com apenas 4 tags, vistas na tabela seguinte, é possível definir
diversos tipos de tabelas:
TAG O QUE FAZ
<table> Define uma tabela. Antes e depois de uma tabela, acontece

sempre uma quebra de linha.
Atributos
Border: define espessura da borda da tabela
Cellspacing: espaço entre cada célula
Cellpadding: distância entre borda e conteúdo de cada
célula.
Width: largura da tabela, em pixels ou valor percentual
<tr> Define uma linha normal da tabela (table row).

Atributos
Align: valores left, right e center definem o alinhamento

horizontal.
Valign: valores top, middle e bottom definem o alinhamento
vertical.
<td> Esta é a marcação que define cada célula de uma tabela.

As células de uma tabela devem sempre aparecer entre as
marcações de linhas (<tr> e </tr>). Como padrão, o texto
nas células é alinhado a esquerda.
Atributos
horizontal.
vertical.
Nowrap: não há quebra de linhas dentro das células
Colspan: número de colunas que a célula irá ocupar
Rowspan: número de linhas que a célula irá ocupar
Width: largura da célula, em pixels ou valor percentual
<th> Desta forma são definidos os títulos de uma tabela. Estes

podem ser posicionados em qualquer célula. A diferença
entre a marcação de célula e título de célula é que o título
aparece em negrito.
Atributos: os mesmos apresentados acima, para td
6.2.1 Exemplo de uma Tabela Simples

O exemplo tabelas1.html abaixo mostra uma tabela utilizando as tags apresentadas. A
figura em seqüência apresenta a imagem desta página:
<table border=1>

<tr>
<td>Itens/Mês</td>
<th>Janeiro</th><th>Fevereiro</th><th>Março</th>
</tr>

<tr>
<th>Usuarios</th><td>80</td><td>93</td><td>120</td>
</tr>

<tr>
<th>Linhas</th><td>3</td><td>3</td><td>5</td>
</tr>

</table>
Como foi dito, a tabela é construída linha a linha. Observe os comentários no código
acima.
6.2.2 Tabelas Mais Sofisticadas

As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de
alguns atributos mostrados na tabela anterior. Vamos ver os principais em exemplos
práticos:
Tabela2.html – exemplo de alinhamento horizontal (align)

<table border=1>
<tr>
<td>Primeira célula</td><td>Segunda célula</td><td>Terceira célula</td>
</tr>
<tr>
<td align=center>centro</td>
<td align=left>esquerda</td>
<td align=right>direita</td>
</tr>
</table>
Tabela3.html – alinhamento vertical (valign)

<table border=1>
<tr>
<td> Teste para alinhamento<br>
com relação a bordas<br>

inferior e superior<br>
</td>
<td valign=top> TOP </td>
<td valign=middle>MIDDLE</td>
<td valign=botton>BOTTOM</td>
</tr>
</table>
Tabela4.html – Célula em várias colunas (colspan)

<table border=1>
<tr>
<td colspan=3>3colunas</td>
<td>normal</td>
<td>normal</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col3</td>
<td>col 4</td>
<td>col 5</td>
</tr>
</table>
Tabela5.html – Célula em várias linhas (rowspan)

<table border=1>
<tr>
<td rowspan=3>3 linhas</td>
<td>col 2</td>
<td>col 3</td>

<td>col4</td>
<td>col5</td>
</tr>
<tr>
<td>col 2</td>
<td>col 3</td>
<td>col4</td>
<td>col 5</td>
</tr>
<tr>
<td>col 2</td>
<td>col 3</td>
<td>col4</td>
<td>col 5</td>
</tr>
</table>
Tabela6.html – borda maior (border)

<table border=5>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
</tr>
</table>
Tabela7.html – Espaço entre células (cellspacing)

<table border=2 cellspacing=5>
<tr>


</tr>
<tr>
</tr>
</table>
Tabela 8.html – Espaçamento interno a célula (cellpadding)

<table border=2 cellpadding=8>
<tr>
</tr>
<tr>
</tr>
</table>
Tabela9.html – largura da tabela em percentuais (width)

<table border=1 width=90%>
<tr>
<td>segunda</td>
<td>terça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>

Tabela10.html – espaçamento em célula (width)

<table border=1 width=90%>
<tr>
<td width=70% >segunda</td>
<td>terça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>
6.2.3 Construindo uma Tabela mais Sofisticada

Tente reproduzir a tabela mostrada na figura abaixo utilizando códigos HTML. Observe
um cuidado especial com os detalhes de alinhamento.

6.2.4 Integrando Recursos em Tabelas

Crie agora uma tabela, utilizando sua imaginação, fazendo uso do maior número possível
de recursos vistos anteriormente. Inclua imagens, links para outras páginas e as
formatações de textos vistos anteriormente.

Unidade 7
Formulários
7.1 Introdução a Formulários
Até o presente momento vimos diversos recursos do HTML para criar uma página,
definindo seu layout e conteúdo. Neste capítulo apresentaremos a forma principal de
obter dados do usuário e poder assim interagir com ele.
O elemento FORM, da linguagem HTML, é o responsável por tal interação. Ele provê
uma maneira agradável e familiar para coletar dados do usuário através da criação de
formulários com janelas de entrada de textos, botões e outros elementos de entrada de
dados.
Os dados que o usuário preenche em uma página HTML são enviados para o servidor,
para serem então processados por um programa, por exemplo um CGI em linguagem
PERL ou um página de acesso a banco de dados em ASP ou PHP. Também é possível
processar localmente um campo de formulário utilizando um script em JavaScript ou
VBScript, o que muitas vezes é feito para validar um campo antes do mesmo ser enviado
ao servidor.
Nesta lição iremos nos concentrar em aprender todos os tags HTML de criação de
formulários e a diferença entre eles.
7.2 Criando um Formulário

Observe na tabela a seguir, os principais tags utilizados na criação de formulários, e
observe os exercícios seguintes:
TAG O QUE FAZ
<form> Define um formulário

Atributos
method: get, que envia as informações na própria URL, ou
post, que envia de forma não visível para o usuário
action: url que será chamada, a priori um aplicativo capaz
de tratar os dados enviados pelo formulário (PHP, ASP,
JSP).
<input> Define uma entrada de dados

Atributos
Type: text, campo tipo texto; password, para senhas;

hidden, não aparece para o usuário; checkbox, para

marcar; radio, para escolher entre um conjunto de opções.
submit cria um botão para enviar os dados e reset um
botão para limpar o formulário.
Name: nome do campo
Value: valor pré-definido para o campo
Size: tamanho do campo a ser exibido
Maxlength: tamanho máximo de caracteres
Checked: para campos checkbox e radio, define como
marcado
<textarea> Define uma entrada de texto com várias linhas

Atributos
Rows: número de linhas
Cols: número de colunas
<select> Define uma lista de opções para selecionar

Atributos
Name: nome do campo
Multiple: permite selecionar vários campos da lista
Site: define o número de linhas a serem exibidas
<option> Item de uma lista aberta

Atributos
Value: valor do campo se este item for selecionado
Selected: indica que este valor está selecionado
7.3 Um Primeiro Formulário

O exemplo a seguir mostra um formulário simples, form1.html, que apenas pergunta o
nome da pessoa. Ele ainda não tem um botão para confirmar, porém ao pressionar
ENTER o formulário será acionado.
Form1.html – utlizando um campo de formulário
<form method=get>
Qual o seu primeiro nome?
<input type="text" name="primeiro_nome" value="carlos" size="10" maxlength="15">
</form>

Observe que o formulário não tem um comando action, o que significa que, ao ser
acionado, o formulário irá chamar a própria página. Digite seu nome, pressione ENTER e
observe a URL no topo da página mudar para incluir o parâmetro do formulário.
Experimente substituir o método de envio para POST.
7.4 Formulários com Diferentes Tipos do INPUT

Vamos agora estudar vários exemplos de pequenos formulários, cada um apresentando
um recurso diferente. Teste cada um deles para se familiarizar com a tag apresentada:
Form2.html – utilizando tipo password

<form method="post" action="teste.php">
Informe sua senha de acesso (8 caracteres):
<input type="password" value="xpto" name="sua_senha" size="8" maxlength="8">
</form>
Obs: neste exemplo não faz sentido utilizarmos o método get, pois a função do tipo
password perderia o sentido.
Form3.html – Botões de limpar e enviar formulário (submit e reset)

<form method="get">
Qual o seu primeiro nome? <input type="text"><br>
<input type="reset" value="limpa campos">
<input type="submit">

</form>
Form4.html – Campos para marcar opções (checkbox)

<form method="get">
<p>
<input type="checkbox" name="boletim" checked>Sim, eu desejo receber o boletim de notícias.
</p>
<p>
<input type="checkbox" name="info">Sim, eu gostaria de receber mais informações turísticas.
</p>
</form>
Form5.html – campos de opção (radio)

<form method=get>
Suas preferências na viagem:
<dl>
<dd>Classe do bilhete:
<input type="radio" name="classe" value="eco">econômica
<input type="radio" name="classe" value="exe">executiva
<input type="radio" name="classe" value="pri" checked>primeira
</dd>
<dd>Localização:
<input type="radio" name="local" value="frente">área fumante
<input type="radio" name="local" value="tras">área não fumante
</dd>
</dl>


</form>
Obs: neste exemplo os dois grupos de botões tem o valor “name” diferente. Se fosse o
mesmo, só poderia ser selecionada uma entre todas as cinco opções.
7.5 Entrada de várias linhas de texto - TEXTAREA

Observe o exemplo a seguir. Se você deseja que um texto seja exibido no campo textual
ao abrir o formulário, simplesmente coloque este texto entre as marcações de início e fim
da TEXTAREA. É recomendável utilizar o método post para este tipo de campo, pois
existe uma limitação para o máximo de informações que podem ser transmitidas através
do método get.
Form6.hrml – Texto em várias linhas

<form method="post">
Por favor, escreva aqui suas sugestões, dúvidas e críticas:<br>
<textarea name="critica" rows="3" cols="40">
gostaria de obter mais informações sobre
este servidor. grato.
</textarea>
</form>

7.6 Menus com opções - SELECT

A marcação SELECT segue a mesma convencão de TEXTAREA. Ou seja, as opções de
menu ficam entre a marcação de início <SELECT> e a de fim </SELECT>. Observe os
dois exemplos a seguir:
Form7.html – Menu de opções

<form method="get">
Onde você pretende fazer turismo nas férias?
<select name="lugares_para_ver">
<option>fortaleza
<option value="sul">Florianópolis ou Porto alegre
<option>Rio de janeiro
<option selected>Brasília
<option value="amazonia">Manaus
</select>
<br>
</form>

Form8.html – Opção com múltiplas escolhas

<form method="get">
Onde você pretende fazer turismo nas férias?
<select multiple size=3 name="lugares_para_ver">
<option>fortaleza
<option value="sul">Florianópolis ou Porto alegre
<option>Rio de janeiro
<option selected>Brasília
<option value="amazonia">Manaus
</select>
<br>
</form>

Unidade 8
Introdução a Estilos CSS
8.1 O CSS
O CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de
formatação proposta pelo W3C. Visa remover a formatação dos documentos (X)HTML,
separando conteúdo e formatação.
A especificação inicial, chamada CSS1, tornou-se uma recomendação do W3C no final
de 1996 e define praticamente todos estilos de apresentação utilizados hoje em dia. A
segunda versão da especificação, chamada CSS2, foi aprovada em 1998 e acrescentou
vários estilos novos, principalmente na área de posicionamento e tabelas. Uma nova
versão está em desenvolvimento e espera-se que seja aprovada em um futuro próximo.
Todos os browser atuais, o Internet Explorer 6, Netscape Navigator 7, Mozilla Firefox 1,
Opera 7 e Safari suportam o CSS. Entretanto o suporte ao CSS Nível 2 foi implementado
em níveis diferentes, o que torna a adoção dos conceitos de posicionamento via CSS, ou
Tableless, como é conhecido, ainda um pouco complicado, necessitando muitas vezes de
truques de correção, conhecido como CSS Hacks.
Algumas considerações sobre CSS:
 Os estilos definem para o browser como devem ser exibidos os elementos do

(X)HTML.
 Os estilos são geralmente definidos em folhas de estilo.
 O CSS foi implementado na versão HTML 4.0 para resolver o problema de

separação entre conteúdo e formatação.
 Os estilos quando armazenados em folhas de estilo externas (arquivos .css) e

compartilhadas entre documentos do mesmo website, poupam muito trabalho e
simplificam enormemente a manutenção.
 Definições de estilo múltiplas serão refletidas em cascata em uma definição

resultante final.
8.2 Benefícios em Utilizar CSS

Utilizar CSS além de ser essencial para o XHTML para garantir a separação entre
conteúdo e formatação, possibilita inúmeros benefícios a desenvolvedores e usuários:

 Produtividade aumentada.
 Facilidade em criar sites com identidade visual unificada e coerente.
 Facilidade em fazer mudanças em todo o site – basta alterar um arquivo CSS

invés de mudar todas as páginas HTML.
 Arquivos mais leves => download mais rápido => experiência de usuário
melhorada.
 Menos código na página => mais fácil codificar.
 Permitir que visitantes alterem suas preferências definindo estilos

dinamicamente.
 Mais acessível para uma ampla variedade de aparelhos.
 Mais controle sobre o código - interpretação do código na ordem correta para os

leitores de tela.
 Disponibiliza versões para impressão sem duplicação de conteúdo, somente

alternando o CSS.
 Permite formatar elementos do HTML como formulários e barras de rolagem,

impossível via atributos HTML.
 Permite controlar aspectos visuais como tipo e cor de borda, posicionamento,

visibilidade e margens – propriedades inexistentes no HTML.
8.3 CSS para Separar Conteúdo da Apresentação

Uma das metas ao se utilizar os conceitos do Web Standards é remover toda a
apresentação do código (X)HTML, deixando-o limpo e semanticamente correto.
Enquanto o (X)HTML define a estrutura, O CSS fica responsável pela formatação visual
e posicionamento de elementos dentro de uma página Web.
Utilizando CSS, um desenvolvedor pode definir elementos da apresentação (o layout,
fonts, cores, bordas, etc), independentemente da marcação do documento Web. Os estilos
podem (e devem, na maioria dos casos) serem definidos em um documento separado com
extensão .css e compartilhados entre todos ou um grupo de documentos relacionados do
mesmo website. Desta forma, alterar ou implementar novos estilos é tarefa fácil, bastando
para isso alterar somente um arquivo do projeto, já que ele está referenciado entre
diversos documentos, sendo renderizado dinamicamente na medida que o browser
carrega o arquivo de definições ou a folha de estilos externa (.css).

Ao separar formatação do conteúdo, você está tornando seu código semanticamente

correto. Ou seja, não utilizando marcação de conteúdo (HTML) para formatação (uso
incorreto).
Outra vantagem na separação é a possibilidade de tornar disponível o mesmo conteúdo

para múltiplos devices (aparelhos) sem necessidade de duplicar o conteúdo, alterando
somente a formatação (CSS). Isto inclusive pode ser feito de forma dinâmica ou
utilizando linguagem script (Javascript, por exemplo). Entre os devices que suportam
conteúdo Web podemos citar:
 Browsers.
 Impressoras.
 PDAs (Personal Digital Assistants).
 Telefones Celulares.
 Equipamentos wireless.
Para obter uma demonstração do que pode ser conseguido visualmente por meio de um
design baseado em CSS, acesse o site Zen Garden, onde diferentes desenvolvedores
criaram para o mesmo conteúdo (documento HTML), diferentes arquivos CSS,
resultando em documentos com o design 100% diferentes entre si.
Vale a pena conferir! http://www.csszengarden.com/tr/portuguese/
8.4 Páginas Com Semântica Correta

Uma marcação semanticamente correta utiliza elementos HTML para o seu objetivo
definido. Um HTML bem estruturado tem significado semântico para um amplo número
de User Agents (navegadores sem folhas de estilo, navegadores baseados em texto,
PDAs, sites de busca, etc.).
Utilizar código semanticamente correto é uma forma de organizar e estruturar a
informação na Web.
Você deve utilizar HTML padrão e evitar fazer com que os elementos HTML se pareçam
com outros elementos HTML. Ou seja:
 Para cabeçalhos e títulos, utilize elementos de header começando com o <h1>

para o título de maior importância.
 Para títulos em tabelas, utilize a tag <th> em vez da tag <td>.
 Para listas, utilize elementos de lista <li>, <ol> e <ul>.
 Para o layout, utilize a tag <div> em vez de <table>.

Conceito concebido pelo físico inglês Tom Berners-Lee, o criador do World Wide Web,
cuja proposta, ainda em desenvolvimento, por um grupo de pesquisadores do W3C, por
ele liderado, é estruturar todo o conteúdo disponível na Internet. Essa estruturação será
baseada num conjunto de regras, que permitirá a localização eficiente e precisa da
informação desejada.
Por mais sofisticados que sejam os mecanismos de buscas, atualmente existentes, todos,
sem exceção, oferecem para cada solicitação um grande número de páginas, que, em sua
maioria, não atendem às necessidades do usuário. Esse é, então, obrigado a verificar uma
a uma, até encontrar exatamente o que procura.
A Web semântica se propõe objetivar essa busca, de modo que o conteúdo exato seja
encontrado em uma única consulta. Esse conceito baseia-se na inserção, em cada arquivo
da Web, de tags personalizadas, definidas pela linguagem XML e, com isso, indexar toda
a informação disponível de forma precisa. A localização exata da informação que se
busca estará a cargo de agentes. O conceito de Web semântica prevê ainda o uso de RDF,
um padrão de descrição, composto por trios de informação, em que cada unidade terá
função própria, como sujeito, verbo e objeto, em uma frase.
Para cada diferente significado de uma palavra e sua função numa frase será criada uma
identificação (URI). O maior desafio da Web semântica é a padronização desses URIs.
Para isso prevê-se o uso de ontologias, que fornecerão aos agentes o vocabulário
necessário para identificar de modo preciso a informação que se busca.
A tempo: URL significa Uniform Resource Locator, ou Identifier, no caso de URI.
Servem para localizar qualquer recurso na Internet.
8.5 Sintaxe do CSS

A sintaxe do CSS é uma sintaxe de marcação, definindo o elemento(s) a ser formatado, a
propriedade e o valor:
body {
font-size : 70%;
color : #000000;
background-color : #F1F1F1;
margin : 0;
}
As informações sobre os estilos podem ser armazenadas:
 Interno - No cabeçalho de um documento HTML.
 Inline ou Em Linha - Junto a uma determinada tag.
 Externo – Em um documento .css separado vinculado ao documento HTML

através de uma referência externa no cabeçalho do documento.

8.6 Aplicando estilos a uma página

Como mencionado, existem 3 formas de aplicar estilos à uma página HTML, que
veremos à seguir:
8.6.1 Aplicando estilos a toda a página HTML

Neste caso, utilizamos as tags HTML <style> e </style> dentro da seção de cabeçalho
(<head>) de uma página:
<html>
<head>
<title>Utilizando CSS em uma página HTML</title>
<style type=”text/css”>
seletor
{
propriedade: valor;
}
</style>
</head>
<body>
</body>
</html>
8.6.2 Aplicando estilos à apenas uma tag HTML específica

Para isso utilizamos o parâmetro style, que pode ser utilizado por praticamente qualquer
tag HTML
<html>
<head>
<title>Utilizando CSS em uma tag HTML</title>
</head>
<body>
<font style=”propriedade: valor;”>Teste de Estilos</font>
</body>
</html>
Neste caso específico dispensamos o seletor, pois estamos aplicando o estilo diretamente
em uma tag.

8.6.3 Utilizando um arquivo de estilos externo

Esta é a forma mais utilizada pelos profissionais, pois com ela podemos aplicar diversos
estilos diferentes à diversas páginas HTML.
Primeiramente é criado o arquivo de estilos, que deve ser salvo com a extensão .css:
Arquivo 1: estilos.css
seletor
{
propriedade: valor;
propriedade: valor;
}
seletor
{
propriedade: valor;
}
Feito isto, criamos um arquivo HTML que fará referência ao arquivo de estilos que será
utilizado através da tag <LINK>:
Arquivo 2: estilos.html
<html>
<head>
<title>Utilizando css em um arquivo externo</title>
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
</head>
<body>
</body>
</html>
8.7 Formas de utilização dos Seletores

Como vimos anteriormente, um seletor pode ser o nome de uma tag HTML, um grupo de
tags, uma classe ou um ID. Veremos agora exemplos práticos de como utilizar cada caso:
8.7.1 Aplicando estilos à uma tag:

Primeiro devemos definir à qual tag queremos aplicar os estilos. Neste exemplo
alteraremos o estilo das tags <FONT>:
<html>
<head>
<title>Alterando o estilo da tag font</title>

font
{
propriedade: valor;
}
</style>
</head>
<body>
<font> Esta tag recebe os estilos definidos no cabeçalho.</font>
<br><br>
<font> Esta tag também recebe os estilos que foram definidos.</font>
</body>
</html>
Note que qualquer tag <FONT> contida nesta página automaticamente receberá aplicação
dos estilos definidos.
8.7.2 Definindo estilos para mais um grupo de tags

Semelhante ao primeiro caso, sendo que nosso seletor será uma lista de tags, separadas
por vírgulas (,). Agora veremos como podemos aplicar estilos às tags <FONT> e <P>
utilizando apenas uma definição de estilo:
<html>
<head>
font, p
{
propriedade: valor;
}
</style>
</head>
<body>
<font> Esta tag recebe os estilos definidos no cabeçalho.</font>
<br><br>
<font> Esta tag também recebe os estilos que foram definidos.</font>
<p>
Este parágrafo recebe os estilos definidos no cabeçalho.
Qualquer outra tag p utilizada nesta página também os receberá.
</p>
</body>
</html>

8.7.3 Definindo uma classe de estilos

Para definirmos uma classe de estilos, devemos iniciar o seletor por um ponto (.) e a(s)
tag(s) que forem receber estes estilos devem fazer referência à esta classe através do
parâmetro CLASS.
Veja no exemplo à seguir a aplicação de uma classe de estilos à apenas uma tag
<FONT>:
<html>
<head>
.estilo1
{
propriedade: valor;
}
</style>
</head>
<body>
<font class=”estilo1”> Esta tag recebe os estilos definidos na classe estilo01. Note que o valor
do parâmetro class não possui o ponto.</font>
<br><br>
<font> Esta tag não recebe os estilos que foram definidos, pois não possui o parâmetro
class.</font>
</body>
</html>
8.7.4 Definindo um ID de estilos

Um ID de estilos é idêntico à uma classe, pois também possui a função de agrupar
diversos estilos em uma única estrutura nomeada. Existem apenas 2 diferenças entre um
ID e uma classe:
- IDs são iniciados pelo caractere sustenido (#).
- IDs são referenciados pelo parâmetro ID
Veja no exemplo à seguir a aplicação de um ID de estilos à apenas uma tag:
<html>
<head>

#estilo1
{
propriedade: valor;
}
</style>
</head>
<body>
<font id=”estilo1”> Esta tag recebe os estilos definidos no id estilo01. note que o valor do
parâmetro id não possui o sustenido.</font>
<br><br>
<font> Esta tag não recebe os estilos que foram definidos, pois não possui o parâmetro
id.</font>
</body>
</html>
A tabela abaixo apresenta os principais atributos com suas descrições, valores e como
usamos no código:
Atributo Descrição Valores Permitidos Exemplos
background Especifica uma URL ou o código {background:#33

imagem de da cor CC00}
segundo plano
ou cor.
border Especifica a top / left / right / {border-left}

lateral da borda center
que sofre o efeito
border-color Especifica a cor Nome ou código da {border-color:

da borda. cor. blue}
border-style Especifica o dotted / dashed / {border-style:

estilo da borda. solid / double / grove}
none / grove / ridge
/ inset / outset
border-width Especifica a thin / thick / {border-width:

largura da borda. medium medium}
color Especifica a cor Nome ou código da {color: blue}

do texto. cor.

font-family Seleciona o tipo Nome da fonte (de {font-family:

de fonte. acordo com o courier}
Windows)
{font-family: arial}
font-size Ajusta o tamanho points (pt) {font-size: 12pt}

da fonte.
inches (in)
centimeters (cm)
pixels (px)
font-style Aplica o efeito normal {font-style: italic}

itálico.
italic
font-weight Ajusta a extra-light {font-weight:

espessura da bold}
light
fonte.
{font-weight:
demi-light
extra-bold}
medium
demi-bold
bold
extra-bold
line-height Especifica a points (pt) {line-height: 24pt}

distância entre as
inches (in)
linhas.
centimeters (cm)
pixels (px)
percentage(%)
margin-left Ajusta a distância points (pt) {margin-left: 5in}

da margem da
inches (in)
esquerda.
centimeters (cm)
pixels (px)
margin-right Ajusta a distância points (pt) {margin-right:

da borda direita 1cm}
inches (in)
da página.
centimeters (cm)
pixels (px)

margin-top Ajusta a distância points (pt) {margin-top: -

da borda superior 20px}
inches (in)
da página
centimeters (cm)
pixels (px)
text-align Especifica o left {text-align: right}

alinhamento do
center
texto.
right
text-decoration Aplica efeitos no none {text-decoration:

texto. none}
underline
italic
line-trough
text-indent Especifica a points (pt) {text-indent:

distância entre o 0.5in}
inches (in)
texto e a margem
esquerda. centimeters (cm)
pixels (px)
8.8 Exercícios
Aplique três estilos a uma página HTML:
Um estilo que se aplique à toda a página, um estilo que se aplique à apenas uma tag
contida nesta página e um estilo que se aplique à todas as tags <FONT>
Transfira estes estilos para um arquivo externo e referencie-o nesta página HTML.

Unidade 9
CSS Na Prática
9.1 Utilizando CSS em Situações Reais
Na unidade anterior os recursos básicos do CSS foram apresentados. O objetivo desta
unidade é exercitar o uso do CSS na criação de layouts redefinindo os vários elementos
vistos nas primeiras unidades deste curso.
Com isto, objetiva-se dar ao aluno a percepção da enorme pontencialidade do CSS e
prepará-lo para utilizar este recurso em seus próprios projetos, facilitando e acelerando a
construção e edição dos layouts que ele desenvolve.
A referência completa do CSS é muito grande, e na prática praticamente nenhum Web
Designer decora todos os comandos CSS, geralmente consultando uma documentação na
web sempre que busca utilizar um parâmetro com o qual não esteja familiarizado. Por
exemplo, pode ser utilizada a documentação oficial em http://www.w3.org/TR/REC-
CSS1 e http://www.w3.org/TR/REC-CSS2/.
9.2 Criando Tabelas com Estilos CSS

O formato básico do layout de tabelas dificilmente é adequado para o layout do site que
você está desenvolvendo. Para programadores, muitas vezes o layout pré-definido é
muito grotesco e ocupa muito espaço, não permitindo a exibição de todas as informações
que são lidas de um banco de dados de forma eficiente. Para designers, as cores e fontes
usadas podem não corresponder ao restante do site.
Embora seja possível controlar estas características sem o CSS, como foi visto nas
primeiras unidades, os exemplos abaixo mostrarão como o CSS pode nos auxiliar.
9.3 Dados Exibidos em uma Tabela com CSS

Observe o exemplo abaixo e a imagem do mesmo:
CSS1.html
<head>
<style type="text/css">

</style>
</head>
<body>
<table>
<tr><td class=titulo>nome</td><td class=titulo>Cargo</td></tr>
<tr><td>alberto</td><td>Estagiário</td></tr>
<tr><td>pedro</td><td>Assessor de vendas</td></tr>
<tr><td>rafael</td><td>Gerente de vendas</td></tr>
<tr><td>sandro</td><td>Diretor comercial</td></tr>
</table>
</body>
</html>

Observe que a construção da tabela em si está bastante simples, facilitando sua criação
dinâmica por um programa que, por exemplo, consulte um banco de dados. Observe,
adicionalmente, que o layout está definido na parte em CSS – que inclusive pode estar em
um arquivo separado. Com isto, designers e programadores podem trabalhar em partes
independentes do código, de forma simultânea, um definindo detalhes do layout em CSS
enquanto o outro constrói o programa que monta dinamicamente os dados da tabela.
Obs: o parâmetro border-collapse permite definir que as bordas das células internas serão
‘grudadas’ umas nas outras. É um comando muito interessante de ser utilizado na
definição de layouts de tabelas.
9.4 Alterando o Estilo CSS

Observe o novo exemplo de estilo CSS e seu resultado no exemplo. Estamos, alterando
apenas o CSS, em negrito, criando a tabela em tons verdes e com um leve efeito 3D.
Css2.html
<head>

</style>
</head>
<body>
<table>
<tr><td>alberto</td><td>Estagiário</td></tr>
<tr><td>pedro</td><td>Assessor de vendas</td></tr>
<tr><td>rafael</td><td>Gerente de vendas</td></tr>
<tr><td>sandro</td><td>Diretor comercial</td></tr>
</table>
</body>
</html>
9.5 Dados e Formulários com CSS

No exemplo a seguir, além das tabelas, também os elementos de um formulário são
redefinidos para seguir um layout em tons verdes.
Css3.html
<head>

</style>
</head>
<body>
<form method=post action=consulta_funcionarios>
<table>
<tr><td colspan=2 class=titulo>Consulta por nome e cargo</td></tr>
<tr><td>Nome</td><td><input name=nome></td></tr>
<tr><td>Cargo</td><td><select name=cargo><option>Assessor de Vendas<option>Diretor
Comercial<option>Estagiário<option>Gerente de Vendas</select></td></tr>
<tr><td colspan=2><input type=submit value=pesquisar></td></tr>
</table>

<br><br>
<table>
<tr><td>Alberto</td><td>Estagiário</td></tr>
<tr><td>Pedro</td><td>Assessor de Vendas</td></tr>
<tr><td>Rafael</td><td>Gerente de Vendas</td></tr>
<tr><td>Sandro</td><td>Diretor Comercial</td></tr>
</table>
</body>
</html>
9.6 Exercícios com CSS

1. Altere o código acima, criando um layout diferente, utilizando outros tons no lugar do
verde. Sinta-se livre para também alterar fontes e criar efeitos diferente.
2. Crie uma página com textos, em que outros elementos vistos anteriormente são
também redefinidos, como parágrafos e listas ordenadas. Não coloque nenhuma
informação de layout fora do CSS e compare a página com e sem CSS.

Unidade 10
Introdução ao JavaScript
10.1 O que é JavaScript?
O que é JavaScript?
O JavaScript é uma linguagem de script que, incorporado nas tag's Html, permite
incrementar a apresentação e interatividade das páginas Web. Funções escritas em
JavaScript podem ser embutidas dentro de seu documento HTML, a fim de permitir
maior interatividade com as páginas HTML.
Com JavaScript você tem muitas possibilidades para "incrementar" seu documento
HTML com elementos interessantes. Por exemplo, você será capaz de responder
facilmente a eventos iniciados pelo usuário. Existem, atualmente, muitos exemplos sobre
JavaScript na Internet.
JavaScript é uma linguagem de script interpretada de forma “just-in-time”, sendo
utilizado apenas para operações mais simples. Podemos entender uma linguagem de
“script” como uma espécie de “roteiro” simples para execução de tarefas. As linguagens
de script, como o JavaScript, são compostas apenas por um conjunto de instruções em
formato texto que são interpretadas pelo computador no momento da sua execução.
10.2 Onde os Script podem ser executados ?

Os scripts escritos em JavaScript podem hoje ser executados na maior parte dos browsers.
Desde a introdução da linguagem JavaScript no desenvolvimento Web, que se iniciou a
partir do lançamento do Netscape 2.0, a linguagem sofreu uma série de atualizações, e
hoje possui um conjunto muito grande de recursos, suportados na maior parte dos
browsers disponíveis no mercado.

Unidade 11
Noções básicas de JavaScript
11.1 Utilizando Comentários

A estrutura de comentários da linguagem JavaScript é extremamente semelhante a
estrutura da linguagem C++ e da linguagem Java. O Javascript permite comentários em
linha única ou em bloco.
Os comentários em linha única são representados pelos caracteres ( // ), e transformam
todo e qualquer texto colocado na mesma linha após este símbolo em comentário,
conforme exemplo a seguir:
sProcessor = “Atribuição a variavel !”; // Este texto é comentário
Os comentários também podem ser criados em blocos no Javascript, utilizando a notação

/* e */. Através desta notação, todo o texto colocado dentro destes dois delimitadores é
considerado como comentário para a linguagem de script, conforme o exemplo a seguir:
/* Aqui iniciamos um comentário em bloco

note que mesmo estando em outra linha, este texto continua sendo comentário
até que seja colocado o delimitador de fim de comentário */
<SCRIPT LANGUAGE=’Javascript’>
var dtToday = new Date();
sProcessor = “Atribuição a variavel !”; // Este texto é em linha
</script>
11.2 Tipos de dados

No javascript não existe uma tipagem explicita de dados na declaração de váriaveis. Isto
ocorre porque o Javascript não possui tipos explícitos de dados (relacionados a declaração
das variáveis), toda e qualquer variável dentro de um código Javascript pode receber
qualquer tipo de dado. A tipagem dos dados ocorre no momento da atribuição de valores
as váriavies, ou seja, ao atribuir um valor número a uma variável, esta assume um tipo de
dado “numérico”, ao atribuir um valor string a uma variavel, esta assume o valor string.
Apesar de não existir uma tipagem explícita de dados no JavaScript, a linguagem
interpreta alguns tipos de dados, divididos em três categorias:

11.2.1 Tipos de dados Primitivos (por valor)

Nos tipos de dados primitivos podemos encontrar os tipos Numérico (que representam
números inteiros ou fracionados), Strings (que representam caracteres ou um conjunto de
caracteres), e Boolean ( que representam valores booleanos True/False).
<SCRIPT LANGUAGE=’Javascript’>
var nNumber, sString, bBoolean; //As variáveis ainda não assumiram um tipo
específico
nNumber = 10; //nNumber assume tipo numérico
sString = “Exemplo”; //sString assume tipo string / texto
bBoolean = true; //bBoolean assume tipo booleano
</script>
11.2.2 Tipos de dados Compostos (por referência)

Dentre os tipos de dados compostos, podemos encontrar tipos mais complexos como o
objeto do tipo Date (utilizado para representar datas e horas), o tipo Array (utilizado para
representar um conjunto de dados), e objetos (utilizado para quaisquer outros objetos
disponíveis na linguagem.
<SCRIPT >
var dtDate, aArray;
dtDate = new Date(); //Variável do tipo objeto date
aArray = new Array(10); //Virável do tipo Array com 10 posições
</script>
11.2.3 Tipos de dados especiais (undefined e Null)

Os tipos de dados especiais são utilizados geralmente em expressões de teste em conjunto
com os tipos de dados compostos.
O tipo undefined representa uma propriedade inexistente em um objeto criado dentro de
um código javascript. O tipo null representa uma váriavel ou objeto sem valor, ou seja,
uma váriavel ou objeto sem conteúdo.
<SCRIPT >
dtDate = new Date();
/* typeOf devolve como resultado o tipo da variável,
neste caso ele vai disparar no alert o tipo de dados que este método
apresenta o valor que aparecerá na tela é “undefined” pois não existe
buscaDia dentro do objeto Date */

alert(typeof(dtDate.buscaDia));
dtDate = null; // Define a variável como null / nula
</script>
11.3 Variáveis
Assim como qualquer linguagem de programação, o Javascript permite a criação de
variáveis dentro dos scripts. As váriaveis em JavaScript possuem dois escopos, um
escopo global, que são variáveis declaradas fora de funções, e um escopo local que são
váriaveis declaradas dentro de funções.
As variáveis são declaradas utilizando a instrução var onde deve ser informado o nome
das variáveis que devem ser declaradas. É possível declarar mais de uma variável em
mesmo comando var, conforme o exemplo a seguir:
<html>
<script>
var mensagem; //Variável global
mensagem = "Hoje é dia: "; //Atribuindo valor à variável
function dataAtual(){
var dtHoje = new Date(); //variável local
var sDia, sMes, sAno; //atribuição de 3 variáveis em uma linha
sDia = dtHoje.getDate(); //Porque getDay é o dia da semana
sMes = dtHoje.getMonth() + 1; //Porque ele pega o mês sendo com um
índice, ou seja, inicia com o 0
sAno = dtHoje.getFullYear();
alert(mensagem + sDia + "/" + sMes + "/" + sAno);

}
</script>
<body>
<a href="javascript:dataAtual();">Data Atual</a>
</body>
</html>
Como podemos ver no exemplo acima, a atribuição de variáveis é feita através do

operador de atribuição =, e pode ser feita tanto na declaração da variável como
posteriormente ao longo do código de script.

11.4 Operadores
A linguagem Javascript possui um conjunto de operadores muito semelhante a qualquer
linguagem de programação convencional, que permitem tanto realizar operações
aritméticas como operações booleanas. Os operadores estão divididos em três grupos
principais: Computacionais, Lógicos e de Atribuição.
Dentre os operadores computacionais, podemos encontrar os operadores que realizam
operações aritméticas, bem como operadores utilizados para realizar concatenações de
strings. A lista dos operadores computacionais pode ser visualizada abaixo:
Operador Símbolo
Incremento ++
Decremento --
Multiplicação *
Divisão /
Módulo %
Adição/Concatenação +
Subtração -
Dentre os operadores lógicos, encontramos os operadores para testes lógicos

convecionais, como equalidade e inequalidade. É importante ressaltar a diferença entre o
operador de atribuição = e o operador lógico de igualdade ==. Muitas vezes os
desenvolvedores tendem a utilizar o operador de atribuição para realizar testes de
igualdade, o que acarreta em erros de lógico nos scripts. Operadores lógicos podem ser
visualizados a seguir.
Operador Símbolo
Não Lógico !
Menor que <
Maior que >
Menor ou igual a <=
Maior ou igual a >=
Igual ==
Diferente (não igual) !=
E Lógico (AND) &&
OU Lógico (OR) ||
Além destes dois conjuntos de operadores, ainda temos os operadores de atribuição. O

operador de atribuição é representado pelo símbolo =, que pode ser combinado com
qualquer operador computacional a fim de combinar o valor atual da variável com o valor
que está sendo atribuido. Para utilizar esta funcionalidade, basta inserir o operador
computacional na frente do operador de atribuição (Ex.: +=, -=, *=, /=).
A seguir podemos ver uma série de exemplos para utilização de operadores:

<script>
var nNumero1, nNumero2, nResultado;
// Atribuição de 0 ao número
nNumero1 = 1;
nNumero2 = 2;
// Atribui uma soma ao resultado

nResultado = nNumero1 + nNumero2;
// Incrementa o resulta em 1
nResultado++;
// Soma 10 ao valor atual do resultado

nResultado+=11;
// Dispara o alert true caso a variável nResultado seja igual a 25 ou false

caso não seja.
alert(nResultado == 25);
</script>
11.5 A estrutura de um script JavaScript

Assim como outras linguagens de script, o Javascript é criado a partir de um código
escrito em texto simples, composto por uma série de instruções de script, conjuntos ou
blocos de instruções e comentários. Dentro de um script, você pode utilizar variáveis para
armazenar informações ou mesmo realizar cálculos.
Uma instrução escrita em JavaScript pode ser representada por uma ou mais expressões,
palavras-chave, comandos, ou operadores, e em geral são escritos em uma linha de
código no arquivo que contém o script. No javascript, cada instrução contendo comandos
é separada por um símbolo “;”, o que permite escrever uma instrução em mais uma linha,
desde que ao final do comando seja colocado o caractere “;”.
Abaixo podemos ver um exemplo de duas linhas de comando escritas em JavaScript.
sProcessor = “Este é o curso de JavaScript da Processor !”; // Atribui um texto

à variável
var dtHoje = new Date(); // Atribui o dia de hoje para a variável
O javascript permite ainda que conjuntos de instruções sejam agrupados em blocos,

utilizando os delimitadores de chaves ( { } ). Instruções agrupadas em blocos, são
consideradas como um único comando na linguagem javascript, e são utilizados, em
geral, onde a linguagem necessita de “comando únicos”, como em instruções de teste,
estruturas de repetição e funções.
A seguir podemos ver um exemplo de um código JavaScript que utiliza delimitadores de
bloco de instruções.

//Testa se a hora atual é maior que 18

if (dtHoje.getHours() > 18){
// Bloco de instruções. Caso a hora seja maior que 18 entra neste bloco
alert(“Boa noite ! Este é o curso de JavaScript !”);
alert(“A hora atual é :” + dtHoje.getHours());
}
else
{
// Bloco de instruções. Caso a hora não seja maior que 18 entra neste bloco
alert(“Boa tarde ! Este é o curso de JavaScript !”);
alert(“A hora atual é :” + dtHoje.getHours());
}
11.6 Criando um script em uma página HTML

Para utilizar o JavaScript, é necessário criar uma página HTML e dentro desta página
inserir uma tag delimitadora de script, a fim de executar o script na abertura da página
HTML. Um bloco javascript é delimitado utilizando a tag <script> nas páginas HTML.
Todo o código colocado dentro destas tags é considerado como um bloco de script pelo
browser.
<HTML>
<BODY>
<H1> Página de teste </H1>
<SCRIPT >
var dtToday = new Date();
sHoje = “Hoje é ” + dtToday.toString();
alert(sHoje);
</SCRIPT>
11.7 Estruturas de teste

Para uma utilização eficaz dos operadores disponíveis no JavaScript, é necessário
entender como funcionam as estruturas de teste utilizadas pela linguagem. Dentro do
JavaScript possuimos dois comandos para realização de testes lógicos dentro dos scripts
(if e switch).
No comando if, é necessário informar dentro de parênteses a expressão a ser testada, e
caso ela seja verdadeira, o comando ou bloco de comandos subsequente ao comando if
será executado. O comando if ainda possui uma cláusula else opcional, que pode conter
uma expressão ou conjunto de expressões a serem executadas caso a condição testada no
comando if não seja verdadeira.
A seguir podemos verificar um exemplo do comando if:

<script>
var nDia;
var dtData = new Date();
var sPeriodo;
nDia = dtData.getDay();
// Comando if com apenas uma expressão após o teste

if(nDia%2==0)
alert("Dia par!");
else
alert("Dia ímpar");
// Comando if com um bloco de expressões

if(dtData.getHours() > 12)
{
sPeriodo = " Tarde";
alert(sPeriodo);
}
else
{
sPeriodo = "Manhã";
alert(sPeriodo);
}
</script>
Além do comando if, o comando switch pode ser utilizado para realizar testes lógicos na
linguagem JavaScript. O comando switch é um comando de teste de seleção múltipla, ou
seja, não testa a expressão lógica apenas por um valor específico, mas sim por uma série
de valores informados no código de script. O comando script requer um bloco de
comando inserido logo após a expressão lógica, que irá conter os comandos executados
no caso de cada uma das expressões. Ao final de cada conjunto de instruções de uma
condição swicth, é necessário informar o comando break, para que o javascript não
execute as condições posteriores ao teste, conforme o exemplo a seguir:
<script>
var nMes;
var sMes;
// Atribuição do Mês a variável

nMes = dtData.getMonth();
switch (nMes)
{
case 0:
sMes = "Janeiro";
break;
case 1:
sMes = "Fevereiro";
break;

case 2:
sMes = "Março";
break;
case 3:
sMes = "Abril";
break;
case 4:
sMes = "Maio";
break;
case 5:
sMes = "Junho";
break;
}
alert(sMes);
</script>
11.8 Estruturas de repetição
11.8.1 While
O comando while é utilizado para repetir um determinado conjunto de instruções de
acordo com uma expressão lógica definida no código de script.
Para utilizar o comando while basta informar entre parênteses a expressão lógica a ser
testada, e após o comando, a instrução ou bloco de instruções a serem executados.
Podemos ver um exemplo de utilização do comando while no código abaixo:
<script>
var nNumero = 0;
while(nNumero < 10)
{
alert("Iteração de número: " + nNumero);
//Incrementa o Número
nNumero++;
}
</script>
11.8.2 For
Além do comando while, temos o comando for, que pode ser utilizado para repetir um
determinado conjunto de instruções de acordo com um índice número especificado no
próprio comando for. No comando for é necessário informar a variável que servirá como
índice, a condição para execução do for, e o incremento utilizado para execução da
estrutura de repetição. Podemos ver um exemplo de utilização do comando for a seguir.

<script>
var nNumero = 0;
for(nNumero; nNumero<10; nNumero++)
{
alert("Iteração de número: " + nNumero);
}
</script>
O comando for ainda pode ser utilizado com a cláusula in para realizar enumerações de
propriedades em objetos ou mesmo itens contidos em arrays. Para a utilização da cláusula
in, é necessário definir uma variável que irá receber o valor de cada membro solicitado
dentro de cada iteração da estrutura de repetição. Com a cláusula in podemos, por
exemplo, buscar todas as propriedades disponíveis de um determinado objeto criado no
JavaScript. No exemplo a seguir podemos visualizar todas as propriedades disponíveis no
objeto window, que representa a janela do browser.
<script>
var prop;
for(prop in window)
{
var sMensagem;
sMensagem = "Propriedade da janela do Browser: ";
sMensagem += prop;
alert(sMensagem);
}
</script>

Unidade 12
Utilizando Funções
12.1 Utilizando Funções no Javascript
Como já podemos perceber, o Javascript possui inúmeros recursos e funções disponíveis
para tornar as páginas o mais interativas possíveis. Além de toda a estrutura de
programação já apresentada, o javascript ainda permite ao desenvolvedor utilizar funções
próprias do JavaScript e criar suas próprias funções.
12.2 As funções intrínsecas do Javascript

O Javascript possui uma série de funções intrínsecas que podem ser chamadas em
qualquer ponto do código JavaScript. As funções intrínsecas mais comuns são
apresentadas a seguir.
12.2.1 A função Eval()

A função Eval() serve para executar um bloco de script criado dinamicamente. Com o
comando Eval é possivel criar comandos em tempo de execução do script e executá-los
no mesmo escopo do script em que o comando Eval está rodando. Podemos ver um
exemplo disso no código a seguir:
Exemplo 1:
<script >
var nContador;
for(nContador=0;nContador<5;nContador++)
{
eval("var sTeste" + nContador + ";");
eval("sTeste" + nContador + "=" + nContador + ";");
}
for(nContador=0;nContador<5;nContador++)
{
eval("alert(sTeste" + nContador + ");");

}
</script>

Exemplo 2:
<html>
<script>
function compute(f)
{
f.result.value = eval(f.expr.value);
}
</script>
<body>
<form name="teste">
Digite uma expressáo matemática (exemplo: 2+2 ou 3*5):
<input type="text" name="expr" Size="15">
<input type="button" value="Calcula" onclick="javascript:compute(this.form)">
<BR>
Resultado:
<input type="text" name="result" size="15">
</form>
</body>
</html>
12.2.2 A função parseInt() e parseFloat()

As funções parseInt e parseFloat são utilizadas para converter valor do formato string
(texto) para o formato numérico. A função parseInt é utiizada para converter valores
inteiros e a função parseFloat é utilizada para converter valores fracionados. Estas
funções são extremamente úteis quando se faz necessária a conversão de um valor
textual, informado pelo usuário ou não, para um tipo número. A partir da conversão é
possível utilizar os valores para cálculos numéricos.
Podemos ver exemplos destas duas funções no script a seguir:
<script >
var nContador;
var sValor1, sValor2;
var sResultado, nResultado;
sValor1 = "10"; //Valor String

sValor2 = "1.5"; // Valor Fracionado
sResultado = sValor1 + sValor2;

nResultado = parseInt(sValor1) + parseFloat(sValor2);
// Contatenação
alert(sResultado);
// Soma numérica
alert(nResultado);

</script>
12.2.3 Função escape() e unescape()

Estas funções são utilizadas para converter uma string em um formato legível em
qualquer computador, ou seja, remove caracteres que podem ser considerados inválidos
para um formato padrão. Este formato padrão é representado por um símbolo % e um
valor hexadecimal (podemos observar esta conversão comumente em barras de
navegação de browsers).
Podemos ver um exemplo de utilização das funções escape e unescape no exemplo a
seguir.
Podemos ver exemplos destas duas funções no script a seguir:
<script >
var sURL;
sURL = "http://www.processor.com.br/jscript?Param1=Curso de Java

Script&Param2=áéíóú";
sURL = escape(sURL);
alert(sURL);
sURL = unescape(sURL);
alert(sURL);
</script>
12.2.4 A função isNaN()

A função isNaN é utilizada para verificar se uma variável contém um valor especial NaN.
O valor representa uma conversão númerica mal sucedida (NaN = Not a Numeric).
Quando tentamos converter uma string (Ex.: ABC) para um valor númerico utilizando as
funções parseInt e parseFloat, o resultado da função é um valor NaN.
12.3 Funções criadas pelo usuário

Além das funções disponíveis, por padrão no JavaScript, a linguagem nos permite criar
nossas próprias funções, chamadas funções definidas pelo usuário. Para criar funções
devemos utilizar a cláusula function, que é utilizada para criar as funções no JavaScript.
A sintaxe para a criação das funções no Javascript é:
function <Nome da Função> ([param1], [param2], ... , [paramn])

{
...

Como podemos ver a função pode conter diversos parâmetros de entrada que podem ser
utilizados para cálculos ou algum processamento especial dentro do corpo da função.
Para definir os parâmetros, basta informar os nomes das variávies que irão representar os
parâmetros na função. Podemos ver um exemplo de função no código abaixo:
<script>
function MostraMensagem(sMsg)
{
var sData;
sData = dtData.getDay() + "/" + dtData.getMonth() + "/" +
dtData.getFullYear();
alert(sData + " - " + sMsg);
}
MostraMensagem("Mensagem de Teste !");
</script>
As funções do Javascript ainda permitem que o usuário retorne valores. Para

retornar um valor em uma função, basta criar a função da mesma forma como
apresentado no exemplo anterior, porém com a utilização do comando return. O comando
return serve para interromper o processamento de uma função ou um bloco de script, com
a opção de retornar um valor no caso de estar dentro de uma função. Podemos ver um
exemplo de utilização do comando return a seguir.
<script>
function Soma(nNumero1, nNumero2)
{
return nNumero1+nNumero2;
}
alert(Soma(10,5));
</script>

Unidade 13
Utilizando Objetos
13.1 Objetos intrínsecos
Além da utilização de funções intrisecas e funções de usuário, o JavaScript possui uma
série de objetos intrínsecos que permitem o uso de números de recursos dentro da
linguagem. As próprias funções intrínsecas que vimos no módulo anterior estão
colocadas dentro de um objeto intrínseco chamado Global, mas por estarem colocadas
dentro deste objeto elas tem um escopo global, permitindo sua utilização sem a chamada
explícita ao objeto.
Os objetos são compostos por métodos, que funcionam exatamente da mesma forma que
as funções em uma linguagem de programação, e são utilizadas para de alguma forma
executar alguma ação sobre o objeto em questão. Além dos métodos os objetos possuem
propriedades que dão características específicas as instacias dos objetos utilizados.
Para utilizarmos um objeto no JavaScript é necessário instanciá-lo inicialmente. Para
iniciarmos um objeto precisamos criar uma variável que irá armazenar a instancia do
objeto e atribuir a esta variável uma nova instancia do objeto em questão. Para criar uma
nova instancia de um objeto, devemos utilizar o comando new.
A seguir veremos os objetos instrínsecos do javascript mais utilizados.
13.1.1 O Objeto Date

Em nossos exemplos anteriores já vimos o objeto date sendo utilizado diversas vezes
para verificar a data atual. O objeto Date é um dos objetos intrínsecos do Javascript,
utilizado para o gerenciamento de datas. Para criar uma nova instancia do objeto basta
criar uma nova variável e atribuir uma nova instancia do objeto Date. O objeto date é
sempre inicializado com a Data e Hora atuais. Um exemplo de criação de um objeto Date
pode ser visto a seguir.
<script >
var dtData, nMes, nHora, sMes, sPeriodo;
dtData = new Date();

nMes = dtData.getMonth();
nHora = dtData.getHours();
</script>

13.1.2 O Objeto Array
O objeto Array é a representação de um conjunto de valores dentro do JavaScript. Para

criarmos um array dentro do JavaScript, utilizamos a mesma sintaxe que utilizamos até o
momento com as datas, através do comando new. Deve-se lembrar que a primeira posição
de um array é 0, então um Array de tamanho 6, começa na posição 0 e acaba na posição
5. A seguir vemos uma série de exemplos de criação de arrays.
var sNomes = new Array();

var sValores = new Array(6);
Como mostrado no exemplo anterior, os array podem ser criados com um tamanho inicial
ou não. Caso não seja informado o tamanho inicial, podemos aumentar seu tamanho a
medida que criamos os elementos dentro do array.
Para criar e acessar elementos em um array em Javascript devemos utilizar colchetes [ ]
para informar qual o início do array que queremos gravar ou ler. Caso o início não exista
e o script tente atribuir um valor ao array, o array será redimensionado automaticamente.
Um exemplo de utilização de variáveis dentro do array pode ser visto abaixo:
<script >
var sValores = new Array(6);
sNomes[0] = "André";
sNomes[1] = "Bruno";
sNomes[2] = "Carlos";
sValores[0] = 1;
sValores[1] = 2;
sValores[2] = 3;
sValores[3] = 4;
</script>
Caso o array esteja sendo preenchido de forma dinâmica, sem informar um número de
elementos, podemos a qualquer momento consultar a propriedade length para verificar
quantos elementos estão contidos dentro do array.
Além da armazenagem de objetos, os array podem ser utilizados para outras finalidades
como ordenação de dados. Para isto devemos utilizar os métodos disponíveis dentro do
array, como o método sort para ordenar por ordem alfabética e o método reverse para
ordernar por ordem decrescente.
Um exemplo de utilização de um array para ordenação pode ser visto abaixo:

<script>
sNomes[0] = "Carlos";
sNomes[1] = "Bruno";
sNomes[2] = "Mauricio";
sNomes[3] = "José";
sNomes[4] = "André";
sNomes.sort();
var nCount;
alert(“Ordem Crescente”);
for(nCount=0;nCount<sNomes.length;nCount++)
{
alert(sNomes[nCount]);
}
sNomes.reverse();
alert(“Ordem Decrescente”);
for(nCount=0;nCount<sNomes.length;nCount++)
{
alert(sNomes[nCount]);
}
</script>
13.1.3 O Objeto Math

O objeto Math é um objeto com um comportamento um pouco diferente dos demais. Para
utilizarmos o objeto Math, não é necessário criar um nova instância deste em uma
variável, basta chamarmos seus métodos e propriedades diretamente.
Este objeto é utilizado para realizar cálculos matemáticos mais avançados, que não
podem ser realizados utilizando os operadores mais simples do JavaScript.
Podemos ver um exemplo de utilização do objeto Math no exemplo a seguir.
<script>
var nNumero1 = 10.5;
var nNumero2 = -10.5;
var nNumero3 = 4;
alert(Math.abs(nNumero1));
alert(Math.abs(nNumero2));
alert(Math.sqrt(nNumero3));

</script>
13.1.4 O Objeto String

O objeto string representa variáveis string dentro do Javascript. Os objetos string são
criados ou através do comando string ou através da atribuição direta de um valor string
para uma variável. O objeto string possui uma série de métodos que permitem manipular
as strings no JavaScript.
Um dos métodos disponíveis é o método substring que permite pegar uma fração da
string, de acordo com uma posição passada como parâmetro. Além desses métodos, ainda
temos a propriedade length, que pode ser utilizada para verificar o tamanho atual da
string. Podemos ver a implementação desses métodos no exemplo abaixo:
<script>
var sString1 = "string criado diretamente";
var sString2 = new String("string criado com o new");
sString1 = sString1.toUpperCase();
sString2 = sString2.toUpperCase();
alert(sString1);
alert(sString2);
alert(sString2.replace(“STRING”, “string”));
alert(sString1.substring(0,5));
alert("O tamanho da String1 é: " + sString1.length);

</script>
13.2 Objetos criados pelo usuário

Além dos objetos intrínsecos, o Javascript também nos permite criar objetos definidos
pelo usuário, com propriedades próprias definidas no próprio script.
Para criarmos um objeto definido pelo usuário no Javascript, devemos criar uma variável
e atribuir uma nova instancia de um objeto do tipo Object. Após criar esta variável, basta
atribuir as propriedades ao objeto que elas serão criadas de forma automática. Podemos
visualizar a utilização de objetos definidos pelo usuário no exemplo abaixo:
<script>
var oContato = new Object();
oContato.Nome = "Sr. Teste";

oContato.Telefone = "(51) 1234-56789";
oContato.Endereco = "Rua Q Sobe e Desce 1000";

for(prop in oContato)
{
var sMsg;
sMsg = "O objeto contém a propriedade ";
sMsg += prop;
sMsg += " com o valor de " + oContato[prop];
alert(sMsg);
}
</script>
13.3 Métodos
Os métodos de um objeto são funções que pertencem a um objeto. Repare que enquanto
que as propriedades correspondem a variáveis, os métodos correspondem a funções.
13.3.1 Métodos estáticos

Alguns objetos oferecem métodos estáticos. Esses métodos diferem dos métodos normais
pelo fato de não pertencerem a um objeto criado com a instrução new.
13.3.2 A declaração this

A declaração this representa o próprio objeto em que é usada. Esse objeto pode ser uma
função, uma ligação de hipertexto, uma imagem, etc. Esta declaração é bastante útil em
HTML Dinâmico porque nos ajuda muito a construir funções que respondem a eventos
sabendo sempre qual foi o objeto que originou o evento e funcionam corretamente em
todos os browsers. Para aprender mais sobre esta matéria veja um dos exercícios que
estão mais abaixo.
13.3.3 A declaração with

Esta declaração estabelece o objeto ao qual se aplica uma série de instruções. Os dois
exemplos seguintes usam o objeto Math para ilustrar o uso desta declaração e são
totalmente equivalentes.
Versão 1:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10)
y = Math.tan(14 * Math.E)
Versão 2: (equivalente à anterior.) Repare que não foi preciso colocar a parte Math. antes
dos nomes dos métodos cos(), sin() ou tan().

with (Math) {
x = cos(3 * PI) + sin (LN10)
y = tan(14 * E)
}
Quando o número de instruções é pequeno não vale a pena usar a declaração with, mas se
esse número crescer muito o código será mais compacto e fácil de ler se usarmos esta
declaração.

Unidade 14 Conhecendo Objects DOM

14.1 Introdução a DOM:
O W3C (World Wide Web Consortium) desenvolveu o padrão DOM para padronizar a
forma de acesso a XML e suas estruturas e como os browsers e as aplicações da Web
manipulam e interagem com as páginas da Web. Todos os browsers modernos
implementam estes padrões. Apesar de essas implementações serem geralmente
incompletas, elas são suficientes para que possamos programar quase tudo numa forma
que funciona em todos os browsers dominantes.
14.2 O que é HTML DOM?

Dom significa Document Object Model.
E HTML DOM é Document Object Model para HTML.
O HTML DOM define objetos padrões para HTML, e para acessar componentes padrões
das estruturas do HTML representadas como marcações.
14.3 Quando devemos usar JavaScript

A DOM HTML é uma plataforma e linguagem independente, pode ser usada com varias
linguagens de programação como Java, Javascript, e Vbscript. Este módulo trata o uso de
DOM com Javascript.
14.4 As divisões de DOM

DOM esta dividida em 3 partes:
DOM
XML DOM
(X)HTML DOM
14.5 Alterar conteúdo com HTML DOM

Este exemplo de script mostra como pode ser alterado, o atributo background para cor
amarela com JAVASCRIPT e DOM.

<html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>
<body>
<input type=”button” onclick=” ChangeColor()” value=”altere a cor de
Fundo”>
</body>
</html>
14.6 Document Objects

HTML DOM define documentos HTML como uma coleção de Objetos. O Objeto
“document”, é o pai de todos os outros objetos de um documento HTML. O Objeto
“document.body”, representa o elemento <BODY> em um documento HTML. O objeto
“document”, é o pai de “body”, por isso devemos sempre acessar “body” pelo pai.
Exemplo:
document.body
14.7 Propriedades do objeto body

Objeto document tem várias propriedades, também chamado de atributos. A propriedade
“document.body.bgColor” define a cor de fundo de corpo de um documento HTML,
como visto no exemplo anterior, onde definiu a cor de fundo como amarelo.
Syntax: body.property_name
atributos Descrição
accessKey Seta ou retorna o comando chave para acessar o comando

chave do objeto body
aLink Seta ou retorna a cor dos links ativados no documento html.

background Seta ou retorna a imagem que ficara no plano de fundo do

documento Html
bgColor Seta ou retorna a cor de fundo do documento HTML
id Seta ou retorna o id do objeto Body (no IE 4 este atributo é

read-only)
link Seta a cor dos links no documento html
text Seta ou retorna o cor dos textos no documento HTML
vLink Seta ou retorna a cor dos links visitados no documento HTML
14.8 Objeto Form

FORM é usado para o usuário inserir informações no documento HTML, podemos usar
elementos FORM com text fields, radio buttons, checkbox e listas de seleção. O conteúdo
inserido normalmente é postado para o servidor para processar as informações.
Exemplo:
<html>
<head>
function formReset()
{
var x=document.forms.MeuForm
x.reset()
}
</script>
</head>
<body>
<form name="MeuForm">
<p>Preencha os campos abaixo e pressione o botão “Reset Form”</p>
<input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="Reset form">
</form>

</body>
</html>
Caso existir mais de um form no documento este objeto poderá ser acessado como um
array.
Exemplo:
<html>
<head>
function formReset()
{
var x=document.forms[0];
x.reset()
}
</script>
</head>
<body>
<form name="Form1">
<p>Preencha os campos a baixo e veja como funciona o botão Reset</p>
<br />
<input type="button" onclick="formReset()" value="Reset form">
</form>
<form name="Form2">
<p>Preencha o campo a baixo, ele faz parte de um outro formulário por isto não sera alterado
quando o botão reset for pressionado</p>
<br />
</form>
</body>
</html>
Neste exemplo o form esta sendo acessado como o primeiro form do documento.

14.8.1 Atributos do Form
atributos descrição
Action Seta ou retorna a url para onde vai ser submetido o FORM
Encoding Seta ou retorna o MIME encoding para o Form
Enctype Seta ou retorna o MIME encoding para o Form
Id Seta ou retorna o id do objeto Body
Length Seta ou Retorna o numero de elementos de um form
Method Seta ou retorna a forma em que vai ser submetido o form ("get"
ou "post")
Name Seta ou retorna o nome do form
tabIndex Seta ou retorna o índice que foi definido o ordem de tabulação

para o form
Target Seta ou retorna o alvo em que o response vai processar apos a

submissão, normalmente é um frame ou iframe.
14.8.2 Métodos de um FORM
Método Descrição
reset() Coloca o valor inicial nos elementos do form
submit() Submete o form
14.8.3 Eventos de um form
Event Description
onReset Executa quando o evento reset ocorrer

onSubmit Executa quando o evento submit ocorrer
14.8.4 “Elements” de um FORM

Um form é constituído de vários objetos para interagir um usuário, neste caso DOM
disponibiliza um vetor de elementos. Para facilitar na validação dos objetos.
Exemplo:
Function validaIdade(){
If(document.forms[0].elements[0].value < 0)
{
alert(“digite a idade válida”);
}
}
Esta função valida o primeiro campo, do primeiro form do documento Html.
Coleções descrição
elements[] Retorna um array contendo cada elemento de um FORM
14.9 Método getElementById

Este método retorna um objeto que foi encontrado em toda arvore no documento, com o
ID correspondente. Ele pode ser usado em qualquer posição dos nodos da árvore de
objetos da API DOM.
Exemplo:
Var valor1, valor2;

var telefone = document.forms[0].getElementById(“telefone”);
valor1 = telefone.value;
// ou podemos atribuir diretamente o value à variável
Valor2 = document.forms[0].getElementById(“telefone”).value;
no trecho de código desenvolvido acima, representa um busca dentro do primeiro FORM

pelo id do objeto igual a “telefone”.
Este método poderia ter sido usado dentro de qualquer estrutura da API.

Exemplo:
var telefone = document.getElementById(“telefone”);

var valor = telefone.value;
Mostrando que este método não é proprietário do objeto FORM, caso ele encontre mais
de um objeto o retorno vai ser um array de elementos.
14.10 Objeto Frameset

O objeto Frameset representa o frameset HTML.
Contendo a mesma limitação quanto a indisponibilidade em uma grande variedades
browsers.
Exemplo de mapeamento de frameset:
<html>
<frameset id="myFrameset" cols="50%,50%">
<frame id="leftFrame" src="frame_a_noresize.htm">
<frame id="rightFrame" src="frame_a.htm">
</frameset>
</html>
frame_a.htm
<html>
<body bgcolor="#66CCFF">
<h3>Frame A</h3>
</body>
</html>
frame_a_noresize.htm
<html>
<head>
function disableResize()
{
parent.document.getElementById("leftFrame").noResize=true
parent.document.getElementById("rightFrame").noResize=true
}
function enableResize()
{

parent.document.getElementById("leftFrame").noResize=false
parent.document.getElementById("rightFrame").noResize=fals
e
}
</script>
</head>
<body bgcolor="#EFE7D6">
<form>
<input type="button" onclick="disableResize()" value="No
resize">
<input type="button" onclick="enableResize()"
value="Resize">
</form>
<p>Aula de javascript com DOM</p>
</body>
</html>
14.10.1 Atributos do Objeto frameset
Atributo descrição
Cols Seta ou retorna o numero de colunas ocupadas em um frame.
Id Seta ou retorna o id de um frameset
Rows Seta ou retorna o numero de linhas ocupadas em um frame.
14.10.2 Metodos de Objeto Frameset
Métodos descrição
blur() Remove o foco de um frameset
focus() Recebe o foco
14.10.3 Eventos de objeto de um Frameset
Event Description

onBlur Executado quando o foco sai de um frameset
onFocus Executado quando um frameset recebe o foco.

Unidade 15Manipulando forms com DOM

15.1 Tutorial
Para tirarmos o máximo de proveito dos recursos da linguagem Javascript devemos saber
como a linguagem interage com as páginas HTML. O Javascript tem acesso a diversos
objetos disponíveis em uma página HTML, visto que o próprio código Javascript é
colocado dentro da página HTML.
O Javascript consegue acessar os elementos da página HTML de forma hierárquica, ou
seja, temos um objeto chamado document que é acessível a qualquer script colocado na
página. A partir do objeto document, é possível acessar todos os elementos da páginas,
desde os frames até os próprios elementos de um formulário contido dentro da página.
Abaixo podemos ver um exemplo de como funciona esta hierarquia.
document
Forms[] Frames[] Elementos[]

Formulários Frames Elementos
HTML)
A partir do objeto document podemos ter acesso a qualquer elementos contido dentro da
página HTML, como por exemplo uma caixa de texto de um formulário.
O próprio objeto document possui uma série de propriedades e métodos que podem ser
utilizadas pelo JavaScript para interagir ou modificar a aparecia do documento.
Podemos visualizar uma série de propriedades do objeto document com o script abaixo:
<script>
alert(document.location);
alert(document.referrer);
alert(document.fgColor );
alert(document.forms.length );
alert(document.images.length);
alert(document.links.length);
alert(document.readyState );
</script>

Além de poder visualizar as informações referentes ao documento, o Javascript ainda

pode interagir com diversos elementos contidos no HTML. Tomemos como exemplo o
HTML abaixo:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<img src="mmc.gif">
<img>
<img>
<img>
<br>
</BODY>
</HTML>
Como podemos ver o HTML possui três elementos do tipo IMG, que representam
imagens dentro do documento. Também podemos notar que somente a primeira imagem
possui a propriedade src definida. Através do Javascript, podemos perfeitamente acessar a
coleção de imagens de um documento através da propriedade images. A propriedade
images contém uma coleção de todas as imagens disponíveis dentro de um documento.
No script abaixo vemos um exemplo onde utilizamos a propriedade src da primeira
imagem para carregar as demais imagens do document.
<script>
alert("Note que as imagens não estão carregadas !");
document.images[1].src = document.images[0].src;
document.images[2].src = document.images[0].src;
alert("Agora as imagens estão carregadas !");
</script>
Além de poder acessar as imagens de um documento, podemos também acessar a coleção

de links disponíveis. O objeto document possui acesso a coleção de links disponíveis na
página através da propriedade links. Através desta propriedade podemos acessar e até
modificar cada um dos links da página. Tomemos como exemplo o HTML abaixo.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<a href=""></a><br>
<a href=""></a><br>
<a href=""></a><br>
<a href=""></a><br>
<a href=""></a><br>
<br>
<input type="button" value="Inserir Links" onClick="javascript:popula();">
</BODY>
</HTML>
Através de um bloco de javascript podemos perfeitamente alterar as características

dos links disponíveis na página, acessando a propriedade links do objeto document. Ao
acessar cada um dos links podemos perfeitamente alterar o caminho para o qual o link
está apontando, bem como o texto contido dentro do link. O exemplo abaixo mostra
como alterar os links no HTML apresentado acima.
<script>
function popula(){
var sAlunos = new Array();
sAlunos[0] = "Andre";
sAlunos[1] = "Joao";
sAlunos[2] = "Maria";
sAlunos[3] = "Jose";
sAlunos[4] = "Carlos";
sAlunos.sort();
for(nCount=0;nCount<sAlunos.length;nCount++)
{
document.links[nCount].href =
"http://www.processor.com.br/alunos/" + sAlunos[nCount];
document.links[nCount].innerHTML = sAlunos[nCount];
}
}
</script>
Além de alterar propriedades dos elementos podemos criar conteúdo dinâmico no

documento através do JavaScript. Isto pode ser obtido através da utilização do método
write do objeto document. Com o método write podemos escrever conteúdo dentro do
HTML no mesmo ponto onde se encontra o código script de forma dinâmica. Um
exemplo de implementação do método write pode ser observado abaixo.
<script>

var sAlunos = new Array();

sAlunos[0] = "Andre";
sAlunos[1] = "Joao";
sAlunos[2] = "Maria";
sAlunos[3] = "Jose";
sAlunos[4] = "Carlos";
sAlunos.sort();
for(nCount=0;nCount<sAlunos.length;nCount++)
{
document.write(sAlunos[nCount] + "<br>");
}
</script>
Além de criar conteúdo dinâmico, podemos alterar outras propriedades do documento,

como por exemplo sua própria localização. Alterando a localização do documento faz
com que a página seja automaticamente redirecionada para outra página especificada pelo
script. O exemplo abaixo mostra como podemos alterar a localização do documento
através de um script. A alteração é feita acessando a propriedade location do document. A
propriedade location é um objeto que contém diversas informações sobre a localização
atual do documento. Para alterar o documento para outra página do site, devemos trocar a
propriedade href.
<script>
if(dtData.getHours() > 12)

document.location.href = "tarde.htm";
else
document.location.href = "manha.htm";
</script>
Além de alterar a localização, podemos também recarregar o documento através do

comando reload. O exemplo abaixo mostra como recarregar o documento após um
determinado intervalo de tempo. setTimeout, que executa uma instrução Javascript após
um determinado intervalo de tempo, especificado como parâmetro na função.
<script>
document.write(dtData.getHours() + ":"
+ dtData.getMinutes() + ":"
+ dtData.getSeconds());

setTimeout("document.location.reload();", 2000);
</script>
15.2 Mapeando eventos de um formulário

Antes de verificarmos como buscar as informações digitadas pelo usuário em um
formulário devemos compreender como funciona o processo de mapeamento de eventos
em um formulário HTML.
O mapeamento de eventos é um processo que ocorre em resposta a alguma interação do
usuário com o formulário, como por exemplo um clique em um botão. Podemos associar
os eventos de diversos elementos HTML a diversos eventos disponíveis. Cada elemento
possui seu próprio conjunto de eventos, que refletem as características específicas do
elemento de entrada de dados. Para mapearmos eventos de um elemento em um
formulário HTML podemos utilizar três técnicas.
Exemplo
function click()
{
if (event.button == 1)
{
if(document.bgColor == "#ffff00")
{
document.bgColor = "red";
}
else
{
document.bgColor="#ffff00";
}
}
if (event.button == 2){alert("Copyright mann");}
}
document.onmousedown=click;
15.2.1 Mapeando Eventos através da tag script

Uma das maneiras que podemos utilizar para mapear eventos em um formulário HTML é
através da própria tag script. A tag script possui parâmetros que nos permitem indicar
qual elemento do documento HTML e qual evento do elemento queremos mapear.
Para mapearmos um evento de um objeto no documento HTML devemos informar na tag
SCRIPT do HTML os atributos EVENT e FOR. O atributo FOR indica para qual elemento
do documento o código de script em questão irá executar. O atributo EVENT indica em

qual evento do objeto indicado no atributo FOR o script será executado. Tomemos como
exemplo o HTML com o formulário abaixo:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !">
</FORM>
</BODY>
</HTML>
Se quisermos mapear o evento clique no botão criado no formulário HTML mostrado

acima, devemos criar um bloco de script com o atributo FOR indicando para o botão com
o nome de btnOK, e o atributo EVENT indicando para o evento “onclick”. Podemos ver
um exemplo do mapeamento deste evento no bloco de script apresentado abaixo.
Parte superior do formulário

Parte inferior do formulário
<SCRIPT FOR=btnOk EVENT="onclick">

alert("Você clicou no botão !");
</SCRIPT>
Esta técnica de mapeamento de eventos pode ser utilizada para mapear eventos não só
dos elementos HTML em geral, mas também eventos do próprio documento, como o
evento de carregamento. O exemplo abaixo mostra um bloco de script que mapeia o
evento OnLoad do documento contido na janela do browser.
<SCRIPT FOR=window EVENT="onload">

alert("O documento foi carregado !");
</SCRIPT>
15.2.2 Mapeando eventos através de funções

Outra técnica que podemos utilizar para mapear eventos é através de funções. Para
mapearmos eventos através desta técnica, é necessário o desenvolvimento de uma função
para cada evento que queremos mapear de um determinado objeto.
Tendo criado a função que irá mapear o evento, é necessário especificar um novo atributo
no elemento do formulário o qual queremos mapear o evento. O nome deste atributo será
o nome do próprio evento a ser mapeado (Ex.: onclick, onload, onkeypress, onkeydown,

onchange, etc.), e o valor contido neste atributo será o nome da função utilizada para
mapear o evento. O exemplo a seguir mostra o mesmo HTML mostrado no exemplo
anterior, porém utilizando a técnica de mapeamento por funções.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick=”click_btnOk()”>
</FORM>
</BODY>
</HTML>
Note que incluímos um novo atributo na tag do botão que representa o evento a ser
mapeado. O conteúdo deste atributo é o nome da função que irá executar no momento em
que o evento for acionado, exibida abaixo:
<SCRIPT>
function btnOk_click()
{
}
</SCRIPT>
É importante salientar que para este tipo de implementação é sempre aconselhável

colocar o código da função de mapeamento de evento ANTES da tag de definição do
elemento, de preferência dentro da tag <HEAD> do documento, em virtude de alguns
browsers não reconhecerem as funções declaradas após o elemento que utilizará a função.
15.2.3 Mapeamento de eventos através de atribuição

Esta técnica é muito semelhante a técnica de mapeamento de eventos através de funções,
porém a associação da função com o elemento não é feita através da tag do elemento que
irá mapear o evento, e sim através de um outro código de script. Para esta técnica
utilizaremos o mesmo HTML do primeiro exemplo, apresentado abaixo:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !">
</FORM>
</BODY>

</HTML>
Ao invés de utilizarmos os atributos FOR e EVENT para mapear o eventos,

continuaremos utilizando a função de mapeamento, porém associaremos a função de
mapeamento com o objeto em outro bloco de script.
<SCRIPT>
{
}
</SCRIPT>
<SCRIPT>
document.forms[0].btnOk.onclick=btnOk_click;
</SCRIPT>
15.3 Extraindo informações dos formulários HTML

Agora que já sabemos como mapear os eventos dos elementos de um formulário, iremos
buscar informações deste formulário, afim de realizar validações e alterações nas
características deste formulário.
A extração de dados de um formulário começa pela busca da referencia do formulário que
contém o elemento com os dados que queremos utilizar. Esta referencia ao formulário
pode ser feita de diversas formas, que vão variar de acordo com o formato do formulário
15.3.1 Buscando informações de formulários não nomeados

A maior parte dos elementos em um formulário HTML possui um atributo chamado
NAME, que é utilizado para buscar a referencia a este elemento dentro de um código de
script ou no destino final da página (web server). O próprio formulário HTML, na
maioria dos casos, possui um nome associado.
O problema é que o atributo nome não é um atributo obrigatório, nem para os elementos
do formulário, nem para o formulário em si. No caso de o formulário não possuir um
nome, devemos acessá-lo através da coleção forms, contida no objeto document. Cada
formulário possui como propriedades cada um dos elementos contidos dentro dele. Se um
formulário contém um elemento “caixa de texto”, com o nome de txtNome, para o código
javascript este formulário terá uma propriedade chamada txtNome, que representara o
elemento caixa de texto do formulário.
Tomemos como exemplo o HTML abaixo:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY>
<FORM>
<INPUT TYPE=TEXT NAME=txtNome><BR>
<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick="btnOk_click()">
</FORM>
</BODY>
</HTML>
Como este formulário não possui um nome associado, precisamos acessá-lo através da
coleção forms do objeto document. A coleção forms possui um conjunto completo com
todos os formulários disponíveis dentro do document HTML. Como só temos um
formulário dentro de nosso documento, o formulário que queremos é o formulário de
índice 0, conforme apresentado no bloco de script abaixo:
<SCRIPT>
{
alert(document.forms[0].txtNome.value);
}
</SCRIPT>
O código de script acima, busca uma referencia a caixa de texto contida dentro do
formulário do documento e exibe a propriedade value da mesma, que representa o
conteúdo textual da caixa de texto.
15.3.2 Buscando informações de formulários nomeados

Quando os formulários são nomeados, o processo de busca de informações fica mais
fácil, pois é possível referenciar diretamente o formulário que contém o controle que
queremos buscar as informações. Se utilizarmos o mesmo HTML utilizado anteriormente,
porém com um formulário com a propriedade name, podemos alterar nosso código de
script para utilizar este nome associado ao formulário.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM NAME=frmDados>
<INPUT TYPE=TEXT NAME=txtNome><BR>
<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick="btnOk_click()">
</FORM>
</BODY>
</HTML>

Como temos a propriedade NAME associado ao FORM, podemos utilizar nosso

script desta forma:
<SCRIPT>
{
alert(document.frmDados.txtNome.value);
}
</SCRIPT>
15.4 Validando informações no formulário

Agora que sabemos como buscar as informações do formulário HTML, devemos verificar
como extrair as informações dos elementos do formulário. Para isso, devemos conhecer
um pouco mais dos principais tipos de elementos disponíveis nos formulários HTML
15.4.1 Validando informações de caixas de texto

As caixas de texto são os elementos mais simples de um formulário HTML, porém são
também os elementos mais flexíveis. As caixas de texto possuem como propriedade
principal a propriedade value, que devolve o conteúdo da caixa de texto. A propriedade
value nada mais é do que um objeto String do JavaScript que já vimos anteriormente,
contendo todas as suas propriedades e características.
No exemplo abaixo podemos ver um formulário que solicita informações de usuário e
senha em um formulário HTML.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM ACTION="">
Usuário: <INPUT TYPE=TEXT NAME=txtUsuario><BR>
Senha: <INPUT TYPE=PASSWORD NAME=txtSenha><BR><BR>
<INPUT TYPE=BUTTON NAME=btnOk VALUE="Efetuar Logon" onclick="btnOk_click()">
</FORM>
</BODY>
</HTML>
Para criarmos uma função que faça a validação deste formulário, basta criarmos o
mapeamento para o evento onclick do botão efetuar logon e apenas submeter o formulário
no caso de as informações solicitadas estarem corretas. O código de script abaixo realiza
esta validação.

<SCRIPT>
{
if(document.frmDados.txtUsuario.value.length == 0)
{
alert("Informe o usuário !");
document.frmDados.txtUsuario.focus();
return;
}
if(document.frmDados.txtSenha.value.length < 6)
{
alert("A senha deve ter no mínimo 6 dígitos !");
document.frmDados.txtSenha.focus();
return;
}
document.frmDados.submit();
}
</SCRIPT>
No bloco de script acima, utilizamos a propriedade value do objeto txtUsuario para

verificarmos se o campo está ou não preenchido. Note que estamos utilizando a
propriedade length para fazermos esta verificação. A propriedade length pertence ao
objeto String, que representa o conteúdo textual da caixa de texto.
Note que caso o usuário não tenha entrado com as informações no campo usuário, é
apresentado um alerta ao usuário e o foco do campo é posicionado no campo que está
com erro no formulário. O foco é trocado através do método focus, que está presente em
todos os controles de interação com usuário dos formulários HTML. Após a troca do
foco, é chamado o comando return, para que a execução da função seja interrompida.
A validação do controle de senha é feita de forma semelhante a validação do campo de
usuário, porém neste caso estamos verificando se o usuário digitou no mínimo 6 dígitos
para a senha.
Caso as condições estejam satisfeitas, o formulário HTML é submetido para o
WebServer.
15.4.2 Validando listas de seleção simples e múltipla (Combo

e ListBox)
As listas de seleção simples múltiplas possuem o mesmo comportamento dentro de um
formulário HTML. Em ambos os casos é possível verificar se o usuário selecionou
algum item na lista ou se está com algum item da lista selecionado.
Tomemos o HTML abaixo como exemplo

<HTML>
<BODY>
<FORM NAME=frmDados ACTION="">
Pesquisa Vagas<BR>
<BR>
Cidade:
<SELECT SIZE=1 NAME=cmbCidade>
<OPTION VALUE="">-- Selecione a cidade --</OPTION>
<OPTION VALUE="1">Belo Horizonte</OPTION>
<OPTION VALUE="2">Porto Alegre</OPTION>
<OPTION VALUE="3">Rio de Janeiro</OPTION>
<OPTION VALUE="4">São Paulo</OPTION>
</SELECT><BR>
<BR>
Cargos:<BR>
<SELECT SIZE=5 NAME=lstCargo multiple="multiple">
<OPTION VALUE="1">Analista de Sistemas</OPTION>
<OPTION VALUE="2">DBA</OPTION>
<OPTION VALUE="3">Programador</OPTION>
<OPTION VALUE="4">Programador/Analista</OPTION>
<OPTION VALUE="5">Web-Designer</OPTION>
</SELECT><BR><BR>
<INPUT TYPE=BUTTON NAME=btnOk VALUE="Pesquisar" onclick="btnOk_click()">
</FORM>
</BODY>
</HTML>
Neste HTML temos uma caixa de seleção simples e uma caixa de seleção múltipla. Para
testarmos se o usuário selecionou ou não as informações destes controles utilizaremos o
código de script a seguir.
<SCRIPT>
{
if(document.frmDados.cmbCidade.options[0].selected==true)
{
alert("Selecione a cidade !");
document.frmDados.cmbCidade.focus();
return;
}
if(document.frmDados.lstCargo.value == "")
{
alert("Selecione o cargo !");
document.frmDados.lstCargo.value = "";
return;
}

}
</SCRIPT>
Para a validação do primeiro campo utilizamos a coleção options do controle cmbCidade.

A coleção options contém uma referencia a cada um dos itens existentes dentro da caixa
de seleção. Os itens podem ser acessados da mesma forma que um array simples em
JavaScript. Cada item das caixas de seleção, representados na coleção options, possuem
uma série de propriedades, dentre elas a propriedade selected. A propriedade selected
devolve um valor verdadeiro caso o item esteja selecionado, e falso caso não esteja
selecionado. No caso de caixas de seleção múltipla, é possível testar se mais de um item
foi selecionado através da coleção options, testando cada um dos valores da propriedade
selected de cada item.
document.frmDados.lstCargo.options[0].value;
document.frmDados.lstCargo.options[0].innerHTML;
document.frmDados.lstCargo.options[0].selected;
As caixas de seleção também possuem, assim como as caixas de texto, a propriedade

value, que indica o valor do item selecionado. No caso da segunda caixa de seleção,
estamos fazendo um teste para verificar se o valor da caixa de seleção é branco ou não, o
que indica que o usuário não selecionou nenhum item. Caso as condições sejam
satisfeitas, o formulário é submetido ao servidor para o processamento.
15.4.3 Validando caixas de escolha simples e múltipla

(RadioButton e CheckBox)
Para finalizarmos o módulo de validação de dados em formulários HTML, devemos
verificar a validação das caixas de escolha simples e múltipla. Estas caixas permitem ao
usuário selecionar itens de forma múltipla ou simples em um formulário.
Tomemos o HTML que segue como exemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>
Selecione o grau de escolaridade:<br>
<input type=radio name=optEscolaridade value="1">Analfabeto<br>
<input type=radio name=optEscolaridade value="2">1º Grau<br>
<input type=radio name=optEscolaridade value="3">2º Grau<br>
<input type=radio name=optEscolaridade value="4">Superior Incompleto<br>
<input type=radio name=optEscolaridade value="5">Superior Completo<br>
<input type=radio name=optEscolaridade value="6">Pós, mestrado<br>
<br>

<input type=checkbox name=chkAtividadeFisica value="A">Pratica Atividade Física

<input type=checkbox name=chkFumante value="F">Fumante
<br><Br>
<input type=button value="Enviar" onclick="Validar()">
</BODY>
</HTML>
Para validarmos o formulário HTML acima utilizaremos a função Validar, que está
mapeada para o clique do botão Enviar, apresentada no bloco de script abaixo
<script>
function Validar()
{
var nCount;
var bSelecionou = false;
for(nCount=0; nCount<document.frmDados.optEscolaridade.length; nCount++)
{
if(document.frmDados.optEscolaridade[nCount].checked)
{
bSelecionou = true;
break;
}
}
if(bSelecionou == false)
{
alert("Selecione o grau de escolaridade !");
return;
}
if(document.frmDados.optEscolaridade.value=="")
{
alert("Selecione o grau de escolaridade !");
return;
}
if(document.frmDados.chkFumante.checked == true)
{
alert("O Ministério da saúde adverte. Fumar faz mal a saúde !");
}
}
</script>
Note que para validarmos ambos os controles estamos utilizando a propriedade checked.
A propriedade checked é utilizada para verificar se um controle de seleção está marcado
ou desmarcado, e serve tanto para radiobuttons como para checkbox.
Na primeira validação, note que temos um conjunto de options com o mesmo nome. Isto
faz com que o script interprete os controles como um array de controles, nos obrigando a

informar o índice de cada um dos controle antes de acessá-los. Criamos uma variável
bSelecionou para verificarmos se o usuário selecionou pelo menos um option button.
Caso ele encontre um option button com a propriedade checked igual a true, a variável
bSelecionou será definida para true, validando o formulário.
Para os outros dois campos, apenas estamos testando a propriedade checked para dar um
alerta para o usuário.
15.4.4 Criando uma função para mascaras de campos

O conteúdo desenvolvido abaixo é para demonstrar a aplicação de alguns comandos em
javascript, desenvolva o script e veja o resultado.
<HTML>
<HEAD>
</HEAD>
<BODY>
<input type=text name=”CPF” onkeypress=”return EditMask(this,
´999.999.999-99´, event);” >
<input type=text name=”Fone” onkeypress=”return EditMask(this,
´(99)9999.9999´, event);” >
</BODY>
</HTML>
Criaremos uma função que manipule a tag para que o formato digitado seja o pré-definido
no código:
<script language=”javascript”>
function EditMask(objField, sMask, evtKeyPress) {
var i, nCount, sValue, fldLen, mskLen,bolMask, sCod, nTecla;
if(document.all) { // Internet Explorer
nTecla = evtKeyPress.keyCode; }
else if(document.layers) { // Nestcape
nTecla = evtKeyPress.which;
}
sValue = objField.value;
// Limpa todos os caracteres de formatação que
// já estiverem no campo.
sValue = sValue.toString().replace( "-", "" );
sValue = sValue.toString().replace( "-", "" );
sValue = sValue.toString().replace( ".", "" );
sValue = sValue.toString().replace( ".", "" );
sValue = sValue.toString().replace( "/", "" );

sValue = sValue.toString().replace( "/", "" );

sValue = sValue.toString().replace( "(", "" );
sValue = sValue.toString().replace( "(", "" );
sValue = sValue.toString().replace( ")", "" );
sValue = sValue.toString().replace( ")", "" );
sValue = sValue.toString().replace( " ", "" );
sValue = sValue.toString().replace( " ", "" );
fldLen = sValue.length;
mskLen = sMask.length;
i = 0;
nCount = 0;
sCod = "";
mskLen = fldLen;
while (i <= mskLen) {

bolMask = ((sMask.charAt(i) == "-") || (sMask.charAt(i) ==
".") || (sMask.charAt(i) == "/"))
bolMask = bolMask || ((sMask.charAt(i) == "(") ||
(sMask.charAt(i) == ")") || (sMask.charAt(i) == " "))
if (bolMask) {
sCod += sMask.charAt(i);
mskLen++; }
else {
sCod += sValue.charAt(nCount);
nCount++;
}
i++;
}
objField.value = sCod;
if (nTecla != 8) { // backspace
if (sMask.charAt(i-1) == "9") { // apenas números...
return ((nTecla > 47) && (nTecla < 58)); } // números de 0 a
9
else { // qualquer caracter...
return true;
} }
else {
return true;
}
}
</script>

15.5 Validação com Regular Expressions (RegEx)

Uma Expressão Regular, REGEX ou REGEXP é, basicamente, uma seqüência de
Caracteres Gráficos dispostos sob uma determinada regra, de modo a coincidir com um
fragmento padrão de texto particular - presente em um determinado documento. A baixo
usamos esta lógica para validação de um campo email.
Modelos de Regular Expressions:
Testa valor String filtro utilizada
CEP /^[0-9]{5}-[0-9]{3}$/
CPF /^([0-9]{3}\.){2}[0-9]{3}-[0-9]{2}$/
Datas até 2099 formato (YYYYMMDD) /^20[0-9][0-9]([012][0-9]|[3][01])([0][0-

9]|[1][012])$/
MacAddress /^(([0-9a-f]{2}):){5}([0-9a-f]{2})$/
IP 1]?[0-9]{1,2}|2([0-4][0-9]|5[0-5]))\.){3}([1]?[0-
9]{1,2}|2([0-4][0-9]|5[0-5]))$/
Email /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-
zA-Z0-9]{2,4})+$/
HTML (substitui tags por nada) “<[^>]*>”, “”
function checkMail()
{
// atribui a variável x o valor do campo email do formulário
var x = document.forms[0].email.value;
/* cria uma variável com o filtro para fazer a pesquisa na string (neste caso é
para validar um emaill) */
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-
9]{2,4})+$/;
//Faz consistência com o método test da variável x
if (filter.test(x)) alert(Email válido!');
else alert('Email inválido!');
}

Unidade 16 Objeto window

7.1 Métodos do objeto window
É o objeto principal na hierarquia e contém as propriedades e métodos para controlar a
janela do navegador. Dele dependem todos os demais objetos da hierarquia. Vamos ver a
lista de suas propriedades e métodos.
Método Descrição
alert(texto) Apresenta uma janela de alerta onde se pode

ler o texto que recebe por parâmetro.
back() Ir uma página atrás no histórico de páginas

visitadas. Funciona como o botão de voltar da
barra de ferramentas. (Javascript 1.2)
blur() Tirar o foco da janela atual. (Javascript 1.1)
captureEvents(eventos) Captura os eventos que se indiquem por

parâmetro (Javascript 1.2).
clearInterval() Elimina a execução de sentenças associadas a

um intervalo indicadas com o método
setInterval().(Javascript 1.2)
clearTimeout() Elimina a execução de sentenças associadas a

um tempo de espera indicadas com o método
setTimeout().
close() Fecha a janela. (Javascript 1.1)
confirm(texto) Mostra uma janela de confirmação e permite

aceitar ou rejeitar
find() Mostra uma janelinha de busca. (Javascript 1.2

para Netscape)
focus() Coloca o foco da aplicação na janela.

(Javascript 1.1)
forward() Ir uma página adiante no histórico de páginas

visitadas. Como se clicássemos o botão de
adiante do navegador. (Javascript 1.2)

home() Ir à página de início o explorador que tenha

configurado. (Javascript 1.2)
moveBy(pixelsX, pixelsY) Move a janela do navegador os pixels que se

indicam por parâmetro para a direita e para
baixo. (Javascript 1.2)
moveTo(pixelsX, pixelsY) Move a janela do navegador à posição indicada

nas coordenadas que recebe por parâmetro.
(Javascript 1.2)
open() Abre uma janela secundária do navegador.
print() Como se clicássemos o botão de imprimir do

navegador. (Javascript 1.2)
prompt(pergunta,inicio_da_resposta) Mostra uma caixa de diálogo para pedir um

dado. Devolve o dado que se escreveu.
releaseEvents(eventos) Deixa de capturar eventos do tipo que se

indique por parâmetro. (Javascript 1.2)
resizeBy(pixelslargo,pixelsAlto) Redimensiona o tamanho da janela,

acrescentando ao seu tamanho atual os
valores indicados nos parâmetros. O primeiro
para a altura e o segundo para a largura.
Admite valores negativos se se deseja reduzir
a janela. (Javascript 1.2)
resizeTo(pixelslargo,pixelsAlto) Redimensiona a janela do navegador para que

ocupe o espaço em pixels que se indica por
parâmetro (Javascript 1.2)
routeEvent() Encaminha um evento pela hierarquia de

eventos. (Javascript 1.2)
scroll(pixelsX,pixelsY) Faz um scroll da janela para a coordenada

indicada por parâmetro. Este método está
desaconselhado, pois agora se debería utilizar
scrollTo()(Javascript 1.1)
scrollBy(pixelsX,pixelsY) Faz um scroll do conteúdo da janela relativo à

posição atual. (Javascript 1.2)
scrollTo(pixelsX,pixelsY) Faz um scroll da janela à posição indicada pelo

parâmetro. Este método tem que ser utilizado
ao invés do scroll. (Javascript 1.2)

setInterval() Define um script para que seja executado

indefinidamente em cada intervalo de tempo.
(Javascript 1.2)
setTimeout(sentença,segundos) Define um script para que seja executado uma

vez depois de um tempo de espera
determinado.
Como clicar o botão de stop da janela do

stop() navegador. (Javascript 1.2)
Exemplo do uso de algumas funções da propriedade window:
<script>
function Abrejanela(Opcao) {
Versao = navigator.appVersion
Versao = Versao.substring(0, 1)
Local = ""
if (Versao < 3) {
Local = document.location
UltLoc = Local.lastIndexOf("/")
Local = Local.substring(0, UltLoc + 1)
}
NovaJanela = window.open ("", "OutraJanela", "width=300,height=400")

NovaJanela.document.open()
NovaJanela.document.write ("<html><head><title>Nova Janela")
NovaJanela.document.write ("</title></head><body bgcolor='white'>")
NovaJanela.document.write ("<form>")
if (Opcao == 1)
{
NovaJanela.document.write ("<br>Logomarca Elogica<hr><br>")
NovaJanela.document.write
("<img width=200 height=200 src=" + Local + "Marcaelo.gif>")
}
else
{
NovaJanela.document.write ("<br>Recife Alto Astral<hr><br>")
NovaJanela.document.write
("<img width=150 height=200 src=" + Local + "Recife.gif>")
}
//
NovaJanela.document.write ("<br><hr><p></p></form>")
NovaJanela.document.write ("<form><input type='button' name='Fecha'" +
"value='Fecha Janela'" + "onclick='window.close()'>")
NovaJanela.document.write ("<input type='button' name='imprime'" +
"value='imprimir Janela'" + "onclick='window.print()'>")
NovaJanela.document.write ("</form></body></html>")
NovaJanela.document.close()

}
</script>
<body>
<p></p>
<p>Escolha a foto a ser apresentada na nova janela:</p>
<form method="POST" name="Form1">
<p>
<input type=radio name="Opcao" value="1" checked>Elogica
<input type=radio name="Opcao" value="2">Recife
</p> <p>
<input type="button" name="Envia" value="Nova Janela"
onclick="if (Form1.Opcao[0].checked == true){Abrejanela(Form1.Opcao[0].value) }
else {Abrejanela(Form1.Opcao[1].value) } "><strong></strong>
</p>
</form>
</body>

Unidade 17 - Anexo 1
Principais tags
Neste anexo apresentamos todas as tabelas de tags HTML apresentadas nas unidades
anteriores, para facilitar a consulta:
TAG O QUE FAZ
 Insere comentários nas páginas
<html> Toda página HTML deve estar entre o tag de início de um

documento HTML e o tag de fim deste documento.
<head> Envolvem a seção de cabeçalho do documento, no qual são

especificadas informações que não são exibidas na página,
como título do documento e informações sobre o assunto da
página.
<title> Indica o título do documento para o Browser. Geralmente os

Browsers apresentam este título na barra de título da sua
Janela no Windows

<br> Insere uma quebra de linha
TAG O QUE FAZ
<hn> Marca um título. Sendo que “n” representa um valor que

pode ser de 1 a 6, o tamanho muda de forma decrescente,
ou seja, o número 1 é o maior tamanho do título.
<hr> Insere uma linha horizontal
<p> Marca um parágrafo
<center> Centraliza todo o conteúdo entre as tags <center> e

</center>
<b> Coloca o texto em negrito
<i> Coloca o texto em itálico

<u> Coloca o texto sublinhado
<tt> Coloca o texto em fonte monoespaçada. (fonte

Courier,como máquina de escrever)
<font> Modifica a formatação do texto.

Atributos:
Size = define o tamanho da letra. Ex: <font
size=5>Texto</font>
Face = define o estilo da letra. Ex: <font
face=verdana>Texto</font>
Color = define a cor da letra. Ex:<font
color=red>Texto</font>
<pre> Marca um trecho formatado com fonte monoespaçada. A

formatação com espaços e entrada de parágrafos é
respeitada.
<basefont> Modifica a formatação padrão do texto.

Ex: <basefont size=5>
TAG O QUE FAZ
<ol> Marca o início e o fim de uma lista ordenada. Recebem na

primeira linha um número ou letra.
Atributos:
Start = especifica o número a partir do qual os itens
começam a ser contados. Ex: <ol start=3>
Type = modifica o tipo do numerador que pode ser:
número, letras ou algarismo romano.
<ul> Marca o início e o fim de uma lista não ordenada, ou seja,

os itens da lista recebem símbolos na primeira linha.
Atributos
Type = modifica o tipo do marcador (símbolo), que pode ser:
Circle = um círculo vazio.
Disc = um círculo cheio.
Square = um quadrado cheio
<li> Marca um item de uma lista, ordenada ou não ordenada.

TAG O QUE FAZ
<img> Insere uma imagem

Atributos
src indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da
imagem
align=left faz a imagem flutuar a esquerda enquanto o texto
circunda imagem à direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto
circunda imagem à esquerda.
alt=”n” indica o texto para ser exibido quando o navegador
não exibe a imagem. Sendo que n é o título que identifique
a imagem.
Exemplo: <img src=fig.jp alt=”Esta é uma imagem legal”>
TAG O QUE FAZ
<a> Define um link

Atributos
Href: indica o endereço do link.
Target: define onde o link será aberto: _blank define que
será aberta uma nova janela.
TAG O QUE FAZ
<table> Define uma tabela. Antes e depois de uma tabela, acontece

sempre uma quebra de linha.
Atributos
Border: define espessura da borda da tabela
Cellspacing: espaço entre cada célula
Cellpadding: distância entre borda e conteúdo de cada
célula.
Width: largura da tabela, em pixels ou valor percentual
<tr> Define uma linha normal da tabela (table row).

Atributos


horizontal.
vertical.
<td> Esta é a marcação que define cada célula de uma tabela.

As células de uma tabela devem sempre aparecer entre as
marcações de linhas (<tr> e </tr>). Como padrão, o texto
nas células é alinhado a esquerda.
Atributos
horizontal.
vertical.
Nowrap: não há quebra de linhas dentro das células
Colspan: número de colunas que a célula irá ocupar
Rowspan: número de linhas que a célula irá ocupar
Width: largura da célula, em pixels ou valor percentual
<th> Desta forma são definidos os títulos de uma tabela. Estes

podem ser posicionados em qualquer célula. A diferença
entre a marcação de célula e título de célula é que o título
aparece em negrito.
Atributos: os mesmos apresentados acima, para td
TAG O QUE FAZ
<form> Define um formulário

Atributos
method: get, que envia as informações na própria URL, ou
post, que envia de forma não visível para o usuário
action: url que será chamada, a priori um aplicativo capaz
de tratar os dados enviados pelo formulário (PHP, ASP,
JSP).
<input> Define uma entrada de dados

Atributos
Type: text, campo tipo texto; password, para senhas;
hidden, não aparece para o usuário; checkbox, para
marcar; radio, para escolher entre um conjunto de opções.
submit cria um botão para enviar os dados e reset um
botão para limpar o formulário.

Name: nome do campo

Value: valor pré-definido para o campo
Size: tamanho do campo a ser exibido
Maxlength: tamanho máximo de caracteres
Checked: para campos checkbox e radio, define como
marcado
<textarea> Define uma entrada de texto com várias linhas

Atributos
Rows: número de linhas
Cols: número de colunas
<select> Define uma lista de opções para selecionar

Atributos
Name: nome do campo
Multiple: permite selecionar vários campos da lista
Site: define o número de linhas a serem exibidas
<option> Item de uma lista aberta

Atributos
Value: valor do campo se este item for selecionado
Selected: indica que este valor está selecionado

Unidade 18 - Anexo 2
Frames
18.1 Estrutura Básica - Frameset
O "Frame Document" é um arquivo onde se define a estrutura das janelas para seu
hiperdocumento em HTML. Quantas serão e qual sua distribuição em tela. Neste
documento as marcações <body> e seu par </body> são substituídas por <frameset> e
</frameset>. Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nível
na estrutura do seu serviço de informações baseado em WWW.
Pronto, agora é preciso definir cada frame/janela internamente à(s) área(s) de frameset.
Ou seja, as características de cada janela e seus "conteúdos" - URL incial. Cada
janela/frame é antecedido da marcação <frame>, como numa lista cada item é antecedido
por <li>. Usualmente, uma URL virá associada a cada frame.
A estrutura mínima do frame document será então:
<html> Atenção: Note que com apenas essas

marcações o documento da estrutura - Frame
<head> Document - não funciona. É necessário que
esteja definido algum atributo para as áreas
<title></title> de frameset, assim como associadas urls a
cada frame, como veremos mais adiante.
</head>
Atenção II: Você poderá ter - e

<frameset ...> provavelmente terá - vários <frameset>
intercalados. Da mesma foma como é
<frame src="URL"> possível intercalar listas, ou tabelas em
HTML.
<frame src="URL">
</frameset>
</html>
Cada uma destas marcações - <frameset> e <frame> - aceita extensões, valores e

atributos, como veremos a seguir.

18.1.1 Atributos de Frameset
Frameset aceita os atributos ROWS e COLS, referentes divisões horizontais(como linhas

em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente a
marcações FRAMESET só poderão aparecer outras FRAMESET, FRAME ou
NOFRAMES.
Importante: Não podem ser utilizadas as marcações válidas entre marcações
<BODY></BODY> nem internamente a marcações FRAMESET, nem antes dela, senão
FRAMESET será ignorada.
ATRIBUTOS
1. ROWS (<frameset rows=“valor, valor, valor...”>)
Define divisões horizontais.entre janelas. Vem sempre acompanhado de valores
associado, que definem quanto da tela cada janela vai ocupar. Dessa forma, para cada
janela a ser criada deverá haver um valor associado. Estes valores devem vir separados
por vírgulas.
Este valor poderá ser:
Numérico - pixels=> (ROWS="30, 50") Refere-se a quantos pixels cada frame (ou janela)
deve ocupar. A desvantagem desta notação é que não é possível ter controle do valor total
de pixels que o cliente do usuário compreende.
Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual, sempre
somando um valor de 100%.
É o método mais simples.
Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o
primeiro frame vai ocupar dois terços da tela, e o segundo um terço.
Exemplos :
1. Para dividir a tela do browser em três janelas horizontais, sendo que a do meio é mais
larga que as de cima e de baixo:

<html>
<head>
<title></title>
</head>
<frameset rows="20%, 60%, 20%">
<frame src="cell1.html">
</frameset>
</html>
2.Três janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o
frame central deverá ocupar o restante do espaço:
<html>
<head>
<title></title>
</head>
<frameset rows="30, *, 50">
</frameset>

</html>

2. COLS (<frameset cols=“valor, valor, valor.. “>)

Funciona exatamente como a marcação anterior, no entanto, divide a tela em frames ou
janelas verticais.
Exemplos
Para dividir a tela do browser em três janelas verticais
1.Três colunas, sendo que a do meio é mais larga que as de cima e de baixo:
<html>
<head>
<title></title>
</head>
<frameset cols="20%, 60% ,20%">
</frameset>
</html>

2.Três janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame
central deverá ocupar o restante do espaço:
<html>
<head>
<title></title>
</head>
<frameset cols="200, *, 100">
</frameset>
</html>
Atenção, para intercalar janelas verticais e horizontais, será necessário definir várias
áreas "FRAMESET". Para cada área delimitida como "FRAMESET" você poderá definir
número de linhas OU colunas. Veremos como fazê-lo mais adiante. Não é possível
definir COLS e ROWS para uma mesma área “FRAMESET”.

18.1.2 Frame
A marcação FRAME define cada janela contida em uma área “frameset”. Esta marcação
não necessita de uma tag de finalização (</frame>) e aceita 6 atributos possíveis:
1. SRC="url"
O atributo SRC define a URL que será exibida em cada frame.
2. NAME="nome_da_janela"
Este atributo é utilizado para associar um nome a uma janela. Deve ser usado quando uma
janela - frame - for o destino de um link em outro documento (normalmente é no mesmo
documento. Um frame apontando para outro. Tipo um índice abrindo várias urls em
outras janelas).
Este atributo é opcional. Por padrão, os frames não tem nome.
Importante, o nome_da_janela deve começar por caracter alfanumérico.
3. MARGINWIDTH="valor"
Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distância
entre o conteúdo da página e as margens da janela. O valor associado será um valor
absoluto em pixels. O menor valor aceito será 1.
Este atributo é opcional, caso não venha definido, o browser usará o seu padrão para
definir as margens no frame/janela.
4. MARGINHEIGHT="valor"
Também é um atributo opcional. Funciona exatamente como o anterior, só que determina
as margens superior/inferior em cada frame.
5. SCROLLING="yes/no/auto"
Novamente, é um atributo opcional, que define se uma janela deve possuir barra de
rolagem ou não. Caso seja definido como YES, a janela sempre possuirá uma barra de
rolagem visível. Caso seja definido como NO, nunca haverá barra de rolagem. E,
finalmente, se vier como AUTO, o browser aplicará a barra quando necessário.
O padrão é AUTO, portanto, se o atributo scrolling não vier definido, o browser aplicará
a barra de rolagem, sempre que necessário.
6. NORESIZE

Este atributo não possui valor associado. Quando ele não aparece, o usuário poderá
alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padrão é que
todas as janelas possam ter seu tamanho alterado. NORESIZE é opcional
Um frame, com todos os atributos definidos seria escrito assim, por exemplo:
<frame src=“http://www.empresa.com.br” name=“home” marginwidth=“5”
marginheight=“5” scrolling=“auto” noresize>

Noframes
Esta marcação possibilita que se crie uma opção de navegação na página para quem não
possui um browser que entende frames.
Esta marcação aparece no documento de estrutura "Frame document", e sempre é usada
em pares (<noframes>.. conteúdo... </noframes>).
Quando o acesso for feito através de um browser que entenda frames, o que estiver entre
as marcações "noframes" será simplesmente ignorado.
Internamente a uma área "noframes" deverá ser usada a estrutura padrão de documentos
html (<head> </head>, <title> </title> <body> </body>, etc...).

Um exemplo:
<html>
<head>
<title>Teste, uso de frames</title>
</head>
<FRAMESET ROWS="15%, 85%">
<NOFRAMES>
<body bgcolor="#000000" text="#ffff00" link="#ff0000" >
Bem-vindo a uma página de teste.<p>
Para acessá-la, você deve utilizar a versão 2.0 ou acima do <i>browser</i><a
href="http://home.netscape.com/comprod/mirror/index.html"> Netscape Navigator!</a>
</p>
<hr>
</body>
</NOFRAMES>
<FRAMESET COLS="25%, 75%">

<FRAME NAME="1" SRC="teste1.htm" NORESIZE>
<FRAME NAME="2" SRC="teste2.htm" NORESIZE>
</FRAMESET>
<FRAMESET COLS="30%, 70%">
<FRAME NAME="3" MARGINWIDTH="50" SRC="teste3.htm">
<FRAMESET ROWS="65%, 35%">
<FRAME NAME="4" SRC="teste4.htm" NAME="chat">
<FRAME NAME="5" SRC="teste5.htm">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</html>

Veja como ela é exibida, por exemplo, com o MOSAIC (não lê frame) e com o
INTERNET EXPLORER (lê frame).
MOSAIC - não lê frame INTERNET EXPLORER - lê frame
Links entre frames
A marcação TARGET, permite que se controle em qual janela um link específico será
exibido quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela lateral
com uma espécie de indíce do serviço de informação e outra janela em que a navegação
propriamente dita vai ocorrer. Desta forma, o índice está permanentemente disponível
durante toda a consulta.
Para utilizar este recurso você deverá:
Atribuir um "name" a cada frame em seu "frame document" (name="valor").
No documento onde será criado um link, que vai aparecer em outra janela, ao criar o link,
acrescentar a marcação target="valor"" à âncora, da seguinte forma:
<a href="URL" target="valor">
Onde este valor é idêntico àquele associado à marcação name no frame document.
Exemplo:


O frame document deverá ser escrito assim: o documento que contém o índice de navegação
(barra.htm), será assim:
<html> <HTML>
<HEAD> <BODY>
<title>Apostila de HTML</title>
</head> <a href="pagina1.html" target=frame1>Link

1</a> -
<frameset rows="30%, 70%">
<a href="pagina2.html" target=frame1>Link
<frame src="cell1.html" name=frame1> 2</a>
<frame src="cell2.html" name=frame1> <a href="pagina3.html" target=frame1>Link

3</a>
</frameset>
</html>
</BODY>
</HTML>

HTML Css Javascript PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML Css Javascript PDF

Загружено:

Авторское право:

Доступные форматы

WEB

Todos os direitos reservados para Alfamídia Prow LTDA.

As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM

Alfamídia Prow LTDA

2 2007  Alfamidia Prow LTDA.

UNIDADE 1 ARQUITETURA DE APLICAÇÕES WEB................................................................................................. 7

3 2007  Alfamidia Prow LTDA.

4.2 INCLUINDO IMAGENS COM A TAG IMG ......................................................................................... 30

4 2007  Alfamidia Prow LTDA.

10.1 O QUE É JAVASCRIPT?................................................................................................................... 69

5 2007  Alfamidia Prow LTDA.

14.9 MÉTODO GETELEMENTBYID......................................................................................................... 94

6 2007  Alfamidia Prow LTDA.

1.2 Páginas Estáticas

7 2007  Alfamidia Prow LTDA.

4. O navegador interpreta o HTML e exibe a página para o usuário. Ele também

Processamento de página pelo navegador

1.3 Introdução a Client Side Scripts e Server Side Scripts

1.3.1 Client Side Scripts e Server Side Scripts

1.3.2 Client Side scripts – Javascript

8 2007  Alfamidia Prow LTDA.

Tratando-se de páginas web, os client-side scripts terão de ser processados por um

Funcionamento de scripts client-side

1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP

9 2007  Alfamidia Prow LTDA.

Requisição de página dinâmica

10 2007  Alfamidia Prow LTDA.

1.4 Ambiente de desenvolvimento

1.5 Servidores WEB e de Aplicação

1.5.1 O que é um Servidor WEB?

11 2007  Alfamidia Prow LTDA.

 Computador Cliente: Computador utilizado pelo usuário.

Resumo: Servidor WEB é um programa de computador que responde requisições.

12 2007  Alfamidia Prow LTDA.

1.5.2 O que é um servidor de aplicações?

1.5.2.1 J2EE(Java 2 Enterprise Edition)

13 2007  Alfamidia Prow LTDA.

1.6.1 Padronização e protocolos de acesso

1.6.2 HTTPS (HyperText Transfer Protocol Secure)

14 2007  Alfamidia Prow LTDA.

15 2007  Alfamidia Prow LTDA.

2.2 As Limitações do HTML

16 2007  Alfamidia Prow LTDA.

2.3 Os Web Standards

2.5 Importância dos Web Standards

17 2007  Alfamidia Prow LTDA.

18 2007  Alfamidia Prow LTDA.

3.2 Conceitos Básicos de HTML

19 2007  Alfamidia Prow LTDA.

3.3 Tags Básicas

TAG O QUE FAZ

Insere comentários nas páginas

<html> Toda página HTML deve estar entre o tag de início de um

<head> Envolvem a seção de cabeçalho do documento, no qual são

<title> Indica o título do documento para o Browser. Geralmente os

<body> Envolvem a seção de corpo do documento. Aqui fica o

<br> Insere uma quebra de linha

3.3.1 Exemplo de HTML com Tags Básicas

20 2007  Alfamidia Prow LTDA.

Minha Primeira Página

3.3.2 Familiarizando-se com o HTML

3.4 Formatação de Textos

TAG O QUE FAZ