apostila de web - curso de programação básica de internet
TRANSCRIPT
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: [email protected]
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
conexões com os backbones. Os provedores por sua vez, cobram das empresas e usuários
finais pelo acesso.
Alguns provedores:
Página - 11 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014 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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<meta name="ROBOTS" content="ALL" />
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
<!-- div id="posmenu" -->
<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>
<!-- /div -->
</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>
<H2>Este é um cabeçalho de nível 2</H2>
<H4>Este é um cabeçalho de nível 4</H4>
<H5>Este é um cabeçalho de nível 5</H5>
<H6>Este é um cabeçalho de nível 6</H6>
Página - 34 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
</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>
<TITLE>Exercício 4</TITLE>
</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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<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>
<TITLE>Exercício 5</TITLE>
</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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<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>
<li class="SubMenu"><a class="SubMenu"
href="#">Músicas</a></li>
<li class="SubMenu"><a class="SubMenu"
href="#">Teatro</a></li>
<li class="SubMenu"><a class="SubMenu" href="#">Poesias</a></li>
Página - 38 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<li class="SubMenu"><a class="SubMenu"
href="#">Desenhos</a></li>
</ul>
</li>
<li class="Space">|</li>
<li><a href="#"><span>FOTOS</span></a></li>
<li class="Space">|</li>
<li><a href="#"><span>AGENDA</span></a></li>
<li class="Space">|</li>
<li><a title="Quem Somos"><span>LITERATURA</span></a>
<ul>
<li class="SubMenu"><a class="SubMenu"
href="#">BARROCA</a></li>
<li class="SubMenu"><a class="SubMenu"
href="#">ROMANTISMO</a></li>
<li class="SubMenu"><a class="SubMenu"
href="#">CLÁSSICA</a></li>
<li class="SubMenu"><a class="SubMenu"
href="#"REALISMO</a></li>
<li class="SubMenu"><a class="SubMenu"
href="#">SIMBOLISMO</a></li>
<li class="SubMenu"><a class="SubMenu"
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>
<TITLE>Exercício 10</TITLE>
</HEAD>
<BODY BGCOLOR="red">
<font Size="3" Face="Times New Roman" color="#ff0000">
<a href="C:\Documents and Settings\caritas22\Meus
documentos\Minhas imagens\imagem 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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<! – 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>
<script type="text/javascript">
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 type="text/javascript">
document.write("Este texto foi escrito pelo JavaScript!")
</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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<body>
<script type="text/javascript">
...
</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 type="text/javascript">
document.write("Este texto foi escrito pelo JavaScript!")
</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.
Terminarlinhascom“;”?
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 type="text/javascript">
<!--
document.write("Este texto foi escrito pelo JavaScript!")
//-->
</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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 type="text/javascript">
....
</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 type="text/javascript">
....
</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 type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
você receberá a mensagem “Bom Dia”.
</p>
</body>
</html>
If...else statement
Como escrever um comando “if...else” (Se...Senão).
<html>
<body>
<script type="text/javascript">
var data = new Date()
var hora = data.getHours()
if (hora < 12)
{
document.write("<b>Bom Dia</b>")
}
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>
<script type="text/javascript">
var data= new Date()
var hora = data.getHours()
if (hora<12)
{
document.write("<b>Bom Dia</b>")
}
else if (hora>=12 && hora<=18)
{
document.write("<b>Boa Tarde</b>")
Página - 46 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
}
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>
<script type="text/javascript">
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...elseif....else- Use estes comandos se deseja selecionar um bloco entre vários,
dependendo das condições indicadas;
Página - 47 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
•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.
Ocomando“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
<script type="text/javascript">
//Escreve uma mensagem "Bom Dia" se
//a hora é menor que 12
var d=new Date()
var hora=d.getHours()
if (hora<12)
{
document.write("<b>Bom Dia</b>")
}
</script>
Exemplo 2
<script type="text/javascript">
//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.
OsComandos“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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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
<script type="text/javascript">
//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>
Oscomandos“If...elseif...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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
Exemplo
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<12)
{
document.write("<b>Bom Dia</b>")
}
else if (time>11 && time<19)
{
document.write("<b>Boa Tarde</b>")
}
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>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
}
</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:
executa bloco de código 2
break
case 3:
executa bloco de código 3
break
case 4:
executa bloco de código 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
<script type="text/javascript">
//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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
%= 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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
Confirm box
<html>
<head>
<script type="text/javascript">
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>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
</body>
</html>
Função com parâmetros
Como passar uma variavel como parâmetro para uma função:
<html>
<head>
<script type="text/javascript">
function minhafuncao(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"
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>
<script type="text/javascript">
function minhafuncao(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="minhafuncao('Bom Dia!')"
value="De manha">
<input type="button"
onclick="minhafuncao('Boa Tarde!')"
value="De tarde">
</form>
<p>
Página - 57 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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>
<script type="text/javascript">
function minhafuncao()
{
return ("Oi, tenha um bom dia!")
}
</script>
</head>
<body>
<script type="text/javascript">
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>
<script type="text/javascript">
function produto(a,b)
{
return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<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>
<script type="text/javascript">
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()
{
código a ser executado
}
Página - 59 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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
Olaço“For”
Como escrever um laço. Use um laço “For” para executar o mesmo bloco de programação
varias vezes.
<html>
<body>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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)
Olaç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)
{
código a ser executado
}
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>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("O numero e " + 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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
O numero e 9
O numero e 10
Olaç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>
<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("O numero e " + i)
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>
<script type="text/javascript">
senha=prompt("Senha","")
while (senha!="senha")
{
senha=prompt("Senha","")
}
</script>
</body>
</html>
O laço “while”
Página - 62 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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)
{
código a ser executado
}
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>
<script type="text/javascript">
var i=0
while (i<=10)
{
document.write("O numero e " + i)
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
/* 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údoparaexibir”;
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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.
<!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>
<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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Contatos - Cáritas São Pedro Apostolo</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style/Reset.css" />
<link rel="stylesheet" type="text/css" href="style/pspa.css" />
<!-- Script-->
<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>
<script type="text/javascript">
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 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
</script>
<!-- Meta -->
<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 com o logo e Menu-->
<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
<!--Conteudo-->
<section>
<div class="ConGeral">
<article>
<div id="article">
Página - 70 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<li class="carrosel-home-banner"><div class="banner-contato"></div></li>
<div class="ConInternos">
<h3 class="H3-Internos">Cáritas São Pedro Apóstolo</h3>
<p class="Txt-Internos"><strong>E-mail:</strong> <a
href="mailto:[email protected]">[email protected]</a><br /><br
/>
<strong>Endereço:</strong> Rua Maria Concessa de Medeiros, 280 - Pq. Pinheiros -
Taboão da Serra - SP<br /><br />
<strong>Telefones:</strong> (11) 4137-0069 | (11) 4139-9335<br /><br /><br /></p>
<div class="Contato">
<form name="formulario"
action="http://scripts.redehost.com.br/formmail.aspx" method="post">
<input type=hidden name="destino" value="[email protected]">
<input type=hidden name="enviado"
value="http://www.caritassaopedroapostolo.com.br/email.php">
<p><b>Nome:</b><br>
<input type=text name="nome" size="45"></p><br>
<p><b>Email:</b><br>
<input type=text name="email" size="45"></p><br>
<p><b>Telefone:</b><br>
<input type=text name="Telefone" size="45"></p><br>
<p><b>Assunto:</b><br>
<input type=text name="assunto" size="45"></p><br>
<p><b>Mensagem:</b><br>
<textarea name="Mensagem" rows="10" cols="60" wrap="virtual"></textarea></p><br>
<p><input type="submit" value="Enviar Email"> <input type="reset" value="Limpar
Formulário"></p>
</fieldset>
</form>
</div>
</div>
</div>
</article>
</div>
</section>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Página - 71 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<title>Untitled Document</title>
</head>
<body>
Salvar como: e-mail.php
<?php
$nome = $_POST["nome"];
$email = $_POST["email"];
$telefone = $_POST["telefone"];
$assunto = $_POST["assunto"];
$comentario = $_POST["comentario"];
$mensagem = "Comentario enviado por um visitante:\n\n";
$mensagem .= "Nome: $nome\n";
$mensagem .= "E-mail: $email\n";
$mensagem .= "Telefone\n: $telefone\n";
$mensagem .= "Assunto: $assunto\n";
$mensagem .= "Comentario: $comentario";
mail("[email protected]", "comentario", $mensagem, "Content-Type:
text/html");
echo "Obrigado por enviar sua mensagem, em breve entraremos em contato!";
?>
</body>
Exibição de data e Hora
Neste simples exemplo utilizaremos um script de PHP que usa as funções time() e date()
para obter as informações contidas no relógio do servidor e coloca-las num formato
adequado à exibição . A função time() retorna um número que é igual ao tempo
transcorrido, em segundos, desde a zero hora de 01/01/1970. Já a função date() transforma
esse número em algo que pode ser exibido e compreendido.
Veja o Exemplo:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo data e Hora</title>
</head>
<body bgcolor="#FFFFFF">
<table border="2">
<tr>
<td>
Página - 72 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
<?php
$tempo=time(); date_default_timezone_set('Ameriac/Sao_Paulo');
echo("<b>Data e Hora Local:</b><br>");
?>
<tr>
<td>
<?php
echo("<b>Dia da Semana:</b> ".date("I",$tempo)."<br>");
echo("<b>Dia do Mês:</b> ".date("d",$tempo)."<br>");
echo("<b>Mês:</b>".date("F",$tempo)."<br>");
echo("<b>Ano:</b>".date("Y",$tempo)."<br>");
echo("b>Hora:</b>".date(H.":".i,$tempo)."<br>");
?>
</td>
</tr>
</table>
</body>
</html>
Cálculo do peso
Neste exemplo apresentamos a capacidade do PHP para cálculos e a disponibilização on-
line do resultado. Neste caso, o peso ideal da mulher brasileira é calculado segundo dados
fornecidos como a altura, a idade, a cor dos olhos e a renda mensal. Primeiro devemos
fazer um formulário para receber a entrada das informações:
<input name="Idade" type="text" value="idade" size="10" maxlength="3" />Salvar como:
peso.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculo do Peso Ideal</title>
</head>
<body bgcolor="#33CCFF">
O seu peso ideal, segundo o critério dos autores é de:<br />
<?php
$altura=$_GET['altura'];
$idade=$_GET['idade'];
$cor_olhos=$_GET['cor_olhos];
$renda=$_GET[renda'];
$peso=($altura-100)*($idade/20)-$cor_olhos+($renda/1000);
echo($peso." quilos");
?>
</body>
</html>
Página - 73 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
Salvar como: pesoidea.php
Neste exemplo pode ser usado para outros tipos de cálculos como por o do IMC (Índice de
massa corporal), média dos alunos etc.
Criação de figuras personalizadas
Neste exemplo, tentaremos ilustrar como o PHP pode ser usado para criar figuras, alterá-
las e exibi-las através da web. Para isso, usaremos um como exemplo as camisas de times
de futebol. A página funciona da seguinte forma: o usuário acessará a página onde ele
poderá escolher o time e o número da camisa, além de fornecer o nome ou apelido que
sairá expresso na camiseta personalizada.
Além de mostrar como o PHP pode ser usado para manipular imagens, este exemplo abre
caminho para inúmeras possibilidades de aplicação dessa ideia como, por exemplo, a
criação de botões personalizados ou mesmo o uso do PHP como ferramenta para facilitar a
atualização de sites onde muitas figuras e/ou botões precisam ser recriados diariamente.
O formulário camisas.html pede para que o usuário digite o seu nome ou apelido e escolha
o time e o número da camisa que deverá ser criada (linhas 11 e 28).
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.<html xmlns="http://www.w3.org/1999/xhtml">
4.<head>
5.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6.<title>Untitled Document</title>
7.</head>
8.<body bgcolor="#993366">
9.Digite seu nome ou apelido, o número da sua camisa e clique em "Costurar".<br />
10.<form action="camisas.php" method="post">
11.Nome/Apelido:<input="text" name="nome" value=""><br /><br />
12.Camisa:<select name="camisa">
13.<option value="10" selected>10</option>
14.<option value="9" selected>9</option>
15.<option value="8" selected>8</option>
16.<option value="7" selected>7</option>
17.<option value="6" selected>6</option>
18.<option value="5" selected>5</option>
19.<option value="4" selected>4</option>
20.<option value="3" selected>3</option>
21.<option value="2" selected>2</option>
22.<option value="1" selected>1</option>
23<option value="12" selected>12</option>
24.</select><br><br>
25.Time:<select name="time">
26.<option value=corint">Corinthians</option>
27.<option value="palmei">Palmeiras</option>
28.</select><br><br><br>
Página - 74 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
29.<input type="submit' value="Costurar!">
30.</form>
31.</body>
32.</html>
Com essas informações, o script carrega uma das imagens preexistentes armazenadas nos
arquivos camisa_corint.png e camisa_palmei.png. Os desvios condicionais IFs das linhas 6
e 10 fazem com que uma destas camisas seja lida, dependendo do conteúdo da variável
$time, usando a função ImageCreateFromPNG($nome_do_arquivo). Esta função cria uma
imagem na memória do computador contendo os dados do arquivo especificado,
retornando um número que servirá como um identificador desta imagem. Além disso, as
linhas as linhas 5 e 9 definem as cores do texto que será impresso na camisa usando a
função ImageColorAllocate(imagem, R,G,B). No caso, $cor será preta para o Corinthians
(linha 5) e verde para o Palmeiras (linha 9).
A linha 11 define a cor branca que será usada para desenhar um retângulo. Na linha 15, a
função ImageFilledRectangle(imagem, x1,y1,x2,y2, cor) desenha este retângulo
preenchido com a cor espeficada pelo ultimo parâmetro e cuja posição está definida pelas
coordenadas x e y do canto inferior direito (x2,y2).
Depois disso, nas linhas 16 e 17, a função ImageString(image, fonte,x,y,texto,cor) imprime
sobre a camisa os textos contendo, respectivamente o nome do jogador (linha 13) e o
número da camisa (linha 14) usando os dados das variáveis $nome, $camisa e $cor. Repare
que a posição em que o texto é colocado sobre a imagem está ajustada pelos terceiros e
quartos parâmetros (x e y) da função ImageString().
Finalmente, as funções usadas nas linhas 18 e 19 se encarregam de enviar a imagem da
camisa personalizada para o browser do visitante usando a função imagePNG(imagem) e
de liberar a memória do computador que estava sendo ocupada por esta imagem usando a
função imageDestroy(image).
1. <?php
2. header("Content-type:image/png");
3. $time=$_POST['time'];
4. $camisa=$_POST['camisa'];
5. $nome=$_POST['nome']
6. if($time=="corint"){
7. $img=ImageCreateFromPng("camisa_corint.png");
8. $cor=ImageColorAllocate(img,0,0,0);
9. }
10. if($time=="palmei"){
11. $img=ImageCreateFromPng("camisa_palmei.png");
12. $cor=ImageColorAllocate($img,0,180,0);13
13. }
14. $branco=ImageColorAllocate($img,255,255,255);
15. ImageFilledRectangle(img,60,106,110,134,$branco);
16. ImageString($img,5,60,104,$nome,$cor);
17. ImageString(img,5,80,121,$camisa,$cor);
18. ImagePng($img);
19. ImageDestroy($img);
Página - 75 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
20. ?>
21. </body>
22. </html>
Banners
A publicidade na internet é muito importante e, às vezes, acaba sendo uma das principais
fontes de renda de um site. Os banners são, hoje em dia, o principal meio de divulgação de
marcas, produtos e serviços e, cada vez que alguém clica num banner, o usuário conhece
melhor o produto, pois outra página é aberta com os detalhes de como adquirir o produto.
Exemplo:
1. <!--Imagem do Topo-->
2. <div class="TopoHome">
3. <div class="segura">
4. <div class="carrossel" style="visibility: visible; overflow: hidden; position: relative; z-index:
2; left: 0px; width: 930px;">
5. <ul class="carrosel-home" style="margin: 0pt; padding: 0pt; position: relative; list-style-type:
none; z-index: 1; width: 4650px; left: -1864.85px;">
6. <li class="carrosel-home-banner"><a href="#"><img src="imagens/banner1.jpg" width="930"
height="300" border="0" alt="" /></a></li>
7. <li class="carrosel-home-banner"><a href="#"><img src="imagens/banner4.jpg" width="930"
height="300" border="0" alt="" /></a></li>
8. <li class="carrosel-home-banner"><a href="#"><img src="imagens/banner22.jpg" width="930"
height="300" border="0" alt="" /></a></li>
9. <li class="carrosel-home-banner"><a href="igrejas/II-cerco-de-jerico.php"><img
src="imagens/banner50.gif" width="930" height="300" border="0" alt="" /></a></li>
10. <li class="carrosel-home-banner"><a href="#"><img src="imagens/banner24.jpg" width="930"
height="300" border="0" alt="" /></a></li>
11. </ul>
12. </div>
13. <div class="bnt">
14. <p> <a href="#" class="prev"><img src="imagens/voltar.png" width="80" height="24"
alt="Voltar" border="0" /></a><a href="#" class="next"> <img src="imagens/avancar.png"
width="92" height="24" alt="Voltar" border="0" /></a>
15. </p>
16. </div>
17. </div>
18. </div>
Podemos observar neste código o seguinte:
Na linha 4 temos uma classe chamada de “carrossel” que define o sentido da
rotação do banner e a velocidade;
Na linha 6 em diante temos a definição do banner que deverá ser apresentado no página
principal do site (Homepage), "><a href="#"><img src="imagens/banner1.jpg" width="930"
height="300" border="0" alt="" /></a></li> este código define onde está a imagem que deverá ser exibida e
Página - 76 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014 o tamanho do banner, neste exemplo é 930 de largura por 300 de altura com nenhuma borda. Em <a
href=”#”>éondedeveinserirolinkparaapáginadesejada.
Inserindo links para compartilhamento de
páginas nas redes sociais.
AddThis
AddThis é uma empresa de tecnologia baseada na web em Vienna, Virginia , Estados
Unidos . A empresa opera AddThis.com, amplamente utilizado bookmarking social de
serviços que podem ser integrados em um site com o uso de uma ferramenta web . Uma
vez que o widget é adicionado, os visitantes do site pode marcar um item usando uma
variedade de serviços, tais como Facebook , MySpace , Google Bookmarks , Pinterest e
Twitter . O site atinge 1,3 bilhão de visitantes únicos por mês e é utilizado por mais de 14
milhões de editores da web. A companhia mudou seu nome de Clearspring maio 2012.
Plataforma audiência do AddThis permite que os comerciantes da marca para oferecer
publicidade baseada em interesses para influenciadores sociais . A empresa já arrecadou
mais de EUA $ 58 milhões em capital de risco. O financiamento é do Institucionais
Venture Partners , New Enterprise Associates , Novak Biddle Venture Partners, Rho
Ventures , bem como de investidores anjo Steve Case , Ron Conway , e Ted Leonsis .
Para adicionar esta ferramenta em nossas paginas web é necessário entrar neste endereço:
http://www.addthis.com/, clicar na opção “get the code” para gerar o código que será
inserido em sua página, na sequencia deve clicar em “share Button” e escolher qual é o
tipo de página (web site, blogspot ou Wordpress). Escolhe também o tipo de botão,
tamanho que deseja em Select style.
Para copiar o código é necessário criar uma conta no site, assim que a conta for criada, faça
os procedimentos acima e coloque o seu login e senha para ser liberado o código para
assim concluir e inserir em sua página web.
Inserindo plugs Sociais na Página: Encontramos na maioria das páginas web, principalmente nas Homepages (página
principal) um quadro com a imagem das pessoas que curtiram a página, como no exemplo
abaixo:
Página - 77 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
As redes sociais como o Twitter e Facebook tem feito parte da vida de muitas pessoas, aqui
no Brasil é um sucesso. Todos arruma um tempinho para conferir as novidades em sua
página pessoal, curtir, comentar e compartilhar informações. É importante uma homepage
estar conectada com as redes sociais para apresentar de modo mais dinâmico as novidades,
uma pessoa que curti uma página ou compartilha ajuda a “espalhar” o seu conteúdo, para
uma empresa comercial, por exemplo, é uma excelente ferramenta para divulgar suas
ofertas e serviços.
Para criar o código que deverá ficar na sua página deve entrar no site:
https://www.facebook.com/, em seguida clicar em desenvolvedores, como mostra a figura
abaixo:
Na sequencia clique em Internet, conforme
a figura abaixo:
Página - 78 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
Na próxima página escolha a opção Social Plugins, pois permitem que você veja o que
seus amigos gostaram, comentaram ou compartilhou em sites de toda a web.
Clique em Like Button e vá para a opção Configurator;
Em URL to Like digite o seu domínio, escolha o tipo de fonte, tamanho e clique no botão
Get Code, para gerar o código para ser inserido em sua página web ou blog.
Antes, será solicitado para realizar o login (usuário e senha do Facebook)
O Código será semelhante ao apresentado abaixo:
<div class="fb-like" data-href="https://www.facebook.com/par.pedroapostolo" data-
send="true" data-width="150" data-show-faces="true"></div>
Para outras redes sociais como Twitter e Orkut, deverá proceder da mesma forma, entrando
na página da rede Social e escolher a opção desenvolvedor.
Para inserir vídeos do Youtube em sua página é bem simples, veja abaixo o procedimento:
Página - 79 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
Entre na página do Youtube e escolha o vídeo, em seguida clique em compartilhar e na
sequencia em incorporar.
Defina o Tamanho do vídeo e copie o código para a sua página.
Página - 80 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
BIBLIOGRAFIA Sites de apoio:
http://www.tiexpert.net/programacao/web/php/primeiro-codigo-em-php.php
http:/www.apostilando.com.br
http://codigofonte.uol.com.br
http://pt.wikipedia.org/wiki/Wikip%C3%A9dia:P%C3%A1gina_principal
Livros e Revista de apoio:
Netscape N Netcenter Brasil
JavaScript - Aplicações
Interativas para WEB
Adriano Gomes Lima
Universidade da Região da Campanha
Centro de Ciências da Economia e Informática
Curso de Informática
Apostila de PHP
Disciplina: Tópicos Especiais em Sistemas de Informação
Prof. Cristiano Cachapuz e Lima
DREAMWEAVER
CS5
Apostila desenvolvida exclusivamente para o Apostilando.com
Autor: Marcos Paulo Furlan
Curso de Construção de Web Sites
Glayston Pereira Batista
Página - 81 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
Carlos Eduardo Hermeto de Sá Motta
PROJETO ESCOLAS - REFERÊNCIA
Compromisso com a Excelência na Escola Pública
Bruno,Odemir M.
Programando para a Internet com PHP / Odemir M. Bruno, Leandro F. Estrozi, João
E.S. Batista Neto. Rio de Janeiro: Brasport 2010
ISBN 978-85-7452-441-2
Jorge, Marcos
JAVA/ Marcos Jorge. -- São Paulo: Person Education do Brasil, 2004. -- (Série passo
a passo lite)
Alves, William Pereira
Crie, Anime e Publique Seu Site Utilizando Fireworks CS6, Flash CS6 e
Dreamweaver CS6 em Português para Windows / William Pereira Alves. – 1. Ed. –
São Paulo: Érica, 2012
Bibliografia.
ISBN 978-85-365-04020-9
Revista Webdesigner
Editora Escala
Ano 2007
Volumes 01,02 e 03
http://uplinkl.blogspot.com
Cadernos e Apostilas do Curso de Sistemas de Informação - Aluno: Clayton de
Almeida Souza
Ano: 2007 a 2010.
Professores e Matérias: Edson Alves: Introdução a Desenvolvimento Web;
Sidnei Reis: Desenvolvimento Web
Mario Cesar Ciqueira: Tópicos Avançados de Programação
Página - 82 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014
Sobre o Autor da Apostila:
Clayton de Almeida Souza, natural de São Paulo-SP
Graduado em Sistema de Informação pela Universidade Bandeirantes de São Paulo -
UNIBAN, já trabalhou como Analista de Suporte Técnico pela empresa Manpower do
Brasil e atualmente trabalha como Analista de Sistemas e Professor de Informática em
parceria com a Escola SENAI e a Caritas São Pedro Apóstolo, uma instituição sem fins
lucrativos da Igreja Católica Apostólica Romana, onde desenvolve vários projetos e ações
sociais fazendo o bem a todos!
Conheça os trabalhos através das Redes Sociais
www.twitter.com/claytonnsouza
www.facebook.com/claytondealmeidasouza
HTTP://professorclaytonsouza.blogspot.com.br
Conheça os Trabalhos da Cáritas São Pedro Apóstolo acesse:
www.caritassaopedroapostolo.com.br
https://www.facebook.com/CaritasSaoPedroApostolo
https://twitter.com/caritas_pspa
Página - 83 -
Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014