apostila de web - curso de programação básica de internet

82
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

Upload: clayton-de-almeida-souza

Post on 14-Apr-2017

254 views

Category:

Technology


2 download

TRANSCRIPT

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

Apostila do Curso de

Programação Básica de Internet

Rua Maria Concessa de Medeiros, 280 Parque Pinheiros

Taboão da Serra - SP

CEP: 06767-120

Telefone: 4137-0069

E-mail: [email protected]

www.caritassaopedroapostolo.com.br

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

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

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

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

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

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

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

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

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

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

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

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,

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

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

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

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:

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

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

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

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?

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

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

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

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

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

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

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

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

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

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.

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

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.

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

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.

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

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

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

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.

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

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”.

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

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”.

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

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).

.

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

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

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

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.

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

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.

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

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.

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

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:

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

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>

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

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 &lt;!DOCTYPE HTML&gt;<br>

13 &lt;html lang="pt-br"&gt;<br>

14 &lt;head&gt;<br>

15 &lt;meta charset="UTF-8"&gt;<br>

16 &lt;link rel="stylesheet" type="text/css"

href="estilo.css"&gt;<br>

17 &lt;title&gt;&lt;/title&gt;<br>

18 &lt;/head&gt;<br>

19 &lt;body&gt;<br>

20

21 &lt;/body&gt;<br>

22 &lt;/html&gt;<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:

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

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" />

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

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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.

Terminar‎linhas‎com‎“;”?

Pela tradição das linguagens de programação, como C++ e Java, cada comando deve ser

seguido de ponto-e-vírgula. Muitos programadores continuam com este hábito quando

programando em JavaScript, mas em geral, o ponto-e-vírgula é opcional! No entanto,

ponto-e-vírgula são necessários se você quer adicionar mais de um comando por linha.

Como fazer com os Browsers antigos?

Browsers que não suportam o JavaScript mostrarão o script como conteúdo da página.

Para evitar que isso aconteça, podemos usar a tag de comentário HTML:

<script 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

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

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

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

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>!

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

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

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

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,

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

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>")

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

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...else‎if....else‎- Use estes comandos se deseja selecionar um bloco entre vários,

dependendo das condições indicadas;

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

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.

O‎comando‎“If”

Você deve usar o comando “if” se deseja que uma ou mais operações sejam executadas

somente se uma opção for verdadeira.

Sintaxe

if (condição)

{

código a ser executado se a condição for verdadeira

}

Note que “if” é escrito em letras minúsculas. Usando letras maiúsculas (IF) resultará em

um erro de JavaScript!

Exemplo 1

<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.

Os‎Comandos‎“If...else”

Se você deseja executar uma operação se uma condição for verdadeira e ou outra operação

caso esta condição seja falsa, use o comando “If...else”

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

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>

Os‎comandos‎“If...else‎if...else”

Você deve usar os comando “if....else if...else” se você tem mais de duas opções de

operações a serem executadas de acordo com as condições dadas.

Sintaxe

if (condição1)

{

código a ser executado se a condição1 for verdadeira

}

else if (condição2)

{

código a ser executado se a condição2 for verdadeira

}

else

{

código a ser executado se a condição1 e a condição2 forem falsas

}

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

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>")

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

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()

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

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

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

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

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

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>

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

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>

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

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>

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

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>

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

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>

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

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

}

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

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

O‎laço‎“For”

Como escrever um laço. Use um laço “For” para executar o mesmo bloco de programação

varias vezes.

<html>

<body>

<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>

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

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)

O‎laço‎“For”

O laço for é usado quando se sabe o número de vezes em que um script será executado.

Sintaxe

for

(variavel=valorinicial;variavel<=valorfinal;variavel=variavel+incremento)

{

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

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

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

O‎laço‎“While”

Laços em JavaScript também podem ser usados para executar o mesmo bloco de código

mesmo se não sabemos quantas vezes este bloco será executado. Esta é a principal função

do While.

Exemplos

Laço While

Como fazer o laço “while” executar a mesma operação que o laço “for”.

<html>

<body>

<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”

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

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

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

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

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

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!

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

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údo‎para‎exibir”;

Exemplos:

echo “Teste”;

echo “outra informação: <br>”;

echo “<h1>Título</h1>”;

echo “<b>Texto</b>123”;

echo “$A+$B=$C”;

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

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

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

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"];

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

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);

})();

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

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>&nbsp;</p>

</div>

</body>

</html>

Contato.php

<!--Conteudo-->

<section>

<div class="ConGeral">

<article>

<div id="article">

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

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">

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

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>

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

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>

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

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>

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

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);

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

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

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

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=”#”>‎é‎onde‎deve‎inserir‎o‎link‎para‎a‎página‎desejada.

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:

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

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:

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

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:

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

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.

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

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

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

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

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

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

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

Página - 83 -

Cáritas São Pedro Apóstolo – Curso de Programação Básica de Internet 2014