Apostila de web - Curso de Programação Básica de Internet

Apostila do Curso de
Programação Básica de
Internet
Rua Maria Concessa de Medeiros, 280 Parque Pinheiros
Taboão da Serra - SP
CEP: 06767-120
Telefone: 4137-0069
E-mail: projetos@caritassaopedroapostolo.com.br
www.caritassaopedroapostolo.com.br

Página - 3 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
SUMARIO
História da Internet............................................................................................... 04
Diferença entre Web e Internet............................................................................. 06
DNS – SISTEMAS DE NOME DE DOMÍNIOS ................................................ 07
Conceito Profissional da Internet ......................................................................... 08
Conceitos Teóricos e suas Funções Práticas ........................................................ 10
Fases do Planejamento ......................................................................................... 10
Linguagens de Programação Web- Definição...................................................... 11
Parte Prática I – Dreamweaver............................................................................. 14
O que é HTML5?.................................................................................................. 26
Exemplos e Exercícios práticos com HTML........................................................ 27
JAVASCRIPT ...................................................................................................... 36
PHP – Personal Home Page.................................................................................. 61
Inserindo Links para compartilhamento de páginas nas redes sociais ................. 74
Inserindo plugs sociais na página......................................................................... 75
Bibliografia e referencias...................................................................................... 77

Página - 4 -
Prezados Alunos,
Sejam Todos Bem Vindos!
Cáritas São Pedro Apóstolo acolhe a todos com alegria e satisfação para o Curso
Básico de Desenvolvimento de Sites. Este curso foi planejado com a intenção de
prepara-los para o mercado de trabalho e por isso, nada melhor do que se preparar
com qualificação profissional. Desta forma apresentamos nesta apostila um conteúdo atual e
dinâmico para apoio nos exercícios e atividades práticas que serão aplicadas pelo docente em sala
de aula. Além disso, para que o curso obtenha sucesso é necessária à parceria dos alunos, docente e
direção.
Desejamos a todos que tenham um bom curso e sucesso profissional!
Atenciosamente,
A Direção.
A

Página - 5 -
História da Internet
Nesta primeira parte da aula é necessário entender o conceito de internet para os dias de
hoje, começando a entender desde os primórdios da sua origem. Vamos entrar no mundo
virtual, ou seja, começar a estudar sobre as primeiras redes de computadores e quais foram
os principais motivadores para a criação desta que é hoje a maior rede de comunicação do
mundo.
Havia uma intensa rivalidade entre duas superpotências no final da década de 50, o mundo
estava em plena Guerra Fria. De um lado o Estados Unidos da América e (EUA) x União
das Repúblicas Socialistas Soviéticas (URSS).
Em 1957, a União Soviética havia lançado o primeiro satélite artificial da Terra, o Sputnik
1. Este fato teve grande repercussão nos Estados Unidos e representou um duro golpe no
orgulho dos americanos. Os americanos imaginaram que, se a União Soviética estava na
frente da corrida espacial, certamente estaria à frente também na produção de bombas
atômicas. Era evidente que o governo americano deveria tomar medidas para alcançar os
soviéticos e, com o tempo, ultrapassá-los na corrida espacial e na produção de bombas
atômicas.
Em 1958, além de iniciar o desenvolvimento de projetos espaciais por meio da NASA
(National Aeronautics and Space Administration), o Departamento de Defesa dos Estados
Unidos criou o ARPA (Advanced Research Projects Agency), com o objetivo de
desenvolver pesquisas cientificas e tecnológicas no campo militar.
No ano de 1962, a ARPA apresentava um grande projeto chefiado por Joseph Carl Robnett
Licklinder (1915-1990), pesquisador do MIT (Massachusetts Institute of Technology), que
consistia na construção de uma ampla rede de comunicação.
Em 1973 foram estabelecidas as primeiras conexões internacionais, integrando à rede
centros de pesquisa da Inglaterra e Noruega. Logo ficou evidente a enorme utilidade desta
rede para a troca de informações cientificas entre universidades, pois todo o acervo dos
bancos de dados e recursos computacionais destas universidades podiam ser
compartilhados amplamente, graças à nova rede de conexão.
A linguagem de rede
Numa rede, para que os computadores se comuniquem, é necessário que “falem o mesmo
idioma”. Esse idioma é chamado de protocolo. Em 1973, a ARPANET funcionava com o
protocolo NCP (Network Control Protocol). A ARPANET tinha crescido tanto que este
protocolo de comutação de pacotes original estava tornando-se inadequado. Naquele ano,
Robert Kahn, pesquisador da ARPA, propôs uma série de

Página - 6 -
melhorias no NCP. Para ajudá-lo nesse trabalho, Kahn chamou Viton Cerf, até então
presidente da International Network Workin Group (Grupo de Trabalho da Rede
Internacional), que havia trabalhado na elaboração do NCP.
Em 1974, Kahn e Cerf publicaram o trabalho “A Protocol for Packet Network
Interconnection”, que especificou detalhes sobre o funcionamento do novo protocolo
proposto por eles: o TCP/IP.
O TCP/IP resolvia o problema com diferentes tipos de redes – com diversos tipos de
máquinas e sistemas operacionais – poderiam ser interconectadas. Muitos outros grupos de
pesquisadores começaram a implementar suas próprias versões do TCP/IP. Os
computadores possuem arquiteturas físicas (Hardware) e lógicas (software) diferentes e
precisam de uma maneira para se comunicar. Esses métodos padronizados de comunicação
que devem ser obedecidos pelos computadores recebem o nome de protocolos.
Os protocolos são responsáveis pelas seguintes tarefas:
 Sincronização entre o transmissor e o receptor.
 Estabelecimento e término de conexões entre dispositivos.
 Controle de fluxo de dados.
 Detecção e correção de erros.
 Retransmissão dos dados em caso de erro.
 Endereçamento de dispositivos.
As redes de computadores tiveram um enorme crescimento e no ano de 1991, a NSFNET,
que restringia o uso de sua estrutura exclusivamente educacional, anunciou a liberação de
seu uso também para fins comerciais. Iniciava-se ai a chamada privatização da NSFNET.
Assim, a rede teve seu crescimento exponencial, dobrando de tamanho de tempos em
tempos.
O termo internet já vinha sendo usado desde os tempos da ARPANET, mas só agora ele
entraria uma definição clara: referir-se a internet era referir-se à rede mundial de
computadores conectados via TCP/IP.
A internet no Brasil iniciou em 1988 e, até 1993, já havia alcançado a posição de trigésimo
país em ordem de atividade, com cerca de 2000 nomes registrados no domínio .br do
Domain Name System (DNS).
Em 1987, já havia sido reconhecida em várias instituições, a importância da utilização das
redes de computadores para comunidade acadêmica, e estavam sendo preparados diversos
projetos independentes que iriam prover soluções parciais, especialmente no Laboratório
Nacional de Computação Cientifica (LNCC), na Fundação de Amparo à Pesquisa do
Estado de São Paulo (FAPESP) e na Universidade Federal do Rio de Janeiro (UFRJ).
A partir de 1995 surgiu a oportunidade para que usuários, fora das instituições acadêmicas,
também obtivessem acesso à internet e que a iniciativa privada viesse a fornecer esse

Página - 7 -
serviço. Em maio do mesmo ano, houve a criação do Comitê Gestor Internet, que teria
como principal finalidade fomentar o desenvolvimento de serviços de internet no Brasil e
recomendar padrões e procedimentos técnicos e operacionais.
Em 1997 a internet se consolidava definitivamente. Pela primeira vez os brasileiros
puderam entregar suas declarações de imposto de renda pela internet. Novas revistas sobre
o assunto foram lançadas e o número de provedores se multiplicava.
Diferença entre WEB e INTERNET
Muitas pessoas acham que a internet e a World Wide Web são a mesma coisa. Isso é
compreensível porque a web recebeu muita publicidade boa e ruim, desde sua criação. Na
verdade, a internet é muito maior que a web. A World Wide Web é uma invenção de
software que permite às pessoas e empresas compartilharem texto e figuras através da
internet. Basicamente, a web é uma coleção enorme (e cada vez maiores) de arquivos de
computador (chamados páginas web) que se interligam quando você usa um programa
chamado de navegador web para visualizá-los na sua tela. Estas páginas da web estão nos
computadores de todo o mundo e possuem hiperlinks. Um hiperlink pode ser uma palavra,
um grupo de palavras, uma figura. Quando você clica em um hiperlink, ele instrui seu
navegador da web para exibir outra página (a qual você vê incorporada ao hiperlink) e
envia-o ao seu novo destino. A World Wide Web é apenas uma parte da internet.
A Internet é um conglomerado de redes em escala mundial de milhões de computadores
interligados pelo TCP/IP que permite o acesso a informações e todo tipo de transferência
de dados. Ela carrega uma ampla variedade de recursos e serviços, incluindo os
documentos interligados por meio de hiperligações da World Wide Web,(“Mundo, largo,
teia”) e a infraestrutura para suportar correio eletrônico e serviços como comunicação
instantânea (Exemplo: Skype) e compartilhamento de arquivos.
A Internet utiliza o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol)
para gerenciar o tráfego das informações entre os vários computadores conectados a ela. A
arquitetura do Protocolo TCP/IP está organizada em quatro camadas, cada uma
responsável por um serviço. Essas camadas são apresentadas na seguinte ordem, do menor
ao maior nível: host/rede, internet-rede, transporte e aplicação. A tabela abaixo
apresenta a arquitetura em camadas do TCP/IP com os protocolos mais comuns que atuam
nelas.
Por meio desses protocolos os dados são divididos em vários pacotes que trafegam por
diferentes caminhos até chegarem ao destino quando são novamente recompostos.
Aplicações HTTP SMTP POP DNS TELNET SNMP IAMP

Página - 8 -
transporte TCP UDP
Inter-rede IP ICMP ARP RARP
Host/rede PPP ETHERNET FDDI TOKEN RING SLIP
Com o protocolo TCP/IP, cada máquina conectada a rede recebe um número composto por
quatro bytes (32 bits), por exemplo, 192.168.0.160. Este é o endereço da máquina. Quando
um site é acessado, a máquina servidora da qual está hospedado o site também possui um
endereço. Já o computador do usuário recebe um endereço do provedor da qual está
conectado, assim não é necessário saber qual endereço utilizar.
Classificação das Redes:
• LAN – LOCAL ÁREA NETWORK – Abrange uma área limitada como um prédio
ou um campus (universidades/escolas).
• WAN – WIDE ÁREA NETWORK- Abrange área geográficas extensas (países
inteiros)
• MAN – METROPOLITAN ÁREA NETWORK – Meio termo entre WAN e LANs,
chegando abranger uma cidade inteira
Tipos de Redes:
• PONTO A PONTO – As redes PONTO A PONTO caracterizam-se por não haver a
figura do servidor. A rede é composta por computadores que podem usar recursos
disponíveis em outros computadores da rede.
• CLIENTE-SERVIDOR – É uma arquitetura de rede onde existem dois módulos
básico na rede: O servidor e os clientes. O servidor é responsável por servir os
clientes.
DNS – SISTEMAS DE NOME DE DOMÍNIOS
O DOMAIN NAME SYSTEM (DNS) faz a conversão do nome de domínio para o número
IP e vice-versa.
Exemplo se ao invés de digitar o endereço www.uol.com.br digitar 200.221.2.45, consigo
acessar a página normalmente. A tarefa é simplificar o trabalho, traduzindo o endereço
numérico IP em uma forma compreensível pela mente humana e que seja fácil de lembrar.
Assim, em vez de digitar 187.84.230.85, digitamos www.caritassaopedroapostolo.com.br.
A cadeia de caracteres que identifica o endereço de um site na Internet dá-se o nome de
Uniform Resource Locator (URL). Por meio da URL é possível acessar páginas HTML,

Página - 9 -
arquivos em um servidor FTP, webmails (e-mails acessados diretamente pelo navegador e
não pelo programa de correio eletrônico), os computadores remotos (TelNet) etc.
http://www.caritassaopedroapostolo.com.br/projetos/projetos-informatica.php
Protocolo Domínio diretório documento php
• Cada tipo de organização tem uma abreviação no endereço do site exemplos:
• .edu: organização educacional
• .gov: entidade governamental
• .int: organização internacional
• .mil: instituição militar
• .net: operadora de rede
• .org: outros tipos de organizações
• .com: organizações comerciais.
O nome do domínio pode ser adquirido através do site: www.registro.br ou pelas empresas
de hospedagem (algumas oferecem o domínio grátis). Após escolher o domínio, deverá
contratar uma empresa para hospedar as páginas. Essas empresas possuem vários
servidores com grande capacidade de armazenamento e que está interligado a outros
servidores. As empresas oferecem serviços como antivírus, backup de arquivos, criação de
contas de e-mails, suporte técnico entre outros. Exemplo de empresas de hospedagem de
sites:
www.uolhost.com.br/hospedagem-de-sites/‎
www.locaweb.com.br/Hospedagem‎
www.redehost.com.br/hospedagem-de-site
www.terraempresas.com.br/
Para quem vai acessar a internet de casa é necessário escolher um provedor de acesso. É
uma empresa ou organização que fornece acesso à internet a pessoas ou empresas. Estes
provedores mantêm conexões com backbones (“espinha dorsal”, computadores conectados
por linhas de grande largura de banda como fibra ópticas, links de satélite e de transmissão
por rádio) de companhias de telecomunicações, que cobram desses provedores pelas suas

Página - 10
-
conexões com os backbones. Os provedores por sua vez, cobram das empresas e usuários
finais pelo acesso.
Alguns provedores:

Página - 11
-
Conceito Profissional da Internet
WEB DESIGN
O web design pode ser visto como uma extensão da prática do design, onde o foco do
projeto é a criação de web sites e documentos disponíveis no ambiente da World Wide
Web.
O web design tende à multidisciplinaridade, uma vez que a construção de páginas web
requer subsídios de diversas áreas técnicas, além do design propriamente dito. Áreas como
a arquitetura da informação, programação, usabilidade, acessibilidade entre outros.
A preocupação fundamental do web designer é agregar os conceitos de usabilidade com o
planejamento da pessoa em destaque interface, garantindo que o usuário final atinja seus
objetivos de forma agradável e intuitiva.
PROGRAMADOR WEB
Um profissional de programação web é responsável pelo desenvolvimento de sites,
portais, fóruns e aplicações voltadas para o ambiente da internet. Normalmente estes
serviços podem ser acessados por meio de um navegador e ficam hospedados em
servidores-web.
WEB MASTER
O Webmaster é um profissional capaz de realizar tarefas tanto de um web
designer (elaboração do projeto estético e funcional de um web site) quanto de um web
developer (que faz a parte da programação, como sistemas de login, cadastro, área
administrativa).
Um webmaster domina uma lista de tecnologias de programação e desenvolvimento. Além
das fundamentais XHTML e CSS, o webmaster precisa dominar tecnologias como Python,
JavaServer Pages, PHP, Perl, Ajax, Rubyon Rails, ASP.NET, Flash e XML. E também
sistemas CMS, como Wordpress, Joomla e Drupal.
ANALISTAS DE SISTEMAS E OUTROS PROFISSIONAIS
Análise de sistemas é a atividade que tem como finalidade a realização de estudos de
processos a fim de encontrar o melhor caminho racional para que a informação possa ser
processada. Os analistas de sistemas estudam os diversos sistemas existentes entre
hardwares (equipamentos), softwares (programas) e o usuário final.
Os seus comportamentos e aplicações são desenvolvidos a partir de soluções que serão
padronizadas e transcritas da forma que o computador possa executar.
Os profissionais da área geram softwares (programas), que são executados em hardwares
(equipamentos) operados por usuários (indivíduos), preparados e treinados em
procedimentos operacionais padronizados, dotados de conhecimentos do software e
hardware para seu trabalho. A partir de então a análise de sistemas é uma profissão cujas
responsabilidades concentram-se na análise do sistema e na administração de sistemas
computacionais. Cabe a este profissional parte da organização, implantação e manutenção
de aplicativos e redes de computadores, ou seja, o analista de sistemas é o responsável pelo
levantamento de informações sobre uma empresa a fim de utilizá-las no desenvolvimento

Página - 12
-
de um sistema para a mesma ou para o levantamento de uma necessidade específica do
cliente para desenvolver este programa específico com base nas informações colhidas.
O profissional geralmente possui conhecimento adquirido em faculdades de Sistemas de
informação, Ciência da computação, Análise de sistemas, Engenharia da
Computação, Processamento de dados, Programação, Informática, Licenciatura em
Computação e ou outras disciplinas similares, mas a ausência de restrições para o
exercício do cargo permite que profissionais capacitados de outras áreas ou mesmo que
não possuem educação superior cumprir este papel nas empresas.
Como é uma ênfase, o foco e o núcleo de trabalho estão voltados para o processo de
desenvolvimento de software, levando em conta a área tecnológica em que irá auxiliar. O
analista de sistemas deve servir como um tradutor entre as necessidades do usuário e o
programa a ser desenvolvido pelo programador. Para isto, deve ter conhecimento
abrangente da área de negócio na qual o sistema será desenvolvido, a fim de que possa
implementar corretamente as regras de negócio.
WEBWRITERS
Eles são os escritores da Web. Esses profissionais são os principais responsáveis por todo
o gerenciamento da informação, seja ela iconográfica, foto, filme, som e, sobretudo, texto.
A área de atuação desses profissionais, portanto, engloba desde o jornalismo até os
conceitos básicos de usabilidade. Sua principal função é tornar mais intuitiva a navegação
dos sites para os internautas.
Exercícios:
Questões:
1) Em que ano a União Soviética lançou o primeiro satélite artificial da Terra? E qual
é o nome deste Satélite?
2) O que foi criado pelo Departamento de Defesa dos Estados Unidos em 1958?
3) Qual foi o projeto apresentado pela ARPA em 1962?
4) O que é Protocolo de Rede?
5) Qual é o nome do Protocolo criado pela ARPANET em 1973?
6) Qual é o nome do atual protocolo de Internet criado em 1974 por Kahn e Cerf?
7) O que significa DNS?
8) Em que ano iniciou a Internet no Brasil?
9) O que é WEB?
10) O que é Internet?
11) Como são classificadas as Redes?
12) Quais são os tipos de redes?
13) Para que serve o DNS?
14) Onde podemos adquirir um domínio para um Site?
15) Cite exemplo de empresas de hospedagem de páginas web?
16) O que é backbones?
17) Como funciona uma rede de computadores?
18) Quem deseja trabalhar como profissional da Internet, deve escolher quais
atividades? Como pode se preparar?
19) De exemplos de protocolos de Rede
20) Quais são as camadas que organizam os protocolos de redes?

Página - 13
-
21) O que é URL?
22) Cite exemplos de tipos de domínios
23) O que significa www. ?
Conceitos teóricos e suas funções práticas
Quando se começa a trabalhar e estudar sobre internet é normal se sentir perdido com
tantos conceitos. Porém antes de iniciar e por a “mão na massa” é necessário no mínimo
três elementos principais: Usabilidade, Navegabilidade, Arquitetura da Informação.
Usabilidade: É o conceito de fazer com que as páginas de um site sejam fáceis de usar. O
ideal é conversar com o cliente a respeito do conteúdo, do público que deseja atingir com
as informações e como deseja que o site interaja com os usuários (sites dinâmicos ou
estáticos);
Navegabilidade: Esse conceito refere-se à forma como se vai de uma página para a outra
em um site. O preceito é básico: caso possa ir de uma página para qualquer outra com
apenas dois cliques, quer dizer que o site tem boa navegação. O contrário é que se for
preciso clicar em um botão ou link para voltar sempre que o visitante quer visitar outra
página é porque está faltando navegabilidade.
Arquitetura da informação: Esse é um principio da usabilidade, consiste no desenho de
uma interface, incluindo todos seus fluxos de navegação e estrutura de conteúdo. Sem uma
Arquitetura da Informação harmoniosa, não há como um site ser usável.
FASES DO PLANEJAMENTO
1ª Fase: Organização de toda a informação a ser inserida;
2ª Fase: Construção do conceito do site e da estrutura de navegação. Nessa fase se define
se o site será um site padrão, um portal etc.
3ª Fase: Wireframe: primeiro ela é feita no papel para só depois ser desenvolvida com
softwares gráficos.
4ª Fase: Testes;
5ª Fase: Publicação do site, depois de oficializar o domínio e o seu provedor de
hospedagem.
Como pensar o site?
Basicamente é possível pensar um site dividindo uma página de internet em duas partes: o
layout, e o conteúdo. Primeiro vamos definir o conteúdo. O primeiro passo é pensar no

Página - 14
-
tema do site. Para que essa etapa fique mais completa poderá ser feito uma pesquisa ou
responder as questões:
Qual o assunto principal do site?
É um site de uma empresa? Ele vai vender o quê?
É um portal sobre um assunto especifico como economia, esportes, religião etc.?
É um site pessoal que vai ser usado como portfólio?
Ao responder essas questões teremos claramente o principal objetivo do site. O próximo
passo é definir sua estrutura:
Quantas seções ele terá?
Quais seções serão as principais?
O que vai ficar em destaque nas barras de navegação?
Quantas e como serão apresentadas as seções secundárias?
Quantas seções vão ser necessárias?
Em geral, os sites simples costumam ter uma página inicial que serve também de
apresentação, uma página sobre a empresa ou sobre o profissional dono do site, uma
terceira que mostra os produtos e serviços e uma última de contato e/ou localização, se for
ao caso de uma empresa.
Conceito
No plano conceitual podemos dividir um site em duas partes principais:
Layout: é a como o site será apresentado. O conjunto de elementos que dão identidade,
usabilidade e navegabilidade à página da Web. Consiste na marca, no menu principal e no
fundo das páginas. O layout é mantido em todas as páginas para criar uma identidade
visual. Devem-se criar páginas baseadas nesse template, acelerando o desenvolvimento e
permitindo que o foco seja a atenção na função das páginas.
Função: cada página deve ter uma definida e distinta das outras páginas, por isso, antes de
construir cada página do site, devem-se definir os objetivos e usar os elementos de design
para alcançá-los.
Linguagens de Programação WEB - Definição
As linguagens de programação são linguagens usadas para a comunicação com o
computador. Estas linguagens são constituídas de comandos, que quando utilizados

Página - 15
-
corretamente, executam uma ação. A programação nos computadores não tem uma data
correta de início. Tudo começou na década de 30, com os primeiros computadores
elétricos. Em 1948, Konrad Zuse publicou sua criação, a linguagem de programação
Plankalkül. Na época, ainda não tinha muita utilidade, então foi esquecida. Antes de a
programação passar para o computador, eram usados cartões de papelão que eram
perfurados, criando códigos.
Nos anos 90 com crescimento da internet, a programação surgiu novas linguagens de
programação especifica para a WEB, como por exemplo: as linguagens Java e Javascript
foram criadas nesta época, ambas relacionadas com a internet, surgiram também a visual
Basic e o Object Pascal.
 Java: Linguagem relativamente simples, orientada para objetos, que foi criada com
a Idea de revolucionar as linguagens de programação.
 PHP (Personal Home Pages): Muito importante para o desenvolvimento de
aplicativos para WEB, esta linguagem esta cada vez mais tomando conta dos Web
sites.
 HTML: (abreviação para a expressão inglesa HyperText Markup Language, que
significa Linguagem de Marcação de Hipertexto) é uma linguagem de
marcação utilizada para produzir páginas na Web. Documentos HTML podem ser
interpretados por navegadores.
 JavaScript é uma linguagem de programação interpretada . Foi originalmente
implementada como parte dos navegadores web para que scripts pudessem ser
executados do lado do cliente e interagissem com o usuário sem a necessidade do
script passar pelo servidor, controlando o navegador, realizando comunicação
assíncrona e alterando o conteúdo do documento exibido.
 O Adobe Dreamweaver, antigo Macromedia Dreamweaver é um software de
desenvolvimento voltado para a web criada pela Macromedia (adquirida
pela Adobe Systems), e que está atualmente na versão CS6.
Suas versões iniciais serviam como um simples editor HTML WYSIWYG ("What You
See Is What You Get", ou "O que você vê é o que você tem"), porém as suas versões
posteriores incorporaram um notável suporte para várias tecnologias web, tais
comoXHTML, CSS, JavaScript, Ajax, PHP, ASP, ASP.NET, JSP, ColdFusion e outras
linguagens Server-side.
 JavaServer Pages (JSP) é uma tecnologia que ajuda os desenvolvedores de
software a criarem páginas web geradas dinamicamente baseadas
em HTML, XML ou outros tipos de documentos. Lançada em 1999 pela Sun
Microssystems, JSP é similar ao PHP, mas usa a linguagem de programação
Java.
Para implantar e executar JavaServer Pages, um servidor web compatível com
um container servlet, como Apache Tomcat, Jetty ou Glassfish, é requerido.
Servidor WAMP5

Página - 16
-
O WAMP5 (que significa Windows, Apache, MySQL, PHP5) é um pacote de programas
que instala automaticamente o Apache 1.331, PHP5, MySQL database, PHPmyadmin e
SQLitemanager. Disponibiliza também suporte ao uso de scripts PHP e comporta vários
add-nos encontrados no site oficial.
Com esse pacote o programador poderá fazer sua página na Internet com muito mais
vantagens e vai incrementar ele com muitos mais recursos. Também tornará o site mais
dinâmico e rápido conforme a sua habilidade e conforme o servidor de onde será
hospedado o site. Também é possível criar um servidor que possa hospedar e armazenar
dados ou páginas da Internet em um banco de dados.
Apache:
É um dos maiores servidores de web livre e foi criado em cima de códigos já prontos.O
servidor é compatível com o protocolo HTTP.
MySQL database:
MySQL é um sistema gerenciador de banco de dados (SGDB) que funciona de forma
estruturada. Possui um excelente desempenho e é um software livre. Compatível com
muitos drivers e também módulos de interfaces para muitas linguagens de programação.
Suporta vários tipos de tabelas.
PHPmyadmin:
Programa desenvolvido para a parte administrativa do PHP. É possível criar e deletar bases
de dados ou tabelas. É possível que você faça alterações nas suas tabelas, campos, enfim,
tudo o que você precisar alterar na sua base de dados.
SQLitemanager:
É o sistema gerenciador do SQL. Você pode aplicar o SQLitemanager na hora que estiver
montando o seu banco de dados com o MySQL database, que também é incluso no pacote
do WAMP5. Quando for instalar o WAMP5, todos os arquivos são copiados no diretório
escolhido.
Criando Folhas de Estilo (CSS)
A linguagem HTML foi originalmente desenvolvida, sobretudo, como um sistema de
codificação universal que permitiria a qualquer pessoa visualizar as mesmas páginas,
independentemente da plataforma do computador que estivesse sendo usada. Ela ofereceu
formatação estrutural (do tipo, “esta linha é um cabeçalho”, “aquela palavra deve ser
enfatizada”), mas não permitiu que os projetistas tivessem muito controle sobre a aparência
da página.
As folhas de estilos CSS servem para criar todos os estilos de fontes que serão usados no
site, como por exemplo: os títulos, subtítulos, corpo de texto, links etc. Assim, todas as
vezes que quisermos mudar algo não será preciso alterar todas as páginas, mas somente um
arquivo. Neste caso deve ser definido alterar o tamanho da fonte de todos os títulos e a cor

Página - 17
-
do corpo do texto será necessário apenas alterar um único arquivo para que todas as
páginas sejam alteradas automaticamente.
Parte Prática I - Dreamweaver
Abra o Dreamweaver e selecione CSS em Create New, para criar um novo arquivo CSS.
Expanda a aba CSS que se encontra do lado direito da sua tela e clique em NEW CSS
RULE que se encontra na parte inferior da aba em propriedades, para criar uma nova regra
de estilo.
Deixe como está, simplesmente dê um nome para o estilo que estamos criando. Neste
Exemplo vamos começar pelos títulos dos textos. Então dê o nome “titulo” e clique em ok.

Página - 18
-
Agora, em Edit font list e dê um clique.
Selecione Add fonts in list Bellow, escolha a fonte arial, clique nas setas viradas à
esquerda e clique em OK.

Página - 19
-
Selecione a nova fonte criada que foi a Arial; use o tamanho 12 para fontes de títulos e
selecione normal para o restante das opções e em color usaremos neste exemplo a cor
#003300. Se quiser pode escolher outra cor. Após feito isso clique em OK.
Agora será necessário fazer isso para os outros estilos que serão utilizados no site. Por
enquanto utilizaremos só mais um estilo, mas quando for necessário basta abrir o arquivo
de estilos novamente e adicionar novas regras de estilos para o seu site ou até alterar as
existentes.

Página - 20
-
Agora crie outro estilo chamado “corpo”, que será utilizado na maior parte dos textos, pois
será a fonte que você irá usar em todos os textos do site.
Crie este estilo com fonte tamanho 10 e cor#000000 (preto)
Seu Script ficará mais ou menos assim:
Devemos salvar o arquivo, mas não deve esquecer que este arquivo deverá ficar na pasta
que estiver o conteúdo do site. Dentro da Pasta com o seu nome (em Documentos) crie
uma pasta com o nome de site em salve lá.
Criando a página Inicial
A página inicial será criada em frames, assim vamos ter um menu estático acima
facilitando para quem visita a sua página. Neste menu colocaremos alguns botões de
acesso rápido como “página inicial” e “contato” depois nas próximas aulas criaremos mais
botões conforme a necessidade do projeto inicial. É importante salientar também que, todas

Página - 21
-
as imagens e arquivos devem ter nomes simples sem o uso de caracteres especiais como,
por exemplo ç e acentos. No caso de uma imagem de fundo que deseja usar, esta deve ser
nomeada como “imagem-de-fundo.jpg”, procure sempre usar hífens ou underlines no lugar
de espaços entre os nomes com mais de uma palavra.
Abra o dreamweaver vá em File>New.
No novo quadro que abriu, selecione “Framesets” no menu categoria e “fixed top” no
menu ao lado e clique em Create.
Aparecerá em sua tela uma janela para a configuração de acessibilidade do site, mas isto
será apresentado em outra aula, por enquanto dê um nome para o frame no Box “title”. Se
preferir pode deixar como está. Neste exemplo o nome será “site”. Clique em “OK” e veja
que será criada uma página com uma divisão na parte superior do documento.
Para concluir a criação da página de frames devemos salvar o documento que foi criado,
pois uma página de frames é constituída de três arquivos HTML, sendo uma página HTML
que retorna na tela duas páginas ao mesmo tempo, uma página na parte superior que será
criado nosso menu de acesso rápido e outra na parte inferior do documento onde será
colocado o conteúdo da página. Então clique em File>Save all para salvar as três páginas
que foram criadas pelo Dreamweaver.

Página - 22
-
Vamos primeiro salvar a página que carrega os frames como ela será a primeira página a
ser acessada pelo usuário da internet ela deverá ter o nome de índex.html ou índex.htm.
Perceba que após clicar em salvar aparecerá novamente a caixa “Save As”, agora devemos
salvar a página onde será colocado o conteúdo do site. Note que a parte de baixo do
documento foi selecionada automaticamente. Caso deseje criar uma página com mais
frames fique atento a qual parte o dreamweaver selecionou automaticamente, pois os
nomes das páginas serão muito importantes depois na criação de links.
Salve com o nome de “inicial.html”.

Página - 23
-
Agora é só salvar a página onde ficará o nosso menu rápido, como “menu_superior.html”.
Repare novamente que a parte superior da página foi selecionada automaticamente pelo
programa. Pronto, agora já podemos começar a trabalhar no layout do site.
Definindo propriedades da página
Para definir as propriedades das páginas que você criou, clique com o botão direito do
mouse sobre algum espaço da página que esteja em branco e selecione a opção “Page
Properties”.

Página - 24
-
Agora, nas propriedades da página, devemos escolher a cor de fundo e definir as margens.
Neste exemplo iremos usar como cor de fundo (color background) a cor: #0033FF (azul
claro). E as margens devemos definir todos os valores como “0" (zero).
.

Página - 25
-
Faça agora o mesmo com a parte inferior do documento para que fique como a figura
abaixo.
Criando Layout da página
Estas páginas serão criadas com base em tabelas. Para que tudo ocorra bem, não podemos
esquecer de nomeá-las após a criação, isso será feito simplesmente para o caso de ocorrer
programações em outras linguagens como ASP, PHP, couldFusion, entre outros. O que não
será feito agora, mas iremos aprender. Primeiro criaremos a tabela da página superior para
que ela seja selecionada. Verifique se na aba acima da página está o nome da página que
você selecionou, no caso “menu_superior.html”, e depois clique em Table na barra de
ferramentas localizada abaixo da barra de menus.
Em “Table Size” coloque o valor 1 (um) para “rows” e “columns” para que seja criada
apenas uma linha sem divisões na tabela. Em Table width coloque o valor 750 e ao lado

Página - 26
-
deixe marcado como pixels, e insira o valor 0 (zero) em “Border Trickness”, “Cell
padding” e “Cell spacing”, para que não tenha borda e nem espaçamento entre tabelas
externas e internas. O restante deixe como está e clique em OK.
Dê um clique na borda da tabela criada e veja que na parte inferior do programa
apareceram as propriedades da tabela. Vá a “ID Table” e dê um nome. Como foi dito
acima, é melhor nomear as tabelas caso seja necessário fazer algum tipo de programação
futuramente. No campo definir como menu_superior, você poderá colocar qualquer nome,
mas procure usar nomes que sejam fáceis de utilizar depois. Também altere para “Center”
a opção “Align” para que nossa tabela fique centralizada na página.

Página - 27
-
Agora é só selecionar o arquivo que você queira usar como fundo. Selecione a imagem
“fundo_menu_superior.jpeg” dentro da pasta
Devemos ajustar a tabela para que fique do tamanho correto da imagem. Para isso basta
parar o mouse sobre a linha inferior da tabela e arrastar para cima ou para baixo. Tente
deixar exatamente do tamanho da imagem, pois se você expandir demais esta tabela a
imagem se duplicará.
Da mesma forma faça isso com a página de frames. Com o mouse em cima da linha que
divide sua página, clique e arraste para cima fazendo com que a página superior fique com
o tamanho exato da sua tabela.

Página - 28
-
Agora vamos criar o layout da parte inferior da página criando uma tabela onde vai ficar a
imagem de apresentação do seu site. Clique em tabela e crie uma tabela com um Lina e
uma coluna de 750 pixels e coloque o valor 0 para os outros itens para que não haja
espaçamento nem bordas entre as outras tabelas.
Também selecione a imagem que deverá ficar como fundo desta tabela que será a imagem
com o nome de “background_topo.jpg” localizada na pasta de imagens. Não se esqueça de
ajustar a tabela para o tamanho exato da imagem como foi visto anteriormente. Seu site
deverá ficar como na figura abaixo.

Página - 29
-
Dê um clique fora da tabela e pressione Shift+Enter para que se pule uma linha simples no
dreamwaver. Agora valos colocar mais uma tabela onde ficara a estrutura do nosso site.
Você poderá utilizar o mesmo procedimento usado anteriormente para inserir tabelas.
Alterando apenas a figura a ser utilizada, que será a figura “backgroud_base.jpg” O site
deverá ficar mais ou menos assim:

Página - 30
-
O que é o HTML5?
O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras
de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que
formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.
Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento
possibilitando o desenvolvedor a modificar as características dos objetos de forma não
intrusiva e de maneira que seja transparente para o usuário final. Ao contrário das versões
anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho
da melhor maneira possível. O HTML5 permite por meio de suas APIs a manipulação das
características destes elementos, de forma que o website ou a aplicação continue leve e
funcional.
O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do
HTML não continham um padrão universal para a criação de seções comuns e específicas
como rodapé, cabeçalho, sidebar, menus e etc. Não havia um padrão de nomenclatura de
IDs, Classes ou tags. Não havia um método de capturar de maneira automática as
informações localizadas nos rodapés dos websites. Há outros elementos e atributos que sua
função e significado foram modificados e que agora podem ser reutilizados de forma mais
eficaz. Por exemplo, elementos como B ou I que foram descontinuados em versões
anteriores do HTML agora assumem funções diferentes e entregam mais significado para
os usuários. O HTML5 modifica a forma de como escrevemos código e organizamos a
informação na página. Seria mais semântica com menos código. Seria mais interatividade
sem a necessidade de instalação de plug-ins e perda de performance. É a criação de código
Inter operável, pronto para futuros dispositivos e que facilita a reutilização da informação
de diversas formas.
O WHATWG tem mantido o foco para manter a retro compatibilidade. Nenhum site
deverá ter de ser refeito totalmente para se adequar aos novos conceitos e regras. O
HTML5 está sendo criado para que seja compatível com os browsers recentes,
possibilitando a utilização das novas características imediatamente.
Exemplos e Exercícios Práticos com HTML
A estrutura básica do HTML5 continua sendo a mesma das versões anteriores
da linguagem, há apenas uma exceção na escrita do Doctype. Segue abaixo
como a estrutura básica pode ser seguida:
1 <!DOCTYPE HTML>
2 <html lang="pt-br">
3 <head>
4 <meta charset="UTF-8">
5 <link rel="stylesheet" type="text/css" href="estilo.css">
6 <title></title>
7 </head>
8 <body>

Página - 31
-
9 <p>Estrutura básica de um HTML</p>
10
11 <pre>
12 <!DOCTYPE HTML><br>
13 <html lang="pt-br"><br>
14 <head><br>
15 <meta charset="UTF-8"><br>
16 <link rel="stylesheet" type="text/css"
href="estilo.css"><br>
17 <title></title><br>
18 </head><br>
19 <body><br>
20
21 </body><br>
22 </html><br>
23 </pre>
24 <a href="javascript: history.go(-1)">Voltar para o artigo</a>
25
26 </body>
27 </html>
O Doctype
O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
<!DOCTYPE html>
O Doctype indica para o navegador e para outros meios qual a especificação
de código utilizar. Em versões anteriores, era necessário referenciar o DTD
diretamente no código do Doctype. Com o HTML5, a referência por qual DTD
utilizar é responsabilidade do Browser. O Doctype não é uma tag do HTML, mas uma
instrução para que o browser tenha informações sobre qual versão de código a marcação
foi escrita.
O elemento HTML
O código HTML é uma série de elementos em árvore onde alguns elementos
são filhos de outros e assim por diante. O elemento principal dessa grande
árvore é sempre a tag HTML.
<html lang="pt-br">
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal
do documento. Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele
pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.
Para encontrar a listagem de códigos das linguagens, acesse:
http://www.w3.org/International/questions/qa-choosing-language-tags.
HEAD
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os
metadados. Metadados são informações sobre a página e o conteúdo ali publicado.
Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual tabela de caracteres a
página está utilizando.
<meta charset="utf-8">
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:

Página - 32
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Essa forma antiga será também suportada no HTML5. Contudo, é melhor que
você utilize a nova forma.
A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o
acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet.
Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama
Unicode. A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de
cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabela padrão com
o maior número de caracteres possível. Atualmente a maioria dos sistemas e browsers
utilizados por usuários suportam plenamente Unicode. Por isso, fazendo seu sistema
Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro
lugar do mundo. O que o Unicode faz é fornecer um único número para cada caractere, não
importa a plataforma, nem o programa, nem a língua.
Tag LINK
Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros
documentos e a tag LINK, que são links para fontes externas que serão usadas no
documento. No nosso exemplo há uma tag LINK que importa o CSS para nossa página:
<link rel="stylesheet" type="text/css" href="estilo.css">
O atributo rel="stylesheet" indica que aquele link é relativo à importação de um arquivo
referente a folhas de estilo.Há outros valores para o atributo REL, como por exemplo o
ALTERNATE:
<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/">
Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um
caminho alternativo via Atom FEED. No HTML5 há outros links relativos que você pode
inserir como o rel="archives" que indica uma referência a uma coleção de material
histórico da página. Por exemplo, a página de histórico de um blog pode ser referenciada
nesta tag.
Exercícios:
1) Abra o bloco de notas e copie o código abaixo, acrescente mais opções para o menu,
salve com a extensão.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu em CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

Página - 33
-
<meta name="ROBOTS" content="ALL" />
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>

<ul id="menu">
<li><a href="index.htm">Primeiro Item</a></li>
<li><a href="index.htm">Segundo Item</a></li>
<li><a href="index.htm">Terceiro Item</a></li>
<li><a href="index.htm">Quarto Item</a></li>
<li><a href="index.htm">Quinto Item</a></li>
</ul>

</body>
</html>
2) Crie o código HTML abaixo que exibirá um titulo no Browser e as diversas formas
de apresentação de cabeçalhos de páginas. Salve com o nome “exercicio2.html”.
Código:
<HTML>
<HEAD>
<TITLE>Exercício 2</TITLE>
</HEAD>
<BODY>
<H1>Este é um cabeçalho de nível 1</H1>

Página - 34
-
</BODY>
</HTML>
3) Crie o código HTML abaixo que exibirá um título no Browser e as diversas formas
de apresentação de cabeçalhos de página, testando o alinhamento do texto. Salve o
arquivo com o nome”exercicio4.html>
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Este é um cabeçalho de nível 1</H1>
<H2 ALING=RIGHT>Este é um cabeçalho de nível 2</H2>
<H3 ALIGN+RIGHT>Este é um cabeçalho de nível 3</H3>
<H4 ALIGN=RIGHT>Este é um cabeçalho de nível 4</H4>
<H5 ALIGN=RIGHT> Este é um cabeçalho de nível 5</H5>
<H6 ALIGN=LEFT>Este é um cabeçalho de nível 6</H6>
</BODY>
</HTML>
4) Crie o código HTML abaixo que testará a TAG para quebra de linha. Salve o
arquivo com o nome “exercicio4.html”.
Código:
<HTML>
<HEAD>
<TITLE>Exercício 5<?TITLE
</HEAD>
<BODY>

Página - 35
-
<H1 ALIGN=CENTER>Este é um cabeçalho de nível 1</H1>
<BR>
<H2 ALIGN=RIGTH> Este é um cabeçalho de nível 2</H2>
<H3ALIGN=RIGHT>Este é um cabeçalho de nível 3</H3>
<BR>
<BR>
<H4 ALIGN=RIGHT> Este é um cabeçalho de nível 4</H4>
<H5 ALIGN=RIGHT>Este é um cabeçalho de nível 5</H5>
<BR><BR><BR>
<H6 ALIGN=LEFT>Este é um cabeçalho de nível 6</H6>
</BODY>
</HTML>
5) Crie o código HTML abaixo que exibirá um título no Browser e as diversas formas
de apresentação de cabeçalhos de página, testando o alinhamento do texto. Salve o
arquivo com o nome: “exercicio5.html”
Código:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Testando parágrafos</H1>
<BR>
<P ALIGN=CENTER>Quem um dia irá dizer que existe razão nas coisas feitas pelo
coração?<BR>(Renato Russo – “Eduardo e Monica”)</P>
<P ALIGN=RIGHT> “É preciso amar as pessoas como se não houvesse amanhã...”</P>
</BODY>
</HTML>

Página - 36
-
6) Crie o código HTML para testar o uso de linhas horizontais. Salve o arquivo com o
nome “exercicio6.html”.
Código:
<HTML>
<HEAD>
<TITLE>Exercícios 6</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Testando parágrafos</H1>
<HR SIZE=7>
<BR>
<P ALIGN=CENTER>Na distancia é tão difícil ser amigo de
alguém<BR>(PE Fabio de Melo – Trecho da Música Eu espero)
<HR WIDTH=50%>
<HR SIZE=30 WIDTH=2 ALIGN=LEFT>
<P ALIGN=RIGHT> Se você soubesse o quanto é intenso no meu peito o
amor que tenho por você e o que guardo aqui dentro...</P>
<HR WIDTH=30% ALIGN=RIGHT NOSHADE>
</BODY>
</HTML>
7) Crie o código HTML abaixo para testar o uso de lista de definição. Em
seguida salve o arquivo com o nome “exercicio7.html”
Código:
<HTML>
<HEAD>
<TITLE> Exercício 7</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Imperadores do Brasil:
<DD>D. Pedro I
<DL>
<DD>Nome completo: Pedro de Alcântara Francisco Antônio João Carlos
Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano
Serafim de Bragança e Bourbon
</DL>
<DD>D. Pedro II
<DL>

Página - 37
-
<DD> Nome completo: Pedro de Alcântara Francisco Antônio João Carlos
Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel
Gabriel Rafael Gonzaga
</DL>
</DL>
</BODY>
</HTML>
8) Crie o código abaixo para testar o uso de tabelas. Em seguida salve o
arquivo como “exercicio8.html”.
Código:
<HTML>
<HEAD>
<TITLE>TABELA</TITLE>
<BODY>
<Table Border=1 Align=Center>
<H3 Alingn ="center">Tabela</h3>
<TR>
<TD>Coluna1</TD>
<TD>Coluna2</TD>
<TD>Coluna3</TD>
</TR>
<TR>
<TD>Coluna1</TD>
<TD>Coluna2</TD>
<TD>Coluna3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
9) Crie o código abaixo para treinar e testar o menu de navegação de um
site. Em seguida salve o arquivo com o nome de “menu.html”
Código:
<li><a title="Quem Somos"><span>Arte e Laser</span></a>
<ul>
<li class="SubMenu"><a class="SubMenu"
href="#">História</a></li>
href="#">Músicas</a></li>
href="#">Teatro</a></li>
<li class="SubMenu"><a class="SubMenu" href="#">Poesias</a></li>

Página - 38
-
href="#">Desenhos</a></li>
</ul>
</li>
<li class="Space">|</li>
<li><a href="#"><span>FOTOS</span></a></li>
<li><a href="#"><span>AGENDA</span></a></li>
<li><a title="Quem Somos"><span>LITERATURA</span></a>
<ul>
href="#">BARROCA</a></li>
href="#">ROMANTISMO</a></li>
href="#">CLÁSSICA</a></li>
href="#"REALISMO</a></li>
href="#">SIMBOLISMO</a></li>
href="#">PARNASIANISMO</a></li>
</ul>
</nav>
10) Crie o código abaixo para testar as cores do texto. Em seguida salve com
o nome “exercicio10.html
Código:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="red">
<font Size="3" Face="Times New Roman" color="#ff0000">
<a href="C:Documents and Settingscaritas22Meus
documentosMinhas imagensimagem 1.jpg" Title="Titulo"
Target="Blue">
<H3 Align="CENTER">Curso de Desenvolvimento de Sites</H3>
<p><b>Esta TAG é para escrever em Negrito</p></b><BR>
<p><I>Esta TAG é para escrever em Itálico</p></I><BR>
<p><U>Esta TAG é para escrever Sublinhado</p></U><BR>
<p><sub>Esta TAG é para escrever subscrito</p></sub><BR>
<p><sup>Esta TAG é para escrever sobreescrito</p></sup><BR>

Página - 39
-
<! – Esta tag serve para escrever um comentário sobre o código -- >
</BODY>
</HTML>
JAVASCRIPT
JavaScript é uma linguagem usada em milhões de páginas da web para melhorar o
design, validar formulários, detectar browser, criar cookies e muito mais.
O JavaScript é a mais popular linguagem de script na internet, e funciona em todos os
maiores browsers, como Mozilla, Firefox, Netscape e Opera.
EXEMPLOS
Como escrever na página:
<html>
<body>
<script type="text/javascript">
document.write("Este texto foi escrito pelo JavaScript!")
</script>
</body>
</html>
Como formatar o texto com tags HTML usando o Javascript:
<html>
<body>
document.write("<h1>Este texto foi escrito e formatado pelo
<B>JavaScript</B>!</h1>")
</script>
</body>
</html>
Como colocar um código JavaScript em uma página HTML
<html>
<body>
</script>
</body>
</html>
Para inserir o código JavaScript em um documento, usamos a tag <script> (também
usamos o atributo “type” para definir a linguagem do script). Então, as tags <script
type="text/javascript"> e </script> contam ao browser onde começa e termina o código
JavaScript:
<html>

Página - 40
-
<body>
...
</script>
</body>
</html>
O comando “document.write”‎é o comando padrão de saida de texto para a página.
Inserindo o comando “document.write” entre as tags <script type="text/javascript"> e
</script>, fará com que o broswer o reconheça como um comando JavaScript e executará
o comando. Neste caso o browser irá escrever a frase “Este texto foi escrito pelo
JavaScript!” na página:
<html>
<body>
</script>
</body>
</html>
Nota: Se não colocarmos a tag <script>, o browser irá tratar o comando “document.write”
como texto puro, e assim irá escrever a linha inteira à página.
Terminar‎linhas‎com‎“;”?
Pela tradição das linguagens de programação, como C++ e Java, cada comando deve ser
seguido de ponto-e-vírgula. Muitos programadores continuam com este hábito quando
programando em JavaScript, mas em geral, o ponto-e-vírgula é opcional! No entanto,
ponto-e-vírgula são necessários se você quer adicionar mais de um comando por linha.
Como fazer com os Browsers antigos?
Browsers que não suportam o JavaScript mostrarão o script como conteúdo da página.
Para evitar que isso aconteça, podemos usar a tag de comentário HTML:

</script>
As duas barras antes do fechamento da tag de comentário (“//”) representam o simbolo
de comentário do JavaScript. Isto evita que o JavaScript analise a linha.
JAVASCRIPT, ONDE COLOCAR...
JavaScripts na seção “body” irão ser executados ENQUANTO a página carrega.
JavaScripts na seção “head” irão ser executados quando chamados.
EXEMPLOS

Página - 41
-
Cabeçalho
Scripts que contem funções podem ser colocados no cabeçalho do documento. Assim
podemos garantir que o script é carregado antes da função ser chamada.
<html>
<head>
function message()
{
alert("Esta caixa de alerta foi chamada pelo evento onload")
}
</script>
</head>
<body onload="message()">
</body>
</html>
Body section
Executa um script que foi colocado na seção “body”.
<html>
<head>
</head>
<body>
document.write("Esta mensagem será escrita quando a página for
carregada")
</script>
</body>
</html>
External script
Como acessar um script externo a página HTML.
<html>
<head>
</head>
<body>
<script src="xxx.js"></script>
<p>Os scripts estão dentro do arquivo chamado "xxx.js".</p>
</body>
</html>
Onde colocar o JavaScript
JavaScripts em uma página será executado imediatamente enquanto a página carrega no
browser. Isto não é o que queremos sempre. Algumas vezes queremos executar o script
quando a página carrega, outras vezes quando acontece o que chamamos de evento. Scripts

Página - 42
-
na seção “head”: Scripts para serem executados quando são chamados, ou quando um
evento é acionado, são colocados na seção “head”. Quando colocamos um script na seção
“head”, garantimos que estes são carregados antes que qualquer um os utilize.
<html>
<head>
....
</script>
</head>
Scripts na seção “body”: Scripts para serem executados quando a página é carregada, são
colocados na seção “body”. Quando se coloca um script na seção body ele é geralmente
conteúdo da página.
<html>
<head>
</head>
<body>
....
</script>
</body>
Scripts tanto na seção “body” quanto na seção “head”: Você pode colocar um número
ilimitado de scripts em seu documento, então você pode ter scripts nas duas seções.
<html>
<head>
....
</script>
</head>
<body>
....
</script>
</body>
Usando um JavaScript Externo
Algumas vezes você pode querer executar um script em diversas páginas, sem ter que
escrever o mesmo script em cada uma delas.Para simplificar isto, você pode escrever
JavaScript em um arquivo externo. Salve o arquivo JavaScript externo com a extensão
“.js”.
Nota: O script externo não pode conter a tag <script>!

Página - 43
-
Para usar o script externo, indique o arquivo .js com o atributo "src" da tag <script>:
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>
Nota: Lembre-se de colocar o script exatamente onde você normalmente colocaria o script
caso não fosse usar o arquivo externo!
VARIAVEIS JAVASCRIPT
Uma variável é um "local de armazenamento" para a informação.
Exemplos
Variáveis
Variáveis são usadas para armazenar dados. Este exemplo mostra como.
<html>
<body>
var name = "Joao"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>Este exemplo declara uma variavel, guarda um valor nesta, e
entao, mostra o valor da variavel.</p>
<p>Entao, a variavel é mostrada novamente, mas como Subtítulo.</p>
</body>
</html>
VARIÁVEIS
Uma variável contém a informação que você deseja guardar. O valor da variavel pode
mudar durante a execução do script. Você pode se referir a uma variável pelo nome para
ver seu valor ou para mudar seu valor. Regras para os nomes das variáveis:
• Nomes de Variáveis SÃO “case-sensitive”;
• Eles devem começar com uma letra ou com o caracter underscore “_”.
IMPORTANTE! JavaScript é “case-sensitive”! Uma variável nomeada “nome” não é a
mesma que uma nomeada “NOME”!
Declarando uma Variável
Você pode criar uma variável com o comando “var”:
var nome = algum valor

Página - 44
-
Você também pode criar uma variável sem o comando “var”:
nome = algum valor
Atribuindo um Valor para uma Variável
Você pode atribuir um valor para uma variável desta forma:
var nome = "joao"
Ou assim:
nome = "joao"
A variável “nome” está ao lado esquerdo da expressão e o valor que você quer atribuir
ao lado direito. Agora a variável “nome” tem o valor “joao”.
Tempo de vida das Variáveis
Quando você declara uma variável dentro de uma função, a variável pode apenas ser
acessada dentro da função. Quando você sai da funcão, esta variável é destruida. Estas
variáveis são chamadas variáveis locais. Você pode ter variaveis locais com o mesmo
nome em funções diferentes, porque cada uma é reconhecida apenas no escopo da
função a ser executada no momento.
Se você declara uma variável fora da função, todas as funções na sua página podem
acessá-la. O tempo de vida desta variável inicia quando ela é declarada e termina quando
a página é fechada.
Comando If...Else (Se...senão)
Comandos condicionais no JavaScript são usados para executar operações diferentes
baseadas em condições diferentes.
EXEMPLOS
Comando‎“if”‎(Se...)
Como escrever um comando if.
<html>
<body>
var data = new Date()
var hora = data.getHours()
if (hora < 12)
Cadernos de Informática
77
CURSO DE INTRODUÇÃO AO WEBSITE
Secretaria de Estado de Educação MG
{
document.write("<b>Bom Dia</b>")
}
</script>
<p>
Este exemplo demonstra o comando If.
</p>
<p>
Se a hora do seu browser é menor que 12,

Página - 45
-
você receberá a mensagem “Bom Dia”.
</p>
</body>
</html>
If...else statement
Como escrever um comando “if...else” (Se...Senão).
<html>
<body>
var data = new Date()
if (hora < 12)
{
}
else
{
document.write("<b>Boa Tarde</b>")
}
</script>
<p>
Este exemplo demonstra o comando “If...Else”.
</p>
<p>
Se a hora do seu browser é menor que 12,
você receberá a mensagem "Bom Dia".
Senão receberá a mensagem "Boa Tarde".
</p>
</body>
</html>
Comando‎“If..elseif...else”
Como escrever um comando “if..else if...else” (Se...Senão Se...Senão).
<html>
<body>
var data= new Date()
if (hora<12)
{
}
else if (hora>=12 && hora<=18)
{

Página - 46
-
}
else
{
document.write("<b>Boa Noite</b>")
}
</script>
<p>
Este exemplo demonstra o comando “if..else if...else”.
</p>
</body>
</html>
Link Aleatório
Este exemplo demonstra um link, que te levará ao site “www.google.com” ou ao site
“www.cade.com.br” aleatoriamente com 50% de chance para cada um deles.
<html>
<body>
var r=Math.random()
if (r>0.5)
{
document.write("<a href='http://www.google.com'>Ferramenta de
Busca</a>")
}
else
{
document.write("<a href='http://www.cade.com.br'>Ferramenta de
Busca</a>")
}
</script>
</body>
</html>
COMANDOS CONDICIONAIS
Frequentemente quando escrevemos um código JavaScripts, queremos executar diferentes
ações para decisões diferentes. Você pode os comandos condicionais para fazer isto. No
JavaScript podemos ter os seguintes comandos condicionais:
•‎if‎- Use este comando se deseja executar alguma operação somente se uma condição
for verdadeira;
•‎if...else‎- Use estes comandos se deseja executar uma operação se uma condição for
verdadeira ou outra operação se esta condição for falsa;
•‎if...else‎if....else‎- Use estes comandos se deseja selecionar um bloco entre vários,
dependendo das condições indicadas;

Página - 47
-
•‎witch‎- Use este comando se você quer selecionar uma opção entre varias dentro de
um conjunto conhecido de opções, para indicar as operações a serem executadas.
O‎comando‎“If”
Você deve usar o comando “if” se deseja que uma ou mais operações sejam executadas
somente se uma opção for verdadeira.
Sintaxe
if (condição)
{
código a ser executado se a condição for verdadeira
}
Note que “if” é escrito em letras minúsculas. Usando letras maiúsculas (IF) resultará em
um erro de JavaScript!
Exemplo 1
//Escreve uma mensagem "Bom Dia" se
//a hora é menor que 12
var d=new Date()
var hora=d.getHours()
if (hora<12)
{
}
</script>
Exemplo 2
//Escreve "Hora do almoço!" se a hora é igual a 11
var d=new Date()
var hora=d.getHours()
if (hora==11)
{
document.write("<b>Hora do almoço!</b>")
}
</script>
Nota: Quando comparando variáveis, devemos usar dois sinais de igualdade (“==”)!
Perceba também que não existe “else” nesta sintaxe. Você apenas indica o código a
executar somente se a condição for verdadeira.
Os‎Comandos‎“If...else”
Se você deseja executar uma operação se uma condição for verdadeira e ou outra operação
caso esta condição seja falsa, use o comando “If...else”

Página - 48
-
Sintaxe
if (condição)
{
código a ser executado se a condição for verdadeira
}
else
{
código a ser executado se a condição for falsa
}
Exemplo
//Se a hora é menor que 12 exibe “Bom Dia”,
//Senão exibe “Boa Tarde”.
var d = new Date()
var hora = d.getHours()
if (hora < 10)
{
document.write("Bom Dia!")
}
else
{
document.write("Boa Tarde!")
}
</script>
Os‎comandos‎“If...else‎if...else”
Você deve usar os comando “if....else if...else” se você tem mais de duas opções de
operações a serem executadas de acordo com as condições dadas.
Sintaxe
if (condição1)
{
código a ser executado se a condição1 for verdadeira
}
else if (condição2)
{
código a ser executado se a condição2 for verdadeira
}
else
{
código a ser executado se a condição1 e a condição2 forem falsas
}

Página - 49
-
Exemplo
var d = new Date()
var time = d.getHours()
if (time<12)
{
}
else if (time>11 && time<19)
{
}
else
{
document.write("<b>Boa Noite</b>")
}
</script>
COMANDO SWITCH
O comando switch, funciona como uma chave que comuta entre diversas operações a
serem executadas de acordo com uma opção. Ele foi feito para diminuir o uso dos
comandos “if...else if...else” e para simplificar o código.
Exemplos
Comando Switch
Como escrever o comando switch:
<html>
<body>
var d = new Date()
Dia=d.getDay()
switch (Dia)
{
case 5:
document.write("<b>Sexta-feira</b>")
break
case 6:
document.write("<b>Sabado</b>")
break
case 0:
document.write("<b>Domingo</b>")
break
default:
document.write("<b>Quando será o final de semana?</b>")

Página - 50
-
}
</script>
<p>Este código JavaScript irá gerar mensagens diferentes baseando-
se no dia da semana atual. Note que Domingo=0, Segundafeira= 1, Terça-feira=2, etc.</p>
</body>
</html>
QUANDO USAR O COMANDO SWITCH DO JAVASCRIPT
Você deve usar o comando switch quando existem muitas opções de código para serem
escolhidas.
Sintaxe
switch(n)
{
case 1:
executa bloco de código 1
break
case 2:
break
case 3:
break
case 4:
break
...
default:
codigo a ser executado se nenhuma das opções acima forem
executadas
}
É assim que funciona: Primeiro temos uma única expressão n (frequentemente apenas uma
variável), esta é avaliada apenas uma vez. O resultado desta expressão é comparado com
cada caso dentro do bloco do switch. Em caso um caso ser igual à expressão, então este
bloco será executado. Use o “break” para evitar que o código continue executando para o
próximo caso automaticamente. Se nenhum caso for igual à expressão, o caso “default” é
executado.
Exemplo
//Você receberá diferentes mensagens
//dependendo do dia da semana atual.
//Domingo=0, Segunda=1, Terça=2, etc.
var d=new Date()

Página - 51
-
Dia=d.getDay()
switch (Dia)
{
case 5:
document.write("Sexta-feira")
break
case 6:
document.write("Sabado")
break
case 0:
document.write("Domingo")
break
default:
document.write("Quando chegará o final de semana?")
}
</script>
OPERADORES EM JAVASCRIPT
OPERADORES ARITIMÉTICOS
OPERADOR DESCRIÇÃO EXEMPLO RESULTADO
+ ADIÇÃO X=2 4
Y=2
- SUBTRAÇÃO X=5 3
Y=2
X-Y
* MULTIPLICAÇÃO X=5 20
Y=4
X*Y
/ DIVISÃO 15/5 3
5/2 2.5
% MODULO 5%2 1
(RESTO DA DIVISÃO) 10%8 2
10%2 0
++ INCREMENTAR X=5 X=6
(EM 1) X++
-- DECREMENTAR X=5 X=4
(EM 1)X--
OPERADORES DE ATRIBUIÇÃO
OPERADOR EXEMPLO É O MESMO DE...
= X=Y X=Y
+= X+=Y X=X+Y
-= X-=Y X=X-Y
*= X*=Y X=X*Y
/= X/=Y X=X/Y

Página - 52
-
%= X%=Y X=X%Y
OPERADORES DE COMPARAÇÃO
OPERADOR DESCRIÇÃO EXEMPLO
== É IGUAL A 5==8 RETORNA FALSO
=== É IGUAL A (CHECA VALOR E TIPO)
X=5
Y="5"
X==Y RETORNA VERDADEIRO
X===Y RETORNA FALSO
!= DIFERENTE 5!=8 RETORNA VERDADEIRO
> MAIOR QUE 5>8 RETORNA FALSO
< MENOR QUE 5<8 RETORNA VERDADEIRO
>= MAIOR OU IGUAL A 5>=8 RETORNA FALSO
<= MENOR OU IGUAL A 5<=8 RETORNA VERDADEIRO
OPERADORES LOGICOS
OPERADOR DESCRIÇÃO EXEMPLO
&& E X=6
Y=3
(X < 10 && Y > 1) RETORNA VERDADEIRO
|| OU X=6
Y=3
(X==5 || Y==5) RETORNA FALSO
! NÃO X=6
Y=3
!(X==Y) RETORNA VERDADEIRO
Operador de String (cadeia de texto)
Uma string é geralmente texto, por exemplo "Texto do JavaScript!". Para concatenar
uma ou mais strings em uma usamos o operador +.
txt1="Mais que"
txt2="ótimo dia!"
txt3=txt1+txt2
A variável txt3 agora contém "Mais que ótimo dia!".
Para adicionar um espaço entre duas strings, insira o espaço na expressão ou em uma
das strings.
txt1="Mais que"
txt2="ótimo dia!"
txt3=txt1+" "+txt2
ou
txt1="Mais que "
txt2="ótimo dia!"
txt3=txt1+txt2

Página - 53
-
A variável txt3 agora contém "Mais que ótimo dia!".
CAIXA POPUP
Em JavaScript podemos criar três tipos de caixa popup: Alert box, Confirm box, e Prompt
box.
Exemplos
Alert box
<html>
<head>
function disp_alert()
{
alert("Esta é uma caixa de alerta!!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Mostra uma
caixa de alerta">
</form>
</body>
</html>
Alert box com quebra de linha
<html>
<head>
function disp_alert()
{
alert("Olá denovo! É assim que adicionamos uma" + 'n' + "quebra
de linha em uma caixa de alerta!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>

Página - 54
-
Confirm box
<html>
<head>
function disp_confirm()
{
var name=confirm("Aperte um botão")
if (name==true)
{
document.write("Você apertou OK!")
}
else
{
document.write("Você cancelou a janela!")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_confirm()" value="Mostra uma
caixa de confirmação">
</form>
</body>
</html>
Prompt box
<html>
<head>
function disp_prompt()
{
var nome=prompt("Qual o seu nome?","")
if (nome!=null && nome!="")
{
document.write("Olá " + nome + "! Como vai?")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_prompt()" value="Mostra uma caixa de pergunta">
</form>
</body>
</html>

Página - 55
-
Alert Box
Uma “alert box” é usada se você deseja ter certeza que uma informação é lida pelo usuário.
Quando uma “alert box” aparece, o usuário terá que precionar "OK" para continuar.
Sintaxe:
alert("texto")
Confirm Box
Uma “confirm box” é usada para confirmar ou aceitar alguma coisa.
Quando uma “confirm box” aparece, o usuário terá que clicar em "OK" ou "Cancel" para
continuar. Se o usuário clica em "OK", a caixa retorna verdadeiro, se ele clicar em
"Cancel" (ou “Cancelar”, dependendo do browser), a caixa retorna falso.
Sintaxe:
confirm("texto")
Prompt Box
Uma “prompt box” é usada quando precisamos de um valor antes de entrar na página.
Quando a caixa aparece, o usuário precisará pressionar "OK" ou "Cancel" para continuar
depois de entrar com o valor. Se o usuário clicar em "OK" a caixa retorna o valor inserido.
Se ele clicar em "Cancel" a caixa retorna null.
Sintaxe:
prompt("texto","valor padrao")
FUNÇÕES JAVASCRIPT
Uma função é um bloco de código reutilizável que será executado em um evento ou
quando chamada.
Exemplos
Function
Como chamar uma função:
<html>
<head>
function minhafuncao()
{
alert("Oi")
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="minhafuncao()"
value="Chamar funcao">
</form>
<p>Apertando o botao, a funcao será chamada. A funcao ira mostrar
a mensagem.</p>

Página - 56
-
</body>
</html>
Função com parâmetros
Como passar uma variavel como parâmetro para uma função:
<html>
<head>
function minhafuncao(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
onclick="minhafuncao('Oi')"
value="Chamar funcao">
</form>
<p>Apertando o botao, a funcao será chamada. A funcao ira mostrar
a o parâmetro.</p>
</body>
</html>
Função com parâmetro (varias chamada)
A função pode ser chamada com diferentes parâmetros a cada chamada.
<html>
<head>
function minhafuncao(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
onclick="minhafuncao('Bom Dia!')"
value="De manha">
onclick="minhafuncao('Boa Tarde!')"
value="De tarde">
</form>
<p>

Página - 57
-
Dependendo do botão que clicar, uma mensagem diferente aparecera, executando a mesma
função.
</p>
</body>
</html>
Função que retorna um valor
Como fazer a função retornar um valor:
<html>
<head>
function minhafuncao()
{
return ("Oi, tenha um bom dia!")
}
</script>
</head>
<body>
document.write(minhafuncao())
</script>
<p>O script na seção body chama a função.</p>
<p>A função retorna o texto.</p>
</body>
</html>
Uma função com parâmetros que retorna um valor
Como fazer uma função que retorna o produto de dois valores:
<html>
<head>
function produto(a,b)
{
return a*b
}
</script>
</head>
<body>
document.write(produto(4,3))
</script>
<p>O script na seção body chama a função
com os parâmetros (4 e 3).</p>

Página - 58
-
<p>A função retorna o produto destes dois parâmetros.</p>
</body>
</html>
Para evitar que o browser execute um script quando a página carrega, você deve escrever
este código como uma função. Uma function contém algum código que será executado
somente por um evento ou por uma chamada à função. Você pode chamar uma função de
qualquer lugar da sua página (ou até de outras nas se a função está em um arquivo “.js”
externo). Funções são definidas no inicio da página, na seção <head>.
Exemplo
<html>
<head>
functionmostramensagem ()
{
alert("Este texto foi escrito pelo JavaScript!")
}
</script>
</head>
<body>
<form>
<input type="button" value="Clique aqui!"
onclick="mostramensagem()" >
</form>
</body>
</html>
Se a linha: alert("Este texto foi escrito pelo JavaScript!!"), no exemplo acima, não fosse
escrita na função esta seria executada assim que a página carregasse. Agora, o script não
será executado antes que o usuário aperte o botão. Adicionamos um evento “onClick” ao
botão que executará a função “mostramensagem()” quando o botão for clicado.
Como definir uma Função
A sintaxe para criar uma função é:
function nome(var1,var2,...,varX)
{
código a ser executado
}
var1, var2, etc. São variáveis ou valores passados para função (parâmetros). O “{“ e o
“}” definem o inicio e o fim da função.
Nota: Uma função sem parâmetros devem incluir os parênteses “()” depois do nome da
função:
function nome()
{
}

Página - 59
-
Nota: Não se esqueça da importância das letras maiúsculas e minúsculas do JavaScript! A
palavra function precisa ser escrita em letras minúsculas, ou ocorrerá um erro JavaScript!
Também lembre que você precisa chamar a função com o nome exato que foi declarado
como nome da função (incluindo letras maiúsculas e minúsculas).
O COMANDO RETURN
O comando return é usado para especificar o valor que é retornado pela função.
Então, funções que irão retornar algum valor dever usar o comando return.
Exemplo
A função abaixo deve retornar o produto de dois números (“a” e “b”):
function produto(a,b)
{
x=a*b
return x
}
Quando você chama a função acima, você deve passar também os dois parâmetros:
resultado=produto(2,3)
O valor retornado da função produto() é 6, e irá ser guardado na variável chamada de
resultado.
LAÇOS OU REPETIÇÕES
Laços (ou “repetições”) em JavaScript são usados para executar o mesmo bloco de
programação um número de vezes ou enquanto uma condição é verdadeira.
Exemplos
O‎laço‎“For”
Como escrever um laço. Use um laço “For” para executar o mesmo bloco de programação
varias vezes.
<html>
<body>
for (i = 0; i <= 5; i++)
{
document.write("O numero e " + i)
document.write("<br>")
}
</script>
<p>Explicação:</p>
<p>Este laço começa com i=0 (i vem de índice).</p>
<p>Enquanto <b>i</b> é menor, ou igual a 5, o laço continuará a
executar.</p>
<p><b>i</b> será incrementado em 1 a cada “volta” do laço.</p>
</body>
</html>

Página - 60
-
Frequentemente quando escrevemos um código, queremos que o mesmo bloco execute
varias vezes seguidas. Para não termos que adicionar o mesmo código dezenas ou as
vezes centenas de vezes podemos usar o laço para fazer estas operações. Em JavaScript
existem dois tipos de laços diferentes:
•‎for‎– repete um bloco um numero específico de vezes;
•‎while‎– repete um bloco enquanto uma condição é atendida (verdadeira)
O‎laço‎“For”
O laço for é usado quando se sabe o número de vezes em que um script será executado.
Sintaxe
for
(variavel=valorinicial;variavel<=valorfinal;variavel=variavel+incremento)
{
}
Exemplo
Explicação: O exemplo abaixo define um laço que inicia com i=0. O laço irá continuar a
executar enquanto i for menor ou igual a 10. i será incrementado em 1 à cada volta.
Nota: O parâmetro incremento pode também ser negativo e a condição pode ser qualquer
outra operação lógica.
<html>
<body>
var i=0
for (i=0;i<=10;i++)
{
document.write("<br />")
}
</script>
</body>
</html>
Resultado
O numero e 0
O numero e 1
O numero e 2
O numero e 3
O numero e 4
O numero e 5
O numero e 6
O numero e 7
O numero e 8

Página - 61
-
O numero e 9
O numero e 10
O‎laço‎“While”
Laços em JavaScript também podem ser usados para executar o mesmo bloco de código
mesmo se não sabemos quantas vezes este bloco será executado. Esta é a principal função
do While.
Exemplos
Laço While
Como fazer o laço “while” executar a mesma operação que o laço “for”.
<html>
<body>
i = 0
while (i <= 5)
{
document.write("<br>")
i++
}
</script>
<p>Explicação:</p>
<p>Este laço começa com i=0 (i vem de índice).</p>
<p>Enquanto <b>i</b> é menor, ou igual a 5, o laço continuará a
executar.</p>
<p><b>i</b> será incrementado em 1 a cada “volta” do laço.</p>
</body>
</html>
O laço While para verificação de senhas
Pedindo uma senha usando o laço while. O resto da página não será mostrado enquanto a
senha não for digitada.
<html>
<body>
senha=prompt("Senha","")
while (senha!="senha")
{
senha=prompt("Senha","")
}
</script>
</body>
</html>
O laço “while”

Página - 62
-
O laço while é usado quando queremos que um bloco de código continue sendo executado
enquanto uma certa condição é atendida (verdadeira).
while (condição)
{
}
Exemplo
Explicação: O exemplo abaixo define um laço que inicia com i=0. O laço continua
repetindo
ENQUANTO i for menor ou igual a 10. i será incrementado em um a cada “volta”.
<html>
<body>
var i=0
while (i<=10)
{
document.write("<br />")
i=i+1
}
</script>
</body>
</html>
Resultado
O numero e 0
O numero e 1
O numero e 2
O numero e 3
O numero e 4
O numero e 5
O numero e 6
O numero e 7
O numero e 8
O numero e 9
O numero e 10

Página - 63
-
PHP – Personal Home Page
É uma das linguagens utilizadas para desenvolvimento de páginas dinâmicas para WEB.
Suas principais características:
 Gratuito
 Embutido no HTML
 Baseado no Servidor
 Banco de Dados
 Portabilidade (Funciona em qualquer plataforma: Windows, Linux etc).
Operadores:
+ Soma
- Subtração
/ Divisão
% Resto da Divisão
++ incremento
-- decremento
Operadores de atribuição:
= igual {A=5 x=2 b=c}
+= soma {A=A+1 | A++ | ++A | A+1}
-= subtração {B=B-4 ou B-=4}
*= multiplicação {C=C*3 | C*=3}
/= divisão
Operadores de Comparação
> Maior
< Menor
>= maior igual
<= menor igual
!= diferente
< > diferente
Operadores Lógicos
|| ou (or)
&& e (and

Página - 64
-
Tabela Verdade
1 2 OU
V V V
V F V
F V V
F F F
1 2 E
V V V
V F F
F V F
F F F
Variáveis
As variáveis da linguagem PHP são muito similares às da linguagem Perl, pois são
identificadas por um cifrão seguido do nome da variável (por exemplo: $var) e não
precisam ser declaradas (para criar uma variável basta atribuir um valor a ela). Esta
característica, juntamente com outras que serão apresentadas logo a seguir, dão às variáveis
do PHP uma grande versatilidade e facilitam bastante o trabalho do programador.
Os nomes de variáveis possuem a seguinte regra:
1º Caracter : SEMPRE $
2º Caracter: SEMPRE UMA LETRA (A-Z)
Demais caracteres: letras, números, caracteres especias ( _ ) underline
Exemplos:
$A
$B
$C
$ABC
$X12
$cAsA
$PHP
Comentários:
Nas páginas o programador pode inserir comentários referente a algum comando, variável
ou uma função.
Exemplos:
//Este comentário possui uma linha!

Página - 65
-
/* Este outro comentário possui várias linhas. Pode ser utilizado
As barras duplas no começo de cada linha, mas podemos utilizar a
Barra com asterisco. */
Programas PHP
O código PHP pode ser colocado embutido no código HTML ou desenvolvido em uma
página separada. Independentemente do local onde for desenvolvido as regras são as
mesmas.
1ª O código sempre começa com a tag <?php
2ª O código sempre termina com a tag ?>
3ª Todas as instruções são escritas em letras minúsculas.
4ª O arquivo do código deve ter a extensão .php e ser salvo dentro da pasta virtual do
servidor.
Exemplos:
Embutido
<HTML>
<head>
<title> Exemplo de Páginas PHP</title></head>
<body>
<?php
echo “Exemplo de código PHP”
?>
</body>
</HTML>
Separado
<?php
echo “Exemplo de código php”;
?>
Comandos para exibir dados:
Sintaxe:‎echo‎“conteúdo‎para‎exibir”;
Exemplos:
echo “Teste”;
echo “outra informação: <br>”;
echo “<h1>Título</h1>”;
echo “<b>Texto</b>123”;
echo “$A+$B=$C”;

Página - 66
-
Exemplos práticos:
1)Criação de um programa que calcule a área do triangulo: (base*altura)/2
<?php
$base=10;
$altura=2;
$area=($base*$altura)/2;
Echo “A área do triangulo é $area”;
?>
2) Criar um programa que calcule a media final de um aluno:
<?php
$Nota1=2.0;
$Nota2=7.5;
$Nota3=5.0;
$Nota4=9.0;
$Media=($Nota1+$Nota2+$Nota3+$Nota4)/4;
Echo “Sua Média é $Media”;
?>
3) Construir um programa em PHP que peça para que um valor inteiro seja digitado
e imprima o quadrado do valor digitado se este valor for maior do que 50.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>teste 1</title>
</head>
<body>
<form name="exe1" action="teste1.php" method="get">
<a>Numero: </a>
<input name="num" type="text">
<input type="submit" value="OK">
</form>
</body>
</html>
Salvar como teste1.html

Página - 67
-
<head>
<title>Teste 1</title>
</head>
<body>
<?php
$num = $_GET['num'];
if ($num > 50)
echo $num * $num;
else
echo "Número menor";
?>
</body>
</html>
Salvar como teste1.php
Exemplo:
4) Criar uma página para o usuário digitar um número e ao clicar no botão tabuada, é
apresentada a tabuada correspondente a solicitação do usuário.
Salvar como tab.html
<html>
<head>
<title>Tabuada</head></title>
<body>
<form name="T" method="get" action="tab.php">
número:<input type="text" name="numero">
<br>
<input type="submit" Value="tabuada">
</form>
</body>
</html>
Salvar como tab.php
<html>
<head>
<title>Tabuada</head></title>
<body>
<?php
$N=$_GET["numero"];

Página - 68
-
echo "tabuada do número $N <br>";
for ($i=1;$i<=10; $i++)
{
$R=$N*$i;
echo "$N*$i=$R<br>";
}
echo "<input type='button' value='voltar'
onclick=window.location.href=tab.html>";
?>
</body>
</html>
Exemplo de formulário de contato:
Salvar como: Contato.html
<head>
<head>
<title>Contatos - Cáritas São Pedro Apostolo</title>

<link rel="stylesheet" type="text/css" href="style/Reset.css" />
<link rel="stylesheet" type="text/css" href="style/pspa.css" />

<script type="text/javascript" src="style/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="style/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript" src="style/carrossel.js"></script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33926517-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') '.google-
analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Página - 69
-
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="ALL">
<meta name="description" content="Contatos - Cáritas São Pedro Apóstolo">
<meta name="keywords" content="Caritas São Pedro, Informática, Inglês, Futebol,
Creches, Taboão da Serra">
<meta http-equiv="content-language" content="pt-br">
</head>
<body>
<div id="geral-home">

<header class="Header">
<?php include('header-caritas.htm'); ?>
</header>
<div id="menu">
<?php include('menu-caritas.htm'); ?>
</div>
<div id="corpo_index">
<?php include('contato.htm'); ?>
</div>
<div id="rodape">
<?php include('footer-caritas.htm'); ?>
</div>
<p> </p>
</div>
</body>
</html>
Contato.php

<section>
<div class="ConGeral">
<article>
<div id="article">

Apostila de web - Curso de Programação Básica de Internet

Apostila de web - Curso de Programação Básica de Internet

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Apostila de web - Curso de Programação Básica de Internet

Semelhante a Apostila de web - Curso de Programação Básica de Internet (20)

Mais de Clayton de Almeida Souza

Mais de Clayton de Almeida Souza (20)

Apostila de web - Curso de Programação Básica de Internet