5º Semestre - PSOO - 1 a 3

Prévia do material em texto

Curso Superior de 
Sistemas para Internet
Hilário Seibel Júnior
Cuiabá 2011
Desenvolvimento 
de Aplicações WEB
2
Tecnologia em Análise e Desenvolvimento de Sistemas
Governo Federal
Ministro de Educação
Fernando Haddad
Ifes – Instituto Federal do Espírito Santo
Reitor
Denio Rebello Arantes
Pró-Reitora de Ensino
Cristiane Tenan Schlittler dos Santos
Diretora do CEAD – Centro de Educação a Distância
Yvina Pavan Baldo
Coordenadoras da UAB – Universidade Aberta do Brasil 
Yvina Pavan Baldo
Danielli Veiga Carneiro Sondermann
Curso de Tecnologia em Análise e Desenvolvimento de Sistemas
Coordenação de Curso
Andromeda Goretti Correa de Menezes
Designer Instrucional
Andreia Chiari Lins
Professor Especialista/Autor
Hilário Seibel Júnior
Catalogação da fonte: Rogéria Gomes Belchior - CRB 12/417
S457p Seibel Júnior, Hilário
Programação para internet. / Hilário Seibel Júnior. – Vitória: Ifes, 2010. 
 109 p. : il.
 1. Internet - Programas de computador. 2. Programação para internet. 3. 
 HTML (Linguagem de marcação de documento). I. Instituto Federal do Espírito 
 Santo. II. Título.
 CDD 005.1
DIREITOS RESERVADOS
Ifes – Instituto Federal do Espírito Santo
Av. Vitória – Jucutuquara – Vitória – ES - CEP - (27) 3331.2139
Créditos de autoria da editoração
Capa: Juliana Cristina da Silva
Projeto gráfico: Juliana Cristina e Nelson Torres
Iconografia: Nelson Torres
Editoração eletrônica: Duo Translation
Revisão de texto: 
Ilioni Augusta da Costa
COPYRIGHT – É proibida a reprodução, mesmo que parcial, por qualquer meio, sem autorização escrita dos 
autores e do detentor dos direitos autorais.
3
Programação para Internet
Olá, Aluno(a)!
É um prazer tê-lo(a) conosco.
O Ifes oferece a você, em parceria com as Prefeituras e com o Governo 
Federal, o Curso Superior de Tecnologia em Análise e Desenvolvimento 
de Sistemas, na modalidade a distância. Apesar de este curso ser ofertado 
a distância, esperamos que haja proximidade entre nós, pois, hoje, graças 
aos recursos da tecnologia da informação (e-mail, chat, videoconferência, 
etc.), podemos manter uma comunicação efetiva.
É importante que você conheça toda a equipe envolvida neste curso: co-
ordenadores, professores especialistas, tutores a distância e tutores presen-
ciais, porque, quando precisar de algum tipo de ajuda, saberá a quem 
recorrer.
Na EaD - Educação a Distância, você é o grande responsável pelo sucesso 
a aprendizagem. Por isso, é necessário que você se organize para os estudos 
e para a realização de todas as atividades, nos prazos estabelecidos, con-
forme orientação dos Professores Especialistas e Tutores. Fique atento às 
orientações de estudo que se encontram no Manual do Aluno. 
A EaD, pela sua característica de amplitude e pelo uso de tecnologias mo-
dernas, representa uma nova forma de aprender, respeitando, sempre, o 
seu tempo.
Desejamos-lhe sucesso e dedicação!
Equipe do Ifes
4
Tecnologia em Análise e Desenvolvimento de Sistemas
Fala do Professor
Conceitos importantes. Fique atento!
Atividades que devem ser elaboradas por você, 
após a leitura dos textos.
Indicação de leituras complemtares, referentes 
ao conteúdo estudado.
Destaque de algo importante, referente ao 
conteúdo apresentado. Atenção!
Reflexão/questionamento sobre algo impor-
tante referente ao conteúdo apresentado.
Espaço reservado para as anotações que você 
julgar necessárias.
ICONOGRAFIA
Veja, abaixo, alguns símbolos utilizados neste material para guiá-lo em seus estudos
5
Programação para Internet
PROGRAMAÇÃO PARA INTERNET
Cap. 1 - A INTERNET 9
1.1. O que é a Internet? 9
1.2. Principais Padrões e Conceitos 10
1.3. Comércio Eletrônico 12
Cap. 2 - A LINGUAGEM HTML 17
2.1 O que é HTML? 17
2.2 Estrutura de um arquivo HTML 18
2.3 Formatando os textos 21
2.4 Links e âncoras 24
2.5 Imagens 26
Cap. 3 - TABELAS E FORMULÁRIO SEM HTML 29
3.1 Tabelas 29
3.2 Cabeçalhos das tabelas 31
3.3 Mesclando células 32
3.4 Formulários 33
4.1 O que são folhas de estilo? 37
Cap. 4 - FOLHAS DE ESTILO (CSS) 37
4.2 Formação das cores 39
4.3 Fundo da página 41
4.4 Fontes e textos 43
4.5 Tabelas 45
4.6 Links 47
4.7 Classes 47
4.8 Posicionamento 50
Cap. 5 - A LINGUAGEM JAVASCRIPT 55
5.1 O que é Javascript? 55
5.2 Conceitos básicos 56
5.3 Tipos de dados, variáveis e expressões 57
5.4 Estruturas de controle 58
5.5 Funções 59
5.6 Eventos 61
5.7 Validação de formulários 63
6
Tecnologia em Análise e Desenvolvimento de Sistemas
5.8 Expressões regulares 65
5.9 Impedindo a submissão de formulários mal preenchidos 68
Cap. 6 - JAVA PARA WEB 73
6.1 Páginas dinâmicas 73
6.1 Introdução aos Servlets 74
6.2 Principais aspectos de um Servlet 75
6.3 Métodos GET e POST 76
6.4 Primeiro exemplo de Servlet 77
6.5 Começando a criar um webmail 78
Cap. 7 - SERVLETS ACESSANDOBANCO DE DADOS 81
7.1 Criando um banco de dados 81
7.2 Conectando o Servlet a um banco de dados 82
7.3 Cadastro de usuários no banco 83
7.4 Login 84
Cap. 8 - JSP 87
8.1 Introdução ao JSP 87
8.2 Criação de uma padaria virtual 88
8.3 Reaproveitamento de códigos 90
8.4 Catálogo de produtos dinâmico 91
Cap. 9 - GERENCIAMENTO DE SESSÕES 93
9.1 Por que é necessário? 93
9.2 Sessões 94
9.3 Exemplos de sessões 95
9.4 Inserindo uma sessão na padaria virtual 96
9.5 Criando um carrinho de compras 97
Cap. 10 - CONHECIMENTOS ADICIONAIS 101
10.1 AJAX 101
10.2 Desenvolvimento em camadas 105
7
Programação para Internet
APRESENTAÇÃO
Olá Aluno(a)!
Meu nome é Hilário Seibel Júnior e sou professor do IFES desde 2007, 
onde atuo na área de Programação. Formei-me em Ciência da Computa-
ção na UFES em 2004. Em 2007, terminei meu Mestrado em Informática, 
também pela UFES. Tenho interesse pelas áreas de programação, algo-
ritmos, processamento paralelo, lógica, otimização, recuperação de infor-
mação, análise de algoritmos, computação gráfica, jogos, software livre e 
telessaúde.
Produzi este material como instrumento básico para o estudo da discipli-
na de Programação Para Internet. Nesta disciplina aprenderemos a desen-
volver sistemas cujas interfaces com o usuário ocorrem através da WEB.
Veremos muitas linguagens e tecnologias novas: HTML, CSS, JavaScript, 
Servlets, JSP, Ajax etc. Por isso, é importante que você realize as atividades 
propostas em cada capítulo. E lembre-se sempre de guardar seus exercí-
cios, pois eles poderão ser reaproveitados em atividades posteriores.
Além disso, sugerimos outros materiais que podem ajudar na compreen-
são de cada conteúdo aprendido. Toda esta bibliografia complementar 
apresentada aqui está disponível online.
Sucesso! Bons estudos!
Prof. Hilário Seibel Júnior
8
Tecnologia em Análise e Desenvolvimento de Sistemas
9
Programação para Internet
Olá Pessoal
Este é o material que utilizaremos na disciplina Programação para 
Internet. Ao longo dele, aprenderemos novas linguagens e tecnolo-
gias voltadas para a construção de sistemas cujas interfaces com 
usuário são feitas pela web.
Antes disso, veremos neste primeiro capítulo alguns conceitos bási-
cos relacionados à Internet: o que ela é, como surgiu, como a acessa-
mos etc. Estes conhecimentos iniciais serão úteis durante o decorrer 
de toda a disciplina. 
Alguns destes conceitos podem coincidir com os aprendidos nas de-
mais disciplinas relacionadas à Internet neste semestre, como “Pro-
jeto de Sistemas para Internet” e “Tecnologia da Informação para 
Internet”. Não se preocupe: esta é a sua oportunidade de aprender o 
máximo possível sobre a Internet.
1.1. O que é a Internet?
A Internet é um mecanismo de disseminação e divulgação da informação 
pelo mundo, e um meio para colaboraçãoe interação entre indivíduos e 
seus computadores, independentemente de suas localizações geográficas. 
Sua influência atinge não somente os campos técnicos das comunicações 
por computadores, mas toda a sociedade, na medida em que usamos cada 
vez mais ferramentas online (disponíveis através da Internet) para fazer 
compras, adquirir informação e operar em comunidade.
A Internet hoje já é o maior repositório de informações, que podem 
ser acessadas por qualquer pessoa em qualquer parte do mundo. E 
o que torna a Internet tão diferente das outras invenções humanas 
é o insignificante período de tempo em que ela passou a ser usada 
por milhões de pessoas.
A história da Internet, surgida a partir de pesquisas militares nos perío-
dos áureos da Guerra Fria, é complexa e envolve muitos aspectos tecnoló-
gicos, organizacionais e comunitários. Temendo um ataque russo às suas 
A INTERNET
10
Tecnologia em Análise e Desenvolvimento de Sistemas
bases militares, pesquisadores dos Estados Unidos idealizaram (na década 
de 1960) um modelo de troca e compartilhamento de informações seguro 
e descentralizado. Criou-se então uma rede chamada ARPANET.
Na década de 1970, com a diminuição da tensão entre EUA e URSS, 
o governo dos EUA permitiu a entrada na ARPANET de pesquisado-
res que desenvolvessem estudos na área de defesa em universidades. 
Com isso, a ARPANET começou a ter dificuldades em administrar 
todo este sistema, devido ao grande e crescente número de localida-
des universitárias contidas nela. A criação de uma nova ARPANET, 
que possuía localizações não militares, permitiu finalmente o desen-
volvimento da rede. Não só os pesquisadores, mas também os alunos 
mais envolvidos na pesquisa, tiveram acesso aos estudos já empreen-
didos e somaram esforços para aperfeiçoá-los.
A abertura da rede para interesses comerciais começou em 1988, ganhando 
interesse público a partir da década de 1990. Em 1991 foi criada a World 
Wide Web (que em português significa “rede de alcance mundial”, também 
conhecida como Web e WWW), que é um sistema de documentos digitais 
que são interligados e executados na Internet. A partir daí, a Internet foi 
enriquecida: o conteúdo da rede ficou mais atraente com a possibilidade 
de incorporar imagens e sons, e cada informação passou a ter um endereço 
único e a poder ser encontrada por qualquer usuário da rede.
A World Wide Web é um modelo de compartilhamento de in-
formações construído sobre a Internet. É um sistema de hiper-
textos que permite que um usuário navegue por documentos 
presentes em qualquer lugar do mundo através de um compu-
tador conectado à Internet.
Cuidado para não confundir os termos Web e Internet! A Internet 
é o meio que permite que computadores do mundo todo troquem 
dados entre si. A Web é apenas um dos serviços que rodam na 
Internet, uma das maneiras pelas quais a informação pode ser dis-
seminada pela Internet.
1.2. Principais padrões e conceitos
O W3C (abreviação de W3 Consortium, sendo que W3 vem das três 
letras W de World Wide Web) é uma comissão de empresas de tecno-
logia que define um conjunto de padrões para o desenvolvimento e 
Capítulo 1
11
Programação para Internet
para a interpretação dos conteúdos para a Web. Este conjunto de nor-
mas, diretrizes, recomendações, notas, artigos, tutoriais e afins, tem 
caráter técnico e é destinado a orientar fabricantes, desenvolvedores 
e projetistas para o uso de práticas que possibilitem a criação de uma 
Web acessível a todos (independentemente dos dispositivos usados ou 
de suas necessidades especiais).
A World Wide Web é uma rede de recursos e serviços de informa-
ção. Ela serve-se de três mecanismos, de modo a fazer com que esses 
recursos estejam legivelmente disponíveis a uma quantidade mais 
vasta de usuários possível:
1. Um esquema uniforme de atribuição de nomes, de forma que 
seja possível localizar os recursos na Web (ex: URI, que é o endereço 
de cada página na Internet);
2. Protocolos, para o acesso aos recursos nomeados através da 
Web (ex: HTTP, que especifica como o navegador e o servidor web 
comunicam entre si); e
3. Hipertextos, para uma navegação mais fácil através dos referidos 
recursos (ex: HTML, uma linguagem de marcação para codificar a infor-
mação de modo que possa ser exibida em uma grande quantidade de dis-
positivos, e que veremos com mais profundidade no próximo capítulo).
Todos os recursos disponíveis na Web – documentos HTML, ima-
gens, videoclipes, programas etc – possuem um endereço, o qual 
poderá ser codificado por um Identificador de Recursos Univer-
sal, ou “URI” (Universal Resource Identifier).
Os URIs são constituídos por três partes principais: (1) o nome do mecanis-
mo usado para se ter acesso ao recurso; (2) o nome da máquina de hospe-
dagem desse recurso; e (3) o nome do próprio recurso. Como exemplo, ve-
jamos o URI que designa a página dos Relatórios Técnicos da W3C: http://
www.w3.org/TR. Este URI poderá ser lido da seguinte maneira: “Existe um 
documento disponibilizado através do protocolo HTTP, hospedado na má-
quina www.w3.org, na qual se poderá ter acesso ao recurso TR”.
Atualmente, os documentos disponíveis na Web podem estar na forma 
de vídeos, sons, hipertextos e figuras. O usuário pode então seguir as 
hiperligações na página para outros documentos ou mesmo enviar in-
formações de volta para o servidor a fim de interagir com ele. O ato de 
seguir hiperligações é, comumente, chamado de “navegar” ou “surfar” 
na Web. Os navegadores mais utilizados no mercado atualmente são o 
Microsoft Internet Explorer e o Mozilla Firefox.
A Internet
12
Tecnologia em Análise e Desenvolvimento de Sistemas
Para visualizar as informações disponíveis na Web, utilizamos um 
programa de computador chamado navegador (web browser). Ele 
descarrega as informações (chamadas “documentos” ou “páginas”) 
de servidores web (ou “sítios”) e mostra-os na tela do usuário.
As páginas que encontramos ou construímos na Web podem ser 
de dois tipos:
As •	 Páginas Estáticas, que não possuem flexibilidade na alteração de seus 
conteúdos e são, geralmente, criadas com as linguagens HTML e CSS (te-
mas dos próximos capítulos deste material). Estas páginas são mais fáceis 
de criar, mas oferecem poucas vantagens aos desenvolvedores e aos visi-
tantes, já que só podem apresentar textos planos acompanhados de ima-
gens (ou, no máximo, conteúdos multimídia - vídeos ou áudios).
As •	 Páginas Dinâmicas, mais complexas e versáteis, feitas em alguma lin-
guagem de programação, com as quais podemos interagir. Além de utiliza-
rem os recursos de criação das páginas estáticas, permitem que seus conte-
údos variem, por exemplo, de acordo com consultas a Bancos de Dados.
1.3. Comércio eletrônico
O crescimento da Internet levou ao desenvolvimento de uma nova for-
ma de negócios chamada “comércio eletrônico”.
O Comércio Eletrônico é caracterizado pelo uso de meios eletrô-
nicos para a condução de transações comerciais (entre empresas, 
governo e consumidores), e pela integração das tecnologias da 
Internet com processos comerciais (para facilitar trocas de produ-
tos, serviços, capitais, informações e conhecimento).
Este tipo de negócio permite integrar a cadeia de produção, criar novos 
serviços que explorem os recursos da Internet, e ampliar e diversificar 
os mercados competitivos (pois o produto fica disponível por qualquer 
usuário em todo o mundo). Além disso, há a necessidade de oferecer sis-
temas bem projetados e implementados (devido à alta concorrência). 
O comércio eletrônico deu origem a novos tipos de modelos de negócio. 
Entre eles, destacam-se as Lojas Virtuais, que vendem bens e serviços; as 
Capítulo 1
13
Programação para Internet
corretoras de informações, que fornecem informações sobre produtos, 
preços etc; as corretoras de transações, onde os compradores têm aces-so a taxas e termos de várias fontes; os e-marketplaces, que concentram 
informações de vários fornecedores; as provedoras de conteúdo, que 
geram receita fornecendo conteúdo a clientes por uma taxa e vendendo 
espaço para propaganda; as provedoras de serviços online, que fornecem 
serviços e apoio para produtos de hardware e software; os portais, que são 
pontos de entrada inicial à Web, com conteúdo especializado, serviços; os 
leilões Virtuais; e os banners de propaganda, recursos gráficos usados 
para propaganda e conectados por um link (para o site do anunciante).
ATIVIDADE 1 – O site http://www.arremate.com.br, por exemplo, é um 
tipo de Leilão Virtual. 
Encontre agora um exemplo de site na web para outros quatro modelos 
de negócios quaisquer entre os citados acima:
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
____________________________________________________
Para evitar que os clientes abandonem a compra no meio do processo, é 
importante que um site de comércio eletrônico proveja suporte ininter-
rupto aos seus usuários (24 horas, sete dias por semana), processos de 
compras com o mínimo de etapas possível e recurso de localização de 
produtos procurados da maneira mais simples possível.
Nos últimos meses de 2004, a empresa de transporte aéreo Gol já 
possuía aproximadamente 600 mil visitantes por mês, sendo que 
80% do faturamento da empresa relativo a este ano foi resultado 
das vendas online de passagens aéreas. As vantagens em relação aos 
modelos convencionais são:
•	 Reduz	a	estrutura	de	administração	dos	bilhetes;
•	 Facilita	o	processo	de	aquisição	pelo	usuário	final;
•	 Torna	desnecessária	a	instalação	de	lojas	físicas.
A Internet
14
Tecnologia em Análise e Desenvolvimento de Sistemas
Entretanto, alguns clientes ainda têm receio em realizar compras pela 
Internet. Como as compras online envolvem pouco ou nenhum diálogo 
entre o vendedor e o comprador, é preciso conquistar a confiança e a 
satisfação do cliente oferecendo melhores preços, ofertas, segurança nas 
transações, proteção e privacidade dos dados fornecidos e as mesmas 
garantias oferecidas pelas lojas físicas.
ATIVIDADE 2 – Existem diversas características que dão valor a 
um site de comércio eletrônico:
Site íntegro (sem defeitos tecnológicos, carregamento rápido das 
páginas e respostas de formulários) – Atalhos que facilitam a na-
vegação – Bom mecanismo de busca – Facilidade de encontrar o 
que se procura – Tradição em bons preços – Controle sobre a pes-
quisa de produtos/serviços – Facilidade de comparação de preços 
com outros sites – Presença e imagem offline da marca (quando a 
marca não existe apenas online) – Venda de produtos de marcas 
conhecidas – Informações claras e confiáveis sobre os produtos 
– Boas fotos dos itens à venda – Várias opções de produtos – Fá-
cil customização – Atenção visual direcionada para os itens mais 
importantes – Avaliação e depoimento de outros clientes – Infor-
mações completas sobre as escolhas – Garantias sobre as compras 
– Possibilidade de escolher a forma de pagamento – Possibilidade 
de escolher a forma de entrega – Possibilidade de escolher como 
devolver os itens – Possibilidade de escolher como comprar os 
itens – Diversas opções de preços de frete antes de efetuar a tran-
sação – Saber o quanto será gasto à medida que as compras são 
efetuadas – Faturamento correto – Pedido correto – Confirmação 
do pedido – Site seguro (com demonstrações de cuidado na for-
ma de coleta das informações do cartão de crédito e de comparti-
lhamento de informações privadas) – Informações sobre a conta 
corretas – Disponibilidade do produto pedido no estoque – Vera-
cidade e confiabilidade das informações fornecidas – Número de 
telefone para contatar a empresa – Serviço online de atendimento 
ao cliente, em tempo real – Ajuda ou resposta, em caso de proble-
ma ou consulta – Informações do status do pedido – Rapidez da 
entrega – Pontualidade da entrega ao cliente final.
Tarefa: Escolha um site de comércio eletrônico qualquer na Web 
identifique quais das características mencionadas acima ele apre-
senta e não apresenta. Você pode escolher um site de qualquer tipo, 
exemplos (exemplos: Americanas, Submarino, Livrarias online, 
Vendas de passagens aéreas online, Bancos online, Supermercados 
online, Mercado Livre, Leilões online, Gravadoras online etc)
Capítulo 1
15
Programação para Internet
Observação: É normal que você não consiga analisar todas as ca-
racterísticas acima em qualquer site. Não é necessário realizar uma 
compra, por exemplo, para analisar a pontualidade da entrega.
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
____________________________________________________
A Internet
16
Tecnologia em Análise e Desenvolvimento de Sistemas
Capítulo 1
17
Programação para Internet
Olá Pessoal
Como já vimos no capítulo passado, precisamos de uma linguagem 
que nos permita desenvolver páginas na Internet que possam ser 
visualizadas por qualquer navegador.
Neste capítulo vamos começar estudar a linguagem HTML, que ser-
ve justamente para isso: criar páginas para a web. Os conhecimen-
tos adquiridos neste capítulo serão úteis durante o decorrer de toda 
a disciplina. Ao final deste capítulo, você deverá ser capaz de criar 
páginas simples para a web.
2.1 O que é HTML?
Para se publicar informação de distribuição global, é necessário utili-
zar-se uma linguagem de compreensão universal, que possa ser usada e 
compreendida por todos os computadores. HTML (Hyper TextMarkup 
Language) é a linguagem de publicação usada pela World Wide Web. 
A linguagem HTML foi inventada em 1990 por um cientista chamado 
Tim Berners-Lee. A finalidade inicial era a de tornar possível o acesso e 
a troca de informações e de documentação de pesquisas, entre cientistas 
de diferentes universidades. O projeto inicial tornou-se um sucesso ja-
mais imaginado por Tim Berners-Lee. Ao inventar o HTML, ele lançou 
as fundações da Internet que conhecemos atualmente.
HTML não é uma linguagem de programação, e sim uma ligua-
gem descritiva, que tem como objeto dar formato ao texto e às 
imagens que pretendemos visualizar no navegador.
HTML é uma linguagem que possibilita apresentar informações (documenta-
ção de pesquisas científicas) na Internet. Aquilo que você vê quando abre uma 
página na Internet é a interpretação que seu navegador faz do HTML. Para vi-
sualizar o código HTML de uma página qualquer, use o menu “View” (Exibir) 
no topo do seu navegador e escolha a opção “Source” (Código fonte).
A LINGUAGEM HTML
18
Tecnologia em Análise e Desenvolvimento de Sistemas
Os documentos escritos na linguagem HTML podem ser interpretados 
pelos navegadores e apresentam diversas tags (rótulos, ou etiquetas), 
que indicam a formatação de cada trecho do texto.
Tags são rótulos usados para informar ao navegador como deve ser 
apresentado o website. Todas as tags têm o mesmo formato: começam 
com um sinal de menor “<” e acabam com um sinal de maior “>”.
Existem dois tipos de tags: as tags de abertura (exemplo: <i>) e as tags 
de fechamento (exemplo: </i>). Tudo que estiver contido entre uma 
tag de abertura e uma tag de fechamento será processado segundo o 
comando contido na tag. Todo o texto entre as tags <i> e </i>, por 
exemplo, será apresentado em itálico.
Em alguns casos, a abertura e o fechamento se dão na mesma tag, pois 
existem comandos que não necessitam de um conteúdo para serem pro-
cessados, isto é, são comandos isolados. Um pulo de linha no texto, por 
exemplo, é conseguido com a tag <br />.
2.2 Estrutura de um arquivo HTML
Uma página da Web pode ser feita em qualquer editor de texto. Existem 
diversas IDEs destinadas especificamente para a criação de páginas para 
a Web. Podemos criá-las até mesmo no “Bloco de Notas”: basta inserir-
mos o código HTML e salvarmos o arquivo com a extensão “.html”.
Entretanto, como programaremos em Java mais para frente, começaremos 
a utilizar o “Netbeans IDE” desde já para criarmos nossas páginas. Você já 
deve tê-lo utilizado na disciplina “Linguagem de Programação”. Se precisar, 
leia o material auxiliar sobre o Netbeans disponível na página da disciplina.
Após abrir o Netbeans, clique “Arquivo”, depois em “Novo Projeto”. Es-
colha a opção “Java Web”, para criar uma aplicação para Web vazia, e 
clique em “Próximo”. Em seguida, escolha um nome para seu projeto 
(por exemplo, “Teste”), clique em “Próximo” e depois em “Finalizar”.
Para programar para internet no Netbeans, é preciso que o Netbe-
ans IDE instalado possua suporte para Web.
Se, ao tentar criar um novo projeto, seu Netbeans não possuir a op-
ção “Java Web”, peça ajuda a seu tutor presencial.
Capítulo 2
19
Programação para Internet
Feito isso, será criado um projeto para Web contendo o arquivo “index.
jsp”. JSP é uma tecnologia do Java para criar páginas para Web dinâmi-
cas, que estudaremos mais para frente. Por enquanto, nosso foco é ape-
nas o HTML, e não o Java. Por isso, vamos ignorar o arquivo “index.jsp” 
por enquanto. Clique em “Arquivo” no menu do Netbeans, e depois em 
“Novo arquivo...”. Em seguida, escolha criar um arquivo HTML (dentro 
da opção “Web”). Veja a tela na Figura 1 a seguir:
Figura 1 - Criando um arquivo HTML no Netbeans IDE
Após clicar em “Próximo”, escolha um nome para o arquivo (por exem-
plo, “index”) e clique em “Finalizar”. Neste caso, será criado um arquivo 
chamado “index.html” parecido com o mostrado a seguir:
As primeiras linhas do arquivo são comentários. Qualquer bloco de tex-
to em HTML inserido entre um “<!--” e um “-->” é considerado um 
comentário e será ignorado pelo navegador. Em seguida, temos uma 
descrição de qual é a versão do HTML que estamos utilizando.
A Linguagem HTML
20
Tecnologia em Análise e Desenvolvimento de Sistemas
Como acontece em qualquer linguagem, o HTML foi sendo aperfei-
çoado com o tempo. A versão atual é a 4.01. A tag “<!DOCTYPE 
HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//
EN”>” vista no código acima apenas informa ao navegador que é 
esta a versão do HTML que estaremos utilizando, para que o nave-
gador saiba o que irá encontrar pela frente. Ela deverá estar presente 
em todos os códigos que criarmos.
A partir daí, começa o código HTML propriamente dito. A seguir, expli-
caremos o que significa cada uma das tags presentes no código acima:
<html> ... </html>•	 : Todo o conteúdo de uma página HTML fica 
dentro desta tag. Dentro de uma página HTML encontramos, basi-
camente, um cabeçalho e um corpo, que detalharemos a seguir.
<head> ... </head>•	 : É o cabeçalho da página. Nele, incluímos infor-
mações sobre a página, por exemplo:
<title> ... </title>:o É o título da página. O título é o nome 
que aparecerá escrito na janela do seu navegador. Para testar, 
experimente inserir o texto “Esta é minha primeira página” 
entre as tags <title> e </title> do arquivo “index.html” cria-
do. Em seguida, clique na opção “Executar” do menu do Ne-
tbeans e depois e em “Executar arquivo” (ou, simplesmente, 
aperte a combinação de teclas “shift” e “F6”). Na Figura 2, 
observamos que o título da página aparece na região des-
tacada em ermelho. A parte destacada e verde é o corpo da 
página, que detalharemos mais para frente.
Figura 2 - Cabeçalho e corpo de uma página HTML
Capítulo 2
21
Programação para Internet
<meta>o : Esta tag traz informações adicionais sobre a própria 
página. No nosso caso, está descrito que o tipo de conteúdo 
(Content-type) é um texto em HTML (text/html) utilizando 
a codificação de caracteres UTF-8 (charset=UTF-8). A codi-
ficação é necessária, em especial, para que possamos incluir 
palavras acentuadas em nossas páginas.
<body> ... </body>•	 : Aqui se encontra o corpo da página. O cor-
po de uma página é tudo aquilo que será visualizado pelo usuário 
(a parte destacada em verde na Figura 2). A maioria das tags que 
aprenderemos daqui para frente estará entre essas duas tags. 
2.3 Formatando os textos
A tag <b> informa ao navegador que todo o texto entre <b> e </b> de-
verá ser escrito em negrito (“b” é abreviação de bold, que é negrito em 
inglês). Veja a seguir um trecho de código em HTML:
O trecho acima será exibido no navegador da seguinte forma:
As tags também podem ser aninhadas:
O resultado do código acima será:
Na página “index.html” criada pelo Netbeans aparece o texto “TODO 
write content”, e podemos notar na Figura 2 que este texto aparece na 
região destacada em verde. Para testar, vamos substituir o texto “TODO 
write content” para:
Para visualizar a alteração, clique novamente em “Executar” e depois em 
“Executar arquivo” (ou “shift” + “F6”). O resultado pode ser observado 
na Figura 3, mostrada a seguir:
A Linguagem HTML
22
Tecnologia em Análise e Desenvolvimento de Sistemas
Figura 3 - Modificando uma página HTML
Mostraremos agora outras tags que podemos utilizar para formatar o 
texto em nossas páginas HTML. Todas elas também deverão ser inseri-
das dentro do corpo do texto.
<b> ... </b>•	 : Como já vimos, indica que determinado bloco de texto 
estará em negrito.
<i> ... </i>•	 : Indica um bloco de texto em itálico.
<u> ... </u>•	 : Bloco de texto sublinhado (u é abreviação de underline, 
que significa sublinhado em inglês).
<p> ... </p>•	 : Indica que texto fará parte de um parágrafo.
<h1> ... </h1>•	 : Indica que o texto é um cabeçalho(ou um título) 
destacado em relação ao restante. Analogamente, podemos utilizar 
<h2> e </h2> para fazermos um subtítulo, <h3> e </h3> para sub-
subtítulos etc (o maior é o <h6>).
<br />•	 : Indica uma quebra de linha.
<hr />•	 : Linha horizontal (hr é abreviação para horizontal rule).
<ul> ... </ul>•	 : Insere uma lista de itens não enumerada (ul é abre-
viação de unordered list).
<ol> ... </ol>•	 : Lista enumerada (ol é abreviação de ordered list).
<li> ... </li>•	 : Cada item de uma lista, enumerada ou não (li é abre-
viação de list item).
Capítulo 2
23
Programação para Internet
O site http://www.w3schools.com/html/html_formatting.asp 
apresenta uma lista com mais tags que podem ser usadas na for-
matação de textos.
Agora vamos criar um exemplo utilizando todas as tags aprendidas até ago-
ra. Para isso, substituiremos o corpo de nossa página para o seguinte texto:
A nova página será exibida como a Figura 4:
 Figura 4 - Texto formatado em HTML
A Linguagem HTML
24
Tecnologia em Análise e Desenvolvimento de Sistemas
ATIVIDADE 3 – Leia com atenção o código e compare-o com o 
resultado obtido. É muito importante que você entenda o que foi 
feito até aqui antes de continuar a leitura deste material.
Experimente criar seu próprio texto, combinando as tags vistas até 
aqui de uma forma diferente da que mostramos no exemplo.
2.4 Links e âncoras
Em algumas tags podemos inserir informações adicionais, que indica-
rão ao navegador a forma como elas devem ser exibidas na tela. Algu-
mas tags sequer fazem sentido se não vierem acompanhadas de seus 
atributos. Um exemplo é a tag <a>, que serve para definirmos um link.
Um link (ou hiperligação) é uma referência num documento em 
hipertexto a outras partes deste documento ou a outro recurso 
disponível na web (documentos, imagens, vídeos, arquivos de 
som etc). Hiperligações são apresentadas pelo navegadores como 
elementos clicáveis, em forma de texto ou imagem, que levam ao 
destino atribuído pelo desenvolvedor.
Para criar uma hiperligação, utilizaremos o atributo href (abreviação de 
hypertext reference, que significa referência a hipertexto – um link é, na 
verdade, nada além de uma referência a outra página na web). Veja um 
exemplo no trecho de código a seguir:
O conteúdo entre as tags <a> e </a> indica o texto que será mostrado no 
navegador. O conteúdo do atributo href indica o destino da hiperligação 
(o conteúdo de qualquer atributo deve estar sempre entre parênteses). O 
resultado da visualização do trecho de código acima inserido no final de 
nossa página pode ser visto na Figura 5:
Capítulo 2
25
Programação para Internet
 Figura 5 - Criando uma hiperligação em HTML
Com isso, quando o usuário clica em “Link para o Google”, ele será re-
direcionado para o site http://www.google.com.br. É possível também 
apontarmos para partes específicas dentro de nossa própria página (um 
link interno, ou âncora).
A tag <a> vem da palavra em inglês anchor (que em português 
significa âncora). Ela é utilizada em HTML para definir tanto ân-
coras quanto links. 
Usamos o termo âncora quando o destino de <a> está no próprio 
documento. Já o termo link (ou hiperligação) é utilizado quando 
<a> aponta para outro recurso qualquer na web.
No final de nosso código, criaremos uma âncora com o texto “Voltar ao 
topo da página”. Antes disso, precisamos definir no próprio código onde 
estará o destino desta âncora. Para isso, utilizamos a própria tag <a> 
acompanhada do atributo name, ao invés de href (neste caso, a formata-
ção do texto contido entre as tags <a> e </a> não será alterado). Assim, 
substituiremos a primeira linha do corpo de nossa página pela seguinte:
Com isso, definimos para onde a âncora “Voltar ao topo da página” 
irá apontar. Essa âncora, por sua vez, é inserida no final do corpo da 
página da seguinte forma:
A Linguagem HTML
26
Tecnologia em Análise e Desenvolvimento de Sistemas
A visualização da parte mais inferior de nossa página é mostrada na 
Figura 6:
 Figura 6 - Criando uma âncora em HTML
Agora, clicando na âncora, podemos voltar ao topo da página (não dei-
xe de testar em seu navegador).
2.5 Imagens
Podemos utilizar atributos também para inserirmos uma imagem em 
nossa página, utilizando a tag <img /> (abreviação de image) e o atributo 
src (abreviação de source, que indica o local onde está gravada a imagem). 
Uma imagem pode estar na mesma pasta que nossa página ou em qual-
quer outro endereço da web. Para inseri-la, vejamos o exemplo a seguir:
Os atributos height e width definem, respectivamente, a altura e a lar-
gura da imagem a serem exibidas. Para a figura “logo.gif ” ser exibida, é 
necessário que ela esteja salva na mesma pasta que a página (os arquivos 
HTML criados no Netbeans ficam dentro da pasta “web” de seu projeto). 
Caso prefira utilizar uma figura que está salva em outro site da Internet, 
insira o URI completo da imagem, como no exemplo a seguir:
Capítulo 2
27
Programação para Internet
Em ambos os casos, a visualização da página será como a da Figura 7:
 Figura 7 - Criando uma imagem em HTML
Como podemos observar, a tag <img /> não precisa ser fechada (ou 
seja, não existe a tag </img>). Uma figura também pode conter uma hi-
perligação. Para isso acontecer, basta colocarmos a tag <img /> no lugar 
do texto que seria exibido pelo link. Veja um exemplo a seguir:
Nossa imagem agora será exibida como na Figura 8:
ç
 Figura 8 - Imagem também pode ser um link
A Linguagem HTML
28
Tecnologia em Análise e Desenvolvimento de Sistemas
A borda ao redor da imagem é inserida automaticamente pelos navegado-
res em todas as que apontam para algo. Para não exibir esta borda, basta 
inserimos na tag <img /> o atributo border=”0”. Fazendo isso, a visuali-
zação de nossa página volta a ser idêntica à daFigura 7, exceto pelo fato de 
que agora a figura aponta para o site http://www.google.com.br.
O que vimos neste capítulo é o básico de HTML. No próximo capí-
tulo, mostraremos como criar tabelas e formulários em HTML.
Ao longo deste material, apredenderemos outras tags e atributos, 
quando os mesmos forem necessários.
Mas não se esqueça: HTML não é uma linguagem de programação! 
Não é possível criar programas em HTML. O objetivo da linguagem 
é informar aos navegadores como o texto deverá ser exibido.
Entretanto, veremos mais adiante que existem maneiras de deixar o 
conteúdo de nossas páginas mais dinâmico.
ATIVIDADE 4 - Continue praticando o conhecimento aprendido 
até aqui. Crie uma “Página Pessoal” sua, contendo informações 
sobre você, utilizando as tags aprendidas até o momento.
Lembre-se de inserir uma imagem com sua foto, já que será sua 
“Página Pessoal”.
Capítulo 2
29
Programação para Internet
TABELAS E FORMULÁRIOS 
EM HTML
Olá Pessoal
Continuando com a linguagem HTML, iniciada no capítulo an-
terior, explicaremos agora como criar tabelas e formulários em 
HTML.
Tabelas são úteis para agruparmos dados com alguma propriedade 
em comum. Formulários são importantes para que haja uma inte-
ração entre o site e o cliente. Com isso, nossas páginas deixarão de 
exibir apenas textos e links para outros sites.
3.1 Tabelas
Utilizamos tabelas para apresentarmos dispormos dados em linhas e 
colunas, de acordo com alguma lógica entre eles. Uma tabela é defini-
da pelas tags <table> (que significa tabela em português) e </table>. 
Ela é dividida em linhas através das tags <tr> (abreviação de table row, 
que significa linha da tabela) e </tr>. Cada linha contém células de da-
dos, inseridos entre as tags <td> (abreviação de table data, que signifi-
ca dados da tabela) e </td>. Os dados da tabela podem conter textos, 
imagens, listas, parágrafos, formulários, outras tabelas etc. Para testar, 
criaremosuma tabela como a da Figura 9:
Figura 9 - Primeira tabela em HTML
Para isso, crie um novo arquivo HTML chamado “tabelas.html” e insira 
o código a seguir no corpo da página:
30
Tecnologia em Análise e Desenvolvimento de Sistemas
Podemos inserir na tag <table> o atributo align=”center”, para que ela 
fique alinhada no centro da página. Este atributo também pode ser uti-
lizado para alinhar parágrafos de um texto (<p align=”center”>) e para 
alinhar os dados de uma célula (<td align=”center”>). Além de center 
(para centralizar), podemos utilizar left (alinhar à esquerda), right (à 
direita) e justify (texto justificado). 
Da mesma forma, podemos alinhar os dados no topo de uma célula, uti-
lizando o atributo valign=”top” (valign é abreviatura de vertical align, 
que significa alinhamento vertical, e top significa topo). Além top, exis-
tem bottom (parte inferior da célula) e middle (parte central).
ATIVIDADE 5 - Crie uma tabela no centro da página, com 4 li-
nhas e 3 colunas, como a da Figura 10.
Figura 10 - Tabela com 4 linhas e 3 colunas
Capítulo 3
31
Programação para Internet
3.2 Cabeçalhos das tabelas
Algumas tabelas necessitam de uma formatação especial para os seus ca-
beçalhos (elementos na linha 1 e na coluna 1, por exemplo). Para dar des-
taque ao conteúdo de uma célula, utilizamos as tags <th> (abreviação de 
table heading, que significa cabeçalho da tabela) e </th>, ao invés de <td> 
e <td>. Trocando as tags <td> por <th> e </td> por </th> na linha 1 e na 
coluna 1 da tabela acima, obtemos o resultado mostrado na Figura 11:
Figura 11 - Tabela com cabeçalhos
Como podemos observar, dados em um cabeçalho aparecem em desta-
que (centralizados e em negrito). Além disso, a tabela mostrada na Figura 
11 contém outra diferença em relação à tabela anterior: foi inserido na tag 
<table> o atributo width=”100%” (width significa largura em português). 
Isso significa que a tabela irá ocupar 100% da largura da nossa página. Se 
quisermos que a tabela possua uma largura que independa do tamanho 
da janela, podemos definir a quantidade de pixels (cada pequeno ponto na 
tela do monitor) que ela ocupará. Para que a tabela ocupe 700 pixels, por 
exemplo, definimos inserimos o atributo width=”700”. O atributo width 
também pode ser utilizado para definir a largura de uma <td>.
Se não inserirmos qualquer conteúdo entre as tags <td> e </td> (ou 
entre <th> e </th>), teremos células vazias.
ATIVIDADE 6 - Crie uma tabela exatamente igual à da Figura 
11. Repare que a tabela continua com 4 linhas e 3 colunas, mas 
mudou a quantidade de dados em destaque. 
Tabelas e Formulários em HTML
32
Tecnologia em Análise e Desenvolvimento de Sistemas
3.3 Mesclando células
Por fim, podemos mesclar células em uma tabela. O atributo colspan (abre-
viação de column span) na tag <td> ou <th> indica o número de colunas 
que a célula ocupará. O atributo rowspan, também na tag <td> ou <th>, 
indica o número de linhas que a célula ocupará. Veja um exemplo a seguir:
O código acima corresponde a uma tabela que possui, ao todo, três li-
nhas de três colunas. Entretanto, apenas seis elementos estão dispos-
tos ao dela. Isso porque o primeiro elemento foi mesclado com os dois 
elementos abaixo dele, e o segundo foi mesclado com o elemento à sua 
direita. Veja na Figura 12 a visualização da tabela.
Figura 12 - Tabela com células mescladas
Capítulo 3
33
Programação para Internet
ATIVIDADE 7 - Utilize seus conhecimentos de HTML para criar 
uma tabela exatamente igual à da Figura 13, mostrada a seguir.
A tabela deve possuir 750 pixels de largura, e o menu ao lado es-
querdo (onde estão os links e as imagens) deve possuir 200 pixels de 
largura. Os links e as imagens devem apontar para algum site qual-
quer. No menu “Apoio” você pode inserir as figuras que preferir.
Repare que o texto dos parágrafos está justificado, o título está cen-
tralizado e todos os dados estão alinhados no topo de suas células.
Figura 13 - Crie uma página com uma tabela como esta
3.4 Formulários
Um formulário em HTML é uma área que contém vários elementos a se-
rem preenchidos (como em um formulário de verdade). Os elementos do 
formulário permitem que o usuário envie informações, possibilitando uma 
interação maior entre o site e o cliente. Os elementos devem estar inseridos 
entre as tags <form> e </form>. O elemento mais comum é o <input />, 
cujo atributo type indica de qual tipo é o elemento. Os principais tipos são:
Campo de texto•	 : Utilizado para inserir letras, números etc em um 
formulário. Veja um exemplo a seguir:
Tabelas e Formulários em HTML
34
Tecnologia em Análise e Desenvolvimento de Sistemas
O atributo name por enquanto pode não fazer sentido, mas ele é ne-
cessário para que o servidor (que receberá os dados do formulário) 
identifique o valor de cada elemento do formulário.
Os campos acima serão visualizados assim:
Campo de senha•	 : Utilizado para inserir senhas. Os caracteres di-
gitados neste campo são ocultados pelo navegador, como pode ser 
visto a seguir:
Caixa de opção única•	 : Permite que o usuário escolha apenas uma 
entre um conjunto de opções. Veja um exemplo do código e de sua 
visualização a seguir:
Como podemos observar no trecho de código acima, existem dois 
elementos com o nome “sexo” (através do atributo name), mas cada 
um possui um valor diferente (através do atributo value). Isso sig-
nifica que, quando nosso formulário for enviado, o valor do campo 
“nome” será igual ao “masculino” ou “feminino”.
Caixa de seleção múltipla•	 : Permite que o usuário faça seleções múl-
tiplas entre um conjunto de opções. Veja um exemplo do código e de 
sua visualização a seguir:
Capítulo 3
35
Programação para Internet
Neste caso, será enviada ao servidor uma lista com todos os valores 
de “bens” (todos os que tiverem sido clicados pelo usuário).
Botões•	 : Também é possível incluir botões, que executam ações es-
pecíficas em um formulário. O botão mais importante é o que envia 
o formulário ao servidor (através do atributo type=”submit”). Para 
que ele funcione corretamente, é necessário incluir dois atributos na 
tag <form>: os atributos action (que especifica o URI do script que 
será executado no servidor) e method (que especifica o método que 
será utilizado para enviar os dados). Veja um exemplo a seguir:
Os atributos action e method da tag <form> serão explicados nos 
próximos capítulos. Por enquanto eles não são importantes, pois es-
tamos apenas exibindo o formulário na página. Os três inputs acima 
definem botões: Clicando no primeiro, o formulário é enviado; Cli-
cando no segundo, os dados do formulário são limpos (voltam ao 
estado inicial); O segundo não tem funcionalidade, por enquanto. 
Mais para frente, adicionaremos uma ação a ele utilizando a lingua-
gem JavaScript. O valor do atributo value em cada um deles indica o 
que aparecerá escrito no botão. Veja como eles serão visualizados:
Tabelas e Formulários em HTML
36
Tecnologia em Análise e Desenvolvimento de Sistemas
ATIVIDADE 8 - Nesta última seção, inserimos vários tipos de ele-
mentos em um formulário.
Para fixar o conhecimento, crie um formulário para que um 
usuário se cadastre em um Webmail. Utilize todos os tipos de 
elementos vistos acima.
Para que seu formulário fique bem alinhado na página, coloque-o 
em uma tabela (o nome de cada elemento em uma coluna, e os 
elementos em outra). A Figura 14 mostra apenas um exemplo de 
como o seu formulário poderia ficar formatado.
 Figura 14 - Crie seu formulário como este
As versões mais recentes do Netbeans possuem ferramentas para fa-
cilitar a programação para web.
No canto esquerdo, por exemplo, existem botões para facilitar a 
criação de tabelas, formulário, listas, links e imagens (veja-os na 
figura ao lado).
Se não encontrá-los,clique no menu “Janela” do Netbeans, depois 
em “Paleta” (ou aperte as teclas Ctrl, Shift e 8).
Capítulo 3
37
Programação para Internet
Olá Pessoal
Nos dois últimos capítulos, aprendemos a criar páginas simples para 
a web. Existem tags que não mostramos (se precisar aprender mais 
sobre HTML, procure ajuda nos tutoriais presentes na bibliografia 
deste material ou nos diversos que existem na web), mas os princi-
pais conceitos de HTML já foram aprendidos.
Neste capítulo, mostraremos como podemos deixar nossas páginas 
mais bonitas. Para que os sites mais atrativos visualmente, o mais 
comum é utilizarmos uma folha de estilo (em geral: CSS). É disso 
que se trata este capítulo.
4.1 O que são folhas de estilo?
Folhas de estilo permitem o uso de formatações homogêneas e uniformes 
em todas as páginas de um site. Isso significa que podemos, por exemplo, 
definir uma nova aparência para nossos links, tabelas e parágrafos, por 
exemplo. Uma mesma folha de estilo pode ser importada por qualquer 
número de páginas, o que permite e facilita que todas várias subpáginas 
sigam um mesmo padrão de formatação. Se um dia for necessário alterar 
determinada formatação na página, basta alterar a folha de estilo e todas 
as páginas que a utilizam serão automaticamente modificadas. 
Com isso, o uso das folhas de estilo permite maior versatilidade na pro-
gramação do layout de páginas sem aumentar o seu tamanho em Kbytes, 
maior controle sobre os atributos de uma página (como tamanho e cor 
das fontes, espaçamento entre linhas e caracteres, margem do texto, caixas 
de texto, botões de formulário, entre outros) e a utilização de layers, que 
permitem a sobreposição de objetos, textos e imagens, em camadas.
CSS (abreviação de Cascading Style Sheets, que significa folhas de 
estilo em cascata) é o padrão de formatação definido pelo W3C. 
CSS é uma linguagem para estilos que define o layout de docu-
mentos HTML. HTML pode ser usado (indevidamente) para de-
finir o layout de websites, contudo CSS proporciona mais opções e 
é mais preciso e sofisticado. 
FOLHAS DE ESTILO (CSS)
38
Tecnologia em Análise e Desenvolvimento de Sistemas
CSS é suportado por todos os navegadores atuais. Enquanto HTML 
deve ser utilizado para estruturar conteúdos, o CSS deve ser usado para 
formatar conteúdos estruturados. 
Para criar um arquivo CSS no Netbeans, clique em “Arquivo”, depois em 
“Novo arquivo” e escolha o tipo “Folha de estilo em cascata” (dentro da 
aba “Web”, assim como você fazia para criar um arquivo HTML). Esco-
lha um nome para ele (por exemplo, “estilo”) e clique em “Finalizar”.
Antes de criar os estilos da nossa página, é necessário que esta re-
ferencie o arquivo “esilto.css” que acaba de ser criado. Para isso, é 
necessário incluir o código a seguir dentro do cabeçalho da página 
(ou seja, antes da tag </head>):
O atributo rel=”StyleSheet” descreve que o relacionamento entre o do-
cumento e o arquivo importado (especificado pelo atributo href) é o de 
uma folha de estilo. Inclua a linha de código acima em todas as páginas 
HTML criadas em seu projeto até aqui. A partir de agora, já podemos 
começar a definir um estilo para nossas páginas. O arquivo “estilo.css” 
que criamos no Netbeans já traz uma regra de formatação:
Vamos ignorar esta regra por enquanto, pois ela ainda não é importante 
para nosso aprendizado. Para começar a definir o estilo de nosso site, va-
mos alterar a cor de fundo do corpo de nossas páginas. Para isso, vamos 
inserir (após a regra acima) a seguinte regra de formatação:
Tudo que incluirmos dentro de body { ... } será relativo à tag <body> 
do código HTML. Podemos fazer o mesmo para adicionar formatação a 
qualquer outra tag de nossas páginas. 
O atributo background-color define a cor de fundo da página, que no 
nosso caso será amarelo (Yellow em inglês). Volte a visualizar a página 
“index.html”, por exemplo, e confira se seu fundo está amarelo (lembre-
se que, para funcionar, é preciso que a página HTML importe o arquivo 
Capítulo 4
39
Programação para Internet
CSS, como fizemos na seção anterior). Veja um exemplo na Figura 15 de 
como a página deveria estar:
Figura 15 - Primeiro exemplo de CSS
Não é necessário sabermos o nome de todas as cores em inglês: a próxi-
ma seção explica como elas são formadas em nosso monitor.
4.2 Formação das cores
As cores primárias de um monitor são vermelho (red, em inglês), ver-
de (green) e azul (blue), pois os comprimentos de onda vermelho, ver-
de e azul constituem a base para todas as cores da natureza. Todas as 
outras cores do espectro são criadas pela combinação de diferentes 
quantidades desses três comprimentos. Por exemplo, se as três cores 
primárias estão presentes com a máxima intensidade, obtemos a cor 
branca. Se as três estão ausentes, obtemos a cor preta. Quando as cores 
primárias se sobrepõem, duas a duas, elas geram outras 3 cores: ciano, 
magenta e amarelo, chamadas de cores secundárias. Veja na Figura 16 
a formação das cores secundárias:
Figura 16 - Cores primárias e secundárias
Folhas de Estilo (CSS)
40
Tecnologia em Análise e Desenvolvimento de Sistemas
Para formar as cores na tela do monitor, o computador utiliza o sistema 
RGB (sigla para Red,	Green,	Blue). O monitor é capaz de projetar 256 
níveis de intensidade diferentes para cada uma dessas três cores. Por 
exemplo, se ele projeta o nível máximo de vermelho e o mínimo de azul 
e de verde, o que aparece na tela é vermelho. 
Para representar todas essas combinações de cores, o computador uti-
liza uma trinca de valores hexadecimais (de 00 até FF, que corresponde 
ao número 255 na base decimal), na seguinte ordem: a primeira trinca 
corresponde ao nível de cor vermelha, depois verde e, por fim, azul. 
Essa combinação resulta nas mais de 16 milhões de cores distintas que o 
computador é capaz de representar. Veja alguns exemplos a seguir:
Imagine um ambiente totalmente fechado que possui uma luz ver-
melha, uma verde e outra azul. Se acendermos apenas a luz verme-
lha, o ambiente ficará vermelho. Se acendermos somente a azul, ele 
ficará azul. O mesmo vale para a luz verde. 
Se acendermos as três luzes, todas elas serão refletidas (a luz branca 
é a mistura de todas as outras luzes). Se apagarmos todas, o am-
biente ficará escuro (ou seja, o preto é obtido pela ausência de luz).
As cores correspondem a comprimentos de onda da luz. Tintas não se 
comportam assim, pois os pigmentos que as formam não são perfei-
tos (mas a mistura delas pode chegar a resultados bem próximos).
A cor de fundo de nossa página, portanto, poderia ter sido especifica-
da da seguinte forma:
Capítulo 4
41
Programação para Internet
Teste outras combinações de cores no arquivo “estilo.css” e confira-
as como fica a visualização da página. Se precisar de ajuda, a maio-
ria dos programas editores de imagens atualmente fornece o código 
RGB de cada uma das cores.
ATIVIDADE 9 - Entendeu como ocorre a formação das cores no 
computador? Descubra o código RGB das cores a seguir:
 Cinza Claro: ___________________________________
 Cinza Escuro: __________________________________
 Rosa: _________________________________________
 Roxo: ________________________________________
 Laranja: _______________________________________
 Marrom: ______________________________________
Agora chega de cores! Na próxima seção, mostraremos outras regras em CSS.
Se precisar de ajuda, o site a seguir apresenta uma lista de cores 
seguida de seu código RGB:
http://www.w3schools.com/Html/html_colornames.asp
4.3 Fundo da página
Como explicamos acima, podemos alterar a forma como tags HTML 
são exibidas pelo navegador utilizando CSS. No último exemplo, alte-
ramos a cor de fundo do corpo (<body>) das páginas. O código abaixo 
altera outras características do plano de fundo:
Folhas de Estilo(CSS)
42
Tecnologia em Análise e Desenvolvimento de Sistemas
O atributo background-image define que a imagem fundo.png (locali-
zada na mesma pasta que os arquivos HTML) será o papel de parede das 
páginas do site. Veja a imagem “fundo.jpg” na Figura 17:
Figura 17 - Imagem de fundo da página
O atributo background-position define que a imagem ficará à esquerda 
(left) da página e no topo (top). Se definirmos background-position: 2cm 
2cm, por exemplo, a imagem é posicionada a 2 cm da esquerda e a 2 cm do 
topo. Com background-position: 50% 25%, a imagem é centrada na ho-
rizontal e a um quarto (25%) para baixo. Para background-position: bot-
tom right, a imagem é posicionada no canto inferior direito da página.
O atributo background-repeat: repeat-x define que o papel de pare-
de repetirá apenas horizontalmente na tela. Outros valores são repeat-y 
(para repetir apenas verticalmente), repeat (repetir por todo o corpo da 
página) e no-repeat (não repetir). Já o atributo background-attachment 
define que a imagem ficará fixa (fixed), ou seja, não se moverá quando o 
usuário utilizar a barra de rolagem do navegador. Para que ela se mova, 
o valor do atributo deve ser scroll (como o padrão é que a imagem se 
mova, esta regra poderia ser omitida).
O atributo background-color define que a cor de fundo será #fffeb7 
(amarelo claro). Em nosso caso, ela é especialmente necessária porque a 
imagem não se repete ao longo de toda a página (repete apenas na hori-
zontal). O ideal é que a cor de fundo seja sempre definida, mesmo que 
a imagem se repita por toda a página (pois esta é a cor que aparecerá no 
fundo enquanto a imagem não for carregada). Para simplificar, todos os 
atributos relativos ao plano de fundo poderiam ser inseridos com um 
único atributo, chamado background:
A declaração abreviada deve seguir sempre esta ordem: background-
color, background-image, background-repeat, background-at-
tachment, background-position.
Capítulo 4
43
Programação para Internet
ATIVIDADE 10 - Lembra da “Página Pessoal” criada no capítulo 2?
Utilize as tags aprendidas nesta seção para deixá-la mais bonita. 
Altere seu plano de fundo e insira uma foto sua na página.
Veja na Figura 18 como a página “index.html” era e como ela passou a 
ser visualizada após a inclusão da folha de estilo:
 
Figura 18 - Página sem CSS e a mesma página com CSS
4.4 Fontes e textos
Não foi apenas o fundo da página que foi alterado. O atributo font-fa-
mily está definindo que a fonte utilizada na página será a Arial. Se não 
houver esta fonte instalada, o navegador tentará utilizar a Helvetica. Se 
também não houver, ele tentará utilizar a sans-serif. O atributo font-
size indica que o texto terá tamanho de 14 pixels.
Por fim, o atributo margin indica que haverá uma margem de 50 pixels ao 
redor do conteúdo da página, e o atributo color indica a cor do texto no 
corpo da página. Veja na Figura 19 que as outras páginas do site também se-
guem o estilo da página “index.html”. Em ambas, obviamente, foi incluído o 
código necessário para que as páginas importassem a folha de estilo.
]
 
 Figura 19 - Páginas de um mesmo site com o mesmo estilo
Folhas de Estilo (CSS)
44
Tecnologia em Análise e Desenvolvimento de Sistemas
Outros atributos que podem alterar o texto da página são:
text-align•	 : Define como o conteúdo estará alinhado. Os valores 
são left (esquerda), right (direita), center (centralizado) e justify 
(justificado).
text-indent•	 : Permite que seja definido um recuo à primeira linha de 
um parágrafo, e é medido em px (pixels).
word•	 -spacing: Define o espaçamento entre as palavras do texto, e é 
medido em px (pixels).
letter-spacing•	 : Define o espaçamento entre as letras do texto. Tam-
bém é medido em pixels.
line-height•	 : Define a altura de cada linha. Se o valor não vier acom-
panhado de uma unidade, indica quantas vezes a altura da linha será 
maior que o padrão. Também pode ser medido em pixels.
ATIVIDADE 11 - Formate o texto de sua “Página Pessoal” as com 
tags aprendidas nesta seção.
Capítulo 4
45
Programação para Internet
4.5 Tabelas
Os atributos acima também podem ser utilizados para alterarem a forma-
tação de outras tags. Vamos, por exemplo, definir o estilo de uma tabela. A 
Figura 20 mostra como ficaram as tabelas da Figura 11 e da Figura 12 com 
o CSS. Repare que o estilo se aplica a todas as tabelas da página:
 Figura 20 - Tabelas formatadas com CSS
A seguir, mostramos o código CSS responsável por esta mudança na 
formatação da tabela:
A primeira coisa feita no código foi definir a formatação de toda a tabe-
la. Primeiro, definimos que a largura da tabela será de 400 pixels, que o 
Folhas de Estilo (CSS)
46
Tecnologia em Análise e Desenvolvimento de Sistemas
tamanho da fonte do texto será de 16 pixels (enquanto o do restante do 
corpo da página é de 14), e que o texto ficará centralizado.
O atributo border-spacing está definindo que o tamanho do espaça-
mento entre as células da tabela será de dois pixels. Este atributo não 
é reconhecido por versões antigas do navegador Microsoft Internet Ex-
plorer. Nestes casos, é preciso incluir o atributo cellspacing=”2” na tag 
<table> do próprio código HTML. Para garantir que sempre funcione, 
altere tanto o HTML quanto o CSS.
Os atributos border-top e border-bottom definem, respectivamente, a 
borda superior e a inferior da tabela. Para utilizá-los, é preciso definir a 
largura da borda, o estilo da linha e a cor (nesta ordem). Por exemplo: 
border-top: 2px solid red define uma borda de 2 pixels, sólida (uma 
linha contínua) e vermelha. Os estilos, além de solid, podem ser: dotted 
(pontilhado), dashed (tracejado) e double (duplo), entre outros. Existem 
também border-left (borda à esquerda) e border-right (à direita). Para 
definir uma mesma borda ao redor de todo o conteúdo, podemos utili-
zar o atributo border, com a mesma sequência de valores (largura, estilo 
da linha e cor da borda).
Após alterarmos a formatação de toda a tabela, definimos o estilo es-
pecífico de seus cabeçalhos (<th>), nesta ordem: (1) a cor de fundo 
será azul claro (#ccccff); (2) a cor da fonte será preta (black); (3) o texto 
estará em itálico; e (4) haverá um espaçamento entre os cantos e o 
conteúdo da tag de 10 pixels. 
Este último atributo, chamado padding, também pode ser atribuído in-
dividualmente (padding-left, padding-bottom etc). Além disso, pode-
mos inserir quatro valores distintos em um único padding. O primeiro 
corresponderá ao padding-top, o segundo ao padding-right, o tercei-
ro ao padding-bottom e o último ao padding-left. Exemplo: padding: 
10px 5px 15px 20px define 10 pixels para o topo, 5 para o canto direito, 
15 para a base e 20 para o canto esquerdo. 
Tudo o que foi dito no último parágrafo vale também para o atributo 
margin. Por fim, definimos no código que as demais células da tabela 
também terão espaçamento interno de 10 pixels.
Capítulo 4
47
Programação para Internet
4.6 Links
Agora modificaremos os links de nosso site:
A primeira modificação na tag <a> foi tirar o sublinhado que todos os 
links possuem (text-decoration: none). Em seguida, definimos os links 
serão vermelhos. A regra a:hover indica o que deve acontecer enquanto 
passarmos o ponteiro do mouse sobre um link (no nosso caso, ele volta 
a ficar sublinhado). 
Além de a:hover, podemos utilizar a:visited (quando o link já ti-
ver sido visitado pelo usuário), a:active (enquanto o usuário estiver 
clicando-o) e a:link (para o link não visitado).
O atributo hover pode ser aplicado a qualquer tag (table:hover, 
por exemplo, indica o que deve acontecer enquanto passarmos o 
mouse por cima de uma tabela).
A Figura 21 mostra, respectivamente: como os links do “index.html” 
eram antes de incluirmos o estilo CSS; como eles ficaramapós o CSS e 
como um deles se comporta quando passamos o mouse sobre ele:
 
Figura 21 - Links antes e após a inclusão do CSS
4.7 Classes
Em alguns casos você deseja aplicar estilos a um elemento ou grupo de 
elementos em particular (alterar a fonte apenas do título do site, por 
exemplo). Veja na Figura 22, por exemplo, que alteramos a exibição da 
primeira linha de nossa página:
Folhas de Estilo (CSS)
48
Tecnologia em Análise e Desenvolvimento de Sistemas
Figura 22 - Elemento formatado através de seu identificador
Para alterar um único elemento, precisamos identificá-lo no arquivo 
HTML com o atributo id. Veja o código HTML do exemplo acima:
O código acima significa que agora podemos nos referir ao texto “Isto é 
um título” através do identificador “titulo”. Para alterar sua formatação 
no arquivo CSS, utilizamos o seguinte código:
O nome do identificador deve vir sempre precedido do caractere “#” no 
arquivo CSS. Além disso, o atributo id pode pertencer a um único ele-
mento no código HTML, afinal ele existe para identificar o elemento.
Para definirmos uma formatação para um grupo de elementos, cria-
mos uma classe no arquivo CSS. A classe deve ser referenciada no arqui-
vo HTML através do atributo class. Como exemplo, iremos criar uma 
classe para cada uma das duas listas do arquivo “index.html”. Veja como 
fica o trecho de código a seguir:
Capítulo 4
49
Programação para Internet
Como podemos observar no trecho de código acima, os itens da pri-
meira lista pertencem à classe “lista1”, e os da segunda à classe “lista2”. 
O trecho de código CSS a seguir mostra como formatá-las:
O atributo font-weight: bold faz com que o texto fique em negrito. 
Ele também pode assumir o valor normal, que corresponde ao texto 
sem negrito. Veja na Figura 23, respectivamente, como a página era 
e como ela está agora:
 
Figura 23 - Listas antes e após a inclusão do CSS
Agora iremos alterar apenas os subitens da “lista2”, retirando o itálico e 
escrevendo o texto com fonte small-caps (aquela que utiliza letras mai-
úsculas em tamanho reduzido). O código CSS deve ser o seguinte:
Folhas de Estilo (CSS)
50
Tecnologia em Análise e Desenvolvimento de Sistemas
O primeiro atributo retira o itálico da fonte. Para retirar o itálico, 
devemos utilizar font- variant: normal. Como vimos acima, para 
alterar a formatação de tags aninhadas no código, devemos listá-las 
lado a lado no CSS (exemplo: “li.lista2 li” modifica somente os itens 
que estiverem dentro de outros itens pertencentes à classe “lista2”). 
Veja o resultado na Figura 24:
 Figura 24 - Elementos com a fonte small-caps
4.8 Posicionamento
Podemos utilizar CSS para determinar a posição que os elementos ocu-
parão na página com os atributos left (esquerda), right (direita), top 
(topo) e bottom (base), que definem a quantidade de espaço que co-
locaremos ao redor dos elementos. Além disso, precisamos definir se o 
atributo position receberá o valor relative ou absolute: o primeiro indi-
ca mudança em relação àquela que seria a posição original do elemento 
na página. O segundo indica posição absoluta (independente de qual-
quer outro elemento presente na página). Para especificarmos qual é o 
trecho de código na página HTML que será posicionado, utilizaremos a 
tag <div>. Esta tag não adiciona qualquer formatação ao seu conteúdo. 
Sua única funcionalidade é delimitar um pedaço da página que receberá 
alguma propriedade. Veja no código a seguir:
Capítulo 4
51
Programação para Internet
Veja agora o código CSS para as classes “titulo1” e “titulo2”, utilizando 
posicionamento relativo:
O atributo left define o espaço que será adicionado à esquerda do ele-
mento, ou seja, o quanto ele será deslocado para a direita. O mesmo vale 
para os demais. A Figura 25 mostra a página, respectivamente, com e 
sem o posicionamento. Repare que a posição do primeiro texto mudou 
para a direita e para baixo. A do segundo, apenas para direita.
 
Figura 25 - Posicionamento relativo com CSS
Utilizando o posicionamento absoluto, ao invés de relativo, os valores de 
left, right, top e bottom definem as coordenadas exatas do elemento na 
página. Veja no código CSS a seguir:
Folhas de Estilo (CSS)
52
Tecnologia em Análise e Desenvolvimento de Sistemas
O código acima deixa os dois textos sobrepostos: o primeiro texto ficará 
encostado no canto superior esquerdo da página, e o segundo um pouco 
mais ao lado, como pode ser visto na Figura 26:
 Figura 26 - Posicionamento absoluto com CSS
O atributo z-index simula um espaço tridimensional, como se os ele-
mentos estivessem em camadas: elementos com índice maior se sobre-
põem àqueles com índice menor. É por isso, o segundo texto aparece 
atrás do primeiro na figura. Um elemento posicionado absolutamente 
não cria nenhum espaço no documento. Isto significa que a posição do 
restante da tela não será afetado por ele.
Capítulo 4
53
Programação para Internet
ATIVIDADE 12 - Na “Atividade 6” da seção 3.3 você criou uma pá-
gina semelhante à da Figura 13. Agora você deve criar um arquivo 
CSS exclusivo para ela, deixando-a semelhante à da Figura 27:
Figura 27 - Exercício com CSS
Folhas de Estilo (CSS)
54
Tecnologia em Análise e Desenvolvimento de Sistemas
Capítulo 4
55
Programação para Internet
A LINGUAGEM JAVASCRIPT
Olá Pessoal
Neste capítulo iremos aprender a linguagem JavaScript. Ao contrá-
rio de HTML e CSS, JavaScript é uma linguagem de programação. 
Ela permite que criemos pequenos programas que realizam ações 
em uma página da web.
O navegador do cliente é o responsável por interpretar as ações da lin-
guagem JavaScript. Ao longo do capítulo, veremos que nossas páginas 
podem ser mais interativas do que eram apenas com HTML e CSS.
5.1 O que é JavaScript?
JavaScript é uma linguagem que acabou sendo utilizada para adicio-
nar interatividade às páginas HTML. É uma linguagem de scripts que 
geralmente é embutida dentro de páginas da web, e é interpretada 
localmente pelo navegador do cliente que acessa o website. Por ser 
uma linguagem interpretada, não necessita que seus códigos sejam 
compilados previamente. Além disso, qualquer um pode utilizá-la 
sem precisar adquirir licença para isto.
JavaScript e Java são linguagens completamente diferentes, ape-
sar do nome em parecido. Java é uma linguagem de programa-
ção mais poderosa e complexa.
JavaScript possui uma linguagem simples, permitindo que pessoas que 
desenvolvam páginas para a web com pouca experiência de programa-
ção possam utilizá-la. A linguagem permite que um texto dinâmico seja 
inserido à página (por exemplo, o nome do usuário que está acessando 
o site). Além disso, é possível interagir com eventos realizados pelo usu-
ário (como quando ele clica em algum elemento da página).
Também é possível alterar o conteúdo e a formatação dos elementos das 
páginas HTML através de código JavaScript, além de detectar informa-
ções sobre o usuário (qual navegador, sistema operacional e resolução 
de página ele está utilizado, por exemplo).
56
Tecnologia em Análise e Desenvolvimento de Sistemas
Outra funcionalidade importante é que a linguagem pode ser utilizada 
para validar os dados digitados pelo usuário em formulários HTML an-
tes que eles sejam submetidos. Isso evita que o servidor seja sobrecar-
regado com esta tarefa. Além disso, é bem mais cômodo para o usuário 
que o website avise os campos preenchidos incorretamente antes que as 
informações sejam submetidas ao servidor.
JavaScript está presente em todos os principais navegadores desde 
1996, e é uma linguagem ainda em processo de desenvolvimento. 
Alguns navegadores não trazem todas as funcionalidades do JavaS-
cript habilitadas por padrão, mas permitem que o usuário personali-
ze quais devem ser executadas.
5.2 Conceitosbásicos
Um código JavaScript pode ser inserido em uma página entre as tags 
<script type=”text/javascript”> e </script>. Se o script for inserido no 
cabeçalho da página (ou seja, entre <head> e </head>), ele será executa-
do sempre que a página for carregada. Se for inserido no corpo, será exe-
cutado exatamente no local onde foi inserido. Veja um exemplo abaixo.
O código acima cria um objeto da classe Date (JavaScript é orientada 
a objeto, como Java, mas não criaremos nossas próprias classes neste 
material), cujo método getHours retorna a hora atual. Dependendo do 
valor da variável “hora”, escrevemos uma saudação diferente para o usu-
ário em nossa página, entre as tags <h1> e </h1>. O comando “docu-
ment.write” é o padrão do JavaScript para incluirmos textos em páginas 
HTML. O código acima simplesmente escreve uma saudação diferente 
na página, dependendo da hora em que o usuário acessá-la.
Capítulo 5
57
Programação para Internet
Existem navegadores antigos que não suportam JavaScript. Nesses casos, as 
tags <script> e </script> seriam ignoradas, e o navegador trataria o conteú-
do entre elas como um texto qualquer. Para evitar que isso aconteça, pode-
mos fazer com que os navegadores antigos tratem o código JavaScript como 
um comentário, ignorando-o. Veja um exemplo a seguir:
Quando um navegador antigo interpretar o código acima, ele tratará 
todo o conteúdo entre “<!--” e “-->” como comentários. Caso contrário, 
é o JavaScript que irá ignorar a linha “<!--” (que não significa nada para 
ele) e tratará a última linha como simples um comentário (comentários 
em JavaScript são iguais aos de C e de Java).
Tome cuidado ao escrever seu código JavaScript: Ao contrário 
de HTML, JavaScript é sensível ao caso.
5.3 Tipos de dados, variáveis e expressões
Podemos criar variáveis em JavaScript para armazenarmos valores ou 
expressões, e seus valores podem se modificar ao longo do código. De-
claramos variáveis utilizando a palavra reservada var:
Como podemos observar, não declaramos o tipo da variável. Cada vari-
ável criada assume o tipo do valor que atribuímos a ela.
Os operadores aritméticos são análogos aos de C e Java: “+” para adição, 
“–” para subtração, “*” para multiplicação, “/” para divisão, “%” para 
resto da divisão, “++” para incremento e “– –” para decremento. Além 
disso, podemos utilizar o operador “+” para concatenar strings:
A Linguagem Javascript
58
Tecnologia em Análise e Desenvolvimento de Sistemas
A variável msg acima irá conter “Este é o material da disciplina Pro-
gramação para Internet”. Se adicionarmos um número a uma string (ou 
vice-versa), o número será convertido para string, e o resultado será a 
concatenação de ambas.
Os operadores “==”, “!=”, “>”, “<”, “>=” e “<=” possuem as mesmas fun-
cionalidades que em C e Java, e também podemos combiná-los utili-
zando “&&” (e) , “| |” (ou) e “!” (negação). Strings também podem ser 
comparadas normalmente com o operador “==”.
5.4 Estruturas de controle
Expressões condicionais são criadas utilizando as cláusulas IF, ELSE ou SWI-
TCH-CASE. A cláusula SWITCH-CASE é utilizada da seguinte forma:
O método getDay da classe Date retorna um número entre 0 e 6 relativo 
ao dia da semana atual (0 para domingo, 1 para segunda-feira, 2 para 
terça e assim sucessivamente). 
Para criarmos loops, podemos utilizar FOR e WHILE. A sintaxe de am-
bos é exatamente igual a das linguagens C e Java.
ATIVIDADE 13 - Para praticar, crie uma página HTML que dê 
uma saudação ao usuário (como no penúltimo exemplo) e infor-
me qual é o dia da semana (como no último exemplo).
Capítulo 5
59
Programação para Internet
5.5 Funções
Para criar funções em JavaScript, utilizamos a palavra reservada func-
tion. Funções em JavaScript são executadas quando fazemos chamadas 
a elas ou quando determinados eventos ocorrem. Elas podem ser cha-
madas em qualquer lugar do código, mesmo que tenham sido declara-
das em um arquivo externo. 
Para criar um arquivo JavaScript no Netbeans, clique em “Arquivo”, de-
pois em “Novo arquivo”, depois em “Outros” e escolha o tipo “Arquivo 
JavaScript” (dentro da aba “Web”, assim como você fazia para criar ar-
quivos HTML e CSS). Escolha um nome para ele e clique em “Finalizar”. 
O arquivo será salvo com a extensão “.js”. Após criá-lo, defina o atributo 
src na tag <script> com o endereço do arquivo. O exemplo a seguir in-
clui o arquivo “funções.js”:
Dentro do arquivo externo, inserimos código JavaScript normalmente. 
Entretanto, não precisamos das tags <script> e </script>. O código a 
seguir define uma função:
A função definida no código acima faz chamada a uma função padrão 
do JavaScript chamada alert( ), que abre uma caixa de alerta no nave-
gador do usuário exibindo o texto recebido como parâmetro. Veja um 
exemplo de sua exibição na Figura 28
A Linguagem Javascript
60
Tecnologia em Análise e Desenvolvimento de Sistemas
Figura 28 - Caixa de alerta
Para fazermos a chamada da função criada acima, precisamos definir 
em que lugar da página ela será executada. Veja um exemplo a seguir:
Incluir as funções em arquivos externos aumenta a legibilidade e facilita 
a manutenção dos códigos HTML.
Quando uma caixa de alerta é exibida, o usuário precisa clicar em “OK” 
para prosseguir. Podemos utilizar também a caixa de confirmação (cha-
mada confirm( )), que retorna verdadeira se o usuário clicar em “OK” ou 
falso caso ele clique em “Cancelar”. Veja um exemplo no código a seguir:
Capítulo 5
61
Programação para Internet
O código acima significa que se o usuário clicar em “Cancelar” (ou seja, 
se confirm( ) retornar falso), a página será redirecionada para o Google. 
Como podemos observar, redirecionamos uma página alterando a loca-
lização de seu documento. Veja a janela de confirmação na Figura 29:
Figura 29 - Caixa de confirmação
A função confirm ( ) retorna um valor booleano. Para definir o retorno de 
uma função, assim como em C e Java, utilizamos a palavra reservada return. 
Não é necessário especificar o tipo de retorno na assinatura da função.
5.6 Eventos
Eventos são ações que realizadas pelo usuário na página, que são captu-
radas pelo JavaScript. Todo elemento HTML possui eventos que podem 
ser capturados. Por exemplo, podemos utilizar o evento onClick de um 
botão para definir a função que executada quando o usuário clicar no 
botão. Os eventos são definidos dentro das tags HTML. Eventos podem 
ocorrer quando há um clique do mouse ou quando o ponteiro está sobre 
algum elemento da página; quando uma página ou uma figura está sen-
do carregada; quando um campo do formulário está sendo selecionado; 
quando um formulário está sendo submetido; e quando uma tecla sen-
do digitada, entre outras situações.
O site http://www.mspc.eng.br/info/jscriptContrEv.shtml 
apresenta uma lista com todos os eventos reconhecidos pela 
linguagem JavaScript.
A Linguagem Javascript
62
Tecnologia em Análise e Desenvolvimento de Sistemas
Os eventos onLoad e onUnLoad ocorrem, respectivamente, quando o 
usuário entra ou sai de uma página. O primeiro pode ser utilizado, por 
exemplo, para descobrir qual é o navegador do usuário e carregar uma 
versão específica da página para ele. No exemplo a seguir, definimos que 
quando a página for carregada, executaremos a função “saudacao( )”, 
definida na seção anterior:
Os eventos onMouseOver e onMouseOut ocorrem, respectivamente, 
quando passamos ou retiramos o ponteiro do mouse sobre algum ele-
mento da página. Eles costumam ser utilizados para a criação de botões 
animados (que mudam suas figuras quando estão sob o ponteiro do 
mouse). O exemplo a seguir altera o valor do atributo src da imagem:
No exemplo, a figura padrão da imagem, definida pelo atributo src, é 
“link1.gif ”. Quando o ponteiro do mouse passar sobre a imagem, a fi-
gura passa a ser “link2.gif