Caderno Ling Web

Programação
para WEB
Fernando Schütz
Cuiabá-MT
2013
Presidência da República Federativa do Brasil
Ministério da Educação
Secretaria de Educação Profissional e Tecnológica
Diretoria de Integração das Redes de Educação Profissional e Tecnológica
© Este caderno foi elaborado pela Universidade Tecnológica Federal do Paraná - PR

para a Rede e-Tec Brasil, do Ministério da Educação em parceria com a Universidade
Federal do Mato Grosso.
Equipe de Revisão Universidade Tecnológica Federal

Universidade Federal de Mato Grosso – do Paraná - PR
UFMT
Coordenação Institucional Coordenação Geral e-TEC
Carlos Rinaldi Edilson Pontarolo
Equipe de Elaboração Coordenação de Tecnologia na Educação

Henrique Oliveira da Silva
Coordenação de Produção de Material
Didático Impresso Coordenação de Curso
Pedro Roberto Piloni Maria Teresa Garcia Badoch
Designer Educacional
Alceu Vidotti
Designer Master
Marta Magnusson Solyszko
Diagramação
Tatiane Hirata
Revisão de Língua Portuguesa

Patricia Rahuan
Revisora Final
Marta Magnusson Solyszko
Projeto Gráfico
Rede e-Tec Brasil / UFMT
Dados Internacionais de Catalogação na Publicação
S886 Schütz, Fernando
Programação para web / Fernando Schütz. – Curitiba: Ed. UTFPR, 2013.

159 p. : il.
Inclui bibliografia
e-ISBN: 978-85-7014-115-2
1. Sites da Web – Desenvolvimento. 2. HTML (Linguagem de mar-cação de documento).

4. Recursos de rede de computador I. Título.
CDD (22. ed.) 005.133
Bibliotecário: Adriano Lopes CRB 9/1429

Apresentação Rede e-Tec Brasil
Prezado(a) estudante,
Bem-vindo(a) à Rede e-Tec Brasil!
Você faz parte de uma rede nacional de ensino que, por sua vez, constitui uma das ações do
Pronatec - Programa Nacional de Acesso ao Ensino Técnico e Emprego. O Pronatec, instituído
pela Lei nº 12.513/2011, tem como objetivo principal expandir, interiorizar e democratizar
a oferta de cursos de Educação Profissional e Tecnológica (EPT) para a população brasileira
propiciando caminho de acesso mais rápido ao emprego.
É neste âmbito que as ações da Rede e-Tec Brasil promovem a parceria entre a Secretaria de
Educação Profissional e Tecnológica (Setec) e as instâncias promotoras de ensino técnico,
como os institutos federais, as secretarias de educação dos estados, as universidades, as es-
colas e colégios tecnológicos e o Sistema S.
A educação a distância no nosso país, de dimensões continentais e grande diversidade re-

gional e cultural, longe de distanciar, aproxima as pessoas ao garantir acesso à educação
de qualidade e ao promover o fortalecimento da formação de jovens moradores de regiões
distantes, geograficamente ou economicamente, dos grandes centros.
A Rede e-Tec Brasil leva diversos cursos técnicos a todas as regiões do país, incentivando os
estudantes a concluir o ensino médio e a realizar uma formação e atualização contínuas. Os
cursos são ofertados pelas instituições de educação profissional e o atendimento ao estudan-
te é realizado tanto nas sedes das instituições quanto em suas unidades remotas, os polos.
Os parceiros da Rede e-Tec Brasil acreditam em uma educação profissional qualificada – in-
tegradora do ensino médio e da educação técnica – capaz de promover o cidadão com ca-
pacidades para produzir, mas também com autonomia diante das diferentes dimensões da
realidade: cultural, social, familiar, esportiva, política e ética.
Nós acreditamos em você!

Desejamos sucesso na sua formação profissional!
Ministério da Educação
Setembro de 2013
Nosso contato
etecbrasil@mec.gov.br
5 Rede e-Tec Brasil

Indicação de ícones
Os ícones são elementos gráficos utilizados para ampliar as formas de

linguagem e facilitar a organização e a leitura hipertextual.
Atenção: indica pontos de maior relevância no texto.
Saiba mais: oferece novas informações que enriquecem o

assunto ou “curiosidades” e notícias recentes relacionadas ao
tema estudado.
Glossário: indica a definição de um termo, palavra ou expressão

utilizada no texto.
Mídias integradas: remete o tema para outras fontes: livros,

filmes, músicas, sites, programas de TV.
Atividades de aprendizagem: apresenta atividades em

diferentes níveis de aprendizagem para que o estudante possa
realizá-las e conferir o seu domínio do tema estudado.
Reflita: momento de uma pausa na leitura para refletir/escrever

sobre pontos importantes e/ou questionamentos.
7 Rede e-Tec Brasil

Contents
Apresentação Rede e-Tec Brasil 5
Indicação de ícones 7
Apresentação da Disciplina 11
Sumário 13
Aula 1. Fundamentos da Internet e da

Linguagem HTML 15
1.1 A internet 15
1.2 Exemplos de serviços presentes na

internet 17
1.3 Aplicativos utilizados para acesso a serviços na WEB

18
1.4 Desenvolvimento de páginas para WEB 19
Aula 2. Linguagem HTML 27
2.1 Elementos de frases 27
2.2 Texto pré-formatado 28
2.3 Listas 29
2.4 Tabelas 31
2.5 Links: âncoras e ligações 33
2.6 Inserção de imagens 34
2.7 Formulários 35
Aula 3. Formatação de Elementos

HTML Utilizando CSS
45
3.1 Fundamentos da linguagem 46
3.2 Valores 48
3.3 Elementos de formatação 52
3.4 Imagens e configuração de fundo 62

Palavra do Professor-autor
Esta disciplina faz parte do Programa e-Tec Brasil, inserida no Curso de

Técnico em Informática oferecido pela Universidade Tecnológica Federal do
Paraná (UTFPR), Rede e-Tec Brasil.
É um prazer tê-lo(a) conosco nesta jornada que apresentará novos caminhos

para a programação que até pouco tempo estava restrita a redes internas de
empresas ou mesmo a um único computador. Nesta disciplina você poderá
aprender conceitos básicos de uma linguagem de programação para a WEB
e desenvolver páginas utilizando HTML, PHP e CSS para formatação.
Aprender a desenvolver programas e utilizar uma linguagem de programa-

ção estão diretamente relacionados a fazer atividades práticas, portanto faça
e refaça os exercícios até que tudo esteja bem compreendido.
Desejo ótimo aproveitamento.
9 Rede e-Tec Brasil

Apresentação da Disciplina
A internet hoje, principalmente em sua parte gráfica (a WEB), tem uma

abrangência mundial e, portanto, oferece um vasto mercado de trabalho
para quem conhece a arte do desenvolvimento de programas para WEB.
Os conteúdos serão apresentados da seguinte forma:
Aula 1: Fundamentos da Internet e da linguagem HTML
Aula 2: Linguagem HTML
Aula 3: CSS
Aula 4: Programação WEB lado cliente – Javascript
Aula 5: Programação WEB lado servidor – PHP
Aula 6: Estudo experimental com PHP
Você poderá tirar suas próprias conclusões sobre a evolução da internet,

pois apresentaremos um resumo histórico da grande rede focando os desa-
fios e as personagens por trás desta grande revolução do século 20. Teremos
um amplo conteúdo sobre a Linguagem de Marcação para Hipertextos – o
HTML. Com ele você poderá construir páginas modernas, incluindo recursos
interessantes para a organização do texto, imagens e objetos multimídia.
O conteúdo trata ainda, da formatação de elementos HTML através de Fo-

lhas de Estilo em Cascata – o CSS. Você verá que a aplicação das regras do
CSS deixará sua página mais bonita, melhorando também a acessibilidade
e usabilidade, tão importantes nos dias atuais principalmente para páginas
de Educação a Distância e Comércio Eletrônico (na venda de produtos e
serviços).
As últimas aulas do caderno tratam da programação feita no lado servidor.

Lá apresentaremos a linguagem PHP, muito difundida entre os programa-
dores do mundo inteiro. É nesta parte que o poder de processamento da
11 Rede e-Tec Brasil

internet será por você avaliado, pois haverá o trabalho com banco de dados
na criação de uma área administrativa para cadastro de clientes, bem como
serão abordados tópicos para manipulação de dados.
O principal objetivo deste estudo é que, ao final do curso, você possa:
• identificar as principais diferenças entre a programação dentro e fora da

WEB;
• formatar sites de forma inteligente;
• construir formas de interação com o usuário de navegadores;
• manipular dados utilizando a linguagem PHP;
Assim, espero que, ao final desta disciplina, você esteja habilitado(a) a en-
tender a estrutura básica das linguagens HTML, CSS e PHP e desenvolver
páginas simples para WEB.
Desejo a você sucesso no curso!
Fernando Schütz
Rede e-Tec Brasil 12

Sumário
Aula 1. Fundamentos da Internet e da Linguagem HTML 15
1.1 A internet 15
1.2 Exemplos de serviços presentes na internet 17
1.3 Aplicativos utilizados para acesso a serviços na WEB 18
1.4 Desenvolvimento de páginas para WEB 19
Aula 2. Linguagem HTML 27
2.1 Elementos de frases 27
2.2 Texto pré-formatado 28
2.3 Listas 29
2.4 Tabelas 31
2.5 Links: âncoras e ligações 33
2.6 Inserção de imagens 34
2.7 Formulários 35
Aula 3. Formatação de Elementos HTML Utilizando CSS 45
3.2 Valores 48
3.3 Elementos de formatação 52
3.4 Imagens e configuração de fundo 62
Aula 4. Programação WEB “lado cliente” 69
4.2 Tipos de dados 75
4.3 Pseudo-objetos 76
4.4 Operadores 81
4.5 Comandos 82
4.6 Javascript com formulários 86

Aula 5. Programação para WEB “lado servidor” 91
5.2 Características do PHP 92
5.3 Programação 93
5.4 Tipos de dados 95
5.5 Operadores 97
5.6 Comandos 99
5.7 Funções 104
Aula 6. Programação para WEB “lado servidor” – estudo experimental 113
6.1 Funções específicas para controle de banco de dados e sessões 114
6.2 Criação do banco de dados 116
6.3 Código de conexão com o banco de dados 118
6.4 Páginas da WEBApp 120
Palavras finais 135
Guia de Soluções 137
Referências 157
Obras Consultadas 158
Currículo do Professor-autor 159

Aula 1. Fundamentos da Internet e da
Linguagem HTML
Objetivos:
• expressar o conceito de internet;
• identificar a evolução da rede de computadores na internet;
• apresentar os principais serviços e formas de acesso à rede; e
• utilizar a linguagem de marcação HTML para o processo de cria-

ção de páginas para WEB.
Caro(a) estudante,
Você está iniciando a primeira de um bloco de 06 aulas que compõem esta

disciplina . Nela você terá acesso ao conceito de internet, exemplos de ser-
viços presentes na mesma, os aplicativos utilizados para acesso a serviços na
WEB, bem como o desenvolvimento de páginas para WEB. A compreensão
do conteúdo a seguir e as atividades de aprendizagem podem contribuir
para a sua formação como técnico em informática. Vamos iniciar apresen-
tando o conceito de internet.
1.1 A internet
A difusão do conhecimento se tornou regra na vida moderna. Desde gran-
des instituições, através de portais, até um estudante de ensino médio, atra-
vés de uma rede social ou um blog pode disponibilizar qualquer informação
Federal Networking Council:
para o mundo inteiro. A praticidade na distribuição destes elementos se dá O Federal Networking Council
pela internet . (FNC) foi privilegiado
pelo Comitê Nacional de Ciência
e Tecnologia, Informação e
Comunicação (CCIC) para
No dia 24 de outubro de 1995, o Federal Networking Council norte-ame- atuar como um fórum para a
ricano aprovou por unanimidade uma resolução definindo o termo “Inter- colaboração em rede entre as
agências federais para atender
net”, que se refere ao sistema de informação global que: suas pesquisas, educação,
missão e objetivos operacionais.
Aula 1 - Fundamentos da Internet e da Linguagem HTML 15 Rede e-Tec Brasil

I - É logicamente ligado por um endereço único global baseado no Inter-
net Protocol (IP) ou suas subsequentes extensões;
II - É capaz de suportar comunicações usando o Transmission Control

Protocol/Internet Protocol (TCP/IP) ou suas subsequentes extensões e/ou
outros protocolos compatíveis ao IP; e
III - Provê, usa ou torna acessível, tanto publicamente como privadamen-

te, serviços de mais alto nível produzidos na infraestrutura descrita. Dis-
ponível em <http://www.internetsociety.org/internet/internet-51/history-
-internet/brief-history-internet> Acesso em: em 07 jul.2011.
Esta definição foi desenvolvida em consulta com membros da Internet e co-

munidades de direitos da propriedade intelectual.
A figura 1 apresenta uma Linha do Tempo desta evolução de tecnologias,

número de acessos e conselhos reguladores.
Figura 1 - Linha do tempo da Internet

Fonte: Leiner (2011)
A internet, como rede mundial de computadores interconectados, é um pri-

vilégio da vida moderna. É tida como o maior repositório de informações
acessíveis a qualquer pessoa em qualquer parte do mundo. E o que torna a
internet tão diferente das outras invenções humanas é o insignificante pe-
ríodo de tempo que ela precisou para ser usada por milhões de pessoas. A
eletricidade (1873), por exemplo, atingiu 50 milhões de usuários depois de
46 anos de existência e o telefone (1876) levou 35 anos para atingir esta
mesma marca. A figura 2 apresenta um “pedaço” da rede que demonstra
seu funcionamento.
Rede e-Tec Brasil 16 Programação para WEB

Backbone: O backbone (es-
pinha dorsal) designa o esquema
de ligações centrais de um
sistema mais amplo, tipicamente
de elevado desempenho, em
sistemas de redes de computa-
dores.
Para conhecer mais acesse

http://www.w3.org/
Figura 2 - Uma porção típica da Internet History/1989/proposal.html
Fonte: Coulourios (2007.p.3),
Observe a seguir os principais serviços presentes na internet.
1.2 Exemplos de serviços presentes na

internet
Através de páginas espalhadas pela WEB, milhares de pessoas possuem aces-
so instantâneo a uma vasta gama de informações on-line em hipermídia.
Comparado às enciclopédias e bibliotecas tradicionais, a World Wide Web
(ou somente WWW) permitiu uma extrema descentralização da informação
e dos dados, incluindo a criação ou popularização de tecnologias como pá-
ginas pessoais, WEBlogs e redes sociais, onde qualquer pessoa com acesso
a um navegador pode disponibilizar conteúdo. A WEB vem se mostrando
uma plataforma comum no qual outros serviços da internet estão sendo
disponibilizados.
A disponibilização de documentos e a popularização da Web se devem, prin-

cipalmente ao conceito de hipertexto. Considerado como elemento textual,
exibido em uma páginan Web com referências (ligações ou hiperlinks) para
outros textos que o leitor pode acessar imediatamente, normalmente por
um clique do mouse ou sequência de teclas. Além de texto, o hipertexto
pode conter tabelas, imagens e outros dispositivos de apresentação, sendo
assim chamado de hipermídia.
O e-mail (electronic mail ou correio eletrônico) é o envio eletrônico de cor-

respondências. Atualmente o e-mail suporta o envio de textos e arquivos,
sendo que servidores de e-mail podem enviar e-mails para múltiplos ende-
reços eletrônicos.

O correio eletrônico pode ser implementado através de programas especí-
ficos ou ainda por navegadores, os chamados WEBmails que, diferente de
um aplicativo de acesso ao e-mail instalado num computador (só pode ser
acessado localmente pelo utilizador ou através de acesso remoto), o conte-
údo pode ser acessado facilmente em qualquer lugar através de um sistema
de autenticação.
Para conhecer essas redes sociais
acesse os sites: www.twitter.
com e www.facebook.com
A comunicação direta em páginas, como acontece nas redes sociais, está
cada vez mais popular entre usuários da Web. O twitter, onde pequenos tex-
tos (geralmente contendo hiperlinks para outras páginas) são postados em
massa, é um dos fenômenos atuais, assim como o Facebook - a rede social
que mais cresceu no Brasil.
Para que se possa acessar os serviços na WEB, é necessário que os programas

aplicativos instalados em seu computador estejam preparados para esta co-
nexão com o mundo, ou que se use aplicativos desenvolvidos estritamente
para este fim. A próxima seção aborda um breve histórico dos principais apli-
cativos, bem como uma comparação do estado da arte dos mais utilizados.
1.3 Aplicativos utilizados para acesso a

serviços na WEB
Para que um usuário tenha
acesso à grande rede mun-
dial de computadores, pro-
gramas aplicativos foram
criados durante a evolução
da rede e da criação de no-
vos serviços. Um navegador
é um aplicativo que permi-
te o acesso a recursos WEB
Lançado em Novembro de
1993 pelo Centro Nacional de através da Iinternet. Um
Aplicações de Supercomputação
(NCSA - National Center
grande marco para a popu-
for Supercomputing larização da internet e, prin-
Applications), o aplicativo
adicionava facilidades através de cipalmente da WEB foi o
uma melhor interface, que incluia navegador NCSA Mosaic,
ícones favoritos (bookmarks)
e imagens. Seu sucesso foi tão que você poderá observar
grande que, em um ano, já
atingiu a marca de milhões de
na figura 3 que mostra um
usuários. screenshot do MOSAIC 3 Figura 3 - Screenshot do NCSA Mosaic
Fonte: autor

Atualmente quatro navegadores são os mais utilizados dentro da grande
rede, e têm uma grande aceitação por usuários da WEB. A figura 4 apresen-
ta tais navegadores.
Figura 4 - Em sentido horário, iniciando do primeiro quadro a esquerda, screenshots

dos navegadores Google Chrome, Opera, Mozzila Firefox e Internet Explorer
Fonte: autor
No tópico a seguir vamos abordar as diversas possibilidades para construção

de páginas para WEB.
1.4 Desenvolvimento de páginas para WEB

Como desenvolver páginas para a WEB? A programação imperativa e fun-
cional não é utilizada diretamente nas páginas para a construção de conte-
údo estático e inclusão de objetos externos geograficamente espalhados. As
páginas são construídas com linguagem de marcação, ou seja, marcas (tags)
são inseridas na página para que possam ser interpretadas por programas de
usuário, geralmente, os navegadores! Imagine uma linguagem de marcação
como uma rodovia com placas, cada uma indicando o que deve ser feito a
seguir (feito com o conteúdo da página).

Para publicar informações para distribuição global há a necessidade de uma
linguagem conhecida universalmente, uma forma de publicação que siga uma
“linguagem mãe” que todos os computadores potenciais exibidores compre-
endam. A linguagem de publicação utilizada na World Wide WEB é HTML.
Desenvolvido originalmente
por Tim Berners-Lee, a partir
de 1990, a HTML é uma
linguagem de marcação de
A linguagem HTML dá ao autor a possibilidade de:
hipertexto (Hypertext Markup
Language) e é utilizada para
a construção de páginas para • Publicar documentos on-line com cabeçalhos, textos, tabelas, lis-
WEB, e pode ser definido tas, fotos, entre outros;
como um tipo especial de
documento de texto que é
usado por navegadores WEB
para apresentação de textos e
• Exibir informações on-line através de ligações de hipertextos, no
gráficos. Os documentos HTML clique de um botão;
são normalmente referidos
como páginas WEB, que são
retornadas (através de pedidos • Desenvolver formulários para conduzir transações com serviços
HTTP) de servidores espalhados
por todo o mundo. A primeira remotos para uso na busca de informações, fazer reservas, pedir
versão de HTML foi oficialmente
publicada em 1993, porém seu
produtos, entre outros;
desenvolvimento foi iniciado
em meados de 1989, por Tim
Berners-Lee. < disponível em: • Incluir planilhas, clipes de vídeo, clipes de som e outras aplicações
<http://www.w3.org/People/ diretamente nos documentos
Berners-Lee/WorldWideWEB.
html> Acesso em: 07 jul 3013
A versão HTML 4.01 introduz na linguagem mecanismos como folhas de
estilo, scripts, frames, incorporação de objetos, suporte melhorado para es-
crever textos da direita para a esquerda (nas culturas diferentes), tabelas
mais ricas, e melhorias nos formulários, oferecendo ainda uma melhor aces-
sibilidade para pessoas com deficiência.
1.4.1 Estrutura de documentos HTML

Um documento HTML é, na essência, um documento de texto, e a constru-
ção de suas regras para interpretação em navegadores é baseada em mar-
cações, que informam ao aplicativo o que deve ser feito com determinado
conteúdo. Não existe compilação de código: ele é interpretado pelos nave-
gadores, que modificam a formatação do texto (negrito, itálico, fontes, etc.)
e inserem objetos específicos (imagens, sons, objetos Flash, tabelas) durante
a interpretação para a leitura do usuário.
Para marcar as ações de modificação no texto que devem ser realizadas

pelos interpretadores (navegadores WEB), HTML faz o uso de tags ou marca-
ções. As tags têm a seguinte sintaxe:
<marcação atributo=”valor”>texto</marcação>
Rede e-Tec Brasil 20 Programação WEB

• Marcação: é o comando ou marca que representa qual modificação
deve ser feita.
• Atributo: elemento modificador da marca.
• Pode-se observar que as marcações precisam ser finalizadas. Isso é feito

através da “/”
Uma marca também pode ser vazia, ou seja, pode não haver a necessidade
de texto a ser modificado. Geralmente tais marcas fazem a inserção de um
objeto ou mesmo uma quebra de linha. A sintaxe para marcações “vazias” é:
<marcação atributo=”valor” />
Um documento HTML 4.01 é composto de três partes:
a) uma linha contendo informações sobre a versão do HTML
b) uma seção de cabeçalho declarativa (delimitada pelo elemento HEAD)
c) um corpo, contendo o conteúdo atual do documento. O corpo pode ser

implementado pelo elemento BODY ou o elemento FRAMESET.
A figura 5 exibe um primeiro exemplo de código HTML e um exemplo quan-

do aberto seu arquivo no navegador WEB.
Figura 5 - Exemplo de código e sua renderização em um navegador WEB

Fonte: autor
1.4.2 Divisão de uma página WEB

Assim que o navegador abre um arquivo vindo do servidor WEB, a interpre-
tação de cada tag interna é iniciada. A regra inicial é que o navegador saiba
qual será a linguagem utilizada para interpretar as marcações; posteriormen-
te configurações e finalmente o conteúdo em si. A apresentação e descri-

ção dos elementos iniciais utilizados em documentos escritos na linguagem
HTML podem ser vistos no quadro 1.
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
2. <HTML>
3. <HEAD>
4. <TITLE>Título da minha página</TITLE>
5. <META name=”Author” content=”Fernando Schutz”>
6. <META name=”Keywords” lang=”pt-br” content=”Professor, UTFPR”>
7. </HEAD>
8. </HTML>
Quadro 1 - Elementos de configuração de uma página HTML

Fonte: autor
• O elemento HTML indica que o conteúdo deste arquivo segue a lingua-

gem. Depois da declaração inicial, todo o documento deverá ser escrito
com tal linguagem.
• O elemento HEAD contém informações sobre o documento atual (títulos,

palavras-chave para mecanismos de busca, etc.). Normalmente tudo que
está dentro do elemento HEAD não é mostrado ao usuário final.
• O elemento TITLE está dentro do elemento HEAD e identifica o conteúdo

do documento. É indicado que o desenvolvedor utilize títulos que descre-
vam realmente sua página, não economizando em palavras.
• O elemento META permite ao desenvolvedor incluir “meta dados”, que

Outros elementos podem
ser inseridos para efetuar a são informações sobre o documento ao invés de seu real conteúdo. O
configuração da página. Acesse
http://www.w3.org/wiki/
elemento META deve ter um nome e um valor de conteúdo como atri-
HTML/Training/What_is_ butos.
HTML%3F para informações
da página que regulamentam a
linguagem. 1.4.3 Descrevendo o conteúdo de uma página
O elemento BODY de um documento delimita o conteúdo do documento.
O conteúdo pode ser apresentado ao cliente de variadas formas. Por exem-
plo, em navegadores visuais, o corpo (BODY) é uma tela onde o conteúdo é
apresentado como textos, figuras, cores, gráficos, entre outros. Para clientes
de áudio, o mesmo conteúdo pode ser “falado”.
Um exemplo de apresentação e uso do código de um elemento BODY é

apresentado no quadro 2.

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2. "http://www.w3.org/TR/html4/strict.dtd">
3. <HTML>
4. <HEAD>
5. <TITLE>A study of population dynamics</TITLE>
6. <STYLE type="text/css">
7. BODY { background: white; color: black}
8. A:link { color: red }
9. A:visited { color: maroon }
10. A:active { color: fuchsia }
11. </STYLE>
12. </HEAD>
13. <BODY>
14. ... document body...
15. </BODY>
16. </HTML>
Quadro 2 - Exemplo da tag <body>
Fonte: autor
Pode-se notar que o exemplo faz a utilização de estilos para formatar o
corpo da página (fundo branco, cor da letra preta, ligações em vermelho,
ligações já visitadas em marron e ligações ativas em “rosa-choque”). O uso
dos atributos que definiam tais formatações foi preterido (deprecated), e,
a partir de novas versões de páginas, não são mais utilizados. Para fins de
comparação, o código é demonstrado no quadro 3.
1. <BODY bgcolor="white" text="black"
2. link="red" alink="fuchsia" vlink="maroon">
3. ... document body...
4. </BODY>
Quadro 3 - Tags de formatação antigas (antes do CSS) e não

mais recomendadas para utilização
Fonte: autor
Um tipo de conteúdo que pode ser incluído em página HTML são textos, e
podem ser distribuídos e apresentados de várias maneiras. Esta seção trata
dos elementos que delimitam a apresentação de textos e seu conteúdo.
Conheça agora o que é uma distribuição em linha e em bloco.
1.4.4 Distribuição em linha e em bloco

Determinados elementos que aparecem no corpo de páginas são denomi-
nados “em linha” (in-line) e outros são apresentados como “em bloco”
(block-level). Geralmente, os elementos em bloco contêm elementos em
linha e outros elementos em bloco. Elementos em bloco, hierarquicamen-
te, contêm mais conteúdo enquanto elementos em linha contêm dados e
notações curtas.
A formatação também difere em termos de que elementos em bloco geral-

mente iniciam com novas linhas e elementos em linha não. O agrupamento
destes elementos pode se dar em dois elementos:

• DIV: define que o conteúdo é exibido em bloco
• SPAN: define que o conteúdo é exibido em linha
Originalmente os elementos DIV e SPAN possuem esta divisão, po-

rém, como qualquer elemento HTML, seu comportamento dentro de
uma página pode ser controlado por comandos do CSS.
CSS: Cascade Style Sheets Em conjunto com atributos ID e CLASS, os elementos DIV e SPAN oferecem
ou simplesmente “estilos”, é aos desenvolvedores um poderoso mecanismo para adicionar estrutura aos
uma linguagem de folha de
estilo utilizada para descrever documentos. Atualmente os designers de páginas não utilizam mais tabelas
a semântica da apresentação
(o visual e formatação) de um para as divisões de conteúdo e sim elementos DIV com estilos. O quadro 4
documento escrito em uma demonstra uma utilização em dois clientes: Fabiana e Fernando.
linguagem de marcação.
1. <DIV id="cliente-fabiana" class="cliente">
2. <P><SPAN class="cliente-titulo">Informações sobre o cliente:</SPAN>
3. <TABLE class="cliente-dados">
4. <TR><TH>Nome:<TD>Fabiana</TR>
5. <TR><TH>Tel:<TD>3240-8135</TR>
6. <TR><TH>Email:<TD>fabi@utfpr.edu.br</TR>
7. </TABLE>
8. </DIV>
9.
10. <DIV id="cliente-fernando" class="cliente">
11. <P><SPAN class="cliente-titulo">Informações sobre o cliente:</SPAN>
12. <TABLE class="cliente-dados">
13. <TR><TH>Nome:<TD>Fernando</TR>
14. <TR><TH>Tel:<TD>3240-8119</TR>
15. <TR><TH>Email:<TD>fernando@utfpr.edu.br</TR>
16. </TABLE>
17. </DIV>
Quadro 4 - Exemplo de uso da tags <div> e <span>

Fonte: autor
Nos exemplos de formatação com estilos tais elementos serão utilizados e a

formatação poderá ser definida.
1.4.5 Títulos
Elementos de títulos (cabeçalhos) brevemente descrevem o tópico de uma
seção que introduzem. Informações de cabeçalho podem ser utilizadas por
agentes de usuários, por exemplo, para construir tabelas de conteúdos em
um documento automaticamente.
Existem seis níveis de cabeçalhos em HTML onde H1 é o mais importante

e H6 o menos. Navegadores visuais usualmente apresentam os cabeçalhos
mais importantes em fontes maiores do que os menos importantes. O qua-
dro 5 apresenta a utilização de cabeçalhos de nível.

1. <DIV class="section" id="forest-elephants" >
2. <H1>Forest elephants</H1>
3. <P>In this section, we discuss the lesser known forest el-
ephants.
4. ...this section continues...
5. <DIV class="subsection" id="forest-habitat" >
6. <H2>Habitat</H2>
7. <P>Forest elephants do not live in trees but among them.
8. ...this subsection continues...
9. </DIV>
10. </DIV>
Quadro 5 - Elementos de título (headers) em funcionamento

Fonte: autor
A estruturação de texto corresponde a uma grande parte do desenvolvimen-

to de uma página WEB, pois nele se encontra grande parte do conteúdo.
Enfatizar, colorir e formatar de acordo com citações são exemplos claros da
necessidade de estruturação. Esta seção trata dos elementos HTML que for-
necem tal possibilidade ao desenvolvedor.
Resumo
A primeira aula apresentou os conceitos básicos da internet através de sua
evolução histórica, que pontuou os principais marcos do desenvolvimento da
“Rede Mundial de Computadores” e suas formas de interligação. Os princi-
pais protocolos foram apresentados para situá-lo(a) quanto a sua importân-
cia e utilização, bem como a forma como os recursos são encontrados na
rede, através de endereçamento e alguns aplicativos que acessam os serviços
disponíveis na internet.
A internet passou por várias mudanças nas décadas em que esteve presente
na computação mundial. Foi concebida na era do time-sharing, mas sobrevi-
veu à era dos computadores pessoais, comunicações do tipo cliente-servidor
e do tipo peer-to-peer, ou seja, o computador da rede. Projetada antes das
redes locais, tem acomodado novas tecnologias (p.ex. ATM e quadro de
comutação de serviços). Mas o mais importante: iniciou através dos esforços
de um pequeno grupo de pesquisadores dedicados e hoje é um sucesso co-
mercial com bilhões de dólares de investimento anual.
Atividades de aprendizagem
1. Cite e comente cinco das principais características da internet.
2. O acesso à internet, principalmente à WEB, é feito através de navegadores

(browsers). Enumere os principais navegadores atuais e suas diferenças tan-
to na usabilidade como nos recursos disponíveis a usuários e também para
desenvolvedores.

3. Desenvolva uma página HTML que tenha (utilize títulos para dividir os ele-
mentos do texto e apresentá-los) dois elementos em bloco de representação
para conteúdo (<DIV>), apresentando dados pessoais
Saiba Mais
DARPA: DARPA é a sigla para Defense Advanced Research Projects

Agency, originalmente ARPA - Advanced Research Projects Agency. A
agência mudou de nome algumas vezes, porém atualmente é conhe-
cida como DARPA.
Barry M. Leiner foi director do Research Institute for Advanced Com-

puter Science. Vinton G. Cerf é vice-presidente e evangelista chefe da
Internet da Google. David D. Clark é cientista pesquisador senior no
MIT Laboratory for Computer Science. Robert E. Kahn é presidente da
Corporation for National Research Initiatives. Leonard Kleinrock é pro-
fessor titular de Ciência da Computação na Universidade da Califórnia
e Fundador da Nomadix. Daniel C. Lynch é fundador da CyberCash
Inc. Jon Postel serviu como diretor da divisão de redes de computa-
dores da Universidade do Sul da Califórnia (Instituto de Ciências da
Informação). Lawrence G. Roberts é presidente da Caspian Networks.
Stephen Wolff está na Cisco Systems, Inc.
Nesta aula você teve o primeiro contato com a internet, a base de nossa
disciplina, pois se trata da programação de páginas para publicação de con-
teúdo e interação com o usuário na Web, o maior serviço executado sobre
a internet. Até aqui a linguagem HTML foi abordada de forma generalista e
superficial, apenas para que você saiba como começar a desenvolver páginas
para Web, porém na próxima aula, terá acesso completo a esta linguagem
de marcação de hipertexto.

Aula 2. Linguagem HTML
Objetivos:
• interpretar as principais linguagens de marcação;
• reconhecer a utilização da linguagem de marcação de hiper-

textos;
• identificar a distribuição dos elementos e conteúdos dentro de

um documento a ser publicado na WEB; e
• empregar a formatação correta de conteúdos para disponibili-

zação na internet.
Caro(a) estudante,
Na aula anterior mostramos como funciona a internet e como começar a

desenvolver páginas para a internet. Esta aula traz conceitos mais avança-
dos sobre a linguagem e principalmente como dividir uma página utilizando
todas as ferramentas disponíveis para a marcação de textos. Vamos iniciar
tratando dos elementos de frases. Continue atento/a e disciplinado/a em
seus estudos.
2.1 Elementos de frases

Existem elementos que podem ser colocados dentro de frases com o intuito
de modificá-las, de acordo com a ideia de apresentação das mesmas no
contexto do site. Estes são chamados de elementos de frases ou “phrase
elements”. A tabela 1 apresenta os elementos e a descrição de aplicação de
cada um.
Aula 2 - Linguagem HTML 27 Rede e-Tec Brasil

Tabela 1 - Elementos de Frase do HTML
Elemento Descrição
EM Indica ênfase
STRONG Indica ênfase forte
CITE Contém uma citação ou uma referência a outras fontes
CODE Designa um fragmento de um código de computador
SAMP Designa exemplos de saída de programas, scripts, etc.
ABBR Indica uma forma abreviada
ACRONYM Indica um acrônimo
Figura 6 - Exemplos de Phrase Elements

Fonte: autor
Você sabe o que é um texto pré-formatado? Leia o texto abaixo e observe as

figuras para mais compreensão.
2.2 Texto pré-formatado

Um texto pré-formatado é aquele que mostra exatamente como está des-
crito entre as tag’s do elemento. Navegadores, quando manuseando textos
pré-formatados, devem:
• Deixar espaços em branco intactos
• Mostrar o texto com um tipo de letra (fonte) não proporcional (fixed-pitch)
• Desabilitar quebra automática de linhas
• Não desabilitar processamento bidirecional
O elemento HTML utilizado para exibir texto pré-formatado é <pre> e é mui-

to útil quando um desenvolvedor deseja fazer uma página que demonstra
códigos, por exemplo. A figura 7 mostra o exemplo de utilização do elemen-
to e a página resultante do código apresentado.

Figura 7 - Exemplo da tag <pre>
Fonte: autor
Para organizar a listagem de elementos em um site pode-se utilizar listas,

tanto ordenadas (com numeração) quanto não ordenadas (sem numeração).
Este último caso utiliza símbolos para organizar, e todo o processo está no
próximo tópico.
2.3 Listas
A linguagem HTML oferece aos desenvolvedores vários mecanismos para
especificar listas de informações. Todas as listas precisam conter um ou mais
elementos de lista, incluindo:
• Informações ordenadas
• Informações não-ordenadas
• Definições
Para criar uma lista ordenada, o elemento <ol> deve ser utilizado, conforme
exemplo na figura 8.
Figura 8 - Exemplo de lista ordenada

Fonte: autor

Para a criação de uma lista não-ordenada, utiliza-se o elemento <ul>. A figu-
ra 9 apresenta um exemplo do uso desta tag para criar uma lista, e também
apresenta um “aninhamento” com outra lista, criando-se assim “sublistas”,
ou seja, uma lista dentro da outra.
Figura 9 - Exemplo de lista não-ordenada e aninhada

Fonte: autor
Nota-se que, para ambos os tipos de lista, o elemento usado para

indicar cada um dos itens da lista é o <li >.
Não apenas para elementos ordenados e não-ordenados, a linguagem HTML

oferece mecanismos para tratar de definições, formando assim uma lista de
definições. Os elementos utilizados são:
• DL: inicia uma lista de definições
• DT: termo da lista
• DD: definição do termo da lista
Uma lista de definições completa pode ser observada no exemplo da figura

10.
Figura 10 - Exemplo de lista de definições

Fonte: autor

Modificações no tipo de elementos que são utilizados para identificar itens
em listas não-ordenadas (círculos, quadrados e discos) e também em listas
ordenadas (alfabético, romano e numérico) podem ser feitas utilizando esti-
los. Tais modificações serão abordadas no capítulo sobre CSS
Outra forma interessante de organizar os elementos em um site é através da CSS: Cascade Style Sheets
ou simplesmente “estilos”, é
utilização de tabelas. uma linguagem de folha de
estilo utilizada para descrever
a semântica da apresentação
(o visual e formatação) de um
2.4 Tabelas documento escrito em uma
linguagem de marcação
O modelo de tabelas da linguagem HTML permite aos desenvolvedores or-
ganizar dados (textos, textos pré-formatados, imagens, ligações, formulá-
rios, campos de formulário e até mesmo outras tabelas) em linhas e colunas
de células.
A figura 11 apresenta um exemplo de uma tabela contendo três colunas e

duas linhas.
Figura 11 - Tabela com células mescladas

Fonte: autor
A estrutura da tabela apresentada na figura 11, que possui quatro linhas e

quatro colunas, foi desenvolvida através dos seguintes comandos:
• <TABLE>...</TABLE>: elemento que delimita a tabela. Este elemento pos-

sui alguns atributos que configuram a tabela, como segue:

–– border: este atributo informa a largura da borda da tabela.
–– summary: atributo que permite ao desenvolvedor informar um texto
que representa o sumário para a tabela, ou seja, seu significado. Al-
guns agentes de HTML podem utilizar tal sumário para informações
adicionais aos usuários
–– width: largura da tabela.
–– cellpadding: espaço (em pixels) entre o conteúdo da célula e a borda
–– cellspacing: espaço entre as células
• <CAPTION>...</CAPTION>: elemento que desenha um título na tabela.

Através do exemplo pode-se notar que o título é escrito no topo, antes
do início da tabela
• <TR>...</TR>: elemento que delimita uma linha na tabela
• <TD>...</TD>: elemento que indica uma célula
• <TH>...</TH>: tem o mesmo efeito do elemento <TD>, porém indica

uma célula de título, exibindo o conteúdo centralizado e enfatizado (por
padrão)
O desenvolvedor sempre deverá seguir a ordem da estrutura acima para se

definir uma tabela: células (<TD> ou <TH>) dentro de linhas (<TR>).
Uma questão interessante que pode ser notada no exemplo da figura 11 é

que três células de título estão mescladas, ou seja, duas ocupam duas linhas
e uma ocupa duas colunas. Este comportamento é definido através de atri-
butos:
• colspan = “x”: indica que esta célula ocupará o mesmo espaço que “x”
colunas.
• rowspan = “y”: informa à célula que a mesma deverá ocupar o espaço

de “y” linhas.
O desenvolvedor pode, ainda, definir alguns agrupamentos tanto para linhas

como para colunas, melhorando assim a apresentação e a manipulação pe-
rante alguns programas. As seções seguintes apresentam tais tópicos.

A parte interessante da WEB é que um conteúdo pode estar ligado a outro
de uma forma super fácil: através de âncoras e ligações (links). Um texto,
uma imagem ou mesmo um filme pode fazer este papel de ligação, e a pró-
xima seção indica como! O termo hipertexto foi criado
por Theodore Nelson, na década
de sessenta, e pode ser definido
como um dos paradigmas
básicos em que a teia mundial
2.5 Links: âncoras e ligações se baseia. Ele é uma espécie de
texto multidimensional em que
A linguagem HTML foi criada principalmente para atender ao propósito de numa página trechos de texto
difundir a WEB que introduziu um novo conceito: documentos interativos e se intercalam com referências a
outras páginas.
com hipertextos. Esta seção introduz o conceito de link (hiperlink, link WEB,
ligação), que é o construtor básico de documentos hipertexto. Um link (liga-
ção) é uma conexão de um recurso WEB para outro.
para conhecer mais sobre

Um link tem dois pontos, chamados de âncoras, e uma direção. Inicia na hipertexto acesse: http://www.
ime.usp.br/~is/abc/abc/
âncora “fonte” e aponta (termina) na âncora “destino”, a qual pode ser node9.html
qualquer recurso WEB (imagens, clipes de vídeos, pedaços de som, progra-
mas, outro HTML, etc.).
O elemento <a> é utilizado para se construir elos de ligação. O exemplo do

Quadro 6 apresenta um link para a página do Google.
1 <A href=”http://www.google.com.br”>Acessar página do GOOGLE</A>
Quadro 6 - Exemplo de âncora utilizando a tag <a>

Fonte: autor
A ligação entre a âncora e a página do Google (quadro 6) é feita pelo atri-

buto href (Hiperlink Reference). O usuário verá, na página a ser renderizada
pelo navegador, a frase “Acessar página do Google”, normalmente subli-
nhada. Ao clicar sobre a frase, a página será redirecionada para o site do
Google.
Existe a possibilidade de apontar onde a página deve abrir. Este procedimen-

to é representado pelo atributo target, que tem um exemplo no quadro 7.
1.<A href=”inicial.html” target=”_blank”>Acessar página do GOOGLE</A>
Quadro 7 - Utilização do atributo target em uma âncora com link

Fonte: autor
No exemplo, o atributo target fará com que o arquivo inicial.html abra em um

nova janela, ou “em branco”. As possibilidades para o atributo target são:

• _blank: nova janela
• _self: própria janela (atual)
• _parent: janela “pai”, ou seja, aquela de onde a página atual foi cha-
mada
• nome_do_frame: quando trabalhando com frames, o usuário poderá

identificar em qual frame o recurso deverá ser aberto.
O desenvolvedor pode, ainda, fazer uma referência completa a outra página,

identificando qual seção deverá ser acessada. O exemplo do quadro 8 indica
tal correspondência.
1. <A href=”http://www.dicionario.com/def.html#xicara”
target=”_blank”
title=”Clique aqui para ler a definição de Xícara”>Definição de Xícara</A>
Quadro 8 - Ligação com outra página e seção utilizando #

Fonte: autor
O exemplo indica que, ao clicar em “Definição de Xícara” o usuário será

redirecionado ao site www.dicionario.com na seção “xícara” diretamente,
sendo que a página será apresentada em uma nova janela. O atributo title
presente no exemplo indica um hint (dica) que aparecerá na tela quando o
usuário passar o mouse sobre o link.
Não apenas textos podem ser utilizados como referências visuais para liga-
ções. Elementos como figuras, divisões e outros objetos visuais podem ser
utilizados para servir de referência a hyperlinks.
Quão chata seria a internet se tivéssemos apenas textos para expor os con-
teúdos. É por isso que as imagens são tão importantes para a elaboração de
qualquer conteúdo na WEB.
2.6 Inserção de imagens

As características multimídia da linguagem HTML permitem aos desenvolve-
dores a inclusão de imagens, vídeos, applets (programas que são automati-
camente baixados e executados na máquina do usuário) e outros documen-
tos HTML nas páginas.

Para inserir imagens, o desenvolvedor pode utilizar a tag <object> bem como
a tag <img>. O quadro 9 exemplifica tal tarefa.
1. <OBJECT data="http://www.md.utfpr.edu.br/imagens/logo_edu_2.gif"
2. type="image/gif">
3. Ministério da Educação
4. </OBJECT>
Quadro 9 - Utilização da tag <object> para inserir uma figura

Fonte: autor
Porém, a tag <img> é mais utilizada para exercer tal tarefa. Um exemplo é
apresentado no quadro 10.
1. <IMG src=http://www.md.utfpr.edu.br/imagens/logo_edu_2.gif
2. alt="Ministério da Educação"
3. width="430"
4. height="21"
5. border="0"
6. type="image/gif" />
Quadro 10 - Utilização da tag <img> para inserir uma figura

Fonte: autor
Como principais atributos, são apresentados no exemplo:
• src: fonte dos dados da imagem, representado por uma URI
• alt: texto alternativo. Este texto pode ser utilizado em programas de usu-
ário que imprimem em braile, reproduzem o som da frase ou mesmo
substituem imagens por texto.
• width e height: largura e altura da imagem (respectivamente)
• border: define a espessura da borda da imagem. A borda geralmente

pode apenas ser vista quando a imagem é utilizada em uma âncora, ten-
do uma referência a hipertexto (link)
• type: tipo da imagem (gif, jpeg, png, etc.)
O elemento IMG sempre será uma tag vazia, ou seja, sem conteúdo.
Outra importante questão em sites é o contato com o visitante em seu site!

Para capturar dados, opiniões e ensejos do usuário, utilizam-se formulários.
2.7 Formulários
Um formulário HTML é uma seção de um documento que pode conter texto,

marcações, elementos especiais para entrada de dados chamados de contro-
les e etiquetas (labels) nestes controles. Usuários geralmente “preenchem”
um formulário modificando tais controles (fazendo entrada de textos, sele-
cionando itens de menus, etc.) antes de submetê-los a um programa para
processamento.
O elemento form inicia a demarcação de um formulário. Entre as tags

<form> e </form> são inseridos os controles para interação com o usuário.
O quadro 11 apresenta um exemplo de formulário típico para acesso (login)
em um sistema de internet.
1. <FORM name="frmLogin" method="get" action="fazerLogin.php">
2. <LABEL for="usuario">Usuário: </LABEL>
3. <INPUT type="text" id="usuario"><BR />
4. <LABEL for="senha">Senha: </LABEL>
5. <INPUT type="password" id="senha"><BR>
6. <INPUT type="submit" value="Entrar">
7. <INPUT type="reset">
8. </FORM>
Quadro 11 - Exemplo de um formulário em HTML
Fonte: autor
O exemplo apresenta quatro entradas de dados:
a) Nome do usuário (tipo texto)
b) Senha do usuário (tipo senha)
c) Botão para submeter os dados e
d) Botão para reiniciar os valores dos campos
Pode-se observar três atributos importantes na declaração do elemento

FORM:
• name: este atributo é utilizado para identificar o formulário (frmLogin,

no exemplo).
• method: método de submissão dos dados à ação. Os dados podem ser

enviados através de GET e POST <atenção> . Métodos de envio de dados
ao servidor serão discutidos na seção de programação para servidor (lin-
guagem PHP) posteriormente.
• action: ação à qual os dados serão submetidos. Normalmente neste atri-

buto se indica um arquivo de script escrito em linguagens de processa-
mento de dados em servidores WEB, como PHP, JAVA (JSP e Servlets),
Python e outras.
Os controles de interação com o usuário permitem a entrada de dados. O

elemento INPUT permite a entrada de dados, que é definida pelo tipo infor-
mado como parâmetro. O elemento é do tipo “vazio”, ou seja, não possui
conteúdo apenas atributos que o caracterizam. Os atributos padrão para os
tipos são:
• type: define o tipo de entrada de dados
• name: identifica a entrada de dados para posterior manipulação
• value: valor padrão
Os tipos de entradas de dados possíveis são:
• text: cria uma entrada do tipo texto de uma linha
• password: também é uma entrada do tipo texto, porém substitui os

caracteres digitados por um caractere padrão de senha (por exemplo, as-
teriscos). Assim, o usuário não pode ver a senha que está sendo digitada.
• checkbox: cria uma “caixa de verificação”. Geralmente esta entrada de

dados é utilizada para uma confirmação do tipo verdadeiro/falso.
• radio: cria uma entrada do tipo “radio”. As entradas de dados do tipo

radio são geralmente utilizadas para uma escolha com exclusão mútua,
ou seja, apenas um dos valores pode ser selecionado.
• image: cria um botão para submissão dos dados do formulário, decora-

do com uma imagem. Neste caso, o atributo src deve ser utilizado para
especificar (através de uma URI) a fonte da imagem. Quando o usuário
clicar na imagem, dois parâmetros serão passados ao servidor (juntamen-
te com os dados do formulário). Estes valores, representados por x e y,
são valorados pela quantidade de pixels a partir da esquerda da imagem
e do topo da imagem, respectivamente, até o valor da posição do mouse.
• reset: cria um botão do tipo “reset”, cuja função é reajustar os valores

dos controles do formulário aos valores-padrão informados no momento
da criação do formulário (atributo value).
Mesmo que a senha não apareça
quando o usuário estiver
digitando em campos do tipo
password, os dados digitados
• button: adiciona ao formulário um botão sem função padrão definida.
não são criptografados. Quando
enviados ao servidor, podem ser
“roubados” ou até mesmo vistos • hidden: cria um campo escondido (não é desenhado visualmente).
nas URLS , caso não sejam
tratados por uma linguagem de
script. • file: insere um campo de seleção de arquivo. É criado uma entrada de
texto normal com um botão de buscar arquivo à direita.
O quadro 12 apresenta um exemplo de formulário que reúne os tipos apre-

URL: Um URL (Uniform sentados anteriormente.
Resource Locator), em
português Localizador-Padrão de 1. <H4>Cadastro de Usuários</H4>
2. <FORM action="http://somesite.com/prog/adduser" method="post">
Recursos, é o endereço de um 3. Email: <INPUT type="text" name="email"><BR>
recurso (arquivos, impressoras, 4. Senha: <INPUT type="password" name="senha"><BR>
computadores, etc), disponível 5. Foto: <INPUT type="file" name="foto"><BR>
em uma rede. Uma URL tem a 6. Sexo:
7. <INPUT type="radio" name="sexo" value="F">Feminino
seguinte estrutura: protocolo:// 8. <INPUT type="radio" name="sexo" value="M">Masculino<BR>
máquina/caminho/recurso 9. <INPUT type="checkbox" name="news" checked>Receber notícias do
site<BR>
10. <INPUT type="hidden" name="loja" value="Comercial Cometa"><BR>
11. <INPUT type="submit" value="Enviar">
12. <INPUT type="reset" value="Reajustar">
13. </FORM>
Quadro 12 - Exemplo da utilização de campos com a tag <input> em um formulário

Fonte: autor
A figura 12 apresenta a renderização do código do quadro anterior.
Figura 12 - Screenshot de um formulário de cadastro de usuários

Fonte: autor
O elemento SELECT é utilizado para criar um menu com opções pré-ajusta-

das para que o usuário possa escolher uma ou várias dentre múltiplas opções
apresentadas. A tag <select> trabalha juntamente com uma (ou várias) tag
<option>, onde o desenvolvedor pode indicar quais são as possíveis esco-
lhas.

Atributos que podem ser inseridos no elemento SELECT modificam o com-
portamento do controle e também sua apresentação:
• multiple: quando este atributo é informado, o usuário poderá selecionar

mais do que um elemento
• size: o uso deste atributo permite que o controle seja apresentado ao

usuário com mais de uma opção visível ao mesmo tempo.
O quadro 13 mostra um exemplo de codificação, e a figura 13 apresenta a

renderização deste código quando interpretado em um navegador.
1. <P>Escolha sua cor preferida</P>
2. <SELECT name=”cores” size="4" multiple>
3. <OPTION value="0">Amarela</OPTION>
4. <OPTION value="1">Azul</OPTION>
5. <OPTION value="2">Branca</OPTION>
6. <OPTION value="3">Cinza</OPTION>
7. <OPTION value="4">Preta</OPTION>
8. <OPTION value="5">Verde</OPTION>
9. <OPTION value="6">Vermelha</OPTION>
10. </SELECT>
Quadro 13 - Exemplo de uma entada de dados <select> com 7 opções

Fonte: autor
Figura 13 - Entrada de dados utilizando <select> com múltipla escolha

Fonte: autor
As opções também podem ser agrupadas através do uso da tag <optgroup>,

permitindo uma melhor visualização de listas com uma grande quantidade
de valores. Exemplo do uso pode ser visto no quadro 14 e sua apresentação
em um navegador está exemplificada na figura 14.

<P>Quer comprar o que?</P>
<SELECT name=”itens”>
<OPTION value="N">[escolha]</OPTION>
<OPTGROUP label="brinquedos">
<OPTION value="0">Barbie</OPTION>
<OPTION value="1">Hot Wheels</OPTION>
</OPTGROUP>
<OPTGROUP label="eletronicos">
<OPTION value="2">Notebook</OPTION>
<OPTION value="3">Radio</OPTION>
</OPTGROUP>
<OPTGROUP label="vestuario">
<OPTION value="4">Calça</OPTION>
<OPTION value="5">Camisa</OPTION>
<OPTION value="6">Cueca</OPTION>
</OPTGROUP>
</SELECT>
Quadro 14- Agrupando e categorizando opções de seleção utilizando a tag

<optgroup>
Fonte: autor
Figura 14 - Agrupamento de opções em uma seleção

Fonte: autor
Muitas vezes um desenvolvedor precisa criar um espaço maior para entra-

da de dados, pois textos com mais de uma linha precisam ser inseridos.
Para criar uma entrada de texto com múltiplas linhas, o elemento TEXTAREA
pode ser utilizado. O quadro 15 apresenta um exemplo.
1. <FORM action="http://somesite.com/prog/text-read" method="post">
2. <P>
3. Insira o resumo
4. <TEXTAREA name="oTexto" rows="10" cols="50">
5. Primeira linha de texto
6. Segundo linha de texto
7. </TEXTAREA>
8. <INPUT type="submit" value="Send">
9. <INPUT type="reset">
10. </P>
11. </FORM>
Quadro 15 - Utilização da tag <textarea> para permitir entrada de textos de mais

de uma linha
Fonte: autor
O código apresenta, no programa interpretador, uma área de texto com

10 linhas e 50 colunas de tamanho (definidos pelos atributos rows e cols

respectivamente), inserindo o texto presente no elemento TEXTAREA como
padrão. A figura 15 mostra a apresentação gráfica deste exemplo.
Figura 15 - Elemento TEXTAREA apresentado em navegador

Fonte: autor
Com formulários o usuário pode interagir diretamente com a página, prici-

palmente quando esta tem cadastros e recuperação de dados de um banco
de dados, assunto para a aula 4 deste caderno.
Resumo
O significado de cada marcação HTML e seus atributos é praticamente a sua
aplicação traduzida para o inglês. Geralmente, se um desenvolvedor conhe-
ce os elementos da língua inglesa, poderá deduzir facilmente cada um dos
elementos envolvidos no desenvolvimento de um site com HTML.
A linguagem foi construída com o propósito de ser fácil e didática, fazendo

com que mesmo pessoas que não tenham contato diário com programação
pudessem desenvolver seus sites pessoais. Também é textual para ser padrão
ao mundo, transportada de uma forma leve entre os servidores globalmente
distribuídos pela grande teia: a WWW.
A aula tratou sobre HTML, dividindo-se nos tópicos:
• A apresentação do histórico da linguagem e sua sintaxe incial mostram

que HTML está difundida como um padrão mundial.
• A seguir, cada um dos elementos classificados e divididos para a inclusão

e modificação de conteúdo demonstrou como qualquer assunto pode
ser publicado de forma organizada na WEB.
• Para a tabulação de elementos nada melhor do que a utilização de ta-

belas, onde, através da configuração de cores e bordas, bem como da
apresentação de agrupamentos de conteúdos, o usuário pode ter uma

visão profissional dos resultados.
• A divisão da página em frames não é mais indicada pela maioria dos WEB
Designers. Porém, foi mostrada e pode ser utilizada para deixar parte do
conteúdo estático, modificando apenas o necessário.
• E por fim, a apresentação de formulários mostrou como o desenvolvedor

pode permitir a interação do usuário com a página, importante principal-
mente na manipulação de dados.
O HTML poderá ter diversas variações, como o xHTML e, quando esta aula
foi preparada já existia uma nova versão, como a 5.0. Mesmo assim ainda
é a linguagem mais utilizada no mundo para o desenvolvimento de páginas
WEB.
1. Crie uma página, utilizando HTML, para desenvolver cada uma das ativi-
dades abaixo:
a) Utilizando tabelas, apresentar um cronograma de atividades de um ano,

especificando as atividades a serem desenvolvidas em cada um dos meses.
b) Utilizando listas ordenadas, listar os itens a serem comprados em um

supermercado.
c) Utilizando listas não-ordenadas e ligações, desenvolver um bookmark ou

uma lista de sites favoritos, apresentando 10 sites diferentes, que devem ser
abertos em uma nova janela.
d) Utilizando formulários, desenvolver entradas de dados que simulem um

cadastro de usuário com nome, unidade federativa do endereço atual, data
de nascimento, sexo, estado civil e endereço de email. O formulário deverá
conter um botão para envio e um botão para que os dados sejam retornados
ao estado original.

2. Desenvolva o código que renderiza a tabela abaixo:
Figura 20 – Exemplo para elaboração

Fonte: autor
Caro(a )estudante,
Nesta aula você teve a oportunidade de perceber que a linguagem HTML

permite ao desenvolvedor dividir a página para que, posteriormente, seja
programada de acordo com os elementos descritos no projeto de um sis-
tema voltado para a Web. Porém, desde sua idealização por Tim Berns-Lee
em 1990, o HTML não permite uma formatação precisa nas páginas. Assim,
folhas de estilo em cascata foram criadas para que um programador e um
Web Designer tenham mais recursos para formatar e dar acessibilidade a si-
tes da Web. Na próxima aula o tema será a formatação de elementos HTML.
Prepare-se para continuar avançando em seu processo de aprendizagem.

Aula 3. Formatação de Elementos
HTML Utilizando CSS
Objetivos:
• elaborar a formatação de páginas WEB, escritas em HTML, de

forma a personificar seus elementos; e
• identificar os conceitos para uma formatação consciente da

página.
Você já recebeu informações importantes para desempenhar a função para

a qual está se qualificando. No entanto é preciso prosseguir, pois o conte-
údo é extenso e agora vamos tratar da formatação de elementos HTML,
utilizando o sistema CSS. Apresentaremos os fundamentos da linguagem e
os elementos de formatação. Preparado para saber do que se trata o CSS? Um bom exemplo pode ser visto
no site www.csszengarden.
com. O site apresenta a “beleza
Como já apontado na aula anterior, o CSS é um mecanismo de folhas de do css”, pois, através da escolha
do usuário final, o conteúdo é
estilos simples que permite ao desenvolvedor e aos usuários finais, anexar visto de maneiras totalmente
diferentes, às vezes parecendo
estilos e formatações em documentos HTML. Tais formatações podem ser, um site totalmente distinto.
por exemplo, tipos, cores e espaçamento entre letras de uma fonte. A lin-
guagem CSS pode ser lida e escrita por humanos (não é código binário, é
texto).
Uma das características fundamentais do CSS é que trabalha com folhas de

estilo em cascata: desenvolvedores podem anexar uma folha de estilos pre-
ferida, enquanto que o usuário final pode ter uma folha de estilo que melhor
se ajuste às suas deficiências humanas (visuais, auditivas, dentre outras) ou
tecnológicas.
As próximas seções apresentam a linguagem CSS, sua forma de utilização e

os principais elementos que podem ser utilizados para a formatação de uma
página WEB com instrumentos mais poderosos.
Aula 3 - Formatação de Elementos HTML Utilizando CSS 45 Rede e-Tec Brasil

3.1 Fundamentos da linguagem
A linguagem CSS versão 3.0:
• mantém compatibilidade com porções do CSS2 que estão amplamente

aceitas e desenvolvidas
A sintaxe completa e as • incorpora todas as erratas publicadas do CSS2

novidades sobre a linguagem
CSS você pode encontrar no
endereço http://www.w3.org/ • remove as características do CSS2 que não estão no CSS3, fazendo com
Style/CSS/, que é o site oficial
de estilos em cascata. que a mudança seja menos brusca
• adiciona novos valores de propriedades que se mostraram necessários

durante o uso da CSS2 pela comunidade de desenvolvedores.
CSS pode formatar tanto HTML quanto XML. Para modificar a forma como
o elemento é apresentado, a linguagem segue a sintaxe apresentada no
quadro 16.
1. elemento.classificação {propriedade: valor;}
Quadro 16 - Sintaxe da linguagem CSS

Fonte: autor
O elemento a ser formatado pode ser uma tag padrão, identificada ou clas-
sificada. A sintaxe do quadro anterior apresenta os seguintes elementos:
• elemento: normalmente uma tag
• classificação: o desenvolvedor pode categorizar um elemento ou mes-

mo criar uma categoria para ser utilizada em qualquer elemento
• propriedade: o que será formatado (cores, negrito, itálico, tipo de fon-

te, bordas, etc.)
• valor: como a propriedade será valorada.
Pode-se aplicar folhas de estilo em cascata em três formas diferentes:
• Local: o estilo afetará apenas o elemento onde está inserido. O quadro

17 apresenta, na primeira linha, um parágrafo com o tipo de letra Verda-

na com tamanho 14 pixels e, na segunda linha, um parágrafo com o tipo
de letra Times com 20 pixels de tamanho.
• Geral: colocado no início de uma página, atuará em todos os elementos

da página. O Quadro 18 apresenta um exemplo de sua utilização.
• Global: através de um elemento LINK, o desenvolvedor pode indicar um

arquivo contendo os códigos de formatação CSS. Assim, um site inteiro
pode se basear em uma única folha de estilos, presente em um arquivo.
O quadro 19 mostra uma página HTML que utiliza este recurso e o qua-
dro 20 exemplifica um típico arquivo de estilos. Este exemplo classifica
dois tipos de parágrafo (‘verd’ e ‘time’) e os usa na página para demons-
tração.
1. <p style=”font-face: Verdana; font-size: 14px”>Texto do parágrafo</p>
2. <p style=”font-face: Times; font-size: 20px”>Texto do parágrafo</p>
Quadro 17 - Uso de estilos diretamente em tags (local)

Fonte: autor
1. <html>
2. <head>
3. <title>Teste de CSS</title>
4. <style type=”text/css”>
5. p {font-face: Verdana}
6. </style>
7. </head>
8. <body>
9. <p>Fonte com Verdana</p>
10. <p>Esta linha também é com a fonte Verdana</p>
11. <p style=”font-face: Times”>Este é com Times</p>
12. </body>
13. </html>
Quadro 18 - Uso de estilos em apenas uma página (geral) e local

Fonte: autor
1. <head>
2. <title>Teste de CSS</title>
3. <link rel="stylesheet" type="text/css" media="all" href="liv.css"
/>
4. </head>
5. <body>
6. <p class=”verd”>Linha em Verdana</p>
7. <p class=”time”>Linha em Times</p>
8. </body>
9. </html>
Quadro 19 - Código HTML utilizando folhas de estilo no modo global (tag <link>)
Fonte: autor
1. /* arquivo da folha de estilos */
2. p.verd {
3. font-family: Verdana;
4. }
5. p.time {
6. font-family: Times;
7. }
Quadro 20 - Arquivo contendo a folha de estilos “liv.css”

Fonte: autor

Como a disciplina trata de programação para a WEB, utilizando HTML e PHP,
apenas a formatação do HTML será abordada. Assim, algumas convenções
serão utilizadas para descrever os comandos utilizados para tal formatação.
3.2 Valores
O quadro 16 apresenta a sintaxe da linguagem CSS, e mostra que sempre
deve ser utilizado o par “propriedade: valor”. Os valores que podem ser
expressos nas propriedades dependem de cada uma, porém algumas con-
venções são utilizadas para os tipos.
Alguns tipos de valores são do tipo inteiro (denotado como <inteiro>) e ou-
tros são do tipo real (denotado como <número>). Números reais e inteiros
são especificados apenas pela notação decimal. Um inteiro consiste em um
ou mais dígitos de “0” a “9”. Um real pode ser um inteiro, zero ou mais
dígitos seguidos por um ponto (.) seguido por um ou mais dígitos. Números
inteiros e reais podem ser precedidos por “+” ou “-“ indicando o sinal.
Quando tratamos com valores de tamanhos para propriedades, existem dois

tipos de unidades: relativas e absolutas. Uma unidade relativa de tama-
nho especifica um tamanho relativo à outra propriedade de tamanho. As
unidades relativas são:
• em: o 'font-size' (tamanho da fonte) da fonte relevante (em questão);
• ex: o 'x-height' (x-altura) da fonte relevante
• px: pixels, relativa ao dispositivo de visualização
• %: porcentagem, relativa ao tamanho padrão do elemento atual.
O Erro! Fonte de referência não encontrada. exemplifica unidades relati-

vas, onde a identação do texto (deslocamento da primeira linha) será de 36
pixels (linha 3), pois como o tamanho da fonte relevante é 12 pixels (linha 2),
este será multiplicado por três (03).
1. body {
2. font-size: 12px;
3. text-indent: 3em; /* i.e., 36px */
4. }
5. p { font-size: 120% } /* 120% of 'font-size' *
Quadro 21 - Utilização de unidades relativas

Fonte: autor

O formato de porcentagem é um real imediatamente seguido por um ‘%’.
Valores em porcentagem sempre são relativos a outros valores. O valor pode
ser de outra propriedade do mesmo elemento, a propriedade de um elemen-
to antepassado (pai) ou de um contexto.
Unidades de tamanhos absolutos (absolute) apenas são úteis quando as pro-

priedades físicas do meio de saída são conhecidas (um monitor, por exem-
plo). As unidades absolutas são:
• in: polegadas (inches). Uma (01) polegada é igual a 2,54 centímetros
• cm: centímetros
• mm: milímetros
• pt: pontos (points). O ponto usado pelo CSS 2.1 é igual a 1/72ma unida-
de de uma polegada.
• pc: picas. Uma (01) pica é igual a 12 pontos
O uso das unidades absolutas está exemplificado no quadro 22. Nos casos
em que o tamanho utilizado não é suportado os programas aproximam os
valores o máximo possível.
1. h1 { margin: 0.5in } /* inches */
2. h2 { line-height: 3cm } /* centimeters */
3. h3 { word-spacing: 4mm } /* millimeters */
4. h4 { font-size: 12pt } /* points */
5. h4 { font-size: 1pc } /* picas */
Quadro 22 - Utilização de unidades absolutas

Fonte: autor
Uma cor pode ser uma palavra chave ou um valor numérico dentro da es-
pecificação RGB. A lista de palavras-chave de cores é: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver,
teal, white, e yellow. Estas 17 (dezessete) cores possuem os valores em he-
xadecimal e sua coloração, respectivamente, ilustrados na figura 16.

Figura 16- Lista de cores com palavras-chave e seus valores
Fonte: autor
O modelo de cores RGB (Red Green Blue) é usado em especificações numé-

ricas de cores. O quadro 23 apresenta, nas linhas 1 a 4, quatro formas dife-
rentes de especificar a cor vermelha; as linhas 5 e 6 demonstram a utilização
de nomes de cores ao invés de códigos.
1. em { color: #f00 } /* #rgb */
2. em { color: #ff0000 } /* #rrggbb */
3. em { color: rgb(255,0,0) }
4. em { color: rgb(100%, 0%, 0%) }
5. body {color: black; background: white }
6. h1 { color: maroon }
Quadro 23 - Uso de cores em CSS

Fonte: autor
O comando, portanto, utilizado para se formatar a cor de um elemento é

“color”.
Para a configuração de cores de fundo deve-se utilizar o comando “back-

ground-color”.
Essa configuração de cores será vista nos próximos tópicos .
O quadro 16 apresenta, na sintaxe CSS, que o elemento e uma possível clas-

sificação são utilizados para informar qual item da página deve ser forma-
tado, ou seja, são regras de correspondência padrão que determinam como
os estilos irão ser aplicados aos elementos na árvore do documento. Esses
padrões, chamados seletores (selectors), podem variar de simples nomes de
elementos para ricos padrões contextuais. Se todas as condições no padrão

informado são verdadeiras para um determinado elemento, o seletor corres-
ponde ao elemento e aplica a formatação.
A tabela 2 apresenta um resumo dos seletores, sua sintaxe e semântica.
Tabela 2 - Seletores em CSS, sua sintaxe e semântica

Padrão Significado
* Corresponde a qualquer (any) elemento
E Corresponde ao elemento E (p.ex., um elemento do tipo E)
EF Corresponde ao elemento F, descendente de E
E,F Corresponde a formatar o elemento E e o elemento F com as mesmas regras
E:link Corresponde ao elemento E se E é a fonte da âncora de um hiperlink que ainda não foi visitado
E:visited Âncora já visitada
E:active Âncora ativa
E:hover Formato da âncora quando o usuário passar o mouse sobre
E:focus Âncora quando a mesma tiver o foco
E.warning Em HTML, corresponde ao elemento E classificado como "warning"
#E Seleciona um elemento que tem o atributo id (identificacor) de nome E
Para usar os seletores dentro de um site, o desenvolvedor pode formatar

todos os elementos determinados ou ainda classificar os elementos; também
é possível modificar os seletores por descendência, pelos seus identificadores
ID e através do atributo class. O quadro 24 apresenta um exemplo.
1. // Seletores descendentes
2. h1 { color: red }
3. em { color: red }
4. h1 em { color: blue }
5. div p *[href] { color: green }
6. …
7. <H1>This headline is <EM>very</EM> important</H1>
Quadro 24 - Utilização de seletores simples e aninhados

Fonte: autor
A linha 4 do código coloca em azul todos os elementos EM que estão dentro

de elementos H1, ou seja, são descendentes. Todos os outros EM do docu-
mento serão escritos em vermelho. A linha 5 do código faz correspondência
a todos os elementos que possuem o atributo HREF ajustado (qualquer valor)
que estiverem dentro de um elemento P, que subsequentemente estiverem
dentro de um elemento DIV.
CSS permite que o desenvolvedor escolha quais elementos sejam classifica-

dos e modificados, pois caso não se queira modificar todos os elementos
presentes na página, ou mesmo fazer modificações cujos elementos não
sigam as ordens de descendência, prescedência e atributos, a classificação

de elementos pode ser utilizada. O quadro 25 apresenta um exemplo de
classificação.
1. *.pastoral { color: red } /* todos elementos com class~=pastoral */

2. // Ou apenas
3. .pastoral { color: red } /* todos elementos com class~=pastoral */
4. // para classificar determinada tag
5. H1.pastoral { color: green } /* Elemento H1 com class~=pastoral */
6. ...
7. <H1>Aqui será vermelho</H1>
8. <H1 class="pastoral">Aqui será bem verde</H1>
Quadro 25 - Classificação de elementos

Fonte: autor
O código da linha 1 e a linha 3 tem a mesma função, que é colorir as fontes

das tags classificadas como pastoral em vermelho. A linha 5 fará com que
apenas os elementos H1 classificados como “pastoral” serão formatados
com a cor verde.
Outra forma de classificação é através do atributo id que permite ao de-

senvolvedor atribuir um identificador a uma instância de um elemento na
árvore do documento. Um seletor CSS por id contém um caracter “#”
imediatamente seguido pelo valor do id, conforme o exemplo presente no
quadro 26.
1. h1#chapter1 { text-align: center }
Quadro 26 - Selecionar um elemento através de seu id

Fonte: autor
O exemplo, na linha 01, corresponde a elementos H1 que tenham o atributo

id valorado como "chapter1".
3.3 Elementos de formatação

Esta seção apresenta os elementos que são utilizados para formatar os ele-
mentos em HTML.
Os modificadores de fontes (letras) são:
• font-family
• font-size
• font-weight

• font-style
• text-transform
• text-decoration
O font-family é o comando CSS utilizado para indicar qual a fonte que uma
tag ou documento irá mostrar. Em uma aplicação geral de CSS a uma pági-
na, a linha de comando terá a sintaxe do exemplo do quadro 27.
1. P { font-family: Trebuchet MS, Arial, Helvetica }
Quadro 27 - Modificação de fonte de um parágrafo

Fonte: autor
No exemplo tudo o que estiver entre as tag <P> e </P> no documento HTML
será visualizado em “Trebuchet MS”. A razão de definir mais de uma fonte
deve-se ao fato de que nem todos os computadores possuem as mesmas
fontes instaladas. No caso, se o computador não possuir a fonte “Trebuchet
MS” instalada, automaticamente passará para a segunda opção e mostrará
o texto em Arial.
Deve-se observar que o nome da fonte especificada na linha de comando do

CSS deve ser exatamente igual ao nome da mesma no diretório "fontes" do
computador. A fonte "Courier", por exemplo, leva este nome na plataforma
dos computadores Macintosh, mas se chama "Courier New" no Windows.
O comando font-size é utilizado para definir o tamanho pelo qual as fontes

serão apresentadas na tela. Há três formas básicas para definição de tama-
nho:
1. tamanhos (pixel, pica, pontos, etc.);
2. palavras-chave: o desenvolvedor pode utilizar keywords para definir tama-

nhos. As palavras-chave são (apresentadas da menor para maior):
i. xx-small
ii. x-small
iii. small

iv. medium
v. large
vi. x-large
vii. xx-large
3. porcentagem
A grande vantagem da utilização do comando em CSS contra o HTML tradi-

cional é a quantidade de valores, pois através do atributo size do elemento
FONT, somente 7 tamanhos são permitidos. O quadro 28 mostra um exem-
plo utilizando os três modelos.
1. P {font-size: 12px;}
2. P.titulo {font-size: xx-large;}
3. P.legenda {font-size: 80%;}
Quadro 28 - Modificação do tamanho da fonte

Fonte: autor
O font-weight é o comando CSS que controla a propriedade bold (negrito)

de um elemento. Um exemplo de sua utilização pode ser visto no quadro 29.
1. H1 { font-weight: bold }
Quadro 29 - Colocando uma fonte em negrito

Fonte: autor
No exemplo todas as palavras da página que estiverem contidas nos elemen-

tos H1 serão mostradas em negrito. Os valores possíveis para o comando
são:
• normal: desativa o negrito (útil para elementos que originalmente já

deixam as letras em negrito)
• numérico de 100 a 900: 400 é o valor normal de uma fonte sem negri-
to, sendo que 100 é o valor mínimo e 900 o valor máximo.
• bold: ativa o negrito
O font-style é o comando CSS que controla a propriedade italic de um ele-

mento, ou seja, se as letras contidas no elemento em questão são impressas

em itálico. O Quadro 30 apresenta o exemplo.
1. H1 { font-style: italic }
Quadro 30 - Ajustando o itálico em uma fonte

Fonte: autor
No exemplo o navegador irá procurar uma versão itálico da fonte para apre-
sentar o texto compreendido no elemento H1. Os valores possíveis para o
comando são:
• normal: desativa o itálico (útil para elementos que originalmente já dei-

xam as letras em itálico)
• italic: ativa o itálico
• oblique: em alguns casos de fontes a versão em itálico é chamada de

"oblique" (tem o mesmo efeito de itálico)
Para controlar o sublinhado das palavras que estão contidas nos elementos
HTML, o comando text-decoration é utilizado. Os valores possíveis para o
comando são:
• underline: sublinha as palavras compreendidas dentro do elemento.
• overline: coloca uma linha em cima da palavra.
• line-trought: coloca uma linha sobre o texto.
• blink: sua palavra pisca (não é mais utilizado por questões de visualiza-
ção).
• none: tira o sublinhado de uma palavra (inclusive de um link)
Uma questão interessante no comando text-decoration é que utilizando o

atributo none pode-se eliminar o sublinhado de um link. O quadro 31 mos-
tra exemplos da utilização de sublinhados.

1. <html>
2. <head>
3. <title>Sublinhados</title>
4. <style type="text/css">
5. h3 {text-decoration: underline;}
6. .risque {text-decoration: line-through;}
7. .sobre {text-decoration: overline;}
8. a {text-decoration: none;color:blue}
9. </style>
10. </head>
11. <body>
12. <h3>Neologismos</h3>
13. Neologismos interessantes. Devemos escrever <span
class="risque">mouse</span> ou <span class="sobre">rato</span> em um texto?
Clique <a href="http://www.google.com">aqui</a> e confira mais.
14. </body>
15. </html>
Quadro 31 - Utilização de sublinhados em textos

Fonte: autor
A página que é apresentada com o código é mostrada na figura 17. A pala-

vra Neologismo do título de nível 3 está sublinhada, enquanto que a palavra
mouse esta “riscada” e a palavra rato contém uma barra sobre. A palavra
aqui (em azul) é um link, porém não há sublinhado como o padrão HTML.
Figura 17 - Screenshot do navegador com o código do quadro 29

Fonte: autor
A aplicação de formatação em parágrafos, com CSS, tem os seguintes co-

mandos:
• line-height
• text-align
• text-indent
• margin-left, margin-top, margin-right, margin-bottom
• padding-left, padding-top, padding-right, padding-bottom

• border-color, border-width, border-style
O line-height é o comando que controla o espaçamento entre as linhas de

um texto (também conhecido pelo termo leading). O espaço é definido pela
distância entre a base das linhas de um texto. O quadro 32 apresenta o
exemplo de altura de linha.
1. <html>
2. <head>
3. <title>Altura de linha</title>
5. P.oito {line-height: 8pt;}
6. P.dois {font-size: 12pt;line-height: 2;}
7. P.sessenta {font-size: 10pt;line-height:60%;}
8. </style>
9. </head>
10. <body>
11. <p class="oito">"Acima da verdade estão os deuses.
12. A nossa ciência é uma falhada cópia
13. Da certeza com que eles
14. Sabem que há o Universo"</p>
15. <p class="dois">"Acima da verdade estão os deuses.
19. <p class="sessenta">"Acima da verdade estão os deuses.
23. </body>
24. </html>
Quadro 32 - Formas de ajustar a altura de linhas em CSS

Fonte: autor
O exemplo apresenta três formatações de altura de linha, nas linhas 5, 6 e

7 do código:
• Linha 5: informa que a classificação “oito” de um parágrafo é de oito (8)

pontos;
• Linha 6: estipula que a classificação “dois” tenha a linha igual a duas (2)
vezes o tamanho da fonte. Estipulando o valor em número, a aplicação
cliente utilizará o font-size para definir o tamanho, multiplicando o valor
do tamanho da fonte pelo número para definir o espaço entre as linhas
(No caso, 24 pontos)
• Linha 7: configura a altura da linha igual a sessenta por cento (60%) do

tamanho da fonte. Estipulando-se o valor por porcentagem, a aplicação
cliente utilizará o valor do font-size como referência (no caso 6 pontos)
A figura 18 apresenta o código do quadro 31 renderizado em um navegador.

Figura 18 - Screenshot do navegador com o código da altura de linhas
Fonte: autor
O text-align é o comando utilizado para o alinhamento de parágrafos em

CSS. Só funciona em elementos que definam parágrafos, como P, Hn, BLO-
CKQUOTE e UL. Os valores que podem ser aplicados são:
• left (esquerda)
• right (direita)
• center (centro) e
• justify (justificado).
O quadro 33 apresenta um exemplo de seu uso.
25. P.texto { text-align:justify }
26. P.numero { text-align: right}
Quadro 33 - Alinhamento de textos utilizando CSS

Fonte: autor
Sabe-se que na linguagem HTML só é possível acrescentar margens a um

texto com a utilização de tabelas. Estilos CSS, por sua vez, permitem que se
tenha total controle das margens de um bloco de texto.
A figura 07 apresenta, graficamente, as relações entre os elementos que

definem espaços em uma página, que são:

• Margem: distância das fronteiras da página até a borda do elemento
• Borda: um quadro que pode circundar o elemento.
• Padding (enchimento): distância da borda até o conteúdo do elemen-

to.
Figura 07 – Esquema que define a relação entre bordas,margens e

paddings (enchimentos)
Fonte: autor
Podem-se definir margens, bordas ou paddings de qualquer elemento do

HTML que defina um parágrafo, como P, BLOCKQUOTE, UL, Hn, etc.
Para controle da margem dispõe-se dos seguintes comandos:
• margin-left (margem esquerda)
• margin-right (margem direita)
• margin-top (margem superior)
• margin-bottom (margem inferior)
Utilizando esses comandos pode-se definir a margem de cada lado do ele-

mento separadamente. As unidades de medida que podem ser utilizadas são
as mesmas já discutidas anteriormente (valores, tamanhos e porcentagem).
O quadro 34 apresenta um exemplo de uso de margens em um parágrafo

que contém apenas uma palavra. A Figura 19 mostra o resultado da rende-
rização deste código em um navegador WEB.

Quadro 34 - Uso de margens em parágrafos
Fonte: autor
Figura 19 - Dois parágrafos sobrepostos através do controle de margens

Fonte: autor
Observa-se que o segundo parágrafo praticamente sobrepõe o primeiro,

caso este devido ao valor negativo informado para o comando margin-top,
no segundo parágrafo. Valores negativos para a margem não são a maneira
mais indicada para sobrepor elementos.
A distância entre o conteúdo e a borda do elemento pode ser configurada

através dos comandos:
• padding-left (esquerda)
• padding-right (direita)
• padding-top (superior)
• padding-bottom (inferior)
Não é possível, entretanto, configurar valores negativos para o padding. A

aplicação do padding é semelhante à margem, porém este será mais útil
com a utilização da borda. Uma borda pode ser configurada através dos
seguintes comandos:
• border-width: define a largura da borda. Pode ser valorado como tama-

nhos, porém três palavras-chave podem definir padrões de largura:
–– thin (borda fina)

–– medium (borda média)
–– thick (borda larga).
• border-color: define a cor da borda do elemento.
• border-style: define que espécie de borda será mostrada. Os tipos pos-

síveis são:
–– solid: sólida (borda normal)

–– double: sólida dupla
–– dotted: pontilhada
–– dashed: tracejada
–– groove: efeito de moldura
–– ridge: efeito de moldura
–– inset: efeito de botão
–– outset: efeito de botão “apertado”
O código do quadro 35 mostra o exemplo de dois elementos que utilizam

borda e enchimento. Em seguida, a figura 20 apresenta a renderização deste
código no navegador.
1. <head>
2. <title>Relogios Eletronicos</title>
4. div#digitali {
5. font-family: Verdana, Arial, Helvetica, sans-serif;
6. font-size: 24px;
7. color: #0000FF;
8. padding: 20px;
9. border: thick groove #0000FF;
10. width: 150px;
11. text-align: center;
12. }
13. div#digitalii {
14. font-family: Geneva, sans-serif;
15. font-size: 24px;
16. color: #FF6600;
17. padding: 0px;
18. width: 150px;
19. border: 4px dashed #FF9933;
21. }
22. </style>
23. </head>
24.
25. <body>
26. <div id="digitali">19:45:22</div>
27. <br />
28. <div id="digitalii">07:45:22</div>
29. </body>
30. </html>
Quadro 35 - Uso de borda e enchimento em camadas com a tag <div>

Fonte: autor

Figura 20 - Simulação de relógios na página utilizando bordas
Fonte: autor
As linhas 10 e 20 do código do quadro 35 mostram a configuração da borda

dos elementos, porém não divide os comandos em largura (border-width),
tipo (border-style) e cor (border-color), pois o comando “border” aceita que
se coloque (na ordem apresentada no exemplo) tais configurações em ape-
nas um comando.
Bordas são utilizadas, portanto, para formatar os elementos de acordo com

ideias de WEB Design. Basta testar e verificar qual é a borda mais harmonio-
sa para o seu site.
3.4 Imagens e configuração de fundo

O CSS não possui um comando específico para se adicionar uma imagem
no site como possui o HTML em seu elemento IMG. Estilos admitem que,
para que uma imagem seja inserida no site através de seus comandos, esta
deve ser o preenchimento de fundo de um elemento. Assim, o estudo da
configuração de fundo de elementos mostrará como inserir uma imagem
utilizando CSS.
Os comandos utilizados para a configuração de fundo de elementos são:
• background-color: modifica a cor de fundo
• background-image: insere uma imagem como fundo
• background-repeat: configura a repetição da imagem
• background-attachment: configura o scroll da imagem
• background-position: ajusta a posição da imagem

• background: utilizado para inserir mais características em um único co-
mando.
Para modificar a cor de fundo, basta valorar o comando com o código ou

nome da cor desejada. Para a inserção de uma imagem, deve-se informar
o caminho (através de uma URL) onde se encontra tal imagem, formatando
também seu posicionamento, repetição e scroll. Observe o exemplo do qua-
dro 36.
1. <html>
2. <head>
3. <title>Fundo</title>
5. #imagem {
6. background-attachment: fixed;
7. background-image: url(imagens/paisagem2.jpg);
8. background-repeat: no-repeat;
9. background-position: 0px 0px;
10. height: 190px;
11. width: 331px;
12. }
13. body {
14. background-image: url(imagens/fundo.gif);
15. background-repeat: repeat-x;
16. background-position: 0px 15px;
17. }
18. .barra {
19. background-color: #006699;
20. color: #FFFFFF;
21. font-family:Verdana, Arial, Helvetica, sans-serif;
22. font-size:10px;
23. }
24. </style>
25. </head>
26. <body>
27. <br /><br /><br />
28. <div class="barra">Paisagem</div>
29. <div id="imagem"></div>
30. <div class="barra">Foto tirada em 22/12</div>
31. </body>
32. </html>
Quadro 36 - Configuração de fundo dos elementos:

imagens e cores
Fonte: autor
É importante ressaltar alguns pontos do exemplo do quadro 36:
• Linhas 6 a 11: este código formata o fundo da DIV “imagem” (ID setado
como imagem), indicando que a figura de fundo será o arquivo “paisa-
gem2.jpg”, que ficará fixo (caso houvesse rolagem), não há repetição e
seu posicionamento inicia nas coordenadas zero (esquerda) e zero (topo).
Também há a formatação do tamanho da camada, que neste caso, fica
igual ao tamanho da imagem.
• Linhas 14 a16: formata o fundo da página como um todo, fazendo com

que a imagem seja repetida apenas no eixo x (horizontal) e iniciando seu
posicionamento a zero pixel da esquerda e a quinze (15) pixels do topo.

• Linhas 19 a 22: não é utilizada nenhuma imagem para fundo, apenas
uma cor (no caso, azul escuro). Existe ainda a formatação da fonte, ajus-
tando a sua família, cor e tamanho.
A figura 21 demonstra a visualização das camadas apresentadas em um

navegador.
Figura 21 - Utilização de CSS para inserção de imagens e cores de fundo

em camadas
Fonte: autor
Agora fica a cargo do desenvolvedor validar a melhor maneira de se utilizar

a linguagem CSS juntamente com HTML dentro de sua página WEB.
Resumo
Nesta aula você pôde observar que a formatação de páginas somente com
HTML é possível, porém a utilização de folhas de estilo em cascata trouxe
novas perspectivas para desenvolvedores WEB, pois como têm um maior
número de atributos para formatação possibilita a criação de páginas mais
bonitas e acessíveis.
É importante verificar que, na maioria dos casos, é muito mais interessante

que se utilize a formatação conhecida como global, pois através de um ar-
quivo externo, o desenvolvedor poderá especificar todas as regras uma única
vez, identificando cada uma das tags HTML através de seus atributos ID.
Caso seja necessário modificar qualquer atributo do site, basta alterar uma
única vez neste arquivo e a alteração será propagada por todas as páginas
pertencentes ao site, que utilizem este arquivo para formatação.

1. Crie um arquivo CSS que formate o boletim da unidade 2 de acordo com
a imagem abaixo:
a) Família da letra: “Verdana, Geneva, sans-serif;”
b) Cor do topo: #003366;
c) Cor do título: #6699CC;
2. Crie uma página HTML contendo seu currículo e modifique os elementos

de acordo com os itens abaixo
a) Crie um cabeçalho em tabela onde uma das células represente uma foto
sua no currículo (utilize a formatação de fundo, não a tag <img>)
b) Título de seção:
i. Fonte: Arial, negrito, tamanho 14px, branca
ii. Parágrafo: alinhado a esquerda, 12 pt antes e 18 pt depois, fundo

cinza escuro
c) Título de sub-seções:
i. Fonte: Arial, negrito, tamanho 12px, cinza médio
ii. Parágrafo: alinhado a esquerda, 6 pt antes e 9 pt depois

d) Links
i. Fonte: Arial, negrito, tamanho 12px, laranja, sem sublinhado
ii. Parágrafo: depende de onde está inserida (herança)
e) Texto normal
i. Fonte: Arial, normal, tamanho 11px, cinza escuro
ii. Parágrafo: justificado, 3pt antes e depois
f) Demais formatações devem estar sempre em CSS
3. Desenvolva uma página que tenha um menu que acesse 5 páginas dife-
rentes e as apresente em um iframe. Formate a página utilizando CSS para
modificar a maior quantidade de propriedades possíveis, respeitando uma
boa visualização. A figura abaixo pode ser tomada como referência para o
exercício, porém a sua criatividade deve ser utilizada.
Finalizamos esta aula na qual você pôde constatar que o comércio eletrôni-
co tem um grande diferencial para o comércio que não se baseia em meios
eletrônicos: nenhum site está mais perto do que outro, ou seja, estratégias
de lojas que podem cobrar mais pois estão no bairro e não no centro não
funcionam! Um bom design faz com que seu site seja mais visto, pois as
pessoas se sentem confortáveis. Tecnologias como o CSS fazem com que
diagramadores e Web designers consigam chegar cada vez mais perto de
estruturas como imagens, e, além de bonito, o site pode adquirir caracterís-
ticas de acessibilidade, tão importantes para pessoas cegas ou surdas, por

exemplo. A próxima aula inicia a abordagem da programação, fazendo com
que você comece a experimentar a manipulação de dados através de lingua-
gens de script. Não deixe de realizar todas as atividades de aprendizagem,
porém só consulte o guia de soluções após completar cada uma delas.

Aula 4. Programação WEB “lado
cliente”
Objetivos:
• distinguir a forma de programação voltada a navegadores WEB;
• identificar a sintaxe da programação imperativa com Javascript;

e
• reconhecer a necessidade da utilização da linguagem de pro-

gramação voltada ao lado cliente, durante a programação de pá-
ginas dinâmicas na WEB
Vamos iniciar a 4ª aula na qual trataremos sobre programação Web, lado

cliente.
O conteúdo é tão importante como os demais já abordados e certamente

irá contribuir para sua formação. Volte sempre ao texto para uma leitura
mais atenta se você ficou com alguma dúvida. Não deixe de acessar os sites
sugeridos pois eles complementam todas as informações passadas durante
a aula. Vamos agora estudar programação Web “lado cliente”.
Atualmente, a WEB é um ambiente propício para a disponibilização de qual-

quer tipo de conteúdo. Além de páginas informativas, o usuário pode hoje
fazer o uso de diversas aplicações e serviços que antigamente só estavam
disponíveis em sistemas desktop: controles de estoque, cadastro de clientes,
planilhas, editores de texto, ferramentas de autoria, entre outros.
Existem dois “tipos” de programação para WEB: cliente e servidor. A pro-

gramação cliente trabalha com os dados de forma local, ou seja, não precisa
haver nenhum tipo de comunicação com um servidor WEB. Já a programa-
ção para servidor precisa de um servidor WEB para ser executada, ou seja,
os navegadores WEB não conseguem interpretá-la diretamente como é feito
Aula 4 - Programação WEB “lado cliente” 69 Rede e-Tec Brasil

com a programação cliente.
A linguagem cliente a ser abordada é Javascript. Vamos apresentar nesta

aula alguns conceitos da linguagem e sua utilização para verificação de da-
dos em formulários, para que estes possam ser manipulados em conjunto
com a linguagem PHP. Exemplos de utilização DHTML não serão cobertos,
bem como funções avançadas da linguagem. Esta aula tratará com dados
sobre a programação do lado cliente: a linguagem Javascript. Vamos iniciar
mostrando os fundamentos dessa linguagem.

A linguagem Javascript transforma páginas estáticas em centros de atrati-
vidade e interação com o usuário, levando-o a uma inteligente experiência
pelo site. A linguagem geralmente é utilizada quando se quer:
• que a página WEB responda ou reaja diretamente com o usuário, traçan-

do uma interação com elementos de formulário (entradas de dados, áre-
as de texto, botões, botões do tipo rádio e checkboxes, listas de seleção,
etc.) e ligações de hipertexto
• pré-processar os dados no cliente antes de sua submissão a um servidor
• modificar conteúdos e estilos em elementos presentes nas páginas
A programação Javascript segue o padrão da linguagem de programação

C. É interessante lembrar que Javascript não é Java, ou seja, são linguagens
realmente diferentes, com algumas semelhanças na programação devido à
origem comum. A programação é feita diretamente no HTML, entre elemen-
tos script. O quadro 37 traz o primeiro exemplo de código Javascript.
<HTML>
<HEAD>
<TITLE>Meu primeiro Script</TITLE>
</HEAD>
<BODY>
<H1>Testando o Javscript</H1>
<HR>
<SCRIPT LANGUAGE="Javascript">
alert("Ola: sou seu navegador!");
</SCRIPT>
</BODY>
</HTML>
Quadro 37 – Primeiro exemplo em Javascript

Fonte: autor

A novidade do código está entre as linhas 8 e 12:
• A linha 8 informa ao navegador que, a partir daquele momento, a pro-

gramação Javascript foi iniciada.
• As linhas 9 e 11 colocam o código em comentário. Isso é útil para nave-

gadores que não aceitam Javascript, porém isso é bem antigo.
• A linha 10 contém o código. Esta linha, ao ser executada, criará uma

janela com a mensagem ‘Ola: sou seu navegador!’ e um botão de ‘OK’.
Esta linha apresenta o comando alert (mensagem) que cria realmente
uma caixa de diálogo de alerta.
O resultado da execução desta página é mostrado através do screenshot da

figura 22.
Figura 22 - Primeiro script com Javascript: função alert()

Fonte: autor
Algumas considerações quanto à sintaxe da linguagem são importantes:
• Uso do ponto-e-vírgula (;): em toda finalização de linha de comandos,

menos no início e fim de blocos de comando com chaves ({ });
• Case-sensitive: maiúsculas e minúsculas são diferenciadas;
• O código fonte Javascript é incluído no próprio arquivo HTML;
• É uma linguagem interpretada (também chamada de linguagem de

script): isso significa que os comandos Javascript são executados um
a um diretamente por um interpretador, sem que haja necessidade de
compilação;

• Programação dirigida por eventos: os scripts geralmente são executados
através do disparo de eventos. Cliques de botão, o arrastar de mouse,
colocar foco em elementos, entrar e sair de campos, preenchimento,
escolha são exemplos de eventos provocados pela interação do usuário
com a página.
Existem três formas de executar os comandos do Javascript: in line, a partir

de funções e através de eventos.
A execução em linha (in line) é a forma do exemplo da figura 22. Não existe
definição de um bloco nomeado de comandos, apenas o código entre as
tags script. Este tipo de execução é feita quando se entra na página, por
exemplo, pois a partir do momento que o navegador passa a ler os coman-
dos da página ele os executa.
Para que se possa controlar a chamada de blocos de comando, e, mesmo

para passar alguns parâmetros ao código, funções são criadas. O quadro 38
traz um exemplo de função.
function subtrair(n1,n2) {
var resultado;
if (n1 > n2) {
resultado = n-+n2;
} else {
resultado = n2-n1;
}
return resultado;
}
Quadro 38 - Exemplo de utilização de funções em Javascript

Fonte: autor
A função é definida através da palavra chave function, seguida pelo nome

da função e seus parâmetros. A passagem de parâmetros é opcional, porém
como segue o padrão de criação de blocos da linguagem C, o uso de parên-
teses é obrigatório. Os comandos que compõem a função deverão sempre
ser cercados com chaves ({ ... }).
Toda função tem um resultado, mesmo que seja nulo. O resultado da função
é ajustado com o comando return, portanto a variável que for indicada logo
após o comando será utilizada como valor de retorno da função.
A função do exemplo executa uma subtração com ordem definida pelos

valores dos parâmetros, e retorna o resultado desta subtração.
A terceira forma de execução é através de eventos, que são respostas a

ações de usuário ou temporais dentro de uma página WEB. Na maioria das
vezes os comandos Javascript, sejam in-line ou em funções são executados a
partir do disparo de eventos.
Os eventos são listados na tabela 3.
Tabela 3 – Eventos em páginas WEB
Manipulador de Evento Breve descrição de seu uso

Este evento se produz quando um usuário detém a carga
de uma imagem, seja porque detém a carga da página ou
onabort
porque realiza uma ação que a detém, como por exemplo,
sair da página.
Desata-se um evento onblur quando um elemento perde o
foco da aplicação. O foco da aplicação é o lugar onde está
onblur situado o cursor, por exemplo, pode estar situado sobre
um campo de texto, uma página, um botão ou qualquer
outro elemento.
Desata-se este evento quando muda o estado de um ele-
onchange mento de formulário, às vezes não se produz até que o usu-
ário retire o foco da aplicação do elemento. Javascript 1.0
Produz-se quando se clica o botão do mouse sobre um
onclick
elemento da página, geralmente um botão ou um link.
Produz-se quando um usuário solta algo que havia arras-
ondragdrop
tado sobre a página WEB.
Produz-se quando não se pode carregar um documento ou
onerror
uma imagem e esta fica quebrada.
O evento onfocus é o contrário de onblur. Produz-se quan-
onfocus do um elemento da página ou a janela ganham o foco da
aplicação.
Este evento é produzido no instante que um usuário pres-
onkeydown siona uma tecla, independentemente que a solte ou não. É
produzido no momento do clique.
Ocorre um evento onkeypress quando o usuário deixa uma
tecla clicada por um tempo determinado. Antes deste even-
onkeypress
to se produz um onkeydown no momento que se clica a
tecla.
Produz-se quando o usuário deixa de apertar uma tecla. É
onkeyup
produzido no momento que se libera a tecla.
Este evento se desata quando a página, ou em Javascript
onload
1.1 as imagens, terminaram de se carregar.
Produz-se o evento onmousedown quando o usuário clica
onmousedown sobre um elemento da página. onmousedown se produz
no momento de clicar o botão, soltando ou não.
onmousemove Produz-se quando o mouse se move pela página.
Desata-se um evento onmuoseout quando a seta do mou-
onmouseout
se sai da área ocupada por um elemento da página.
Este evento desata-se quando a seta do mouse entra na
onmouseover
área ocupada por um elemento da página.

Este evento se produz no momento que o usuário solta o
onmouseup
botão do mouse, que previamente havia clicado.
Evento que se executa quando se move a janela do nave-
onmove
gador, ou um frame.
Evento que se produz quando se redimensiona a janela do
onresize
navegador, ou o frame, no caso de que a página os tenha.
Este evento está associado aos formulários e se desata no
onreset momento que um usuário clica no botão de reset de um
formulário.
Executa-se quando um usuário realiza uma seleção de um
onselect
elemento de um formulário.
Ocorre quando o visitante aperta sobre o botão de enviar
onsubmit
o formulário. Executa-se antes do envio propriamente dito.
Ao abandonar uma página, seja porque se clique em um
onunload link que nos leva a outra página ou porque se fecha a
janela do navegador, se executa o evento onunload.
Fonte: Adaptado de ALVAREZ (2005)
O quadro 39 apresenta um exemplo que cobre os três tipos de execução em

Javascript.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Funções JS</title>
<script language="Javascript">
var titulo = '<h3>Exemplo de funções</h3>';
function subtrair(n1,n2) {
var resultado;
if (n1 > n2) {
resultado = n1-n2;
} else {
resultado = n2-n1;
}
return resultado;
}
</script>
</head>
<body>
document.write(titulo);
</script>
Número 01: <input type="text" size="5" id="num1" />
Número 02: <input type="text" size="5" id="num2" />
<br />
<input type="button" onClick="alert(subtrair(num1.value,num2.value));"
value="subtrair" />
</body>
</html>
Quadro 39 - Exemplo de utilização de códigos Javascript ativados em linha, por

função e por eventos
Fonte: autor
Características importantes podem ser destacadas no código do quadro an-

terior:
• A linha 7 apresenta a execução in line, pois não está dentro de nenhuma

função e será executada assim que a página for carregada. O mesmo
acontece com o código da linha 22.
• Das linhas 9 a 17 a função de subtração foi inserida, para que possa ser
utilizada nesta página HTML.
• A linha 27 faz a chamada da função de subtração, indicando que será

disparada assim que a entrada de dados do tipo botão receber um clique
do mouse. O atributo onClick define o controle deste evento, sendo que
seu conteúdo é justamente a chamada de uma função que exibirá numa
caixa de diálogo o resultado da função de subtração. Note-se que os
parâmetros passados para a função são os valores das duas entradas de
dados anteriores, num1 e num2, referenciados pelo atributo value.
Deixando de lado qualquer validade da função (pois deveria se ter no míni-

mo uma verificação se os dois parâmetros são realmente números), o código
representa as formas de invocação de códigos Javascript. A figura 23 apre-
senta um screenshot do resultado.
Figura 23 - Exemplo de execução da função de subtração

Fonte: autor
Como o comando utilizado para criar a janela foi o alert, o símbolo que apa-
rece ao lado da mensagem na é um símbolo de alerta.
Observe os diferentes tipos de dados que podem ser utilizados de acordo

com a necessidade.
4.2 Tipos de dados

O Javascript traz diversas funções para manipulação de dados diretamente.
Aglumas destas funções serão apresentadas para que se possa trabalhar
com a validação destes dados dentro de formulários WEB.

A tabela 4 traz um resumo dos tipos de dados que podem ser utilizados em
Javascript.
Tabela 4 - Tipos de dados em Javascript

Tipo de Dados Semântica
Todos os números do tipo numérico, independentemente
da precisão que tenham ou se são números reais ou intei-
ros. Os números inteiros são números que não têm vírgula
Numérico
(p.ex 224). Os números reais são números fracionários
(p.ex. 123.45), que também se pode escrever em notação
científica, por exemplo, 2.482e12
Tipo de dado utilizado para armazenar-se valores lógicos,
Lógico ou seja, verdadeiro ou falso. Os valores possíveis são true
para verdadeiro e false para falso
É utilizada para se armazenar caracteres alfa-numéricos,
geralmente conhecidos como strings. A linguagem Ja-
Cadeia de caracteres vascript só tem um tipo de dado para salvar texto que
comporta qualquer número de caracteres. Os textos se
escrevem entre aspas, duplas ou simples.
Para um acesso completo a todos os elementos de uma página HTML, a

linguagem Javascript apresenta os pseudo-objetos.
4.3 Pseudo-objetos
Além dos tipos básicos, o Javascript possui alguns pseudo-objetos que tra-
tam com tipos de dados especiais, e podem ser manipulados de diferentes
maneiras. Esta seção apresenta alguns destes pseudo-objetos e procedimen-
tos para manipulá-los.
Tabela 5 - Pseudo-objeto Array

Objeto Array: constrói e manipula uma cadeia de caracteres
Propriedades Ajusta ou retorna o número de ele-

length
mentos de um Array
Métodos Une duas ou mais matrizes e retorna
concat()
uma cópia das matrizes unidas
Junta todos os elementos de uma ma-
join()
triz em uma cadeia de caracteres
Remove o último elemento de uma
pop()
matriz e o retorna
Adiciona um elemento à matriz (últi-
push() ma posição) e retorna o novo tama-
nho da matriz
reverse() Inverte os elementos em uma matriz
Remove o primeiro elemento de uma
shift()
matriz e o retorna
Seleciona uma parte de uma matriz,
slice()
retornando esta parte
sort() Organiza os elementos de uma matriz

Adiciona ou remove elementos de um
splice()
matriz
Converte uma matriz em uma string
toString()
e devolve seu conteúdo
Adiciona novos elementos ao início da
unshift()
matriz e devolve o novo tamanho
Retorna o valor primitivo de uma
valueOf()
matriz.
O quadro 40 apresenta um exemplo de utilização de matrizes.

var frutas = ["Banana", "Laranja", "Maçã", "Manga"];
document.write("Retiro "+frutas.pop() + "<br />");
document.write(frutas + "<br />");
document.write("Novo tamanho: "+frutas.push("Limão") + ",
inserindo<br />");
document.write(frutas + "<br />");
frutas.length = 6;
document.write("Com o tamanho igual a 6: "+frutas);
Quadro 40 - Exemplo de utilização de Array
Fonte: autor
O screenshot da execução do exemplo é mostrado na figura 24.
Figura 24 - Exemplo de execução de funções em matrizes (Array)

Fonte: autor
1. código executa, na linha:
2. A criação da matriz com 4 elementos
3. Retira o último elemento e escreve na tela
4. Escreve a matriz resultante
5. Insere mais uma fruta e mostra o novo tamanho
6. Mostra a matriz completa, com mais um elemento
7. Muda o tamanho da matriz para 6 elementos
8. A matriz é impressa, sendo que os dois últimos elementos estão em branco

Tabela 6 – Pseudo-objeto Date
Objeto Date: objeto que representa data e hora
Retorna o dia do mês da data infor-
getDate()
mada.
Retorna um número que representa o
getDay()
dia da semana
getFullYear() Retorna o ano com quatro dígitos
getHours() Retorna a hora (0-23)
getMilliseconds() Retorna os milissegundos (0-999)
getMinutes() Retorna os minutos (0-59)
Métodos getMonth() Retorna o mês (0-11)

getSeconds() Retorna os segundos (0-59)
Retorna o número de milissegun-
getTime() dos desde a meia- noite do dia
01/01/1970
Converte a porção de data informada
toDateString()
em uma cadeia de caracteres visível
Retorna um texto com a data forma-
toLocaleDateString() tada no modo local. Ex.: segunda-
-feira, 22 de Fevereiro de 2010
O código do quadro 41 - Uso do Date apresenta uma implementação que

verifica se uma data é válida ou não.
var dia = "31";
var mes = "02";
var ano = "2010";
var aData = new Date(ano,mes-1,dia);
if ((aData.getDate() == dia) &&
(aData.getMonth() == mes-1) &&
(aData.getFullYear() == ano)) {
alert("Data válida");
} else {
alert("Data inválida");
}
</script>
Quadro 41 - Uso do Date

Fonte: autor
O código:
• Cria três variáveis, dia, mês e ano para a representação de cada elemento
na data, valorando-os durante a criação.
• Na linha 5 é criada uma instância da classe Date(), passando como parâ-

metros as variáveis criadas anteriormente. Note que a ordem a ser passa-
da é primeiro o ano, depois o mês e por último o dia. Outro fator impor-
tante é que deve-se sempre tirar uma unidade do mês, já que a função
considera que Janeiro é o mês zero (0).

• A linha 6 faz a comparação dos dados da variável criada com os dados
informados anteriormente. Caso a data informada (como parâmetro) du-
rante a criação do objeto estiver errada, os dados resultantes serão dife-
rentes. No exemplo, a data informada foi “31/02/2010”, ou seja, a data
está inválida. O objeto criado estará valorado em “03/03/2010”. Sendo
assim, o dia e o mês estarão diferentes dos originais, fazendo com que a
função exiba uma caixa de diálogo “Data Inválida”.
Este código não está inserido como uma função, portanto não pode ser
reutilizado. Para transformá-lo, basta inserir a sintaxe para função e colocar
as variáveis que representam cada um dos elementos da dada como parâ-
metros, por exemplo.
Tabela 7- Pseudo-objeto String

Objeto String: manipula e cria uma cadeia de caracteres.
Ajusta ou retorna o tamanho de uma
Propriedades Length
cadeia de caracteres
Retorna o caractere na posição espe-
charAt()
cificada como parâmetro
Une duas ou mais strings, e retorna
concat()
uma cópia das strings unidas
Retorna a posição da primeira ocor-
indexOf() rência encontrada do caractere infor-
mado, dentro da string
Retorna o último índice do caractere
lastIndexOf()
encontrado dentro de uma string
Extrai uma parte de uma string e re-
slice()
torna uma nova string
Métodos Divide uma string em uma matriz de
split()
substrings
Extrai os caracteres de uma string,
inciando em uma posição específica,
substr()
indo até a quantidade de caracteres
especificada
Extrai os caracteres de uma string,
substring()
entre dois índices especificados
toLowerCase() Converte uma string para minúsculas
toUpperCase() Converte uma string para maiúsculas
Retorna o valor primitivo de uma
valueOf()
string
O código do quadro 42 programa a manipulação de algumas cadeias de

caracteres.

var str1 = "Universidade Tecnológica Federal ";
var str2 = "do Paraná";
document.write(str1.concat(str2) + "<br />");
var str3 = str2.substring(3);
document.write(str3 + "<br />");
var data = "22/05/1978";
var dtCompleta = data.split("/");
document.write(dtCompleta[0]+" do mês "+dtCompleta[1]+" de "+dtCompleta[2]);
Quadro 42 - Exemplo de uso do pseudo-objeto String

Fonte: autor
O código executa os seguintes passos e manipulação em strings:
• nas linhas 1 e 2 gera duas variáveis e as valora
• na linha 3 escreve, no documento, a primeira e a segunda cadeias de

caracteres concatenadas
• na linha 5 escreve, no documento, uma terceira string criada a partir do

quarto caractere (caractere número 3) da segunda string
• a linha 6 cria uma string com uma data, sendo que esta é transformada
em uma matriz com três posições na linha 7, através do comando split.
Note que o parâmetro do comando é a barra (“/”), justamente o elemen-
to que separa o dia, o mês e o ano na data
• a linha 8, por fim, imprime a data por extenso, mostrando primeiramente

o dia, que está na primeira posição da matriz criada, o mês da segunda
posição e o ano extraído da terceira posição da matriz (posições 0, 1 e 2
respectivamente)
A figura 25 apresenta o resultado da execução, em um navegador, do códi-

go de manipulação de strings apresentado.
Figura 25 - Exemplo de execução de funções com cadeias de caracteres (Strings)

Fonte: autor

Outros tipos de dados de manipulação existem no Javascript, porém não
serão abordados nesta aula.
Fique atento agora para a descrição dos operadores.
4.4 Operadores
Esta seção descreve os operadores que podem ser utilizados na linguagem
Javascript. As tabelas a seguir descrevem os operadores.
Tabela 06 – Operadores Aritméticos

Operador Descrição Exemplo Resultado
+ Adição x=y+2 x=7
- Subtração x=y-2 x=3
* Multiplicação x=y*2 x=10
/ Divisão x=y/2 x=2.5
% Módulo (resto da divisão) x=y%2 x=1
++ Incremento x=++y x=6
-- Decremento x=--y x=4
Adaptado de http://www.w3schools.com
O operador de adição (“+”) em cadeias de caracteres (strings) tem a fun-

ção de concatenação. É importante lembrar tal característica, pois algumas
exeperiências podem resultar em horas de trabalho perdido, caso o usuário
esteja tentando somar algumas strings. Observe o código do quadro abaixo.
x = “5” + 5;
O resultdo de “x” depois da execução do código será o valor 55, e não 10

como seria esperado em uma soma.
Tabela 07 – Operadores de Atribuição

Operador Descrição Exemplo Resultado
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
Fonte: Adaptado de W3SCHOOLS (2011)

Tabela 08 – Operadores de Comparação
Operador Descrição Exemplo
== é igual a x==8 é falso
x===5 é verdadeiro
=== É exatamente igual a (valor e tipo)
x==="5" é falso
!= É diferente x!=8 é verdadeiro
> É maior a x>8 é falso
< É menor a x<8 é verdadeiro
>= É maior ou igual a x>=8 é falso
<= É menos ou igual a x<=8 é verdadeiro

Lembre-se sempre da diferença entre os operadores de atribuição e de com-

paração. Geralmente, se estiver acostumado com uma linguagem de pro-
gramação como o pascal, você usará apenas um sinal de igual (‘=’) para
fazer uma comparação, resultando sempre numa execução errônea de seu
código.
Tabela 09 – Operadores lógicos

Operador Descrição Exemplo
&& And (x < 10 && y > 1) é verdadeiro
|| Or (x==5 || y==5) é falso
! Not !(x==y) é verdadeiro
Para que você possa realizar uma manipulação dos dados em Javascript,
vários comandos são disponibilizados. Se você já está familiarizado com a
linguagem C, vai conhecer e saber utilizar todos!
4.5 Comandos
Os sub-tópicos abaixo apresentam alguns comandos da linguagem Javas-
cript.
4.5.1 Comandos condicionais

Quando se escreve algum código, frequentemente o desenvolvedor quer
executar diferentes ações dependendo de decisões tomadas a partir de de-

terminadas condições quanto aos valores de variáveis. Comandos condicio-
nais tratam disso na codificação.
A tabela 10 apresenta os comandos condicionais e alguns exemplos.
Comando if – Executa determinado código baseado em condições.

Sintaxe 1. if (condição1){
2. código executado caso a condição1 seja verdadeira
3. } else if (condition2) {
4. código executado caso a condição2 seja verdadeira
5. } else {
6. código executado caso nenhum das anteriores seja ver-
dadeira
7. }
Exemplo 1. <script type="text/Javascript">

2. //Escreve uma saudação de bom dia quando
3. //a hora for menor do que 10
4. var d = new Date();
5. var time = d.getHours();
6. if (time < 12) {
7. document.write("<b>Bom dia!</b>");
8. } else if (time < 18) {
9. document.write("<b>Boa tarde!</b>");
10. } else {
11. document.write("<b>Boa noite!</b>");
12. }
13. </script>
Explicação No caso do código, se a hora for menor do que 12, será escrito ‘Bom dia!’ na página; se a hora for maior
do que 12 e menor que 18, será escrito ‘Boa tarde!’ na página e, em último caso, o código imprime ‘Boa
noite!’ na página.
Comando switch – Escolhe um, dentre vários blocos, para execução de código
1. switch (escolha){
2. case 1:
3. executa o bloco 1
4. break;
5. case 2:
6. executa o bloco 2
Sintaxe
7. break;
8. default:
9. executa caso nenhum dos anteriores seja execu-
tado
10. }

1. <script type="text/Javascript">
2. //A página exibirá as aulas do dia baseado no dia
da semana.
3. //Domingo=0, Segunda=1, Terça=2, etc...
4.
5. var data = new Date();
6. diaSemana = data.getDay();
7. switch (diaSemana){
8. case 1:
9. document.write("Segunda-feira: Inglês e Ma-
temática");
10. break;
11. case 2:
12. document.write("Terça-feira: História e Ma-
temática");
13. break;
14. case 3:
Exemplo
15. document.write("Quarta-feira: Geografia e
Educação Física");
16. break;
17. case 4:
18. document.write("Quinta-feira: Língua Portu-
guesa e Química");
19. break;
20. case 5:
21. document.write("Sexta-feira: Física e Quí-
mica");
22. break;
23. default:
24. document.write("Sem aulas... aproveite e
veja se tem tarefa!");
25. }
26. </script>
A partir da data do sistema, adquirida na linha 5, o código extrai o dia da semana e

inicia a comparação. De segunda (1) a sexta (5), blocos de código foram criados para
imprimir as matérias que o aluno terá neste dia da semana. Caso seja sábado ou do-
mingo, nenhum dos casos (case) será executado, e o código do bloco padrão (default)
Explicação
será executado.
Observe a presença do comando break em cada um dos blocos, indicando que, depois da
execução do comando pretendido em cada caso, haverá a saída do comando condicional.

4.5.2 Comandos para criar laços de repetição
Dois comandos são utilizados para que se crie laços de repetição em códigos
Javascript. A tabela 11 apresenta estes dois comandos.
Tabela 11 – Laços de Repetição em Javascript

for – comando utilizado para criar laços de repetição (loop) quando se sabe a
Comando
quantidade de repetições necessárias
1. for (var = valorInicial;var <=
valorFinal;var = var+incremento){
Sintaxe 2. código a ser executado
3. }
2. var i=0;
3. for (i = 0;i <= 5;i++){
4. document.write("O número é " + i);
Exemplo
5. document.write("<br />");
6. }
7. </script>
O código das linhas 4 e 5 executará 6 vezes, de 0 a 5 inclusive. A cada execução

Explicação o código escreverá na página a frase ‘O número é x’, sendo que x muda a cada
execução (0 a 5).
while – O comando while executa o código contido no bloco enquanto a condi-

Comando
ção informada for verdadeira.
1. while (var <= valorFinal){
2. código a ser executado
Sintaxe
3. }
2. var i=0;
3. while (i <= 5) {
4. document.write("O número é " + i);
Exemplo 5. document.write("<br />");
6. i++;
7. }
8. </script>
O resultado gerado por este código é igual ao do exemplo anterior, porém a forma de
comparação é diferente. Porém, no comando while, o desenvolvedor pode utilizar
Explicação
outras comparações, como o conteúdo de uma cadeia de caracteres ou com o valor
de uma variável lógica.
Para que hajam decisões diferentes das que apenas estão nas condições dos
laços de repetição, dois comandos podem ser utilizados:
• continue: este comando interrompe a exeução de uma iteração do laço

de repetição e vai para o próximo valor esperado

• break: este comando interrompe a execução do laço de repetição, en-
cerrando-o.
O exemplo do quadro a seguir demonstra o uso destes dois comandos.
<script type="text/Javascript">
var i=0;
for (i=0;i<=100;i++){
if (i == 11) break;
if (i%2 != 0) continue;
document.write("Número " + i);

document.write("<br />");
}
</script>
Quadro 43
Fonte: autor
No exemplo do quadro anterior, a linha 4 faz com que o código se encerre,

assim que o número for igual a 11. Já a linha 6 indica que apenas os núme-
ros pares serão impressos, pois caso o resto da divisão do número por dois
(2) seja diferente de zero (0), o código passará a executar a próxima iteração.
Como manipular os dados que são fornecidos pelo usuário? Como validar o
que ele escreveu?
4.6 Javascript com formulários

Abordaremos, principalmente, a interação da linguagem Javascript com for-
mulários WEB. Esta seção mostrará um exemplo de validação de um formu-
lário de login que, antes de verificar o usuário cadastrado e a senha, validará
o CPF e o e-mail digitado pelo usuário.

function verifForm(formulario){
var cpf = formulario.edtCPF.value;
var email = formulario.edtEmail.value;
var senha = formulario.edtSenha.value;
//verificação de CPF
if (cpf.length > 0) {
var nonNumbers = /\D/;
if (cpf.length < 11){
window.alert("São necessários 11 dígitos para verificação
do CPF!");
return false;
}
if (nonNumbers.test(cpf)) {
window.alert("A verificação de CPF suporta apenas
números!");
return false;
}
if (cpf == "00000000000" || cpf == "11111111111" || cpf ==
"22222222222" || cpf == "33333333333" || cpf == "44444444444" || cpf ==
"55555555555" || cpf == "66666666666" || cpf == "77777777777" || cpf ==
"88888888888" || cpf == "99999999999"){
window.alert("Número do CPF inválido!");
return false;
}
var a = [];
var b = new Number;
var c = 11;
for (i=0; i<11; i++){

a[i] = cpf.charAt(i);
if (i < 9) b += (a[i] * --c);
}
var x = b % 11;
if (x < 2) { a[9] = 0; } else { a[9] = 11-x;}
b = 0;
c = 11;
for (y=0; y<10; y++) b += (a[y] * c--);
if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10])){
window.alert("Dígito verificador com problema!");
return false;
}
}

// verificação de email
var expressao = RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}.[A-Za-
z0-9]{2,}(\.[A-Za-z0-9])?/);
if ((email == "") || !(expressao.test(email))) {
alert("Email inválido ou em branco!");
return false;
}
// verificação de senha
if (senha.length == 0){
alert("Por favor, informe a senha");
return false;
}
}
</script>
</head>
<body>
<p> </p>
<form name="frmLogin" method="post" action="#" onSubmit="return
verifForm(this);">

<table width="271" border="0" cellspacing="0" cellpadding="6">
<tr>
<th colspan="2" class="titulo">Login</th>
</tr>
<tr>
<td colspan="2" class="aviso">Informe o email ou o CPF e a senha para aces-
sar o sistema</td>
</tr>
<tr>
<td width="92" class="lblTexto">CPF</td>
<td width="155" class="aviso">
<input name="edtCPF" type="text" class="entTexto" id="edtCPF">
apenas números</td>
</tr>
<tr>
<td class="lblTexto">Email</td>
<td><input name="edtEmail" type="text" class="entTexto" id="edtEmail"></td>
</tr>
<tr>
<td class="lblTexto">Senha</td>
<td><input name="edtSenha" type="password" class="entTexto" id="edtSenha"></
td>
</tr>
<tr>
<td colspan="2" class="aviso"><input name="Entrar" type="submit"
class="botao" id="Entrar" value="Entrar"></td>
</tr>
</table>
</form>
</body>
Quadro 44
Fonte: autor
O código do quadro anterior apresenta um formulário com três entradas

de dados: CPF, e-mail e senha. A linha 62 contém um evento que chama a
função de validação do formulário assim que os dados forem submetidos, ou
seja, quando houver o pressionamento do botão ‘Entrar’.
A função chamada recebe como parâmetro a palavra reservada this, que

contém o endereço da instância do formulário atual. Geralmente este parâ-
metro é utilizado para deixar mais segura a captura dos dados de um formu-
lário, o que acontece nas linhas 4, 5 e 6. Tal função verifica o CPF da linha 9
a 41, o email da linha 44 a 48 e a senha da linha 51 a 55. Em cada verifica-
ção, em caso de negativas, o comando return false aparece, indicando que
a função será encerrada neste ponto e retornará “falso” para o formulário,
impedindo que este sofra a ação indicada (normalmente o envio ao servidor
para o processamento dos dados).
A linha 44 traz um comando novo: RegExp. Este comando cria uma expres-
são regular, que é utilizada para fazer testes em cadeias de caracteres. O
padrão utilizado serve para a verificação de e-mail. Os principais pontos são:

• ^[A-Za-z0-9_\-\.]+@: significa que a primeira parte do e-mail (antes da
arroba) deve ter, ao menos uma ocorrência, de algum caracter de A à Z
maiúsculo e minúsculo ou números, hífen, ponto ou underline.
• [A-Za-z0-9_\-\.]{2,}.: igual a primeira parte, indica a presença destes ca-

racteres, porém a cadeia {2,} significa que devem aparecer pelo menos
duas destas antes do ponto (.).
• A última sequência que está entre os parênteses, seguida pelo ponto de

interrogação (?), indica que esta é opcional, pois alguns e-mails não pre-
cisam ter a última indicação de país, podendo apenas parar na indicação
de tipo de serviço.
Resumo
Nesta aula demonstramos que a linguagem Javascript é uma ferramenta po-
derosa na internet atual. Esta trabalha junto com CSS para formar o DHTML
(Dynamic HTML), implementa muitos frameworks (dentre eles o AJAX) e
permite uma rápida verificação dos dados (pois não há a necessidade de
passar os dados ao servidor). A utilização dela em sites pessoais e comerciais
permite que o usuário torne a navegabilidade muito mais precisa e amigável.
Existe uma ressalva que são os códigos maliciosos. Muitos desenvolvedores

usam o Javascript para escrever trechos de código que podem tornar os
dados do computador vulneráveis a ações de pessoas mal-intencionadas.
Os navegadores atuais já se protegem destes ataques restringindo a execu-
ção do Javascript, porém isso faz com que o trabalho se torne mais moroso
quanto à aceitação de uma boa página.
1. Construa um programa que, ao usuário deixar um campo de texto, seja
mostrado o conteúdo deste campo em uma caixa de diálogo na página (cai-
xa de alerta padrão)
2. A partir de um formulário de dados, que contenha as informações neces-

sárias para as verificações, confira:
a) Se o nome do usuário foi informado

b) Se tem idade para fazer a carteira de motorista
c) Se o seu voto é facultativo, obrigatório ou não pode votar
d) Qual a sua idade atual (obtida a partir de cálculo com sua data de nasci-
mento)
e) Em que dia da semana ele nasceu
3. Construa um script que faça uma saudação ao usuário, assim que entrar
em uma página, indicando se:
i. manhã (0h as 11h59): Bom dia
ii. tarde (12h as 18h59): Boa tarde
iii. noite (19h as 23h59): Boa noite
Observações:
i. indique o que vai usar para fazer a chamada da função de verificação
ii. tanto campos de formulários HTML quanto o comando prompt pode

ser utilizado
Caro(a) estudante,
A linguagem Javascript disponibiliza ao desenvolvedor uma vasta gama de

possibilidades para melhorar a interatividade com o usuário. Nesta aula vi-
mos como deixar uma página Web dinâmica, porém somente no lado cliente
de uma conexão cliente/servidor. A próxima aula apresentará a linguagem
PHP – Hipertext Preprocessor, que é uma linguagem de programação scrip-
ting como javascript, porém trabalha no lado servidor de uma conexão, per-
mitindo acesso ao banco de dados e maior segurança na execução de deter-
minadas funções importantes para uma aplicação Web. Ainda há muito para
aprender. Continue disciplinado(a) em seus estudos.

Aula 5. Programação para WEB “lado
servidor”
Objetivos:
• demonstrar as formas de instalação de uma linguagem de pro-

gramação WEB para servidor;
• reconhecer a importância da programação para ambiente in-

ternet;
• identificar os principais comandos para produzir uma página

dinâmica;
• empregar as formas de verificação de dados de forma local e

sua interação com o cliente, para que haja menos tráfego na rede;
e
• perceber a necessidade da integração de todos os elementos

apresentados nas aulas anteriores para a construção de uma pági-
na completa.
Caro(a) estudante,
Esta é a penúltima aula da nossa disciplina e tratará da programação para

o lado servidor com PHP. Com este conteúdo mais uma etapa da sua qualifi-
cação será vencida. Não desanime em seus estudos. Começaremos apresen-
tando os fundamentos da linguagem.

A linguagem PHP foi concebida durante o outono de 1994 por Rasmus Ler-
dorf. As primeiras versões não foram disponibilizadas, tendo sido utilizadas
em sua página pessoal, apenas para que ele pudesse ter informações sobre
as visitas que estavam sendo feitas. A primeira versão utilizada por outras
pessoas foi disponibilizada em 1995, e ficou conhecida como Personal Home
Aula 5 - Programação para WEB “lado servidor” 91 Rede e-Tec Brasil

Page Tools (ferramentas para página pessoal).
Form Interpreter é uma

nomenclatura que veio de outro No final de 1995 o interpretador foi reescrito, e ganhou o nome de PHP/F.
pacote escrito por Rasmus
que interpretava dados de
Ele combinou os scripts do pacote Personal Home Page Tools com o FI e
formulários HTML (Form adicionou suporte a mSQL , nascendo assim o PHP/FI, versão que cresceu
Interpreter).
muito pois as pessoas passaram a contribuir com o projeto.
Nessa época houve uma mudança no desenvolvimento do PHP. Ele deixou de

mSQL (ou mini SQL) é um SGBD ser um projeto de Rasmus com contribuições de outras pessoas para ter uma
(Sistema Gerenciador de Banco
de Dados) leve, criado pela equipe de desenvolvimento mais organizada. O interpretador foi reescrito
empresa Hughes Technologies por Zeev Suraski e Andi Gutmans, e esse novo interpretador foi a base para
Pty Ltd. A primeira versão foi
disponibilizada em 1994 e sua a versão três (03) da linguagem, que atualmente encontra-se na versão 5.
filosofia baseia-se numa boa
performance e eficiente uso
de memória. Para usá-lo tanto Basicamente, qualquer coisa que pode ser feita por algum programa CGI
comercialmente como não-
comercialmente o software pode ser feita também com PHP, como coletar dados de um formulário, ge-
deve ser comprado. rar páginas dinamicamente ou enviar e receber cookies.
Algumas características do PHP o tornam bastante vantajoso. Veja abaixo

Estima-se que em 1996 PHP/FI quais são elas.
estava sendo usado por cerca de
15.000 sites pelo mundo, e em
meados de 1997 esse número
subiu para mais de 50.000 .
5.2 Características do PHP
Uma das grandes vantagens do PHP é que ele é gratuito. O arquivo de ins-
talação pode ser obtido gratuitamente no site http://www.php.net. Outra
característica importante do PHP é que, além de ser gratuito, é um software
Common Gateway Interface
é o método usado para permitir com código-fonte aberto. O código-fonte do PHP assim como sua documen-
a interação entre o servidor
WWW e outros programas
tação detalhada também estão disponíveis no site oficial.
executados no sistema).
Uma característica que o deixa muito funcional e fácil de trabalhar é que ele
é embutido no HTML. Uma página que contém programação PHP normal-
mente possui extensão .php (isso depende da configuração do seu servidor
WEB). Sempre que o servidor WEB receber solicitações de páginas que pos-
suem essa extensão, ele saberá que essa página possui linhas de programa-
ção. Porém, o HTML e o PHP estão misturados.
O PHP é executado no servidor. Quando uma página PHP é acessada por

meio de um navegador, todo o código PHP é executado no servidor, e os
resultados são enviados para o cliente. Portanto, o navegador exibe a pági-
na já processada, sem consumir recursos do computador local (cliente). As
linhas de programação PHP não podem ser vistas por ninguém, já que elas

são executadas no próprio servidor, e o que retorna é apenas o resultado do
código executado.
5.3 Programação
O código PHP é embutido no HTML. Assim, as funcionalidades a serem de-
senvolvidas pelo programador devem estar dentro de um arquivo que con-
tém HTML e os comandos da linguagem PHP. A sintaxe para a inserção pode
ser vista no quadro 2.
<html>
<head>
<title>Teste</title>
</head>
<body>
<br>
<?
echo "TESTE";
?>
</body>
</html>
Quadro 02 – PHP embutido no HTML
Fonte: autor
O código do quadro 2 apresenta uma página HTML simples, porém entre

as linhas 7 e 9 se encontra o código PHP. Portanto, todo código PHP deve
estar contido entre as tags <? ... ?> (O servidor WEB apenas interpretará o
código PHP que estiver entre os delimitadores <? ?>). A linha 8 apresenta o
comando que apresentará na página a palavra TESTE.
Para que as tags <? ... ?> funcionem no servidor, é necessário configurar,
dentro do arquivo php.ini, a diretiva short_open_tag = On. Caso con-
trário, utilize <?php ... ?
A sintaxe de seus comandos é semelhante à linguagem C. Em PHP os co-

mandos devem ser limitados por ponto-e-vírgula, blocos de comandos e
funções são delimitados por { e }, e as variáveis declaradas devem ser prece-
didas de $, conforme o exemplo do quadro 03.
<?
$ano = 1978;
echo $ano;
?>
Quadro 03 – Sintaxe do PHP

Fonte: autor
A impressão de valores nas páginas PHP pode seguir vários critérios. Os valo-
res literais são valores estáticos que podem ser direcionados direto pela saída

do PHP. Os tipos de valores literais são:
• Numéricos: geralmente utilizados em qualquer linguagem de progra-

mação para o cálculo de fórmulas matemáticas. Podem pertencer à base
decimal (10), octal (base 8) e hexadecimal (base 16).
• Alfanuméricos: são textos, ou seja cadeias de caracteres que devem ser

delimitadas com caracteres específicos para esse propósito. Esses carac-
teres delimitadores podem ser:
–– aspas simples : 'texto'

–– aspas duplas : "texto"
–– aspas invertidas: `texto`
Os textos delimitados por aspas duplas podem receber caracteres de con-

trole - diferentemente dos delimitados por aspas simples - que podem servir
para impressão de caracteres que são reservados da linguagem ou para for-
matação do texto (quadro 4).
echo "custo total R\$ 4,00";
Quadro 03 – Impressão de caracteres especiais

Fonte: autor
O caractere de barra invertida (\) antes do sinal de cifrão ($) do exemplo se

faz necessário, uma vez que o cifrão é um caractere reservado à linguagem
PHP para declaração de variáveis.
Com aspas invertidas o PHP executa comandos do sistema operacional e,

caso haja um retorno, devolve à página PHP (exemplo no quadro 05).
echo `ls –l`;
Quadro 05 – Impressão do resultado de comandos do Sistema Operacional

Fonte: autor
O comando serve, no Linux, para listar o conteúdo do diretório atual. Assim,

a página exibirá uma relação com todos os recursos que estiverem na má-
quina onde está o servidor.
A seguir, apresentamos os tipos de dados da linguagem PHP.

5.4 Tipos de dados
O PHP é uma linguagem fracamente tipada, porém o desenvolvedor pode
utilizar a tipificação, se assim for seu estilo de programação. As variáveis
devem ser inicializadas antes de utilizadas em qualquer expressão. A lingua-
gem PHP possui alguns tipos de dados que podem ser usados para inicializar
variáveis, são eles:
• Numéricos (inteiro e real);
• String: textos delimitados por aspas simples ou duplas, e podem também

conter caracteres de controle;
• Array: chamado também de mapeamentos ou vetor indexado, são vari-

áveis que podem conter mais de um dado. O tipo array é um dicionário
onde os índices são as chaves de acesso, sendo que tais índices podem
ser valores de qualquer tipo e não somente inteiros;
• Objeto;
• Booleano: PHP não possui um tipo booleano, mas é capaz de avaliar

expressões e retornar os valores true ou false, através do tipo inteiro: é
usado o valor 0 (zero) para representar o estado false, e qualquer valor
diferente de zero (geralmente 1) para representar o estado true.
Os quadros 8, 9 e 10 apresentam exemplo de conteúdos que podem ser

utilizados para valorar variáveis definidas nos tipos de dados apresentados.
$inteiro = 10;
$real = 10.001;
$nd = 10.0e-2; // 100 em notação decimal
Quadro 08 - Tipo de dados numérico

Fonte: autor
$instituicao = "Universidade Tecnológica Federal do Paraná"

$sigla = 'UTFPR';
Quadro 09 - Tipo de dados string

Fonte: autor

$a[1] = 10;
$a[2] = 20;
$a = array(10,20);
$a = array(0 => 10, 1 => 20);
$cor[1] = "vermelho";
$cor[2] = "verde";
$cor[3] = "azul";
$cor["teste"] = 1;
$cor = array(1 => "vermelho, 2 => "verde, 3 => "azul", "teste => 1);
Quadro 10 - Tipo de dados Array
Fonte: autor
As linhas 3 e 4 do código do quadro 10 são equivalentes, ou seja, para defi-

nir o Array “a” pode ser utilizada uma ou outra linha de código, assim como
a linha 9 é equivalente às linhas 5, 6, 7 e 8, ou seja, qualquer uma destas
formas pode ser utilizada para valorar um Array.
Como o tipo Array aceita vários valores, o PHP dispõe de um comando para
realizar atribuições múltiplas para facilitar o uso de vetores e matrizes. Listas
são utilizadas em atribuições múltiplas.
list($x, $y, $z) = array("ah", "beh", "ceh");

$arr = array(1=>"um",3=>"tres","a"=>"letraA",2=>"dois”);
list($a,$b,$c,$d) = $arr;
Quadro 11 – Uso de listas para delegação de múltiplos valores

Fonte: autor
O exemplo do quadro 11 apresenta a declaração de quatro variáveis através

dos valores de arrays. Cada variável da lista possui um índice inteiro e ordi-
nal, iniciando com zero, que serve para determinar qual valor será atribuído.
No quadro 11 tem-se $x com índice 0, $y com índice 1, $z com índice 2,
sendo que, depois da execução da linha um, as três variáveis estarão valora-
das em “ah”, “beh” e “ceh” respectivamente. A linha 2 cria um array com
quatro elementos, que é utilizado na linha 3 para valorar as variáveis $a, $b,
$c e $d. Após a execução do código, as variáveis terão os seguintes valores:
• $a == null
• $b == "um"
• $c == "dois"
• $d == "tres"
Observa-se que à variável $a não foi atribuído valor, pois no array não existe

elemento com índice 0 (zero). Outro detalhe importante é que o valor "tres"
foi atribuído à variável $d, e não a $b, pois seu índice é 3, o mesmo que $d
na lista. Por fim, tem-se que o valor "letraA" não foi atribuído a elemento
algum da lista pois seu índice não é inteiro.
Quais são os operadores disponíveis em PHP?
5.5 Operadores
Os operadores em PHP estão dividos em:
• Aritméticos
• Lógicos
• De Atribuição
• De Comparação
Os operadores aritméticos são usados para executar operações aritméticas

com operandos os quais podem ser variáveis, constantes ou literais. A tabela
1 apresenta os operadores aritméticos.
Tabela 1 - Operadores Aritméticos

Operador Operação Exemplo
+ Soma $a +1
- Subtração $b -$c
* Multiplicação 3 * $c
/ Divisão $a / $b
% Módulo (resto da divisão) $a % 2
Os operadores lógicos retornam valores booleanos (verdadeiro ou falso) e

são muito utilizados em decisões. A tabela 2 apresenta os operadores lógi-
cos.
Tabela 2 - Operadores Booleanos

Operador Exemplo Descrição
&& $a && $b Verdadeiro se a e b forem verdadeiros
|| $a || $b Verdadeiro se a ou b forem verdadeiros
! !$a Verdadeiro se a for falso

É importante ressaltar que, se o valor de uma variável numérica é zero ela
é considerada falsa quando usada em operações lógicas. Se uma variável
string é vazia ela é também considerada falsa .
Às vezes se faz necessário atribuir valores a determinadas variáveis. Nesse

caso pose-se fazer o uso de operadores de atribuição.
Tabela 3 - Operadores de Atribuição

= $a = $b Joga o valor de b em a
+= $a += $b Soma a com b e atribui o valor em a
-= $a -= $b Subtrai b de a e atribui o valor em a
Os operadores de comparação podem ser usados para comparar o conteúdo

de variáveis com o conteúdo de outras variáveis ou literais.
Tabela 4 - Operadores de Comparação

== $a == $b Verdadeiro se a igual a b
!= $a != $b Verdadeiro se a diferente de b
< $a < $b Verdadeiro se a menor que b
<= $a <= $b Verdadeiro se a menor ou igual a b
> $a > $b Verdadeiro se a maior b
>= $a >= $b Verdadeiro se a maior ou igual a b
O PHP traz, ainda, uma forma muito interessante de se designar valores em

comparações. O operador condicional é um operador de seleção ternário. O
quadro 14 apresenta um exemplo.
//(expressao1)?(expressao2):( expressao3)
$fator = ($numero > 0)?1:-1;
Quadro 14 – Sintaxe do operador condicional

Fonte: autor
No código do quadro 14, o interpretador PHP avalia a primeira expressão. Se

ela for verdadeira, a expressão retorna o valor de expressão2. Senão, retorna
o valor de expressão3. Na linha dois (2), a variável $fator irá receber 1 caso
o número seja maior do que zero e receberá -1 caso o número seja menor
do que zero.
Apresentaremos a seguir alguns comandos básicos para a manipulação de

dados na linguagem PHP.

5.6 Comandos
O conteúdo deste tópico pode ser complementado com as informações que
Para uma referência completa e
você encontrará no site que estamos recomendando. atualizada da linguagem, acesse
http://www.php.net
O comando IF faz parte da categoria de comandos condicionais. Geralmen-

te, dentro dos programas se faz necessário a tomada de decisões sobre o
fluxo que o programa deve seguir. Essas decisões são tomadas baseadas no
teste de condições. O quadro 15 apresenta um exemplo desta aplicação.
if(condição){
bloco_de_comandos_1;
} else {
bloco_de_comandos_2;
}
Quadro 15 - Comando IF
Fonte: autor
No exemplo do quadro 15, se condição é verdadeira então bloco_de_co-

mandos_1 é executado, caso contrário bloco_de_comandos_2 será executa-
do. Outras formas de escrever o comando condicional também são aceitas
em PHP.
Às vezes se faz necessário o teste de diversas condições em um mesmo mo-

mento no programa e, baseado no teste dessas condições você pode exe-
cutar diversos comandos. O exemplo do quadro 17 apresenta este conceito.
1. if(condição1){
2. bloco_de_comandos_1;
3. }elseif(condição2){
5. }elseif(condição3){
7. }
Quadro 17 - Testes de várias condições como o comando IF

Fonte: autor
É importante lembrar que, no comando if é possível usar uma infinidade de

cláusulas elseif mas apenas uma cláusula else .

O comando switch atua de maneira semelhante a uma série de comandos
if na mesma expressão. É útil no caso de haver a necessidade da compara-
ção de uma variável com diversos valores, e executar um código diferente a
cada valor. Para que não se tenha um número muito grande de comandos
if identados, deve-se usar o comando switch. Um exemplo que compara o
comando if e switch do comando pode ser visto no quadro 18.
if ($i == 0)
print "i é igual a zero";
elseif ($i == 1)
print "i é igual a um";
elseif ($i == 2)
print "i é igual a dois";
// é a mesma coisa que
switch ($i) {
case 0:
print "i é igual a zero";
break;
case 1:
print "i é igual a um";
break;
case 2:
print "i é igual a dois";
break;
Quadro 18 – Comparação entre if e switch

Fonte: autor
O comando switch testa linha a linha os casos encontrados, e a partir do mo-

mento que encontra um valor igual ao da variável testada, passa a executar
todos os comandos seguintes, mesmo os que fazem parte de outro teste,
até o fim do bloco. O comando break quebra o fluxo e faz com que o código
seja executado da maneira desejada.
Sempre que houver a necessidade de que um determinado número de ins-

truções sejam executadas em uma determinada quantidade de vezes (até
que uma certa condição se torne verdadeira) se faz necessário o uso de uma
estrutura de controle de fluxo denominada laço.

O comando for deve ser utilizado quando se fizer necessário a execução de
um bloco de comandos. O comando for é utilizado para busca de valores em
vetores (arrays), assim como no acesso a resultados de pesquisas.
for(comando de inicialização;condição do laco;comando do laco){
bloco_de_comandos;
Quadro 19 – Sintaxe do comando for

Fonte: autor
A sintaxe do comando for pode ser observada no quadro 19.
A forma geral dos parâmetros para uso no comando for é:
• Comando de inicialização: parâmetro que garante que uma determinada

condição, necessária para o laço, ocorra;
• Condição do laço: condição que pode interromper o laço, pois esta deve
ser verdadeira para que o laço continue.
for(;;){
print(“Alo mundo”);
Quadro 21 – Sintaxe do comando for

Fonte: autor
• Comando do laço: executado enquanto que a condição do laço é verda-

deira (normalmente é utilizado para incrementar a variável de controle).
O código do quadro 21 criará um loop infinito, pois não possui condição de

parada. Já o código do quadro 22, em seus exemplos, possui:
• Linha 3: enquanto a variável $i for menor ou igual à quantidade de valo-

res no vetor $a a linguagem executará a linha 4.
• Linha 6: enquanto a variável $i for menor do que a quantidade de valores

no vetor, menos um elemento, as linhas de 7 a 11 serão executadas.
• Linha 15: mesma condição da linha 3.
$a = array(5, 3, 7, 1, 2);
echo "<h2>Array Original</h2>";
for($i=0;$i<=count($a);$i++){
echo " ".$a[$i];
for($i=0;$i<count($a)-1;$i++){
if($a[$i] > $a[$i+1]){
$tmp = $a[$i+1];
$a[$i+1] = $a[$i];
$a[$i] = $tmp;
$i=-1;
echo "<h2>Array Ordenado</h2>";
for($i=0;$i<=count($a);$i++){
echo " ".$a[$i];
Quadro 22 – Ordenação de arrays com for

Fonte: autor
5.6.1 Comandos while e do...while

Outros dois comandos podem ser utilizados para a construção de laços de
repetição. Os comandos WHILE e DO...WHILE podem ser utilizados quando
há a necessidade da execução de algum bloco de comandos baseado na
while(expressão){
bloco_de_comados;
}
Quadro 23 – Sintaxe do comando while

Fonte: autor
avaliação de uma determinada expressão lógica. A sintaxe do comando é

apresentada no quadro 23.
Enquanto a expressão for verdadeira, o bloco de comandos é executado. É

importante lembrar que, se a expressão não for verdadeira antes do início,
nenhuma execução do bloco será feita. Se o desenvolvedor quiser que o
bloco de comandos seja executado pelo menos uma vez, então o comando

do {
bloco_de_comandos;
} while(expressão);
Quadro 24 – Sintaxe do comando do...while

Fonte: autor
do...while deve ser utilizado. O quadro 24 apresenta sua sintaxe.
$i = 1;
while ($i <=10) print $i++;
//
$i = 0;
do {
print ++$i;
} while ($i < 10)
Quadro 25 – Exemplos de utilização de while e do...while

Fonte: autor
O exemplo do quadro 25 apresenta dois laços, um utilizando while e o outro

do..while para executar a mesma operação (imprimir números de 1 a 10,
inclusive).
Caso a variável $i seja valorada, nos dois casos, em 11, a linha 6 ainda será
executada, porém no primeiro caso, nada será feito.
5.6.2 Os comandos CONTINUE, BREAK

Através de continue e break o desenvolvedor pode ter um maior controle
dos laços. Através do comando continue o programador pode fazer com
que o fluxo normal do laço seja quebrado e a expressão lógica do laço (no
caso dos comandos while e do..while) ou a condição do laço (no caso do
comando for) sejam reavaliados. Já com o comando break o laço é abortado
imediatamente.
for( $i=0; $i<=100; $i++ ){
if ( $i % 2 != 0 ){
continue;
}
echo $i;
}
Quadro 26 – Uso do continue

Fonte: autor
No caso do exemplo do quadro 26 somente os números pares serão impres-
sos, pois toda vez que a expressão $i % 2 != 0 for verdadeira (resto da divisão
por dois for diferente de zero), a condição do laço será testada novamente.
$i = 10;
do{
echo $i;
break;
} while( $i<=100 );
Quadro 27 - Exemplo do comando BREAK.

Fonte: autor
O código do exemplo contido no quadro 27 faz com que apenas o número

10 seja impresso. É importante lembrar que os comandos continue e break
devem ser usados somente dentro de laços.
PHP como qualquer linguagem funcional faz uso de funções para a definição
de blocos de código, e também disponibiliza funções prontas para que o
desenvolvedor possa construir sistemas de forma mais fácil.
5.7 Funções
Na informática, mais especificamente no contexto da programação, uma
sub-rotina (função, procedimento ou subprograma) consiste em uma porção
(bloco) de código que resolve um problema específico, parte de um proble-
ma maior (a aplicação final).
A sintaxe básica para definir uma função está demonstrada no quadro 28.
function nome_da_função([arg1,
arg2, arg3]) {
Comandos;
... ;
[return <valor de retorno>];
}
Quadro 28 – Sintaxe básica de uma função

Fonte: autor
Qualquer código PHP válido pode estar contido no interior de uma função.
Como a checagem de tipos em PHP é dinâmica, o tipo de retorno não deve
ser declarado, sendo necessário que o programador esteja atento para que
a função retorne o tipo desejado.

Toda função pode opcionalmente retornar um valor, ou simplesmente exe-
cutar os comandos e não retornar valor algum. Não é possível que uma fun-
ção retorne mais de um valor, mas é permitido fazer com que uma função
retorne um valor composto, como listas ou Arrays.
Argumentos podem ser passados junto com a chamada de uma função.

Estes devem ser declarados logo após o nome da função, entre parênteses,
e tornam-se variáveis pertencentes ao escopo local da função. O quadro 29
apresenta uma função com argumentos.
function imprime($texto){
echo $texto;
}
imprime("UTFPR");
Quadro 29 – Função que imprime um texto

Fonte: autor
No exemplo do quadro 29, a função foi declarada na linha 1 com o nome

imprime, sendo que $texto é a variável que representa o único argumento da
função. A linha 2 é a funcionalidade do código que simplesmente imprimirá
o conteúdo do argumento. A linha 4 é um exemplo de chamada da função,
que, neste caso, está passando o texto “UTFPR” para a função imprime.
Normalmente, a passagem de parâmetros em PHP é feita por valor, ou seja,

se o conteúdo da variável for alterado, essa alteração não afeta a variável
original. No exemplo 29, caso o desenvolvedor queira modificar o valor de
texto, nenhuma mudança ocorrerá depois da execução da função pois a
passagem de parâmetros foi executada por valor.
Caso o desenvolvedor queira que uma mudança no valor de um parâme-

tro seja propagado para toda a aplicação depois da execução de uma fun-
ção, este deve fazer uma passagem de valores por referência. Existem duas
maneiras de fazer com que uma função tenha parâmetros passados por
referência: indicando isso na declaração da função (fazendo com que a pas-
sagem de parâmetros sempre seja assim), e na própria chamada da função.
Nos dois casos utiliza-se o modificador "&". O quadro 30 apresenta um
exemplo de tal procedimento.
function soma10(&$n1, $n2) {
$n1 += 10;
$n2 += 10;
}
$x = $y = 1;
soma10($x, $y);
soma10($x, &$y);
Quadro 30 – Exemplo de função com passagem de parâmetros por referência

Fonte: autor
No exemplo 30, após o processamento da função pela chamada da linha 8,

o valor de $x será 11 e o valor de $y continuará 1, pois somente o primeiro
parâmetro foi declarado como referência; já na linha 9, tanto o valor de $x
quanto $y serão alterados para 11, pois a referência ao segundo parâmetro
foi feita na própria chamada da função.
Caso o desenvolvedor queira deixar parâmetros com valor padrão (default),

na declaração de cada parâmetro este deve ser valorado, conforme exemplo
no quadro 31.
function teste($texto = "testando") {

echo $texto;
}
teste();
teste("outro teste");
Quadro 31 – Função com parâmetro default

Fonte: autor
A função de exemplo do quadro 31 coloca o valor “testando” como padrão

para o parâmetro $texto. Assim, a chamada da função na linha 5 imprimirá
“testando” na tela, e a chamada da função na linha 6 imprimirá “outro tes-
te”. É importante lembrar que, quando a função tem mais de um parâmetro,
o que tem valor default deve ser declarado por último.
Trabalhando com variáveis, é importante notar que o escopo de uma variável

em PHP define a porção do programa onde ela pode ser utilizada. Na maioria
dos casos todas as variáveis têm escopo global, porém, em funções definidas
pelo usuário, um escopo local é criado. Uma variável de escopo global não
pode ser utilizada no interior de uma função sem que haja uma declaração.

$nome = "Fabiana";
$sobrenome = “Silva”;
$email = “fs@casadochapeu.br”;
function cliente() {
global $sobrenome;
echo $nome.” “.$sobrenome;
echo $GLOBALS["email"];
}
cliente();
Quadro 30 – Uso de variáveis globais em funções

Fonte: autor
O quadro 31 declara três variáveis ($nome, $sobrenome e $email), todas

globais. Para seu uso dentro da função cliente(), é necessário informar ao
PHP que estas variáveis são globais, portanto:
• A linha 5 define que $sobrenome é global, portanto estará disponível

com seu valor informado fora da função;
• A linha 6 imprime as variáveis $nome e $sobrenome concatenadas, po-

rém apenas o conteúdo de $sobrenome (no caso “Silva”) aparecerá na
tela;
• A linha 7 imprime o conteúdo da variável global $email, pois utiliza um

Array pré-definido pelo PHP cujo nome é $GLOBALS
É imprescindível que o desenvolvedor atente para tais situações, pois com-

provadamente muitos erros de programação (“porque não imprime”) estão
presentes quando não se há atenção a declarações globais e locais.
Além das funções que podem ser desenvolvidas pelo usuário, algumas fun-
ções estão disponíveis no PHP para manipulação de conteúdos de variáveis.
A tabela 03 apresenta tais funções.
Tabela 03 – Funções padrão do PHP
HTML
htmlspecialchars() string htmlspecialchars(string str);
Retorna a string fornecida, substituindo os seguintes caracteres:
& para '&', " para '"', < para '<', > para ‘>'
htmlentities() string htmlentities(string str);
Funciona de maneira semelhante ao comando anterior, mas de maneira mais completa, pois converte todos os caracteres
da string que possuem uma representação especial em html, como por exemplo:
º para 'º', ª para 'ª', á para 'á', ç para ‘ç'
nl2br() string nl2br(string str);

Retorna a string fornecida substituindo todas as quebras de linha ("\n") por quebras de linhas em html ("<br>"). Por
exemplo echo nl2br("Cisco\nXits\n"); imprime Cisco<br>Xits<br>
get_meta_tags() array get_meta_tags(string arquivo);
Abre um arquivo HTML e percorre o cabeçalho em busca de "meta" tags, retornando em um Array todos os valores
encontrados. Caso uma página tenha o código (teste.html):
1. <head>
2. <meta name="author" content="jose">
3. <meta name="tags" content="documentação HTML">
4. </head>
A execução da função get_meta_tags("teste.html"); retorna o array:
array("author"=>"jose","tags"=>"php3 documentation");
strip_tags() string strip_tags(string str);

Retorna a string fornecida, retirando todas as tags HTML e/ou PHP encontradas. Exemplo:
strip_tags('<a href="nome.php">Nomes</a><br>');
Retorna a string "Nomes".
urlencode() string urlencode(string str);

Retorna a string fornecida convertida para o formato urlencode. Esta função é útil para passar variáveis para uma
próxima página, pois muitas vezes o usuário digita espaços que não são aceitos em URLs
urldecode() string urldecode(string str);
Funciona de maneira inversa a urlencode, desta vez decodificando a string fornecida do formato urlencode para
texto normal
STRING
join string join(string separador, array partes);
Retorna uma string contendo todos os elementos do Array fornecido, separados pela string também fornecida.
Exemplo:
1. $pedacos = array("a", "casa número", 13, "é azul");
2. $junto = join(" ",$pedacos);
A variável $junto passa a conter a string: “a casa número 13 é azul”
split array split(string padrao, string str, int [limite]);

Retorna um Array contendo partes da string fornecida separadas pelo caractere fornecido, podendo limitar o número
de elementos do array. Exemplo:
1. $nasceu = "11/14/1975";
2. $nasceu_separado = split("/",$data);
A variável $nasceu_separado receba o valor: array(11,14,1975);

int similar_text(string str1, string str2, double [porcenta-
similar_text
gem]);
Compara duas strings de parâmetro e retorna o número de caracteres coincidentes. Para que o desenvolvedor possa
informar o valor percentual de igualdade entre as strings, opcionalmente pode ser fornecida uma variável, passada por
referência. Maiúsculas e minúsculas são tratadas como diferentes (case sensitive). Exemplo:
$num = similar_text("teste", "testando",&$porc);
Depois da execução, $num é 4 e $porc == 61.538461538462
strcasecmp int strcasecmp(string str1, string str2);

Compara as duas strings e retorna 0 (zero) se forem iguais, um valor maior que zero se str1 > str2, e um valor menor
que zero se str1 < str2. Esta função é case insensitive, ou seja, maiúsculas e minúsculas são tratadas como iguais.
strcmp int strcasecmp(string str1, string str2);
Funciona de maneira semelhante à função strcasecmp, com a diferença que esta é case sensitive, ou seja, maiúsculas e
minúsculas são tratadas como diferentes.
strstr string strstr(string str1, string str2);
Procura a primeira ocorrência de str2 em str1. Se não encontrar, retorna uma string vazia, e se encontrar retorna todos
os caracteres de str1 a partir desse ponto. Exemplo:
strstr("Telefone celular", "cel"); // retorna "Celular"
Esta função é case sensitive, ou seja, diferencia maiúsculas e minúsculas. Para não haver diferenciação, o desenvol-
vedor deve usar a função stristr.
strpos int strpos(string str1, string str2, int [offset] );

Retorna a posição da primeira ocorrência de str2 em str1, ou zero se não houver. O parâmetro opcional offset determina
a partir de qual caractere de str1 será efetuada a busca. Para retornar o valor da última ocorrência, o usuário deve
utilizar strpos.
Alteração de STRINGS
chop string chop(string str);
Retira espaços e linhas em branco do final da string fornecida. Exemplo:
chop(" Teste \n \n "); // retorna " Teste"
trim string trim(string str);

Retira espaços e linhas em branco do início e do final da string fornecida. Para retirar apenas do final da string, o
usuário deve utilizar ltrim
strrev string strrev(string str);
Retorna a string fornecida invertida. Exemplo:
strrev("Silva"); // retorna "avliS"
strtolower string strtolower(string str);

Retorna a string fornecida com todas as letras minúsculas.
strtoupper string strtoupper(string str);
Retorna a string fornecida com todas as letras maiúsculas.
ucfirst string ucfirst(string str);
Retorna a string fornecida com o primeiro caractere convertido para letra maiúscula. Exemplo:
ucfirst("teste de funcao"); // retorna "Teste de funcao"
Para ter um retorno com todas as palavras com letra inicial maiúcula, o desenvolvedor deve usar ucwords
str_replace string str_replace(string str1, string str2, string str3);
Altera todas as ocorrências de str1 em str3 pela string str2.
Diversos
echo() echo(string arg1, string [argn]... );
Imprime os argumentos fornecidos.
isset() bool isset ( mixed var [, mixed var [, ...]])
Determina quando uma variável está ajustada (set). Retorna verdadeiro se a variável var existe, ou falso caso contrário.
print() print(string arg);
Imprime o argumento fornecido.
Banco de Dados
resource mysql_connect([string server [, string username
mysql_connect()
[, string password [, bool new_link]]]])
Abre uma conexão com um banco de dados MySQL. A função retorna um link para o banco de dados em MySQL ou falso
caso não haja conexão com o banco. Exemplo:
1. <?php
2. $link = mysql_connect("localhost", "mysql_user", "mysql_password")
3. or die("Falha na conexão");
4. print ("Conectado");
5. mysql_close($link);
6. ?>
O código die presente na linha 2 faz com que a aplicação seja encerrada neste ponto, escrevendo na página “Falha na
conexão”.
bool mysql_select_db ( string database_name [, resource

mysql_select_db()
link_identifier])
Seleciona um banco de dados MySQL. Retorna TRUE em caso de sucesso ou FALSE em falhas. O primeiro parâmetro
indica o nome do banco de dados e o segundo o recurso (que geralmente é o retorno do comando mysql_connect, o
qual possui o link com o servidor)
resource mysql_query ( string query [, resource link_
mysql_query()
identifier [, int result_mode]])
O comando envia uma consulta ao banco de dados ativo no servidor que está associado ao identificador de link (parâ-
metro link_identifier). Se o link não for especificado, o último link criado é utilizado.
Somente para os comandos SQL SELECT, SHOW, EXPLAIN ou DESCRIBE que o comando retorna um identificador de
recurso ou falso caso a consulta não seja executada corretamente. Para outros comandos SQL, o comando retorna true
caso bem sucedido e false em caso de falhas.
mysql_num_rows() int mysql_num_rows ( resource result)

O comando retorna o número de tuplas (linhas) em um conjunto de resultados. Este comando somente é válido para
declarações SQL do tipo SELECT.
O parâmetro utilizado geralmente é o resultado de um comando mysql_query
mysql_affected_rows() int mysql_affected_rows ( [resource link_identifier])
Tal instrução ao banco de dados retorna o número de tuplas (linhas) afetadas por declarações SQL do tipo INSERT,
UPDATE ou DELETE, associadas com um identificador de link de conexão.
Caso a última execução tenha sido uma instrução DELETE sem uma cláusula WHERE, todos os registros serão apagados,
porém a função retornará zero. Exemplo:
1. <?php
2. mysql_pconnect("localhost", "mysql_user", "mysql_password") or
die ("Impossível conectar");
3. mysql_query("UPDATE mytable SET used=1 WHERE id < 10");
4. printf ("%d registros atualizados", mysql_affected_rows());
5. ?>
mixed mysql_result ( resource result, int row [, mixed

mysql_result()
field])
Retorna o conteúdo de uma célula de um conjunto de resultados MySQL. O campo de argumento pode ser o índice ou
nome, ou ainda o nome da tabela ponto nome do campo (tabela.campo). Se o nome da coluna foi apelidado (“SELECT
nomecompleto as nome from...”), o desenvolvedor deverá usar o apelido ao invés do nome do campo.
O primeiro parâmetro é o link da conexão, o segundo é a linha do conjunto de resultado e o terceiro é o nome do campo.

mysql_fetch_row() array mysql_fetch_row ( resource result)
Retorna um Array que corresponde à linha buscada, ou false caso não haja nenhuma linha. O comando busca uma linha
de dados no resultado associado com um identificador de resultado especificado. A linha é retornada como um Array,
onde cada resultado é armazenado em um índice, iniciando em zero (0).
mysql_close() bool mysql_close ( [resource link_identifier])
É utilizado para fechar a conexão com o banco de dados. O parâmetro é o link de conexão.
Sessões
session_start() bool session_start ( void)
O comando cria uma sessão (ou continua a sessão atual baseada no identificador que pode ser passado por uma variável
GET ou mesmo um cookie). Se for necessário nomear uma sessão, o comando session_name() deve ser utilizado logo
antes da chamada do comando. Esta função sempre retorna verdadeiro.
session_register() bool session_register ( mixed name [, mixed ...])
Este comando aceita um número variável de argumentos, cada qual pode ser ou uma string que contém o nome da
variável ou um Array consistindo de nomes de variáveis ou outros Arrays. Para cada nome, o comando registra a variável
global com o nome que tem na sessão corrente. Exemplo:
1. $barney = "A big purple dinosaur.";
1. session_register("barney");
2.
3. $HTTP_SESSION_VARS["zim"] = "An invader from another planet.";
4.
5. # the auto-global $_SESSION array was introduced in PHP 4.1.0
6. $_SESSION["spongebob"] = "He's got square pants.";
session_register bool session_register ( mixed name [, mixed ...])

Função que registra uma variável, informada no parâmetro name, na sessão.
Esta função foi preterida (DEPRECATED) a partir da versão 5 do PHP, e a partir da versão 6 não será mais utilizada. Ela
é substituída pela adição direta no Array que representa, globalmente, a sessão. Exemplo:
1. $_SESSION["usuario"] = $user_ent
No exemplo, a variável $user_ent será registrada como usuário na sessão.
Duas funções em particular devem ter uma atenção maior, pois aparente-
mente executam o mesmo processo dentro de um sistema PHP: echo e print.
Alguns itens que podem ser comparados:
• Velocidade: echo é um pouco mais rápida que print
• Expressão: print se comporta como uma função, pois retorna verdadeiro

caso a impressão tenha tido sucesso.
• Parâmetros: echo pode imprimir vários parâmetros separados por vírgula,

enquanto que print pode apenas imprimir um parâmetro.
Resumo
A programação de sites dinâmicos na WEB avançou muito nos últimos anos.
As linguagens para o desenvolvimento no lado servidor têm constantemen-
te apresentado novas versões ao mercado e principalmente o uso de fra-
meworks vem otimizando a disponibilização de novos conteúdos. E s t a
aula teve, como objetivo, lançar uma primeira visão da programação voltada
a servidores para WEB, e sabe-se que ainda há muito o que avançar e apre-
sentar quanto às formas de se valorizar páginas realmente bem feitas.
1. Utilizando PHP, crie códigos para:
a) Imprimir o valor de duas variáveis do tipo texto.
b) Imprimir as duas variáveis de texto concatenadas.
c) Verifique se uma data informada pelo usuário é válida
2. Implemente uma calculadora com 5 operações básicas (+,-,*,/,% - resto

da divisão), usando radio buttons e duas entradas de dados.
3. Desenvolva um programa em PHP que, a partir de um número informado

pelo usuário, retorne uma tabela com a taboada deste número.
É certo que desde o advento da WEB e sua popularização, muitas empresas

e autônomos têm investido no desenvolvimento de sistemas que podem ser
acessados de qualquer parte do mundo. A linguagem PHP, demonstrada
nesta aula, é uma das linguagens mais utilizadas para programação Web
no mundo inteiro! A próxima aula apresenta o desenvolvimento de um site
completo, explicando passo a passo desde a montagem das telas, dos cadas-
tros e da construção do banco de dados. É a aula que vai agregar todos os
processos já aprendidos neste módulo.

Aula 6. Programação para WEB “lado
servidor” – estudo experimental
Objetivos:
• reconhecer o uso da linguagem PHP na prática;
• identificar o banco de dados MySQL como ferramenta de arma-

zenamento de dados prática e leve para WEB como PHP; e
• utilizar as práticas ágeis de programação para WEB
Caro(a) estudante,
Esta é a última aula da disciplina. Agora é “mão na massa”. Esta aula de-
monstra a construção de um site de ponta a ponta, utilizando todos os re-
cursos aprendidos nas 5 aulas anteriores de Programação para Web. Você vai
perceber que poderá construir facilmente uma aplicação para o cadastro de
pessoas, e ainda, com o conhecimento adquirido, poderá melhorar o exem-
plo aqui descrito. Instale já as ferramentas e comece o desenvolvimento de
um novo mundo na internet!
Com o intuito de demonstrar a linguagem PHP na prática, utilizando funções

e bancos de dados, esta aula apresenta um estudo de caso de cadastro de
clientes, utilizando banco de dados MySQL.
A aplicação é simples, apresentando o cadastro do cliente (CRUD), verifica-

Para os exemplos deste caderno
ção de clientes cadastrados, login para acesso e área administrativa. foi utilizado o suíte WAMP, que
pode ser encontrado no site
http://www.wampserver.
Para a construção do aplicativo vários programas podem ser utilizados. Di- com/
versas empresas e grupos de estudo têm lançado implementações cada vez
melhores e mais completas para se trabalhar com PHP, Apache e MySQL em
conjunto. Como agora vamos armazenar os dados, precisamos conhecer
comandos para acesso e controle de informações de um banco de dados.
Aula 6 - Programação para WEB “lado servidor” – estudo experimental 113 Rede e-Tec Brasil
6.1 Funções específicas para controle de
banco de dados e sessões
Para se trabalhar com PHP utilizando banco de dados, os desenvolvedores
podem utilizar funções nativas para acesso a tais bancos. Esta aula traz de-
monstrações de como utilizar o banco de dados MySQL.
Para armazenar valores de variáveis com a finalidade de construir aplicações

que necessitem de login e até mesmo para desenvolver aplicações de comér-
cio eletrônico que precisam de um carrinho de compras, normalmente se faz
a utilização de sessões. Assim, a tabela 8 apresenta as funções que podem
ser utilizadas tanto para acesso a banco de dados quanto para utilização de
sessões.
Tabela 8 - Funções para banco de dados MySQL e sessões com PHP

Banco de Dados
resource mysql_connect([string server [, string username
mysql_connect()
[, string password [, bool new_link]]]])
Abre uma conexão com um banco de dados MySQL. A função retorna um link para o banco de dados em MySQL ou
falso caso não haja conexão com o banco. Exemplo:
8. <?php
9. $link = mysql_connect("localhost", "mysql_user", "mysql_pas-
sword")
10. or die("Falha na conexão");
11. print ("Conectado");
12. mysql_close($link);
13. ?>
O código die presente na linha 2 faz com que a aplicação seja encerrada neste ponto, escrevendo na página “Falha na
conexão”.
bool mysql_select_db ( string database_name [, resource

mysql_select_db()
link_identifier])
Seleciona um banco de dados MySQL. Retorna TRUE em caso de sucesso ou FALSE em falhas. O primeiro parâmetro
indica o nome do banco de dados e o segundo o recurso (que geralmente é o retorno do comando mysql_connect,
o qual possui o link com o servidor).
resource mysql_query ( string query [, resource link_
mysql_query()
identifier [, int result_mode]])
O comando envia uma consulta ao banco de dados ativo no servidor que está associado ao identificador de link (parâ-
metro link_identifier). Se o link não for especificado, o último link criado é utilizado.
Somente para os comandos SQL SELECT, SHOW, EXPLAIN ou DESCRIBE que o comando retorna um identificador de
recurso ou falso caso a consulta não seja executada corretamente. Para outros comandos SQL, o comando retorna true
caso bem sucedido e false em caso de falhas.
mysql_num_rows() int mysql_num_rows ( resource result)

O comando retorna o número de tuplas (linhas) em um conjunto de resultados. Este comando somente é válido para
declarações SQL do tipo SELECT.
O parâmetro utilizado geralmente é o resultado de um comando mysql_query

mysql_affected_rows() int mysql_affected_rows ( [resource link_identifier])
Tal instrução ao banco de dados retorna o número de tuplas (linhas) afetadas por declarações SQL do tipo INSERT,
UPDATE ou DELETE associadas com um identificador de link de conexão.
Caso a última execução tenha sido uma instrução DELETE sem uma cláusula WHERE, todos os registros serão apaga-
dos, porém a função retornará zero. Exemplo:
14. <?php
15. mysql_pconnect("localhost", "mysql_user", "mysql_password") or
die ("Impossível conectar");
16. mysql_query("UPDATE mytable SET used=1 WHERE id < 10");
17. printf ("%d registros atualizados", mysql_affected_rows());
18. ?>
mixed mysql_result ( resource result, int row [, mixed

mysql_result()
field])
Retorna o conteúdo de uma célula de um conjunto de resultados MySQL. O campo de argumento pode ser o índice ou
nome, ou ainda o nome da tabela ponto nome do campo (tabela.campo). Se o nome da coluna foi apelidado (“SELECT
nomecompleto as nome from...”), o desenvolvedor deverá usar o apelido ao invés do nome do campo.
O primeiro parâmetro é o link da conexão, o segundo é a linha do conjunto de resultado e o terceiro é o nome do campo.
mysql_fetch_row() array mysql_fetch_row ( resource result)

Retorna um Array que corresponde à linha buscada, ou false caso não haja nenhuma linha. O comando busca uma
linha de dados no resultado associado com um identificador de resultado especificado. A linha é retornada como um
Array, onde cada resultado é armazenado em um índice, iniciando em zero (0).
mysql_close() bool mysql_close ( [resource link_identifier])
É utilizado para fechar a conexão com o banco de dados. O parâmetro é o link de conexão.
Sessões
session_start() bool session_start ( void)
O comando cria uma sessão (ou continua a sessão atual baseada no identificador que pode ser passado por uma variável
GET ou mesmo um cookie). Se for necessário nomear uma sessão, o comando session_name() deve ser utilizado logo
antes da chamada do comando. Esta função sempre retorna verdadeiro.
session_register() bool session_register ( mixed name [, mixed ...])
Este comando aceita um número variável de argumentos, cada qual pode ser ou uma string que contém o nome da va-
riável ou um Array consistindo de nomes de variáveis ou outros Arrays. Para cada nome, o comando registra a variável
global com o nome que tem na sessão corrente. Exemplo:
19. $barney = "A big purple dinosaur.";
20. session_register("barney");
21.
22. $HTTP_SESSION_VARS["zim"] = "An invader from another planet.";
23.
24. # the auto-global $_SESSION array was introduced in PHP 4.1.0
25. $_SESSION["spongebob"] = "He's got square pants.";
session_register bool session_register ( mixed name [, mixed ...]) Caso o desenvolvedor utilize
Função que registra uma variável, informada no parâmetro name, na sessão. outro banco de dados pode-se
Esta função foi preterida (DEPRECATED) a partir da versão 5 do PHP, e a partir da versão 6 não será mais utilizada. Ela pesquisar em www.php.net
é substituída pela adição direta no Array que representa, globalmente, a sessão. Exemplo: os comandos necessários para
controlar outros SGBDs.
6. $_SESSION["usuario"] = $user_ent
No exemplo, a variável $user_ent será registrada como usuário na sessão.
Observe a seguir como pode ser construído um banco de dados.
Você já sabe criar um banco de dados? No próximo tópico vamos mostrar

a estrutura do banco de dados utilizado no exemplo e também como você
pode construir o seu.
6.2 Criação do banco de dados

A criação do banco de dados em MySQL será efetuada através de coman-
dos. O usuário poderá escolher qualquer interface para efetuar a construção
das tabelas. A tabela 06 apresenta a estrutura das tabelas a serem construí-
das no banco de dados.
Tabela 6 – Estrutura das tabelas no Banco de Dados

Tabela de Clientes
tb_clientes id_user Número auto – incremento (chave primária)
inclusao_user Data e horário do cadastro do cliente
user apelido do cliente
senha senha do cliente
nome_user Nome completo
end_user Endereço
bairro_user Bairro
email_user Email
tel_user Telefone
cidade_user Cidade
estado_user Código do Estado
Tabela de Estados
tb_estados id_estado Número auto – incremento (chave primária)
estado Nome do Estado
uf Sigla do Estado
Tabela de Usuários
tb_user id_user Número auto – incremento (chave primária)
apelido Apelido do usuário com acesso ao sistema
senha Senha do usuário que vai ter acesso ao sistema
Para a criação das tabelas, deve-se anteriormente fazer a criação do banco

de dados. O comando para a criação está no quadro 32.
CREATE DATABASE loja;
Quadro 32 – Criação do banco de dados

Fonte: autor

As tabelas podem ser criadas através dos códigos do quadro 33.
CREATE TABLE tb_clientes(

id_user int auto_increment primary key,
inclusao_user datetime,
nome_user varchar(80),
end_user varchar(80),
bairro_user varchar(40),
email_user varchar(90),
tel_user varchar(25),
cidade_user varchar(80),
estado_user int
);
CREATE TABLE tb_estados(

id_estado int auto_increment primary key,
estado varchar(60),
uf char(3)
);
CREATE TABLE tb_user(

id_user int auto_increment primary key,
apelido varchar(60),
senha varchar(20)
);
Quadro 33 – SQL para a criação de tabelas

Fonte: autor
Executando este comando dentro do editor de SQL do PHPMyAdmin o usu-

ário fará a criação das três tabelas do banco de dados. Para que não seja
necessário efetuar o cadastro manual de todos os estados e suas siglas, po-
de-se incluir todos através de comandos SQL. O quadro 34 apresenta este
código (comando SQL: INSERT INTO).
INSERT INTO tb_estados(uf,estado) VALUES(‘AC’,’Acre’);
INSERT INTO tb_estados(uf,estado) VALUES(‘AL’,’Alagoas’);
INSERT INTO tb_estados(uf,estado) VALUES(‘AP’,’Amapá’);
INSERT INTO tb_estados(uf,estado) VALUES(‘AM’,’Amazonas’);
INSERT INTO tb_estados(uf,estado) VALUES(‘BA’,’Bahia’);
INSERT INTO tb_estados(uf,estado) VALUES(‘CE’,’Ceará’);
INSERT INTO tb_estados(uf,estado) VALUES(‘DF’,’Distrito Feder-
al’);
INSERT INTO tb_estados(uf,estado) VALUES(‘ES’,’Espírito Santo’);
INSERT INTO tb_estados(uf,estado) VALUES(‘GO’,’Goiás’);
INSERT INTO tb_estados(uf,estado) VALUES(‘MA’,’Maranhão’);
INSERT INTO tb_estados(uf,estado) VALUES(‘MT’,’Mato Grosso’);
INSERT INTO tb_estados(uf,estado) VALUES(‘MS’,’Mato Grosso do
Sul’);
INSERT INTO tb_estados(uf,estado) VALUES(‘MG’,’Minas Gerais’);
INSERT INTO tb_estados(uf,estado) VALUES(‘PA’,’Pará’);
INSERT INTO tb_estados(uf,estado) VALUES(‘PB’,’Paraíba’);
INSERT INTO tb_estados(uf,estado) VALUES(‘PR’,’Paraná’);
INSERT INTO tb_estados(uf,estado) VALUES(‘PE’,’Pernambuco’);
INSERT INTO tb_estados(uf,estado) VALUES(‘PI’,’Piauí’);
INSERT INTO tb_estados(uf,estado) VALUES(‘RN’,’Rio Grande do
Norte’);
INSERT INTO tb_estados(uf,estado) VALUES(‘RS’,’Rio Grande do
Sul’);
INSERT INTO tb_estados(uf,estado) VALUES(‘RJ’,’Rio de Janeiro’);
INSERT INTO tb_estados(uf,estado) VALUES(‘RO’,’Rondônia’);
INSERT INTO tb_estados(uf,estado) VALUES(‘RR’,’Roraima’);
INSERT INTO tb_estados(uf,estado) VALUES(‘SC’,’Santa Catarina’);
INSERT INTO tb_estados(uf,estado) VALUES(‘SP’,’São Paulo’);
INSERT INTO tb_estados(uf,estado) VALUES(‘SE’,’Sergipe’);
INSERT INTO tb_estados(uf,estado) VALUES(‘TO’,’Tocantins’);
Quadro 34 – Inserção de todos os estados da federação.

Fonte: autor
6.3 Código de conexão com o banco de

dados
O sistema deste caso de uso tem como base dos dados o MySQL. Assim, as
funções utilizadas serão as nativas ao banco de dados MySQL. O PHP possui
várias funções nativas para acesso a banco de dados. Caso o sistema geren-
ciador de bancos de dados não esteja homologado na versão da linguagem
que o desenvolvedor estiver utilizando, este pode fazer uso das funcionali-
dades do ODBC.
O código arquivo utilizado para conexão com o banco de dados está contido
no quadro 35.

<?
$dbname="loja";
$usuario="root";
$senha="utfpr";
if(!($id = mysql_connect(“localhost”,$usuario,$senha))) {
echo "<p class=\”erro\”>Não foi possível estabelecer uma conexão
com o banco de dados.</p>";
exit;
}
if(!($con=mysql_select_db($dbname,$id))) {
echo " <p class=\”erro\">Nome de usuário e senha inválidos para
acesso ao banco de dados.</p>";
exit;
}
?>
Quadro 35– Código para conexão com o banco de dados (arquivo conectar.php)
Fonte: autor
O código utilizado para conexão (quadro 35) possui as seguintes caracterís-

ticas:
• Linhas 2, 3 e 4: definidas as variáveis para acesso ao banco $dbname,

$usuario, $senha que significam o nome do banco de dados, usuário e
senha para acesso ao banco.
• Linha 06: através do comando mysql_connect, informando a URL para

o servidor (neste caso a própria máquina), nome de usuário e senha, o
PHP fará uma conexão com o banco de dados. Caso haja algum erro, o
comando retornará falso e uma mensagem de erro será impressa na tela.
• Linha 10: caso a conexão seja bem sucedida, haverá a tentativa de se-
lecionar o banco de dados “loja”. Nota-se que, como parâmetros do
comando mysql_select_db, são passadas informações do nome do banco
de dados e a variável que representa a conexão, $id.
Este arquivo será utilizado toda vez que uma conexão com o banco de dados
for necessária. Isoladamente não possui serventia alguma, porém deve ser
utilizado em conjunto com outros scripts de acesso ao banco de dados.
As informações serão sobre pág. E como fizemos as páginas da aplicação?

Como posso controlar tudo isso?
6.4 Páginas da WEB App
A área administrativa é a área responsável por fazer o controle dos clientes
cadastrados. Inclusão, alteração, consulta e exclusão (CRUD) de qualquer
cliente poderão ser efetuados por esta interface. Haverá a utilização de ses-
sões em PHP, pois há a necessidade de restringir o acesso a esta área.
Esta parte conterá dois arquivos: index.php e sessao.php sendo estes a pági-
na inicial do sistema e o arquivo para verificação da sessão, respectivamente.
<?
include "conectar.php";
if(isset($apelido_login) && isset($senha_login)) {
$sql = mysql_query("SELECT *
FROM tb_user
WHERE apelido='$apelido_login' AND senha='$senha_
login'",$con) or die("ERRO no comando SQL :".mysql_error());
if (mysql_num_rows($sql) > 0) {
$id_loja = mysql_result($sql,0,"id_user");
$apelido_loja = mysql_result($sql,0,"apelido");
$senha_loja = mysql_result($sql,0,"senha");
// dados da sessão
session_start("loja");
$_SESSION["id_loja"] = $id_loja;
$_SESSION["apelido_loja"] = $apelido_loja;
$_SESSION["senha_loja"] = $senha_loja;
header("Location:opcoes.php");
}
}
?>
<html>
<head>
<title>Loja VEND.e.TUDO</title>
</head>
<body>
<form name="frmLogin" method="post" action="<?= $PHP_SELF;?>">
<table width="40%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">Identificação</td>
</tr>
<tr>
<td width="33%" height="25">Apelido:</td>
<td width="67%" height="25"><input type="text" name="apelido_login"></
td>
</tr>
<tr>
<td width="33%" height="25">Senha:</td>
<td width="67%" height="25"><input type="password" name="senha_log-
in"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="entrar" value="Entrar
>>"></td>
</tr>
</table>
</form>
</body>
</html>
Quadro 36 – Código da página inicial (arquivo index.php)

Fonte: autor

O código do quadro 36:
• Faz a inclusão do arquivo conectar.php através do comando include (li-

nha 2). Como esta página inicial precisa de uma conexão com o banco
de dados, através deste comando todo o código PHP do arquivo externo
é executado e suas variáveis globais ficam disponíveis.
• Na linha 03 há a verificação quanto à digitação de apelido e senha do

usuário. Na primeira vez que a página for acessada, tais valores não exis-
tirão pois as variáveis ainda não foram ajustadas, assim o comando isset()
é utilizado. Depois que o usuário preencher os dois valores e submeter os
dados, estas variáveis estarão valoradas e a verificação de usuário cadas-
trado poderá ser feita.
• A linha 04 apresenta o código que faz a busca, no banco de dados, usu-

ários que tenham o mesmo apelido e senha informados pelo cliente. O
resultado desta consulta ficará armazenado na variável $sql.
• Através da comparação da quantidade de linhas retornadas da consulta

(linha 7), o sistema saberá se o usuário está realmente cadastrado e sua
senha correta. Em caso positivo, o script fará a geração de uma sessão
com este usuário (linhas 8 a 15) através dos dados recuperados do banco
de dados.
• O código da linha 16 cria um novo cabeçalho HTTP para a página. Neste

caso específico haverá o redirecionamento do navegador para a página
menu.php.
O restante do código cria um formulário HTML para que o usuário pos-

sa fazer a entrada dos dados de login. A linha 23 do código apresenta,
no atributo action do elemento FORM (que cria o formulário), uma variável
pré-definida do PHP: $PHP_SELF. A variável $PHP_SELF só será encontrada
pelo processador PHP caso a opção register_globals estiver ativada no arqui-
vo php.ini. Caso contrário, o usuário deve utilizar $_SERVER[“$PHP_SELF”]
.Esta variável retorna a URL da página atual, ou seja, ao submeter os dados
a própria página será chamada para o processamento dos dados.
A figura 01 apresenta o arquivo index.php renderizado no navegador.
Figura 01 – Formulário para login (índex.php)
Fonte: autor
Como o sistema é restrito, ou seja, apenas usuários logados com permissão

de acesso, é necessário verificar em cada página se um usuário fez o acesso
pela página de login. Para saber se ele fez o acesso e foi devidamente iden-
tificado, basta verificar a sessão: caso as variáveis $id_loja, $apelido_loja e
$senha_loja estiverem registradas na sessão o usuário está logado.
O código do quadro 37 apresenta o arquivo sessao.php.
<?
session_start("loja");
if(!(isset($_SESSION["id_loja"]) AND
isset($_SESSION["apelido_loja"]) AND
isset($_SESSION["senha_loja"]))) {
echo "<p class=\"info\">Essa é uma área res-
trita</p>";
exit;
}
?>
Quadro 37 – Código para verificar usuário logado (sessao.php)

Fonte: autor
Na linha 02 (quadro 37) o sistema inicializa a sessão “loja” e, posteriormen-

te, há a verificação dos parâmetros. Caso algum deles não esteja registrado
(pois a função ‘E lógico’ foi utilizada), o PHP exibe na tela uma mensagem
de erro e encerra o aplicativo. Este código será incluído nas outras páginas
através da função include().
O usuário precisa de um pequeno menu para escolher se quer Cadastrar

Clientes ou Gerenciar Clientes. Assim, uma tela com duas opções pode ser
criada. Exemplos no quadro 38 e na figura 02.

<body>
<table id="Table_01" width="263" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img id="menu_01" src="images/menu_01.gif" width="263" height="68" alt="" />
</td>
</tr>
<tr>
<td rowspan="3">
</td>
<td>
<a href="cadclientes.php" target="centro">
<img id="menu_03" src="images/menu_03.gif" width="174" height="32" border="0"
alt="" />
</a>
</td>
<td rowspan="3">
</td>
</tr>
<tr>
<td>
<a href="gerclientes.php" target="centro">
<img id="menu_05" src="images/menu_05.gif" width="174" height="34" border="0"
alt="" />
</a>
</td>
</tr>
</table>
<iframe width="80%" height="400" name="centro" frameborder="0"></iframe>
</body>
Quadro 38 – Código do menu.php

Fonte: autor
O código do quadro 38 apresenta um menu gerado a partir de uma ferra-
menta de autoria, somente para exemplificar que tais ferramentas também
podem ser utilizadas para construir páginas. Note que os links estão sendo
direcionados para um frame inteligente (IFRAME) que está localizado logo
abaixo do menu. A diferença é que todos os links serão abertos neste espaço
da página, ou seja, não precisaremos de uma nova janela.
Figura 02 – Menu (menu.php)

Fonte: autor
O arquivo de cadastro de clientes (cadclientes.php) é descrito no quadro 39.
<?
include "ver_sessao.php";
include "funcoes.php";
?>
<html>
<head>
<title>Cadastro de clientes</title>
<link href="loja.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3>Cadastro de Clientes</h3>
<div class="info">Todos os dados são obrigatórios</div>
<?
if(isset($acao) && $acao == 'cadastrar') cadastrar($acao);
if(isset($acao) && $acao == 'entrar') {
$sql_estados = mysql_query("SELECT * FROM tb_estados ORDER BY estado")
or die("ERRO no comando SQL:".mysql_error());
?>
<form name="frm_clientes" method="post" action="<?echo $PHP_SELF;?>?acao=cadastrar">
<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="24%" height="25" class="lblCampo">Nome:</td>
<td height="25" width="76%"><input type="text" name="nome_user" size="35"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Endereço:</td>
<td height="25" width="76%"><input type="text" name="end_user" size="30"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Bairro:</td>
<td height="25" width="76%"><input type="text" name="bairro_user" size="30"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Email:</td>
<td height="25" width="76%"><input type="text" name="email_user" size="35"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Telefone:</td>
<td height="25" width="76%"><input type="text" name="tel_user" size="20"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Cidade:</td>
<td height="25" width="76%"><input type="text" name="cidade_user" size="35"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Estado:</td>
<td height="25" width="76%">
<select name="estado_user">
<option value="0">[selecione]</option>
<? while($array = mysql_fetch_array($sql_estados)) { ?>
<option value="<?= $array['Id_estado'];?>"><?= $array['estado'];?></option>
<? } ?>
</select>
</td>
</tr>
<tr>
<td height="25" colspan="2" class="fundo"><input type="submit" name="cadastrar"
value="Cadastrar cliente"></td>
</tr>
</table>
</form>
<? } ?>
</body>
</html>
Quadro 39 – Código para inclusão de clientes no Banco de Dados (cadclientes.php)

Fonte: autor

O código tem características já vistas e algumas características de código
específicas para o cadastro:
• As linhas 2, 3 e 4 fazem a importação dos arquivos necessários para a co-

nexão no banco de dados, para a verificação de sessão, ou seja, verificar
se o usuário está logado permitindo assim o acesso à página e para que
se tenha acesso à função de cadastro. Como tanto o cadastro quanto a
alteração têm códigos de verificação de erros iguais, uma função cha-
mada cadastrar($oque) foi criada, e seu código pode ser verificado no
quadro 40.
• As linhas 15 e 16 verificam qual ação que o PHP deverá tomar identifica-

da através do parâmetro “acao". Caso o parâmetro seja:
–– cadastrar, a função de cadastro será chamada para efetuar a inclusão

dos dados no banco de dados;
–– entrar, os dados da tabela que representa os estados serão carrega-
dos na variável $sql_estados para posterior geração do SELECT que
seleciona o estado. O formulário para cadastro será impresso. Da li-
nha 50 até a linha 54, é utilizado um código para gerar a entrada de
dados para estado, onde as opções serão a chave primária Id_estado
e o valor a ser mostrado será o nome do estado.
Caso todos os dados forem informados, o cadastro será efetuado com su-
cesso no banco de dados. A função que faz o cadastro e alteração de clien-
tes pode ser vista no quadro 40.
<?php
function cadastrar($oque){
global $id_cliente;
global $nome_user;
global $end_user;
global $bairro_user;
global $email_user;
global $tel_user;
global $cidade_user;
global $estado_user;
$erros = "";
$html_erros = "";
if($nome_user == '') {
$erros++;
$html_erros = $html_erros."<br>Nome";
}
if($end_user == '') {
$erros++;
$html_erros = $html_erros."<br>Endereço";
}
if($bairro_user == '') {
$erros++;
$html_erros = $html_erros."<br>Bairro";
}
if($email_user == '') {
$erros++;
$html_erros = $html_erros."<br>Email";
}
if($tel_user == '') {
$erros++;
$html_erros = $html_erros."<br>Telefone";
}
if($cidade_user == '') {
$erros++;
$html_erros = $html_erros."<br>Cidade";
}
if($estado_user == 0) {
$erros++;
$html_erros = $html_erros."<br>Estado";
}
if($erros == 0) {
if ($oque == 'cadastrar') {
$sql = mysql_query("INSERT INTO tb_clientes
(inclusao_user,nome_user,end_user,bairro_
user,email_user,
tel_user,cidade_user,estado_user)
VALUES(now(),'$nome_user','$end_user','$bairro_user',
'$email_user','$tel_user','$cidade_user','$estado_user')")
or die("Erro no comando SQL:".mysql_error());
echo "<div align=center class=\"ok\">$oque Cliente cadastrado com Sucesso!!</
div>";
} elseif ($oque == 'alterar') {
$sql = mysql_query("UPDATE tb_clientes SET nome_user='$nome_user',end_user='$end_user',
bairro_user='$bairro_user',email_user='$email_user',tel_user='$tel_user',
cidade_user='$cidade_user',estado_user='$estado_user' WHERE id_user='$id_cliente'")
or die("Erro no comando SQL:".mysql_error());
echo "<div class=info>Dados do cliente $nome_user alterados com Sucesso!!</div>";
echo "<div class=info><a href='gerclientes.php?acao=entrar'>[Voltar]</a>";
}
} else {
echo "<div align=center class=\"erro\">ATENÇÃO: <b>$erros</b>
erro(s) no cadastro</div>";
echo "<div align=center class=\"erro\">$html_erros<div/>";
}
}
?>
Quadro 40 – Função de cadastro (arquivo funcoes.php)

Fonte: autor

No código do quadro 40, a função de cadastro tem as seguintes caracterís-
ticas:
• Da linha 3 até a linha 10 a função informa que as variáveis de cadastro

são globais (para que as variáveis do cadastro possam ser utilizadas den-
tro da função).
• Entre a linha 11 e 40 há a verificação quanto ao preenchimento dos

dados. Duas variáveis declaradas como $erros e $html_erros contém as
informações da quantidade de erros e a informação do erro que deve ser
repassada ao usuário, respectivamente. Assim, toda vez que um erro é
encontrado, a quantidade de erros é incrementada e o texto do erro é
informado.
• Na linha 41 há a verificação da quantidade de erros. Caso a quantidade

seja:
–– Igual a zero (0), os dados serão inseridos ou alterados no banco de

dados (dependendo do parâmetro informado).
–– Diferente de zero (0) o usuário receberá uma mensagem de erro com
a quantidade de erros e onde o erro está presente (qual variável não
foi informada)
O gerenciamento de clientes, que contém as funções de busca e alteração

dos dados, é feita através do código do arquivo gerclientes.php, exibido no
quadro 41, e o código renderizado no navegador na figura 03.
<?
include "conectar.php"; //Conecta com a nosso banco de dados MySQL
include "ver_sessao.php"; //Verifica se a sessão está ativa
?>
<html>
<head>
<title>Pesquisa de clientes</title>
</head>
<body>
<?
$sql_cliente = "SELECT id_user,date_format(inclusao_user,'%d/%m/%Y - %H:%i') as inclus-
ao_user, nome_user,cidade_user,uf FROM tb_clientes,tb_estados WHERE tb_estados.id_es-
tado = tb_clientes.estado_user";
if(isset($pesquisar) && $pesquisar == 'sim') {
if (isset($pesq)) $sql_cliente = $sql_cliente." AND nome_user LIKE '%$pesq%'";
$sql_cliente = $sql_cliente." ORDER BY inclusao_user";
$sql_cliente = mysql_query($sql_cliente) or die("Erro no SQL: ".mysql_error());
}
?>
<h3>Gerenciamento de Clientes</h3>
<form name="frmPesq" method="post" action="<?= $PHP_SELF?>">
<tr class="fundo_titulo" >
<td colspan="2">Pesquisa</td>
</tr>
<tr>
<td width="45%" class="lblCampo">Nome a ser procurado:</td>
<td width="55%">
<input type="text" name="pesq" size="25">
<input type="submit" name="btpesq" value="Pesquisar">
<input type="hidden" name="pesquisar" value="sim">
</td>
</tr>
</table>
</form>
<br>
<? if(mysql_num_rows($sql_cliente) > 0) {?>

<tr class="fundo_titulo" >
<td colspan="5">Clientes cadastrados</td>
</tr>
<tr class="fundo_titulo2">
<th width="19%">Data de inclusão</th>
<th width="33%">Cliente</th>
<th width="23%">Cidade/UF</th>
<th width="13%">Alterar</th>
<th width="12%">Excluir</th>
</tr>
<? while($array_cliente = mysql_fetch_array($sql_cliente)) {?>
<tr class="fundo_lista">
<td width="19%" height="25">
<?= $array_cliente['inclusao_user'];?> </td>
<?= $array_cliente['nome_user'];?> </td>
<?= $array_cliente['cidade_user'];?>/<?= $array_cliente['uf'];?>
</td>
[<a href='altclientes.php?id_cliente=<?= $array_cliente['id_
user'];?>&acao=entrar'>Alterar</a>] </td>
[<a href='excluirclientes.php?id_cliente=<?= $array_cliente['id_
user'];?>'>Excluir</a>] </td>
</tr>
<?}?>
</table>
<? } else {
echo "<div class=\"info\">Nenhum cliente foi encontrado</div>";
}?>
<div class="info"><a href='menu.php'>[ Voltar para o menu de opções ]</
a><div>
</body>
</html>
Quadro 41 – Código para a página de gerenciamento de Clientes (gerclientes.php)

Fonte: autor

Para efetuar um correto gerenciamento de clientes, o código contém:
• As linhas 2 e 3 fazem a importação dos arquivos de conexão com o ban-

co e verificação de usuário logado.
• Da linha 12 a 17, o código fará a consulta aos clientes cadastrados no

banco de dados, caso a opção pesquisar tenha sido enviada. A linha 14
faz uma alteração na busca somente se o usuário informou um nome a
ser pesquisado, incluindo a palavra na pesquisa com WHERE. A cláusula
SQL também utiliza, na linha 12, uma função nativa chamada date_for-
mat(), que retorna a data do banco de dados formatada conforme os
parâmetros informados (no caso dia/mês/ano – hora:minuto).
• Da linha 19 a 34 é construído o formulário para pesquisa.
• Da linha 37 a 66 o código gera uma listagem dos clientes cadastrados,

através do resultado da pesquisa efetuada no início do código. A linha
58 gera um link para que o cliente possa acessar a página de alteração
de clientes, informando como parâmetro o identificador único do usuá-
rio; na linha 60 o link gerado é para referenciar a página de exclusão do
cliente.
• Ao final, na linha 67, o código gera um link para que o usuário possa
voltar ao Menu de Opções do sistema.
Figura 03 – Gerenciamento de Clientes (gerclientes.php)

Fonte: autor
A página de alteração e exclusão do cliente necessita que se passe, por

parâmetro, o identificador único para que possa ser localizado no banco de
dados, e a ação seja tomada. No quadro 41 está contido o código para o
arquivo de alteração do cliente.
<?
include "funcoes.php"
?>
<html>
<head>
<title>Alteração de Dados do Cliente</title>
</head>
<body>
<h3>Alteração de dados de Cliente</h3>
<?
if (isset($acao) && $acao == 'alterar') cadastrar($acao);
if (isset($acao) && $acao == 'entrar') {
$sql_cliente = mysql_query("SELECT * FROM tb_clientes WHERE id_user='$id_cli-
ente'")
$array_cliente = mysql_fetch_array($sql_cliente);
$sql_estados = mysql_query("SELECT * FROM tb_estados ORDER BY estado")
?>
<form name="frm_clientes" method="post" action="<?echo $PHP_
SELF;?>?acao=alterar">
<tr>
<td width="24%" height="25" class="lblCampo">Nome:</td>
<td height="25" width="76%"><input type="text" name="nome_user" size="35"
value="<?= $array_cliente['nome_user'];?>"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Endereço:</td>
<td height="25" width="76%"><input type="text" name="end_user" size="30"
value="<?= $array_cliente['end_user'];?>"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Bairro:</td>
<td height="25" width="76%"><input type="text" name="bairro_user" size="30"
value="<?= $array_cliente['bairro_user'];?>"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Email:</td>
<td height="25" width="76%"><input type="text" name="email_user" size="35"
value="<?= $array_cliente['email_user'];?>"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Telefone:</td>
<td height="25" width="76%"><input type="text" name="tel_user" size="20"
value="<?= $array_cliente['tel_user'];?>"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Cidade:</td>
<td height="25" width="76%"><input type="text" name="cidade_user" size="35"
value="<?= $array_cliente['cidade_user'];?>"></td>
</tr>
<tr>
<td width="24%" height="25" class="lblCampo">Estado:</td>
<td height="25" width="76%">
<select name="estado_user">
<option value="0">[selecione]</option>
<?
while($array = mysql_fetch_array($sql_estados)) {
$estado_cliente = $array_cliente['estado_user'];
$cod_estado = $array['Id_estado'];
$estado = $array['estado'];
if($estado_cliente == $cod_estado)
echo "<option value='$estado_cliente' selected>$estado</option>";
else
echo "<option value='$cod_estado'>$estado</option>";
}?>
</select></font></td>
</tr>
<tr>
<td height="25" colspan="2">
<div align="center">
<input type="submit" name="alterar" value="Alterar dados >>">

<input type="hidden" name="id_cliente" value="<?echo $array_
cliente['id_user'];?>">
</div></td>
</tr>
</table>
</form>
<?
}
?>
</body>
</html>
Quadro 42 – Código para alteração de clientes no Banco de Dados (altclientes.php)

Fonte: autor
O código para alteração dos dados é praticamente igual ao do cadastro.

Algumas diferenças podem ser pontuadas:
• A linha 13 verifica a ação a ser tomada e chama a função cadastrar, com

a opção de alteração.
• Na linha 14 o código verifica se a ação for entrar. Em caso positivo, o

cliente identificado é procurado no banco de dados, um vetor com os
dados do cliente é preenchido e outro vetor é preenchido com todos os
estados cadastrados.
• O formulário é praticamente o mesmo, porém os valores dos campos são

informados para que o usuário possa alterar os valores existentes. Estes
valores são obtidos através do vetor $array_cliente populado anterior-
mente.
• O código passa, ainda, um campo escondido (definido na linha 68) que

é a identificação do cliente, para que o código da função de alteração
saiba qual cliente deve ser alterado.
Depois de modificar as informações preenchidas, o cliente clica em alterar

e os dados (caso todos estiverem preenchidos) são alterados no banco de
dados, identificado pela chave primária.
A última parte do código é a exclusão do cliente selecionado. Através da

página de gerenciamento, o usuário pressiona “Excluir” e a página com o
código de exclusão é chamada, concatenada à URL o código do cliente a ser
excluído. O código para a página de exclusão está no quadro 43.
<html>
<head>
<title>Exclusão de Clientes</title>
</head>
<body>
<?
$sql_del = mysql_query("delete from tb_clientes where id_user='$id_cliente'")
or die("<div class=\"erro\">erro no sql: ".mysql_error()."</div>");
echo "<div class=\"ok\">cliente excluído com sucesso!</div>";
echo "<div class=info><a href='gerclientes.php?acao=entrar'>[voltar]</a>";
?>
</body>
</html>
Quadro 43 – Código para exclusão do cliente (excluircliente.php)

Fonte: autor
O código do quadro 43 apresenta:
• Nas linhas 8 e 9 o PHP irá incluir o código de conexão e de verificação de

cliente logado
• A linha 10 cria a consulta SQL que fará a exclusão do cliente indicado

pela variável $id_cliente (que é passada através da URL durante o proces-
so de gerenciamento do cliente).
• Caso haja erro, o sistema encerra a sua execução e identifica o erro. Em

caso contrário, é exibida uma frase de sucesso e o usuário poderá retor-
nar à listagem pressionando o link “[Voltar]
O acesso a banco de dados pode ser feito de várias formas. O estudo de caso
apresentado mostra os principais itens de uma área administrativa de sites
dinâmicos, aplicando o conceito de sessões para fazer o controle de acesso e
consultas SQL para o retorno de dados e a sua alteração no MySQL.
Maiores informações sobre o controle do PHP com Bancos de Dados pode

ser obtida através do acesso às referências bibliográficas.
Resumo
Esta aula complementou o conteúdo das aulas anteriores para a construção
de um site.
A programação para WEB é algo que está crescendo a cada dia. Mais fra-
meworks e novas formas para facilitar o desenho de páginas estão surgindo.
A rede mundial de computadores mudou a forma da população mundial
pensar e, portanto, a cabeça dos desenvolvedores também tomou um novo

rumo na programação cliente-servidor.
O desenvolvimento voltado a banco de dados é imprescindível atualmen-

te. Utilizando uma aplicação como WAMP, você tem acesso facilitado a um
banco de dados muito utilizado no mundo inteiro: o MySQL. A configuração
de todo o ambiente é facilitada, e a exportação para o servidor, onde ficará
hospedado o site, é praticamente transparente, pois o conjunto de pastas,
arquivos e configuração pode ser utilizado da mesma forma.
Construir um controle de clientes on-line é importante, pois o gerenciamen-

to remoto destes dados evita a duplicidade. Usar ícones e cores, ajustando
suas características via CSS, faz com que a aplicação fique dinâmica e per-
mita uma rápida e fácil manutenção. Observe também que, no exemplo, foi
desenvolvida uma área visando a segurança, onde o usuário deve informar
senhas para acesso.
As linguagens PHP e Javascript, quando trabalhadas em conjunto, formam

um poderoso time de aliados aos desenvolvedores, pois passando por apri-
moramentos em várias versões, tornaram-se o principal alvo de comércios
eletrônicos espalhados pelo mundo, tanto na forma de frameworks como o
Zope tanto em sua forma pura, podendo ser configurada e rodada tanto em
Windows como Linux.
Verdade seja dita: a programação WEB não cairá de moda tão facilmente e,
portanto, é uma grande área para aperfeiçoamento e investimento.
1. Faça uma pesquisa em alguns frameworks para a linguagem PHP. Cite e
descreva aqui dois destes frameworks.
2. Explique o que cada um dos comandos abaixo “faz” em PHP
a) mysql_connect([string $server [,string $username[, string $password]]] )
b) explode(string $delimiter , string $string [, int $limit ])
c) strtoupper(string $string)
d) session_start()
Prezado(a) estudante.
Você finalizou a última aula da disciplina. Não deixe de realizar as aitividades

de aprendizagem que são um complemento dela.Leias nossas Palavras finais
e depois confira seu grau de acrto nas atividades efetuadas. Não desista de
continuar seu processo de aprendizagem pois ele nunca termina.

Palavras finais
Você chegou ao fim desta disciplina e acredito que deu um passo relevante
para sua formação profissional. No entanto é importante que você continue
estudando, pesquisando e buscando atualizar-se , pois esta área está em
constante mudança e é preciso estar sempre em dia para continuar inserido
no competitivo mercado de trabalho atual.
Prever o futuro da programação é algo complicado, porém pode se ter (qua-

se) certeza que a maioria dos aplicativos terão características distribuídas,
executará na Web ou em serviços muito parecidos, e envolverá uma gama
muito grande de dispositivos (geladeiras, aparelhos de televisão e carros).
Outra grande lição que temos é que os programas terão que ser atrativos,
com uma interface bem distribuída, limpa e acessível a qualquer pessoa,
independentemente de sua idade.
O conteúdo desta disciplina tratou do processo básico da construção de um

Web Site, iniciando pela criação da Internet, passando pelas linguagens de
marcação e por linguagens de formatação de conteúdo, até chegar à pro-
gramação lado cliente e lado servidor. Porém, durante a construção de um
Web Site, não se pode pensar apenas nas questões técnicas, mas algumas
perguntas são relevantes:
• Quais são os requisitos do cliente? Precisamos saber se o aplicativo para

Web que está sendo construído supre as necessidades de seus usuários,
e também se há uma relevância no seu desenvolvimento.
• Onde este sistema será hospedado? É importante ter ciência da velocida-

de de processamento, qual o volume de transferência de dados disponí-
vel, quanto espaço em disco estará disponível e se o sistema estará segu-
ro. A dependência destes quatro fatores pode ser crucial no momento do
planejamento e do desenvolvimento desta aplicação.
• Qual o comportamento da interface do sistema em diferentes dispositi-

vos e diferentes tamanhos de telas? Muitas vezes esquecemos que, atu-
almente, o acesso à Web está presente em telefones celulares, aparelhos
de televisão, geladeiras, dispositivos GPS para carros e muitos outros apa-
relhos, que possuem telas muito diferentes entre si.
Muitas perguntas ainda podem ser feitas, mas é importante que haja sempre

uma evolução na forma de se programar sistemas. Não foi aqui abordado,
mas é muito importante que você inicie um estudo sobre os frameworks de
programação para Web. A linguagem PHP aqui mostrada oferece inúmeras
possibilidades, tanto no acesso a dados, na formatação de conteúdo, em
termos de segurança no acesso e também na construção de códigos limpos.
Enfim, muitas possibilidades estão disponíveis na grande rede de informação
que cerca o mundo. Prossiga em seu processo de aprendizagem.
Um grande abraço!

Guia de Soluções

Atividades - Aula 1
1. Cite e comente cinco das principais características da internet.
• Hipertexto: a navegação entre as páginas da internet ocorre através de

ligações (links), que permitem que se possa ir de uma página a outra
(página dentro de página - texto dentro de texto).
• Multimídia: Várias formas de se postar conteúdo. Vídeos, fotos, sons,

textos completos, etc.
• Interatividade: possibilidade de interação com usuários através de for-

mulários.
• Globalização: como é uma rede do tipo WAN - Wide Area Network,

abrange uma grande parte do planeta (se não todo).
• Rede de redes: diversas redes isoladas interagem em uma única e grande

rede, através de protocolos.
2. O acesso à internet, principalmente à WEB, é feito através de navegadores

(browsers). Enumere os principais navegadores atuais e suas diferenças tan-
to na usabilidade como nos recursos disponíveis a usuários e também para
desenvolvedores
• Microsoft Internet Explorer (Agosto de 1995): Windows Internet Ex-

plorer, também conhecido pelas abreviações IE, MSIE ou WinIE, é um
navegador de internet de licença proprietária. É considerado o navega-
dor mais popular no mercado apesar de ser o mais atrasado em termos
de tecnologia e a queda significativa no número de usuários. Desde o
lançamento da versão 7 do navegador, o nome oficial foi então alterado
de "Microsoft Internet Explorer" para "Windows Internet Explorer", por
causa da integração com a linha Windows Live. O Internet Explorer foi
sendo, ao longo dos anos, apontado como um software com numerosas
falhas de segurança.[7] [8] [9] [10] Programas maliciosos ou oportunistas
exploravam brechas para roubar informações pessoais.

• Mozilla Firefox (Novembro de 2004): Mozilla Firefox é um navegador
livre e multi-plataforma desenvolvido pela Mozilla Foundation (em portu-
guês: Fundação Mozilla) com ajuda de centenas de colaboradores (cerca
de 40% do código do programa foi totalmente escrito por voluntários).
Possui grande compatibilidade com CSS3 e HTML5. A maior vantagem
sobre outros navegadores é a quantidade de plug-ins externos que po-
dem ser instalados (cerca de 17.000 complementos disponíveis em julho
de 2012 ultrapassando a marca de 3 bilhões de downloads). A arquite-
tura de programação do Firefox é baseada em extensões. Tal caracterís-
tica é apontada por alguns como um dos aspectos que supostamente
tornariam o navegador seguro. Através de extensões, os usuários podem
agregar novas funções, como gestos do mouse, bloqueio de publicidade,
ferramentas de verificação e ampliação de imagens, por exemplo. O Mo-
zilla Firefox funciona em vários sistemas operacionais.
• Google Chrome (Setembro de 2008): O Google Chrome é um navega-

dor desenvolvido pelo Google e compilado com base em componentes
de código aberto como o motor de renderização, o WebKit, da Apple Inc.
e sua estrutura de desenvolvimento de aplicações (Framework). Atual-
mente é o navegador mais rápido e leve do mercado e possui uma inter-
face bastante limpa. Utiliza tecnologia webkit tornando-o o navegador
mais compatível com o CSS3 e HTML5. O navegador está disponível em
mais de 51 idiomas para as plataformas Windows, Mac OS X, Android,
Ubuntu, Debian, Fedora e OpenSuSE. O Chrome envia detalhes de seu
uso para a Google através de mecanismos de rastreamento, mas alguns
desses mecanismos podem ser desativados pelo usuário. Atualmente, o
Chrome é o navegador mais utilizado no mundo, com 32,43% dos usu-
ários contra 32,12% do Internet Explorer e 25,55% do Mozilla Firefox,
segundo a StatCounter.
• Safari (Janeiro de 2003): O Safari é um navegador desenvolvido pela

Apple Inc. e incluído como o navegador padrão a partir do sistema ope-
racional Mac OS X v10.3 (Panther). Apresenta uma interface simples, ca-
racterística dos produtos da Apple. Suas funções são básicas: abas, blo-
queador de pop-ups, baixador de arquivos, leitor de notícias RSS, modo
privado que evita o monitoramento da navegação por terceiros, etc. Tem
o motor de renderização (layout engine) WebKit — um software que in-
terpreta os códigos HTML e posiciona os elementos da página — sendo
que o KHTML do Konqueror, navegador para KDE, foi usado como base.
É extremamente compatível com o CSS3 e HTML5. Logo no lançamento,

foram realizados pela Apple alguns testes acerca da velocidade do nave-
gador. Foi constatado que o Safari carrega páginas até 3 (três) vezes mais
rapidamente que o Mozilla Firefox 2 e até 5,5 vezes mais que o Opera
9, e executa o JavaScript até 4,5 vezes mais rapidamente que o Mozilla
Firefox 2 e até 5 vezes mais que o Opera 9.
• Opera (Dezembro de 1996): Opera é um navegador da web e uma suíte

de internet desenvolvido pela companhia Opera Software. O navegador
permite tarefas comuns de internet como exibir sites, mandar e receber
mensagens de e-mail, gerir contatos, bate-papo online de Iinternet Relay
Chat (IRC), "baixar" arquivos via BitTorrent e ler feeds. Ele é oferecido
gratuitamente para computadores pessoais e celulares. É tido como "o
concorrente mais antigo do Internet Explorer" e, apesar de ser o menos
utilizado no mercado, ele consegue ser muito superior que o seu mais
antigo rival. O Opera funciona em uma variedade de sistemas de compu-
tadores pessoais, incluindo Microsoft Windows, Mac OS X, GNU/Linux,
FreeBSD e o Solaris. É o único navegador do mercado que possui coman-
dos por voz: foi desenvolvido com o compromisso de acessibilidade ao
computador para os usuários que têm visão ou mobilidade reduzida.
3. Desenvolva uma página HTML que tenha (utilize títulos para dividir os ele-
mentos do texto e apresentá-los) dois elementos em bloco de representação
para conteúdo (<DIV>), apresentando dados pessoais

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Exercícios</title>
6. </head>
7. <body>
8. <div id="sessao1">
9. <h3>Dados pessoais</h3>
10. <ul>
11. <li>Nome: Fernando</li>
12. <li>Data de nascimento: 22 de maio de 1978</li>
13. <li>E-mail: fernando@utfpr.edu.br</li>
14. </ul>
15. </div>
16. <div id="sessao2">
17. <h3>Dados profissionais</h3>
18. <div id="subsessao21">
19. <ul>
20. <li>Empresa: Universidade Tecnológica Federal do Paraná</li>
21. <li>Endereço: Av. Brasil, 4232 - 85884-000 - Medianeira/PR</li>
22. </ul>
23. </div>
24. <div id="subsessao22">
25. <ul>
26. <li>Disciplina: DS53B - Linguagens de Estruturação e Apresentação de
Conteúdos</li>
27. <li>Disciplina: DS55A - Multímidia para Web</li>
28. <li>Disciplina: DS56B - Projeto de Sistemas para WEB</li>
29. </ul>
30. </div>
31. </div>
32. </body>
33. </html>
Atividades - Aula 2
Exercício 1a
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <head>
5. <title>Cronograma Anual</title>
7. </style>
8. </head>
9.
10. <body>
11. <table width="700" border="1" cellspacing="0" cellpadding="10"
bordercolor="gray">
12. <tr>
13. <th colspan="9" bgcolor="#666666">Cronograma de Atividades 2012</th>
14. </tr>
15. <tr>
16. <th bgcolor="#999999">Atividade</th>
17. <th width="12%" colspan="2" bgcolor="#999999">Janeiro</th>
18. <th width="12%" bgcolor="#999999">Fevereiro</th>
19. <th width="12%" bgcolor="#999999">Março</th>
20. <th width="12%" colspan="2" bgcolor="#999999">Abril</th>
21. <th width="12%" bgcolor="#999999">Maio</th>

22. <th width="12%" bgcolor="#999999">Junho</th>
23. </tr>
24. <tr>
25. <td>Férias</td>
26. <td colspan="2" bgcolor="#009999"> </td>
27. <td> </td>
28. <td> </td>
29. <td colspan="2"> </td>
30. <td> </td>
31. <td> </td>
32. </tr>
33. <tr>
34. <td>Pesquisa em Livros</td>
35. <td> </td>
36. <td bgcolor="#009999"> </td>
37. <td bgcolor="#009999"> </td>
38. <td bgcolor="#009999"> </td>
40. <td> </td>
41. <td> </td>
42. </tr>
43. <tr>
44. <td>Desenvolvimento do projeto</td>
46. <td> </td>
47. <td bgcolor="#009999"> </td>
49. <td bgcolor="#009999"> </td>
50. <td> </td>
51. </tr>
52. <tr>
53. <td>Testes</td>
55. <td> </td>
56. <td> </td>
57. <td> </td>
58. <td bgcolor="#009999"> </td>
59. <td bgcolor="#009999"> </td>
60. <td bgcolor="#009999"> </td>
61. </tr>
62. <tr>
63. <td>Documentação</td>
65. <td> </td>
66. <td bgcolor="#009999"> </td>
68. <td bgcolor="#009999"> </td>
69. <td bgcolor="#009999"> </td>
70. </tr>
71. </table>
72. </body>
73. </html>

Exercício 1b
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
5. <title>Compras - Lista para o Supermercado</title>
6. </head>
7. <body>
8. <p>Litsa de Compras - Supermercado </p>
9. <ul>
10. <li>Frios
11. <ul>
12. <li>Queijo</li>
13. <li>Presunto</li>
14. </ul>
15. </li>
16. <li>Panificadora
17. <ul>
18. <li>Pão Francês</li>
19. <li>Bolo de Cenoura</li>
20. <li>Bolacha doce</li>
21. </ul>
22. </li>
23. <li>Açougue
24. <ul>
25. <li>Carne moída</li>
26. <li>Acém</li>
27. </ul>
28. </li>
29. <li>Material de Limpeza
30. <ul>
31. <li>Detergente</li>
32. <li>Sabão em Pó</li>
33. <li>Cera líquida</li>
34. <li>Amaciante</li>
35. </ul>
36. </li>
37. <li>Frutaria
38. <ul>
39. <li>Maçã</li>
40. <li>Banana</li>
41. <li>Melancia</li>
42. <li>Morango</li>
43. </ul>
44. </li>
45. </ul>
46. </body>
47. </html>

Exercício 1c
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <head>
5. <title>Bookmark</title>
6. </head>
7. <body>
8. <h1>Bookmarks - Lista de Sites Úteis</h1>
9. <ul>
10. <li><a href="https://www.google.com.br/" target="_blank">Google</a></li>
11. <li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>
12. <li><a href="http://ead.utfpr.edu.br/" target="_blank">EaD UTFPR</a></
li>
13. <li><a href="https://www.facebook.com/" target="_blank">Facebook</a></
li>
14. <li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
15. <li><a href="http://br.linkedin.com/" target="_blank">Linked.in</a></li>
16. <li><a href="http://www.w3c.org/" target="_blank">W3C</a></li>
17. <li><a href="https://www.internetsociety.org/" target="_blank">Internet
Society</a></li>
18. <li><a href="http://www.doodle.com" target="_blank">Doodle</a></li>
19. <li><a href="https://pt.surveymonkey.com/" target="_blank">Survey Mon-
key</a></li>
20. </ul>
21. </body>
22. </html>
Exercício 1d
3. <head>
5. <title>Formulário</title>
6. </head>
7. <body>
8. <p>Formulário</p>
9. <form id="frmCadastro" name="frmCadastro" method="post" action="">
10. <p>
11. <label for="edtNome">Nome</label>
12. <input type="text" name="edtNome" id="edtNome" />
13. </p>
14. <p>
15. <label for="edtUF">UF</label>
16. <select name="edtUF" id="edtUF">
17. <option value="AC">AC</option>
18. <option value="AM">AM</option>
19. <option value="AP">AP</option>
20. <option value="BA">BA</option>
21. <option value="CE">CE</option>
22. <option value="DF">DF</option>
23. <option value="ES">ES</option>
24. <option value="GO">GO</option>
25. <option value="MA">MA</option>
26. <option value="MG">MG</option>
27. <option value="MS">MS</option>
28. <option value="MT">MT</option>
29. <option value="PA">PA</option>
30. <option value="PB">PB</option>
31. <option value="PE">PE</option>
32. <option value="PI">PI</option>

33. <option value="PR">PR</option>
34. <option value="RJ">RJ</option>
35. <option value="RN">RN</option>
36. <option value="RO">RO</option>
37. <option value="RR">RR</option>
38. <option value="RS">RS</option>
39. <option value="SC">SC</option>
40. <option value="SC">SE</option>
41. <option value="SP">SP</option>
42. <option value="TO">TO</option>
43. </select>
44. </p>
45. <p>
46. <label for="edtDtNasc">Data de Nascimento</label>
47. <input type="text" name="edtDtNasc" id="edtDtNasc" />
48. </p>
49. <p>Sexo
50. <input type="radio" name="radio" id="edtSexo" value="F" />
51. Feminino
52. <input type="radio" name="radio" id="edtSexo" value="M" />
53. Masculino
54. </p>
55. </form>
56. <p> </p>
57. <p> </p>
58. </body>
59. </html>
Exercício 2

3. <head>
5. <title>Boletim Escolar</title>
6. </head>
7. <body>
8. <table width="500" border="1" cellspacing="0" cellpadding="10" bordercol-
or="#000">
9. <tr class="titulo1">
10. <th>Boletim Escolar</th>
11. <th colspan="6">Aluno<br />
12. Fernando Schutz</th>
13. <th><p>Ano<br />
14. 2010</p></th>
15. </tr>
17. <td bgcolor="#999999">Disciplinas</td>
18. <td bgcolor="#999999">N1</td>
19. <td bgcolor="#999999">F1</td>
20. <td bgcolor="#999999">N2</td>
21. <td bgcolor="#999999">F2</td>
22. <td bgcolor="#999999">NF</td>
23. <td bgcolor="#999999">MF</td>
24. <td bgcolor="#999999">Resultado</td>
25. </tr>
26. <tr>
27. <td>Matemática</td>
28. <td>10,0</td>
29. <td>0</td>
30. <td>8,0</td>
31. <td>2</td>
32. <td>2</td>
33. <td>9,0</td>

34. <td>Aprovado</td>
35. </tr>
36. <tr>
37. <td>História</td>
38. <td>7,0</td>
39. <td>1</td>
40. <td>7,6</td>
41. <td>4</td>
42. <td>5</td>
43. <td>7,3</td>
45. </tr>
46. <tr>
47. <td>Geografia</td>
48. <td>8,0</td>
49. <td>1</td>
50. <td>6,0</td>
51. <td>10</td>
52. <td>11</td>
53. <td>7,0</td>
55. </tr>
56. <tr>
57. <td>Língua Portuguesa</td>
58. <td>9,0</td>
59. <td>0</td>
60. <td>7,6</td>
61. <td>2</td>
62. <td>2</td>
63. <td>8.3</td>
65. </tr>
66. </table>
67. </body>
68. </html>
Atividades - Aula 3
Exercício 1

3. <head>
5. <title>Boletim Escolar</title>
7. .titulo1 {
8. font-family: Verdana, Geneva, sans-serif;
9. font-size: 12px;
10. font-weight: bold;
11. color: #FFF;
13. }
14. .titulo2 {
18. color: #000;
19. background-color: #39C;

21. }
22. .disciplinas {
25. }
26. .notas_faltas {
29. text-align: right;
30. }
31. .resultados {
34. color: #093;
35. }
36. </style>
37. </head>
38.
39. <body>
40. <table width="500" border="1" cellspacing="0" cellpadding="10" border-
color="#036">
42. <th>Boletim Escolar</th>
43. <th colspan="6">Aluno<br />
44. Fernando Schutz</th>
45. <th><p>Ano<br />
46. 2010</p></th>
47. </tr>
49. <td>Disciplinas</td>
50. <td>N1</td>
51. <td>F1</td>
52. <td>N2</td>
53. <td>F2</td>
54. <td>NF</td>
55. <td>MF</td>
56. <td>Resultado</td>
57. </tr>
58. <tr>
59. <td class="disciplinas">Matemática</td>
60. <td class="notas_faltas">10,0</td>
61. <td class="notas_faltas">0</td>
66. <td class="resultados">Aprovado</td>
67. </tr>
68. <tr>
69. <td class="disciplinas">História</td>
77. </tr>
78. <tr>
79. <td class="disciplinas">Geografia</td>

87. </tr>
88. <tr>
89. <td class="disciplinas">Língua Portuguesa</td>
95. <td class="notas_faltas">8.3</td>
97. </tr>
98. </table>
99. </body>
100. </html>
Exercício 2
1. <html>
2. <head>
4. <title>Curriculo</title>
6. .foto {
7. background-attachment: scroll;
8. background-image: url(foto_jolie.png);
9. background-repeat: no-repeat;
10. height: 200px;
11. width: 150px;
12. }
13. body {
14. font-family: Tahoma, Geneva, sans-serif;
16. }
17. .nome {
20. }
21. .nome p {
23. color: #999;
24. }
25. .tit_secao {
26. font-family: Arial, Helvetica, sans-serif;
29. color: #FFF;
31. padding-top: 12pt;
32. padding-bottom: 18pt;
33. }
34. .tit_subsecao {
38. color: #FFF;
39. background-color: #AAA;
40. padding-top: 6pt;
41. padding-bottom: 9pt;
42. }
43. .texto {
46. color: #333;
47. text-align: justify;

48. }
49. a {
53. color: #F90;
54. text-decoration: none;
55. }
56. </style>
57. </head>
58. <body>
59. <table width="700" border="0" cellspacing="0" cellpadding="10">
60. <tr>
61. <td height="187" class="foto"> </td>
62. <td class="nome">Angelina Jolie
63. <p>angelina.jolie@gmail.com<br>
64. 34 anos</p></td>
65. </tr>
66. <tr class="tit_secao">
67. <td>Dados pessoais</td>
68. <td> </td>
69. </tr>
70. <tr>
71. <td> </td>
72. <td class="texto"><strong>Angelina Jolie</strong> (Los Angeles, 4
de Junho de 1975) é uma atriz de cinema e de televisão estadunidense, vence-
dora de um <a href="http://oscar.go.com/" target="_blank">Oscar</a>, dois <a
href="http://www.sagawards.org" target="_blank">Screen Actors Guild Awards</
a>, e três Prêmios <a href="http://www.goldenglobes.org" target="_blank">Globos
de Ouro</a>. Jolie promove causas humanitárias, e é conhecida por seu trabalho
com refugiados como embaixadora da Alto Comissariado das Nações Unidas para os
Refugiados (ACNUR).</td>
73. </tr>
75. <td>Prêmios</td>
76. <td> </td>
77. </tr>
78. <tr class="tit_subsecao">
79. <td>Oscar</td>
80. <td> </td>
81. </tr>
82. <tr>
83. <td> </td>
84. <td class="texto">2000 - Vencedora - Melhor atriz (coadjuvante/
secundária), por Girl, Interrupted.<br>
85. 2009 - Indicada como melhor atriz, por Changeling.</td>
86. </tr>
87. <tr class="tit_subsecao">
88. <td>Globo de Ouro</td>
89. <td> </td>
90. </tr>
91. <tr>
92. <td> </td>
93. <td class="texto">1998 - Vencedora - Melhor atriz (coadjuvante/
secundária) em filme/série para televisão, por George Wallace;<br>
94. 1999 - Vencedora - Melhor atriz em filme para televisão, por
Gia<br>
95. 2000 - Vencedora - Melhor atriz (coadjuvante/secundária), por
Girl, Interrupted;<br>
96. 2008 - indicada como melhor atriz de drama, por A Mighty Heart<br>
97. 2009 - Indicada como melhor atriz de drama, por Changeling<br>
98. 2011 - Indicada como melhor atriz comédia/musical, por The Tourist</
td>
99. </tr>
101. <td>Filhos</td>
102. <td> </td>
103. </tr>

104. <tr>
105. <td> </td>
106. <td class="texto"><p>Angelina tem 6 filhos com Brad Pitt, sendo três
adotivos e três biológicos.</p>
107. <ul>
108. <li> Maddox Chivan Jolie-Pitt - (Kendal, Camboja, 5 de Agosto de
2001), adotado no Camboja em 10 de Março de 2002.</li>
109. <li> Pax Thien Jolie-Pitt - (Ho Chi Minh, Vietname, 29 de Novem-
bro de 2003), adotado no Vitename dia 15 de Março de 2007. Pax foi abandonado
em um hospital local por sua mãe biológica, Pham Quang Sang.</li>
110. <li> Zahara Marley Jolie-Pitt - (Awassa, Etiópia, 8 de Janeiro
de 2005), adotada na Etiópia dia 6 de julho de 2005.</li>
111. <li> Shiloh Nouvel Jolie-Pitt - (Swakopmund, Namíbia, 27 de Maio
de 2006), primeira filha biológica do casal Angelina Jolie e Brad Pitt.</li>
112. <li> Os gêmeos Knox Léon Jolie-Pitt e Vivienne Marcheline Jolie-
Pitt (Nice, França, 12 de julho de 2008) filhos biológicos de Angelina Jolie e
Brad Pitt.</li>
113. </ul></td>
114. </tr>
115. </table>
116. </body>
117. </html>
Exercício 3

3. <head>
5. <title>Menus com iFrame</title>
7. .opc_menu {
10. }
11. .opc_menu a {
15. color: #FFF;
16. text-decoration: none;
17. line-height: 30px;
18. }
19. .footer {
23. color: #FFF;
25. }
26. </style>
27. </head>
28. <body>
29. <table width="800" border="0" cellspacing="0" cellpadding="0">
30. <tr>
31. <td><table width="100%" border="5" cellspacing="5" cellpadding="0"
bordercolor="#FFFFFF">
32. <tr>
33. <td class="opc_menu"><a href="http://ead.utfpr.edu.br"
target="frmConteudo">EAD UTFPR</a></td>
34. <td class="opc_menu"><a href="http://www.youtube.com"
target="frmConteudo">Youtube</a></td>
35. <td class="opc_menu"><a href="http://www.utfpr.edu.br"
target="frmConteudo">UTFPR</a></td>
36. <td class="opc_menu"><a href="http://www.ufmt.br"

target="frmConteudo">UFMT</a></td>
37. <td class="opc_menu"><a href="http://www.w3c.org"
target="frmConteudo">W3C</a></td>
38. </tr>
39. </table></td>
40. </tr>
41. <tr>
42. <td bgcolor="#FF6666">
43. <p> </p>
44. <p align="center">
45. <iframe frameborder="0" width="90%" height="400" src="http://
ead.utfpr.edu.br" name="frmConteudo"></iframe>
46. </p>
47. <p> </p>
48. </td>
49. </tr>
50. <tr>
51. <td height="30" bgcolor="#CC3333" class="footer">Clique nos itens do
menu para abrir as páginas no centro</td>
52. </tr>
53. </table>
54. </body>
55. </html>
Atividades - Aula 4
Exercício 1
1. <html>
2. <head>
3. <title>Mostra nome</title>
4. </head>
5. <body>
6. <form id="form1" name="form1" method="post" action="">
7. <label for="edtNome">Nome</label>
8. <input type="text" name="edtNome" id="edtNome" onblur="window.
alert(this.value);" />
9. </form>
10. </body>
11. </html>
Exercício 2
1. <html>
2. <head>
4. <title>Verificações</title>
5. <script language="javascript">
6. function verificar(formulario){
7. var msg = "";
8. // verificar se o nome foi informado
9. if (formulario.edtNome.value == "") {
10. alert("Nome não informado");
11. return false;
12. }
13.
14. // idade atual
15. var data = formulario.edtDtNasc.value.split("/");
16. var data_nasci = new Date(data[2],(data[1]-1),data[0]);

17. var data_atual = new Date();
18. var idade = (data_atual.getFullYear() - data_nasci.getFullY-
ear());
19.
20. // idade para CNH
21. if (idade >= 18) {
22. msg = " - Tem idade para requerer C.N.H.\n";
23. } else {
24. msg = " - Não tem idade para requerer C.N.H.\n";
25. }
26.
27. // idade para votar
28. if (idade >= 16) {
29. if (idade >= 18 && idade <= 60) {
30. msg += " - Voto obrigatório\n";
31. } else {
32. msg += " - Voto facultativo\n";
33. }
34. } else {
35. msg += " - Não tem idade para votar\n";

36. }
37.
38. // dia da semana em que nasceu
39. var dia_semana = data_nasci.getDay();
40. switch(dia_semana) {
41. case 0: msg += " - Nasceu num domingo"; break;
42. case 1: msg += " - Nasceu numa segunda-feira";
break;
43. case 2: msg += " - Nasceu numa terça-feira"; break;
44. case 3: msg += " - Nasceu numa quarta-feira"; break;
45. case 4: msg += " - Nasceu numa quinta-feira"; break;
46. case 5: msg += " - Nasceu numa sexta-feira"; break;
47. case 6: msg += " - Nasceu num sábado"; break;
48. }
49.
50. msg = formulario.edtNome.value+" ("+idade+" anos):\n"+msg;
51. alert(msg);
52. }
53. </script>
54. </head>
55.
56. <body>
57. <form id="frmVerifs" name="frmVerifs" method="get" action="">
58. <p>
59. <label for="edtNome">Nome</label><br />
60. <input type="text" name="edtNome" id="edtNome" />
61. </p>
62. <p>
63. <label for="edtDtNasc">Data Nascimento</label><br />
64. <input type="text" name="edtDtNasc" id="edtDtNasc" />
65. </p>
66. <p><button onclick="verificar(this.form);">Verificar</button>
67. </p>
68. </form>
69. </body>
70. </html>

Exercício 3
1. <html>
2. <head>
4. <title>Verificações</title>
5. <script language="javascript">
6. function saudacao(){
7. var msg = "";
8. var data_atual = new Date();
9. if (data_atual.getHours() < 12) {
10. msg = "Bom dia";
11. } else {
12. if (data_atual.getHours() < 19) {
13. msg = "Boa tarde";
14. } else {
15. msg = "Boa noite";
16. }
17. }
18. alert(msg);
19. }
20. </script>
21. </head>
22.
23. <body onLoad="saudacao();">
24. <h1>Página de verificação de momento</h1>
25. </body>
26. </html>
Atividades - Aula 5
Exercício 1a
1. <html>
2. <head>
3. <title>Calculadora</title>
4. </head>
5. <body>
6. <?php
7. $nome = "Fernando Schutz";
8. $email = "fernando@utfpr.edu.br";
9. echo $nome;
10. echo "<br />";
11. echo $email;
12. ?>
13. </body>
14. </html>
Exercício 1b
1. <html>
2. <head>
4. </head>
5. <body>
6. <?php
7. $nome = "Fernando Schutz";
8. $email = "fernando@utfpr.edu.br";
9. echo $nome."<br />".$email;
10. ?>
11. </body>
12. </html>

Exercício 1c
1. <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
2. <head>
3. <title>Valida Data</title>
4. </head>
5. <body>
6. <h1>Validador de Data</h1>
7. <hr>
8. <fieldset>
9. <legend><p>Informe a data</p></legend>
10. <form method="post" action="#">
11. Data:
12. <input type="text" name="data" size="10" />
13. <input type="submit" name="validar" value="Validar" />
14. </form>
15. </fieldset>
16. <?php
17. if(isset($_POST['data'])){
18. $data = $_POST['data'];
19. ValidaData($data);
20. }
21.
22. function ValidaData($dat){
23. $data = explode("/","$dat"); // fatia a string $dat em pedados,
usando / como referência
24. $d = $data[0];
25. $m = $data[1];
26. $y = $data[2];
27. $res = checkdate($m,$d,$y);
28. if ($res == 1){
29. echo "<fieldset><p>data ok!</p></fieldset>";
30. } else {
31. echo "<fieldset><p>data invalida!</p></fieldset>";
32. }
33. }
34. ?>
35. </body>
36. </html>
Exercício 2
Arquivo aula5_02_form.php (principal)

1. <html>
2. <head>
4. </head>
5. <body>
6. <form name="formulario" method="post" action="cap5_02_calc.php">
7. <label>Numero 1:</label>
8. <input type="text" name="n1"/>
9.
10. <input type="radio" name="operacao" value="Multiplicao" checked>
Multiplicação
11. <input type="radio" name="operacao" value="Divisao"> Divisão
12. <input type="radio" name="operacao" value="Soma"> Soma
13. <input type="radio" name="operacao" value="Subtracao"> Subtração
14.
15. <label>Numero 2:</label>
16. <input type="text" name="n2"/>
17. <input type="submit" value="Calcular">
18. <?php
19. if(isset($_GET["resultado"])){

20. if ($_GET["resultado"] != "") echo '<h3><label>Resultado:</la-
bel>'.$_GET["resultado"].'</h3>';
21. }
22. ?>
23. </body>
24. </html>
Arquivo aula 5_02_calc.php (principal)
1. <?php
2. $n1 = $_POST['n1'];
3. $n2 = $_POST['n2'];
4. $operacao = $_POST['operacao'];
5.
6. function calcular(){
7. global $n1;
8. global $n2;
9. global $operacao;
10. if ($n1 == "" || $n2 == "") return "";
11. switch($operacao){
12. case 'Multiplicacao': $resultado = $n1 * $n2; break;
13. case 'Divisao': $resultado = $n1 / $n2; break;
14. case 'Soma': $resultado = $n1 + $n2; break;
15. case 'Subtracao': $resultado = $n1 - $n2; break;
16. }
17.
18. return($resultado);
19. }
20. header('Location:index.php?resultado='. calcular());
21. ?>
Exercício 3
1. <html>
2. <head>
3. <title>Taboada</title>
4. <link rel="stylesheet" type="text/css" href="index.css">
5. </head>
6. <body>
7. <h1>Calculadora de tabuada</h1>
8. <hr />
9. <fieldset>
10. <legend><p>Caulculadora</p></legend>
11. <form name="formulario" method="get" action="#">
12. <p>
13. <label>Numero:</label>
14. <input type="text" name="numero"/>
15. <input type="submit" value="Calcular">
16. </p>
17. </form >
18. <?php
19. if(isset($_GET["numero"]))
20. if ($_GET["numero"] != "") calcula();
21.
22. function calcula(){
23. echo "<table cellspacing = 0 border = 1 rules = none>";
24. echo "<tr class = linha><td colspan = 5 > Tabuada do " . $_
GET["numero"] . "</td></tr>";
25. for($i=1; $i<=10; $i++){
26. $resultado = $_GET["numero"] * $i ;
27. echo "<tr ";

28. if (($i % 2) == 0) echo "class = linha";
29. echo ">";
30. echo "<td>". $i . "</td>";
31. echo "<td>X</td>";
32. echo "<td>".$_GET["numero"]."</td>";
33. echo "<td>=</td>";
34. echo "<td>". $resultado . "</td>";
35. echo "</tr>";
36. }
37. echo "</table>";
38. }
39. ?>
40. </fieldset>
41. <hr />
42. </body>
43. </html>
Atividades - Aula 6
Exercício 1
O CodeIgniter é um framework de desenvolvimento de aplicações em PHP.

Seu objetivo, por meio de um abrangente conjunto de bibliotecas voltadas às
tarefas mais comuns, de uma interface e uma estrutura lógica simples para
acesso àquelas bibliotecas, é possibilitar que o usuário desenvolva projetos
mais rapidamente do que se estivesse codificando do zero. O CodeIgniter
permite que se mantenha o foco em um projeto, minimizando a quantidade
de código necessário para uma dada tarefa. (fonte: Site oficial)
O Doctrine é um framework de Mapeamento Objeto-Relacional (ou ORM)

para PHP. O ORM é uma técnica de desenvolvimento utilizada para reduzir
a impedância da programação orientada aos objetos utilizando bancos de
dados relacionais. As tabelas do banco de dados são representadas através
de classes e os registros de cada tabela são representados como instâncias
das classes correspondentes. Uma característica fundamental é que não é
necessária a utilização de SQL, pois pode-se realizar qualquer operação de
CRUD sem escrever nenhuma query. (fonte: site oficial do Doctrine)
O Symfony é um framework para aplicações web em PHP5, que implementa

o padrão MVC, tornando possível a criação de aplicações PHP em três cama-
das. Permite que os desenvolvedores façam um trabalho eficiente sobre os
aspectos mais complexos de uma tarefa, e o uso de Boas Práticas garante a
estabilidade de manutenção e atualização das aplicações. Em última análise
um framework torna a programação mais fácil, uma vez que transforma

um pacote de complexas operações em simples afirmações. Um framework
racionaliza o desenvolvimento de muitos padrões empregados para um de-
terminado fim, acrescenta estrutura ao código, levando o programador a es-
crever melhor, mais legível e um código mais sustentável. (fonte: site oficial)
O Zend Framework foi desenvolvido com o objetivo de simplificar o desen-

volvimento web enquanto promove as melhores práticas na comunidade de
desenvolvedores PHP. A arquitetura "use-a-vontade" permite que os desen-
volvedores reutilizem componentes em suas aplicações sem requerer outros
componentes (além das dependências mínimas). O framewor fornece com-
ponentes para os padrões de projeto MVC e Table Gateway que são usados
na maioria das aplicações Zend Framework; fornece ainda componentes
individuais para requisitos comuns no desenvolvimento de aplicações web,
incluindo autenticação e autorização via listas de controle de acesso (ACL),
configuração de aplicações, data caching, filtragem/validação de dados for-
necidos pelo usuário para segurança e integridade de dados, internacionali-
zação, interfaces para funcionalidades AJAX, composição/entrega de email,
indexação e consulta no formato de busca Lucene, e todas as Google Data
APIs com muitos outros web services populares. (fonte: site oficial)
Exercício 02
a) Cria uma conexão com um banco de dados MySql, através da especifica-

ção de servidor, nome de usuário e senha.
b) Divide uma string em um array, utilizando $delimiter como delimitador

desta string para separar os elementos do array.
c) Transformar o conjunto de caracteres informados em $string para maiús-

culo (caixa alta).
d) Inicia uma sessão de memória para o armazenamento de dados que per-

maneçam ativos numa sessão Web.

Referências
ALVAREZ, Miguel Angel. Os manipuladores de eventos em Javascript. Programação
em Javascript II. Criar 2005. Disponível em:< http://www.criarweb.com/artigos/394.
php.> Acesso em: 10 ag.2011.
COULOURIS, George F.; DOLLIMORE, Jean; KINDBERG, Tim (Autor). Sistemas

distribuídos: conceitos e projeto. 4. ed. Porto Alegre, RS: Bookman, 2007. viii, 784p.
ISBN 978-85-60031-49-8.
LEINER, Barry M. et al. Brief History of the Internet. Internet Society. Disponível
em:< http://www.internetsociety.org/internet/internet-51/history-internet/brief-history-
internet. > Acesso em: 07 jul.2011.
JAVA SCRIPTTUTORIAL.Learn to Create Website. Disponível em:< http://www.

w3schools.com> Acesso em: 10 nov.2011.

Obras Consultadas

Apache Labs. The Innovation Laboratories of the Apache Software Foundation. Disponível
em: < http://labs.apache.org/.> Acesso em: 11 nov. 2011.
CHANDLER, David M.; KIRKNER, Bill; MINATEL, Jim. Como montar o seu site na world
wide WEB. Rio de Janeiro: Campus, 1996.
HAHN, Harley; STOUT, Rick (Autor). The internet: complete reference. Berkeley:
Osborne, 1994.
MORIMOTO, Carlos E. Redes: Guia Prático. GDH Press e Sul Editores. São Paulo: 2008.
Disponivel em: < http://www.gdhpress.com.br/redes> Acesso em: 20 nov.2010
PEREIRA, Aisa. Aprenda Internet Sozinho Agora. Disponível em :<http://www.aisa.com.br/

index1.html> Acesso em: 10 nov.2010.
VALENTE, José Armando; ALMEIDA, Maria E. B. de; PRADO, Maria Elisabette B. Brito;
FREIRE, Fernanda Maria Pereira; FAZENDA, Ivani Catarina Arantes; VALLIN, Celso (Autor).
Educação a distância via internet. São Paulo: Avercamp, 2003.

Currículo do Professor-autor
Fernando Schütz possui graduação em Informá-

tica pela Universidade Estadual do Oeste do Para-
ná (2000) e mestrado em Ciências da Computação
pela Universidade Federal de Santa Catarina (2003).
Atualmente é professor de ensino Básico, Técnico
e Tecnológico da Universidade Tecnológica Fede-
ral do Paraná - Campus de Medianeira, e está lo-
tado no Núcleo de Ciência da Computação. Tem
experiência na área de Informática, com ênfase em
Técnicas da Computação, atuando principalmente
nos seguintes temas: Rich Internet Applications, Web Design, Engenharia de
Software para Web, Frameworks e Integração Web e Dispositivos Móveis. Na
área de Empreendedorismo Tecnológico atua no setor de desenvolvimento de
projetos, utilizando técnicas computacionais.
http://lattes.cnpq.br/8912470216819864

Caderno Ling Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Caderno Ling Web

Uploaded by

Copyright:

Available Formats

Programação

© Este caderno foi elaborado pela Universidade Tecnológica Federal do Paraná - PR

Equipe de Revisão Universidade Tecnológica Federal

Equipe de Elaboração Coordenação de Tecnologia na Educação

Revisão de Língua Portuguesa

Dados Internacionais de Catalogação na Publicação

S886 Schütz, Fernando

Programação para web / Fernando Schütz. – Curitiba: Ed. UTFPR, 2013.

1. Sites da Web – Desenvolvimento. 2. HTML (Linguagem de mar-cação de documento).

Bibliotecário: Adriano Lopes CRB 9/1429

Bem-vindo(a) à Rede e-Tec Brasil!

A educação a distância no nosso país, de dimensões continentais e grande diversidade re-

Nós acreditamos em você!

5 Rede e-Tec Brasil

Os ícones são elementos gráficos utilizados para ampliar as formas de

Atenção: indica pontos de maior relevância no texto.

Saiba mais: oferece novas informações que enriquecem o

Glossário: indica a definição de um termo, palavra ou expressão

Mídias integradas: remete o tema para outras fontes: livros,

Atividades de aprendizagem: apresenta atividades em

Reflita: momento de uma pausa na leitura para refletir/escrever

7 Rede e-Tec Brasil

Apresentação Rede e-Tec Brasil 5

Aula 1. Fundamentos da Internet e da

1.2 Exemplos de serviços presentes na

1.3 Aplicativos utilizados para acesso a serviços na WEB

1.4 Desenvolvimento de páginas para WEB 19

Aula 2. Linguagem HTML 27

2.1 Elementos de frases 27

2.2 Texto pré-formatado 28

2.5 Links: âncoras e ligações 33

2.6 Inserção de imagens 34

Aula 3. Formatação de Elementos

3.1 Fundamentos da linguagem 46

3.3 Elementos de formatação 52

3.4 Imagens e configuração de fundo 62

Esta disciplina faz parte do Programa e-Tec Brasil, inserida no Curso de

É um prazer tê-lo(a) conosco nesta jornada que apresentará novos caminhos

Aprender a desenvolver programas e utilizar uma linguagem de programa-

Desejo ótimo aproveitamento.

9 Rede e-Tec Brasil

A internet hoje, principalmente em sua parte gráfica (a WEB), tem uma

Os conteúdos serão apresentados da seguinte forma:

Aula 1: Fundamentos da Internet e da linguagem HTML

Aula 2: Linguagem HTML

Aula 4: Programação WEB lado cliente – Javascript

Aula 5: Programação WEB lado servidor – PHP

Aula 6: Estudo experimental com PHP

Você poderá tirar suas próprias conclusões sobre a evolução da internet,

O conteúdo trata ainda, da formatação de elementos HTML através de Fo-

As últimas aulas do caderno tratam da programação feita no lado servidor.

11 Rede e-Tec Brasil

O principal objetivo deste estudo é que, ao final do curso, você possa:

• identificar as principais diferenças entre a programação dentro e fora da

• formatar sites de forma inteligente;

• construir formas de interação com o usuário de navegadores;

• manipular dados utilizando a linguagem PHP;

Desejo a você sucesso no curso!

Rede e-Tec Brasil 12

Aula 1. Fundamentos da Internet e da Linguagem HTML 15

1.2 Exemplos de serviços presentes na internet 17

1.3 Aplicativos utilizados para acesso a serviços na WEB 18

1.4 Desenvolvimento de páginas para WEB 19

Aula 2. Linguagem HTML 27