Criação de Sites - Manual do Aluno (web developing - student's manual )

CRIAÇÃO DE SITES I E II
MANUAL DO ALUNO
Elaboração:
Professora Denise Moraes Pinho
Taquara - RS
2014

2
Índice
MÓDULO I – HTML, CSS e design de sites estáticos
CAPÍTULO 1: Conceitos básicos
1.1: O que é HTML?.....................................................................................................6
1.2: HTML: Peculiaridades..........................................................................................7
1.3: Tags básicas.............................................................................................................7
1.4: Editor.......................................................................................................................9
1.5: Atributos...............................................................................................................10
1.6: Tag <meta>............................................................................................................11
CAPÍTULO 2: Formatando Texto
2.1: Tags para formatação de texto............................................................................12
2.2: Texto animado......................................................................................................14
2.3: Hyperlinks............................................................................................................15
2.4: Formatação de parágrafos..................................................................................17
2.5: Listas.....................................................................................................................17
CAPÍTULO 3: Recursos visuais
3.1: Inserir imagens.....................................................................................................19
3.2: Linhas horizontais................................................................................................20
3.3: Tabelas...................................................................................................................21
CAPÍTULO 4: Estruturas avançadas
4.1: Formulários..........................................................................................................23
4.2: Divs........................................................................................................................25
4.3: Frames...................................................................................................................26
4.4: iFrames..................................................................................................................26
CAPÍTULO 5: Noções básicas de design
5.1: Áreas de layout.....................................................................................................27
5.2: Paleta de cores......................................................................................................28
CAPÍTULO 6: Como transferir arquivos para sua hospedagem Online
6.1: Fazendo transferência de arquivos com o Filezilla...........................................29
CAPÍTULO 7: CSS básico
7.1: Introdução............................................................................................................33
7.2: Trabalhando com seletores..................................................................................34
7.3: Formas de manipular folhas de estilo CSS........................................................35
7.4: Aplicando CSS em tabelas...................................................................................38
7.5: Aplicando CSS em divs........................................................................................39
7.6: Trabalhando com seletores avançados...............................................................40
7.7: Aplicando CSS em divs para criação de menus................................................43
CAPÍTULO 8:
Caderno de exercícios..........................................................................................46

3
MÓDULO II – PHP + Banco de dados Mysql, noções de javascript
e sistemas para sites dinâmicos
CAPÍTULO 1: Conceitos básicos
1.1: O que é PHP? …..................................................................................................75
1.2: Primeiros passos...................................................................................................75
1.3: XAMPP – funcionamento....................................................................................76
CAPÍTULO 2: Fundamentos de programação
2.1: Formas de delimitar o código PHP.....................................................................78
2.2: Declarando variáveis...........................................................................................78
2.3: Strings...................................................................................................................79
2.4: Imprimindo texto na tela.....................................................................................79
2.5: Concatenação de Strings.....................................................................................81
2.6: Arrays....................................................................................................................82
2.7: Estruturas de controle.........................................................................................85
2.8: Estruturas de repetição.......................................................................................87
CAPÍTULO 3: Enviando dados através de formulários
3.1: Métodos GET e POST.........................................................................................89
3.2: Criando formulários de envio por e-mail com a função mail().......................91
CAPÍTULO 4: Validação de formulários
4.1: Funções para validação server-side com PHP...................................................95
4.2: Validações client-side com javascript.................................................................98
4.3: Como crio uma máscara para campo de formulário?....................................100
CAPÍTULO 5:
Sistema de upload...............................................................................................101
CAPÍTULO 6: Integrando PHP com banco de dados
6.1: Conceitos básicos................................................................................................103
6.2: Utilizando PHPMyAdmin.................................................................................103
6.3: Exemplo – Sistema de cadastro........................................................................107
CAPÍTULO 7:
Sistema de busca................................................................................................111
CAPÍTULO 8: Cookies
8.1: Criando e manipulando cookies........................................................................113
8.2: Exemplo – Sistema de login...............................................................................114
CAPÍTULO 9:
Caderno de exercícios.........................................................................................119

4
Introdução
História da Web
Durante o cenário da Guerra Fria surge nos EUA, em 1957, a ARPA (Agência
de Pesquisa em Projetos Avançados), que era diretamente ligada ao Departamento de Defesa
americano, e tinha por objetivo manter a superioridade tecnológica do país e alertar contra o
avanço tecnológico do inimigo.
Em 1969, com o objetivo de conectar departamentos de pesquisa e bases
militares e descentralizar o armazenamento de informações surge uma rede de computadores
chamada ARPANET.
A ARPANET funcionava através de um sistema conhecido como comutação
de pacotes, que é um sistema de transmissão de dados onde as informações são divididas em
pequenos pacotes, que contém trechos de dados, o endereço do destinatário e informações que
permitam a remontagem da mensagem inicial. (Até hoje a internet ainda funciona com base
no sistema de comutação de pacotes. O protocolo TCP/IP funciona com base nesta
tecnologia.)
Durante as décadas seguintes várias outras redes menores foram surgindo até a
desativação da ARPANET em 1990, quando começou a discussão do uso da internet para fins
comerciais. Nesta época surgiu o modelo de internet que conhecemos hoje com base na
navegação por hiperlinks e páginas HTML.
Como funciona a web? O que é um navegador? O que é um servidor?
A web funciona basicamente com dois tipos de programas: os clientes e os servidores.
O cliente é o programa utilizado pelos usuários para ver as páginas, enquanto os servidores
ficam responsáveis por armazenar e permitir o acesso ao conteúdo da rede. Chamamos o
programa cliente de navegador (ou browser).
O navegador tem a função de localizar o endereço da página especificada pelo
usuário (chamada de URL) e, também, é responsável por determinar a interpretação dos
comandos de HTML das mesmas. Os pedidos dos navegadores são atendidos por uma
combinação de computadores e programas que formam os servidores. Esses computadores e
programas armazenam as páginas e podem exercer algum tipo de controle sobre quais
usuários podem acessar. São máquinas potentes instaladas em universidades, empresas e
órgãos do governo, conectadas permanentemente à Internet.
Leituras Complementares
http://danillonunes.net/curriculo-dos-padroes-web/a-historia-da-internet-e-da-web-e-a-evolucao-dos-padroes-
web
http://webdirections.org/history/#0
http://www.tecmundo.com.br/infografico/10054-a-historia-da-internet-a-decada-de-1990-infografico-.htm
http://www.tecmundo.com.br/982-o-que-e-cliente-servidor-.htm
http://informatica.hsw.uol.com.br/servidores-da-web4.htm

MÓDULO I
HTML, CSS e design de sites estáticos

6
CAPITULO 1 – Conceitos básicos
1.1 O que é HTML?
HTML é uma linguagem de marcação para estruturação de páginas web criada
por Tim Berners Lee nos anos 90. Diferente das linguagens de programação, o HTML não
possui estruturas para criação de lógicas ou cálculos. O que podemos fazer é demarcar
espaços e inserir elementos, em forma de código, para a criação de uma página web. Portanto,
para criar um website simples, não é necessário que se tenha conhecimento em lógicas de
programação. O desenvolvedor deve apenas conhecer a sintaxe e o nome dos comandos
HTML.
“A linguagem HTML (Hypertext Markup Language) é uma
linguagem baseada em uma mais antiga e muito mais complexa chamada SGML
(Standart Generalized Markup Language), por esse motivo uma das maiores
características da linguagem HTML é não ter uma estrutura rígida e exata, a
HTML apenas define a estrutura de uma página, definindo o que é título, texto,
lista, subtítulo, imagens, etc.
[…]
“Por ser essencialmente uma linguagem para criação e manipulação de
textos, um programador HTML necessariamente não tem que ter um grande
embasamento teórico de lógicas de programação. Ao HTML cabe apenas a
manipulação de textos e objetos, como figuras, sons, fotos, animações e
eventualmente pode ser utilizada para a manipulação de dados” (MARCONDES,
Christian A. - Programando em HTML 4.0)
Leituras complementares
http://pt-br.html.net/tutorials/html/lesson2.php

7
1.2 HTML: peculiaridades
Chamamos os comandos HTML de tags
Cada comando é iniciado e finalizado por uma tag
Todas as tags são apresentadas entre sinais de maior “>” e menor “<”, na seguinte sintaxe: <
TAG>
A área de código iniciada por uma tag, deve ser finalizada pelo mesmo comando antecedido
de “/”, na seguinte sintaxe: </TAG>
Existem excessões onde não é utilizada tag de finalização. Exemplo: para pular linha <br> e
de inserir divisórias <hr>.
A linguagem HTML não é case sensitive, o que significa que tanto faz se você escreve uma
tag como <html>, <HTML>, <Html>, <hTML> ou <HtMl>.
1.3 Tags básicas
<HTML> … </HTML>
É a tag que inicia e finaliza um documento HTML. Tem por função indicar ao navegador
que o documento lido está na linguagem HTML.

Tem por finalidade inserir um comentário do desenvolvedor no meio do código. Tal
comentário pode ser visualizado apenas por quem abrir o código-fonte de sua página.
<head> … </head>
Tag que delimita o espaço de cabeçalho da página. Nele devem constar todas as
informações que não estarão presentes no corpo do documento HTML e que devem ser pré-
lidas pelo navegador, como: tags meta, título da página (inserido com a tag <title>), scripts e
documentos em outras linguagens a serem carregados, etc.

8
<title> … </title>
Tag que tem por finalidade inserir um título na Barra de Títulos do navegador Web. Deve ser
utilizada dentro do espaço de cabeçalho do documento HTML. Sua sintáxe básica é: <title>
Título </title>
<body> … </body>
Tem por finalidade demarcar o início e o fim do corpo do documento HTML. No corpo do
documento devem ser inseridos os elementos que fazem parte da aparência do website: textos,
tabelas, imagens, etc. A tag <body> deve vir logo após a finalização do cabeçalho “</head>”
e deve ser finalizada logo antes da tag </html>.
<br>
A tag <br> tem por finalidade sinalizar uma quebra de linha, pois na linguagem HTML
certos caracteres especiais como ENTER e espaço (mais de um), não são processados.
Esqueleto básico de uma página HTML:
<html>
<head>
<title> Titulo do documento </title>
</head>
<body>
Informações do documento<br> 
Aqui você poderá inserir os elementos que quiser<br>
</body></html>

9
1.4 Editor
Utilizaremos nesta disciplina o editor de código open source Notepad++. Para fazer o
download basta acessar : http://notepad-plus-plus.org/:
Primeiro exemplo
Abra o Notepad++. Crie um novo arquivo e escolha HTML no menu de linguagem. Depois teste o seguinte
código e salve na pasta que desejar:
<html>
<head>
<title> Minha primeira página HTML </title>
</head>
<body>
Das Utopias (Mario Quintana)<br><br>
Se as coisas são inatingíveis...ora!<br>
Não é motivo para não querê-las...<br>
Que tristes os caminhos, se não fora <br>
A presença distante das estrelas! <br>
</body></html>

10
1.5 Atributos
No HTML um atributo funciona como uma formatação, ou especificação, da tag. Isso quer
dizer que algumas tags possuem atributos pré-determinados através dos quais podemos
adicionar uma formatação diferenciada aos elementos que estas tags representam. Nossa
formatação ganha as características que desejamos através dos valores que passamos aos
atributos. O esquema básico para utilização de atributos nas tags funciona no seguinte
esquema:
<TAG atributo1 = “valor” atributo2 = “valor” atributo3=”valor”...>
Obs: Ao utilizarmos o atributo bgcolor com a tag <body> podemos modificar a cor de fundo
da nossa página. O atributo bgcolor pode receber como valor o nome da cor em inglês ou o
número da cor na tabela hexadecimal de cores. Também podemos usar com a tag <body> o
atributo background para inserir uma imagem de fundo na nossa página, ele recebe como
valor o caminho do arquivo de imagem.
Exemplos:
1-
<html>
<head>
</head>
<body bgcolor="grey">
</body>
</html>
2-
<html>
<head>
</head>
<body background="imagem.jpg">
</body>
</html>

11
1.6 Tag <meta>
A tag <meta> traz metadados (podemos dizer, de forma bem simplificada, que um metadado é
um dado inteligível por um computador ) sobre o documento HTML. É geralmente utilizada
para descrever a página, especificar palavras chave, autor do documento, linguagem, etc.
Estes metadados não aparecerão na sua página, mas serão legíveis pelo navegador e
ferramentas de busca por exemplo. O uso da tag meta deve ser feito sempre dentro do
cabeçalho <head> </head> do documento HTML.
Exemplo
<html>
<head>
<meta name="description" content="Poema – Mário Quintana"> 
<meta name="keywords" content="Poemas, Mario Quintana, utopias"> 
<meta name="author" content="Denise Pinho"> 
<meta charset="utf-8"> 
</head>
<body bgcolor="grey">
</body>
</html>

12
CAPÍTULO 2 - FORMATANDO TEXTO
2.1 Tags para formatação de texto
<h> - Tag de título
Os valores desta tag variam de 1 a 6, sendo menor o texto quanto maior o número.
Pode-se definir o alinhamento do texto utilizando o atributo Align = “ center/right/left”.
Exemplo:
<html>
<head>
<title> Formatação de textos </title>
</head>
<body>
<h1 align = "center"> Texto, tamanho 1, centralizado </h1>
<h3 align = "left"> Texto, tamanho 3, alinhado à esquerda </h3>
<h6 align = "right"> Texto, tamanho 6, alinhado à direita </h6>
</body>
</html>
<font>
Esta tag é utilizada geralmente para alterar atributos das fontes do nosso site.
Atributos:
size = “n” – Tamanho da fonte. Varia de 1 até 7.
color = “#nnnnnn” - Modifica a cor de um trecho de texto. O atributo color pode ser expresso
em hexadecimal (#ffffff), ou digitando o nome da cor em inglês (black).
face=“nome da fonte” – Modifica o tipo de texto, ou fonte, utilizado.

13
Exemplo:
<html>
<head>
</head>
<body>
<h2><font color="#483D8B">Das Utopias (Mario Quintana)</font></h2><br><br>
<font size="2" color="#3CB371">Se as coisas são inatingíveis...ora!</font><br>
<font size="3" color="#CD5C5C">Não é motivo para não querê-las...</font><br>
<font size="2" color="#C71585">Que tristes os caminhos, se não fora </font><br>
<font size="3" color="#8B8B00">A presença distante das estrelas! </font><br>
</body>
</html>
Outras tags para estilizar texto
<b> - Mostra o texto em negrito.
<i> - Mostra o texto em itálico.
<u> - Mostra o texto sublinhado.
<s> - Frase riscada.
<big> - Fonte maior.

14
Exemplo:
<html>
<head>
</head>
<body>
<h2><font color="#483D8B">Das Utopias (MarioQuintana)</font></h2>
<font size="2" color="#3CB371"><b>Se as coisas são inatingíveis...ora!</b></font><br>
<font size="3" color="#CD5C5C"><i>Não é motivo para não querê-las...</i></font><br>
<font size="2" color="#C71585"><u>Que tristes os caminhos, se não fora</u></font><br>
<font size="3" color="#8B8B00"><sub>A presença distante das estrelas!</sub> </font><br>
</body>
</html>
2.2 Texto animado
A tag <marquee> insere efeito de animação simples em textos. Para formatá-la existem
diversos atributos, sendo alguns deles:
Behavior – como o texto irá se comportar na tela. Para ele existem três valores: Scroll, slide
e alternate.
Direction - Tem por finalidade atribuir uma direção à animação do texto. Pode receber um
dos dois valores: RIGHT e LEFT.
Loop – Define o número de vezes que a animação se repetirá. Pode receber valores numericos
e também o valor INFINITE para repetir infinitamente.
Align – formata o alinhamento do texto ao redor do marquee em relação a ele. Valores: TOP
(acima), BOTTOM (abaixo) e MIDDLE (no centro)

15
2.3 Hyperlinks
Para criar um hyperlink utilizamos a tag <a>, mas ela depende de alguns atributos
para que funcione:
Href: Atributo que recebe como valor o endereço da página a ser carregada
Target: Permite que esta nova página abra em uma aba ou frame diferente. Para abrir em
nova aba utilizamos o valor “_blank”.
Exemplo:
<html>
<head>
<title> Um hyperlink </title>
</head>
<body>
<a href=”http://google.com.br” target=”_blank”> Google </a>
</body>
</html>
Você pode modificar a cor dos links de um documento mexendo nas propriedades
link, alink e vlink da tag <body>. Ou você pode mudar a cor de cada link individualmente
editando a cor da sua fonte com a propriedade color da tag <font>.
Exemplos:
<html>
<head>
</head>
<body link=”blue” alink=”yellow” vlink=”red”>
<a href=”http://google.com.br”> Google </a>
</body></html>
<html>
<head>
</head>
<body>
<a href=”http://google.com.br”><font color=”red”>
Google</font> </a>
</body></html>

16
Mail to
Para criar um link para envio de e-mail utilizamos a tag <a> da seguinte maneira:
<html>
<head>
<title> Link para e-mail</title>
</head>
<body>
<a href=”mailto:seuemail@email.com”> e-mail me </a>
</body>
</html>
Exemplo prático:
<html>
<head>
</head>
<body bgcolor="#000000">
<marquee behavior="alternate" direction="right" loop="infinite" width="430" height="80" scrollamount="5"
scrolldelay="300"> <h2><font color="#483D8B">Das Utopias (Mario
Quintana)</font></h2></marquee><br><br><br>
<font size="2" color="#3CB371"><b>Se as coisas são inatingíveis...ora!</b></font><br>
<font size="3" color="#CD5C5C"><i>Não é motivo para não querê-las...</i></font><br>
<font size="2" color="#C71585"><u>Que tristes os caminhos, se não fora</u></font><br>
<font size="3" color="#8B8B00"><sub>A presença distante das estrelas!</sub> </font><br><br>
<font size="1"><a href="http://google.com.br"> Quem é Mario Quintana? </a></font><br>
</body></html>

17
2.4 Formatação de parágrafos
<center>
Esta tag centraliza qualquer elemento de uma página. Tanto texto quanto imagem.
<p>
Indica o início de um novo parágrafo e seu respectivo alinhamento através do atributo align.
Align pode receber os valores: center, right ou left.
2.5 Listas
Listas Não-numeradas
<ul>
Define o início e o fim de uma lista não-numerada. Ul vem de Unordered list.
<li>
Define os elementos da lista. A tag <li> possibilita a definição do atributo type para modificar
os tipos de marcadores. Type pode receber os valores: disc, circle e square.
Exemplo:
<html>
<head>
<title> Lista não-numerada</title>
</head>
<body>
<ul>
<li type="disc"> primeiro item
<li type="circle"> segundo item
<li type="square"> terceiro item.
</ul></body></html>

18
Listas Numeradas
<ol>
Define o início e o fim de uma lista numerada. Ol vem de Ordered List.
<li>
Define os elementos da lista. A tag <li> possibilita a definição do atributo type para modificar
os tipos de ordem que os itens receberão. Type pode receber os valores: 1 para algarismos
arábicos, I para algarismos romanos maiúsculos, i para algarismos romanos minúsculos, A
para ordem alfabética maiúscula e a para ordem alfabética minúscula.
Exemplo:
<html>
<head>
<title> Lista numerada</title>
</head>
<body>
<ol>
<li type="A"> primeiro item
<li type="A"> segundo item
<li type="A"> terceiro item.
</ol>
</body>
</html>

19
CAPÍTULO 3 – RECURSOS VISUAIS
3.1 Inserir imagens
Para inserir uma imagem utilizamos a tag <img>, mas ela depende de alguns
atributos para que funcione.
src: Atributo que recebe como valor o endereço da imagem a ser carregada
width: Permite redimensionar a largura da imagem. Recebe como valor o tamanho em pixels.
height: Permite redimensionar a altura da imagem. Recebe como valor o tamanho em pixels.
Exemplo:
<html>
<head>
<title> Inserindo Imagem</title>
</head>
<body>
<img src=”imagem.jpg” width=”400” height=”250”>
</body>
</html>

20
3.2 Linhas horizontais
A tag utilizada para inserir linhas horizontais é <hr>. Podemos formatá-la através de quatro
atributos diferentes:
Width: Define a largura da linha. Deve receber como valor um número em pixels ou
porcentagem.
Size: Define a espessura da linha. Deve receber como valor um número em pixels.
Align: Representa o alinhamento. Recebe os valores: left ou right ou center.
Noshade: Desativa o atributo tridimensional da barra, deixando-a com duas dimensões e cor
cinza.
Exemplos:
<html>
<head>
<title> Linhas Horizontais</title>
</head>
<body>
<hr size= “8”>
<hr size= “2”>
<hr width= “3” size= “50”>
<hr noshade size= “8”>
</body>
</html>

21
3.3 Tabelas
No HTML as tabelas são formadas por linhas, nas quais são inseridas células. Nestas
células pode-se inserir qualquer tipo de conteúdo, de texto até imagens.
As tags para criar tabelas são:
<table> </table> - Para indicar o início e o fim de uma tabela.
<tr> e </tr> - Para indicar o início e o fim de uma linha.
<td> e </td> - Para indicar o início e o fim de uma célula.
Podemos definir uma espessura para a borda utilizando o atributo border na tag <table>
Exemplo:
<html>
<head>
<title> Tabela Simples</title>
</head>
<body>
<table border= “3”>
<tr>
<td> Primeiro Elemento</td>
<td> Segundo Elemento </td>
<td> Terceiro Elemento </td>
</tr>
</table>
</body>
</html>

22
Atributos para formatação de tabelas
Align: Com este atributo definimos o alinhamento horizontal dos elementos dentro da tabela.
Recebe os valores: left ou right ou center.
Background: Coloca uma imagem de fundo na tabela. Recebe como valor o endereço do
arquivo de imagem.
Bgcolor: Define a cor de fundo da tabela.
Bordercolor: Define a cor da borda da tabela.
Cellpadding e cellspacing: Definem, respectivamente, a margem dentro das células e o
espaçamento das bordas entre as células da tabela.
Colspan: Define o número de colunas pelas quais uma única coluna pode se expandir.
Rowspan: Define o número de linhas pelas quais uma única coluna pode se expandir.
Valign: Com este atributo definimos o alinhamento vertical dos elementos dentro da tabela.
Recebe os valores: top ou middle ou bottom.
Width e Height: Servem para definir a largura de uma coluna e a altura de uma linha.
Exemplo:
<html>
<head>
<title> Tabela Simples</title>
</head>
<body>
<table border= "3" bordercolor="black" cellspacing="25" cellpadding="15" align="center" width="50%"
height="50%">
<tr>
<td bgcolor="pink" colspan="3" align="center"> Elementos </td>
</tr>
<tr>
<td bgcolor="red"> Primeiro Elemento</td>
<td bgcolor="green"> Segundo Elemento </td>
<td bgcolor="blue"> Terceiro Elemento </td>
</tr>
<tr>
<td bgcolor="purple"> Quarto Elemento</td>
<td bgcolor="yellow"> Quinto Elemento</td>
<td bgcolor="grey"> Sexto Elemento</td>
</tr>
</table>
</body>
</html>

23
CAPÍTULO 4 – ESTRUTURAS AVANÇADAS
4.1 Formulários
Tags básicas:
<form>
Tag que inicializa e finaliza o espaço de formulário.
<input>
Tag que inicializa e finaliza o espaço de cada elemento do formulário.
Atributos:
Name = “ “ - Define o nome do campo
Type = “ “ - Define o tipo de campo de formulário
Podem ser criados diferentes tipos de campos de formulário de acordo com o valor
passado para o atributo type. Para criar uma caixa de texto, use o valor “text”. Para criar um
botão de envio, use o valor “submit”. Para criar um botão de reset, use o valor “reset”. Para
criar uma sequência de botões de rádio, use o valor “radio”. Para criar check boxes, use o
valor “checkbox”. Para criar um campo de senha, que substitua os caracteres digitados por
símbolos, use o valor “password”.
Value = “ “ - Define o valor a aparecer neste campo.
Maxlenght= “ “ - Define o número máximo de caracteres no campo.
Size = “ “ - Define o tamanho do campo de formulário

24
Exemplo
<html>
<head>
<title> Meu primeiro formulário </title>
</head>
<body>
<form action="mailto:denisemp_contato@hotmail.com" method="post">
<input name= "texto1" type= "text" value= "seu nome" size= "20" Maxlenght= "30"></input><br><br>
Idade:<br>
<input name= "idade" type= "radio" value= "0"> 10 - 20</input><br><br>
<input name= "idade" type= "radio" value= "1"> 20+ </input><br><br>
<textarea name= "area1" value= "vazio" rows= "5" cols= "30" size= "256" align= "middle" maxlenght= "256">
Sua mensagem </textarea><br><br>
<input name= "Envia" Type= "submit" value= "Enviar Dados"></input>
</form>
</body>
</html>

25
4.2 Divs
A tag <div> define uma divisão ou seção num documento HTML. Podemos dizer que
uma <div> serve como um container para um pedaço de código. Sua principal utilização é no
posicionamento de partes do layout na página. Geralmente a formatação da <div> é associada
a elementos CSS.
Exemplo:
<html>
<head>
<title> Minha primeira div </title>
</head>
<body>
<div name=div1 style="position: absolute; color: #FF0000; margin-left:800px; margin-top: 50px; width:
200px; height: 200px;">
Aqui vão os elementos da sua div.<br>
</div>
<div name=div2 style=" position: absolute; color: #FF00FF; margin-left: 10px; margin-top: 50px;
width:200px; height: 200px">
</div>
</body>
</html>

26
4.3 Frames
Frame cria um tipo de página web, onde o espaço da tela é dividido em mais de uma
parte, onde cada uma exibe uma página html diferente. A vantagem do uso de frames é que
você pode ter ao mesmo tempo na tela , partes como um menu que estará sempre visíve, e
partes como o assunto da página que pode estar dividida em várias outras partes. Para
utilizarmos esta técnica, precisamos substituir <body> por <frameset> (deve-se usar os
atributos “rows” e “cols” dentro da tag <frameset> para definir, respectivamente, o número de
linhas e colunas em que a página será dividida) e inserir um espaço de frame com a tag
<frame> para cada divisão.
Exemplo
<html>
<head><title>Frames</title></head>
<frameset rows=”*,*”>
<frame src=”pagina.html” scrolling=no noresize>
<frame src=”pagina.html” scrolling=yes noresize>
</frameset>
</html>
4.4 iFrames
O iFrame cria uma janela que carrega uma página HTML em qualquer lugar da sua
página. É um recurso muito mais funcional e prático do que os frames, pois não transforma o
documento inteiro em quadros.
Exemplo:
<html>
<head><title>iFrames</title></head>
<body bgcolor=#34ff00af>
<iframe name=iframe src=pagina.html frameborder=0 width=200 height=250></iframe>
</body></html>

27
CAPÍTULO 5 – NOÇÕES BÁSICAS DE DESIGN
5.1 Áreas de layout
Antes de começar o desenvolvimento de um site é importante pensar a distribuição do
conteúdo pela página. Observando qualquer site da web podemos chegar a conclusão de que
existem certas “áreas de layout” com características próprias. Por exemplo: A área de topo
geralmente traz alguma informação sobre do que se trata o site, ou um banner, ou um
logotipo. A área central geralmente traz o conteúdo do site, etc.
Obs: É interessante criar rascunhos de como serão distribuídas as áreas do seu layout.
Exemplo:

28
5.2 Paleta de cores
Outro passo importante na idelização de um layout é a definição da paleta de cores. É
importante que um site tenha um padrão de cores harmônicas que o representem. Existem
diversos estudos em psicodinâmica das cores que atribuem significados a estas. Não é
incomum, por exemplo, encontrarmos propagandas ou sites relacionados a comida nas cores
vermelha, laranja ou amarela, ou sites relacionados a tecnologia nas cores prata ou cinza.
Leitura complementar:
http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comunicacao.pdf
Criando sua paleta de cores
Uma forma interessante de se criar uma paleta de cores é pensar primeiro em duas
cores neutras (uma escura, próximo ao preto, e outra clara, mais próxima ao branco), depois
adicionar mais duas ou três cores de acordo com a temática do seu site. Por exemplo:
Além disto, ainda existem muitos sites na internet que fornecem coleções de paletas de
cores que podem ser usadas, ferramentas para criação rápida de paletas:
http://colorcombos.com
http://www.colourlovers.com/palettes/add
http://www.colourlovers.com/copaso/ColorPaletteSoftware
https://kuler.adobe.com/create/color-wheel
http://colorschemedesigner.com/

29
CAPÍTULO 6 – COMO TRANSFERIR ARQUIVOS PARA SUA
HOSPEDAGEM ONLINE
6.1 Fazendo transferência de arquivos com o Filezilla
Primeiro precisamos saber que alguns servidores permitem transferência de arquivos
com este tipo de programa, outros não. Alguns ainda permitem apenas em planos pagos. Das
hospedagens que utlizamos, o qlix permite apenas em plano Plus, já o 000webhost
disponibiliza suporte a FTP para usuários free.
Passo 1: O servidor que disponibilizar o uso de programa de FTP deverá informar em algum
lugar as informações necessárias para configuração do programa. No http://000webhost.com
você pode encontrar as informações para o seu Filezilla no seguinte link do painel de controle:

30
Será exebida uma página com os seguintes dados:
Passo 2: Abra o Filezilla.

31
Passo 3: Clique no primeiro ícone a esquerda para configurar sua conexão com o servidor
Passo 4: Na nova janela que abrir, clique em Novo Site para adicionar uma nova entrada, em
seguida preecha seus dados segundo o domain, username e senha que tiver na hospedagem.
No caso do 000webhost não é aceito conexão do tipo anônima para usuários free, portanto
mude o tipo de logon para Normal ou Pedir Senha. A porta não precisa ser preenchida, o
Filezilla a identifica automaticamente.

32
Passo 5: Clique em Conectar e aguarde. Se tudo estiver certo as pastas e arquivos de sua
hospedagem devem aparecer no lado direito da tela principal do FileZilla.
Passo 6: Agora é só clicar nos arquivos de seu computador, na parte esquerda, e esperar que o
upload seja feito para a pasta selecionada do servidor, a direita.

33
CAPÍTULO 7 – CSS básico
7.1 Introdução
Sabemos que originalmente o HTML, que estudamos até agora, é uma linguagem de
marcação que serve para estruturar páginas web. Apesar de possível, não cabe a ele a
formatação de estilos das páginas (fontes, cores, espaçamentos). Para isto utilizamos a
linguagem CSS. Nas folhas de estilos são determinadas as tags que terão formatação especial
e quais serão os tais atributos especiais que cabem a elas.
Vantagem: Vários documentos HTML podem utilizar o mesmo CSS
Regra CSS
Seletor { propriedade: valor;}
Seletor: É o alvo ao qual se aplicam as formatações CSS. (pode ser uma tag, id ou classe por
exemplo)
Propriedade: Determina qual característica do alvo (seletor) será modificada
Valor: De que forma esta característica será modificada.
Obs: um seletor pode recer formatação de várias propriedades diferentes. Exemplo:
seletor{propriedade1 : valor; propriedade2: valor; propriedade3: valor;}
Observações importantes :
Algumas vezes propriedades CSS recebem como valores palavras compostas. No caso
de palavras compostas separadas por espaço, deve-se usar aspadas duplas ou simples.No caso
de palavras compostas separadas por hífen, não é necessário o uso de aspas.
No CSS pode-se abrir um bloco de comentários com os sinais /* e fechar com os sinais */.

34
7.2 Trabalhando com seletores :
Como vimos anteriormente, a sintaxe da regra CSS é seletor { propriedade: valor}. Sabemos
que um seletor simples diz respeito aos seletores tipo (por exemplo, uma tag), o seletor id e o
seletor classe. Ainda existem outros tipos de seletores simples como as pseudoclasses.
Existem as chamadas pseudoclasses estruturais que servem para fazer referência a eventos
específicos como, por exemplo, o usuário estar com o ponteiro do mouse sobre determinado
elemento.
No CSS é possível executar diversas manipulações de seletores. Por exemplo, é possível
agrupar seletores que compartilham as mesmas regras CSS, e é possível também criar
combinações de seletores compostos por outros seletores.
Seletores simples:
Seletor Tipo:
Um seletor tipo é aquele que representa um determinado elemento da linguagem a qual o CSS
está se referindo, por exemplo, uma tag HTML.
H1, font, body e p são exemplos de seletores tipo.
Exemplo: h1 {color: red}
Seletor ID:
Um seletor id é aquele que toma como base o valor do atributo id de uma determinada tag do
documento HTML. A string para designar um seletor do tipo id é composta pelo sinal #
seguido pelo valor do id.
Exemplo:
a tag <h1 id='exemplo'>
deve ser formatada no CSS: #exemplo { color: red}
No caso em que se desejar ser mais específico, podemos utilizar o nome do elemento, seguido
de # e o valor do id.
Exemplo:
h1#exemplo {color:red}

35
Seletor Classe:
Um seletor classe é aquele que toma como base o valor do atributo class de uma tag do
documento HTML. A string para designar um seletor do tipo classe é composta pelo sinal .
Seguido do valor da class.
Exemplo:
a tag<h1 class='exemplo'>
deve ser formatada no CSS: .exemplo {color:red}
No caso em que se desejar ser mais específico, podemos utilizar o nome do elemento, seguido
de . E o valor da class.
Exemplo:
h1.exemplo{color: red}
7.3 Formas de manipular folhas de estilo CSS
Estilo In-line
É o estilo mais simples de formatação CSS. Nele o CSS funde-se ao HTML,
passando as propriedades CSS através do atributo style do HTML, dentro da própria tag a
qual aquele CSS se destina. Por isto mesmo acaba não sendo o estilo CSS mais adequado em
termos de custo-benefício, afinal não há como reaproveitar o mesmo CSS para formatar
outras estruturas iguais do mesmo documento ou em outros documentos HTML, como no
caso dos próximos estilos.
Exemplo:
<html>
<head>
<title>Estilos In-line</title>
</head>
<body style="background-color: #FA8072;">
<p style="text-indent: 28px; color: #483D8B; font-weight: bold; font-size: 40pt">Página com formatação de
parágrafo e cor de fundo em CSS. Aplicado no padrão Inline.</p>
</body>
</html>

36
Estilo incorporado
O estilo incorporado é muito utilizado em páginas onde várias estruturas HTML utilizam o
mesmo tipo de formatação. Neste caso, O CSS é especificada dentro do espaço de cabeçalho
do documento e declarada dentro do espaço definido pela tag <style> Os comandos terão a
seguinte sintaxe:
TAG {estilo 1; estilo 2; ….; estilo N}
Exemplo:
<html>
<head>
<title>Estilos incorporados</title>
<style type="text/css">
body {background-color: #CAFF70; font-family: arial; font-size: 12pt; margin-top: 1cm}
P { margin-left: 5cm; margin-right: 5cm}
H1 {font-family: desdemona; font-size: 40pt; color: #FF7F24; text-align: center}
</style>
</head>
<body>
<h1><P> Aprendendo estilos incorporados </P>
Legal né? </h1>
</body>
</html>

37
Estilo Vinculado
No estilo vinculado criamos dois tipos de arquivos separados. Um apenas para as
formatações CSS e outro com as estruturas HTML. Com isto, estas formatações ficam
disponíveis para todo o site, permitindo, inclusive, que mais de uma página HTML
compartilhe da mesma formatação CSS. Para utilizar CSS de forma vinculada, é necessário
primeiro analisar as características desejadas em seu layout e as propriedades CSS que devem
ser empregadas para isto. A seguir, desenvolver as páginas HTML livres de formatação e um
arquivo de propriedades CSS. Por fim, para criar um vínculo entre os dois documentos, deve-
se utilizar a tag <link> dentro do espaço de cabeçalho dos documentos HTML.
Tag Link
A tag link se assemelha muito com a tag A, a diferença está em que ela não funciona
apenas como uma ponte de uma página para outra, e sim como se uma fizesse parte da outra
incorporando inteiramente as duas páginas. O atributo rel=stylesheet, define o tipo de relação
do link, que no caso está sendo definido como um link de uma folha de estilo externa. O
atributo href=”estilo1.css” não precisa de muitas explicações, href como já aprendemos é uma
referência que está definindo onde estão nossos estilos.O atributo type=”text/css” serve para
definir o tipo de folha de estilo que o browser deve esperar.
Exemplo:
Página .html:
<html>
<head>
<title>Estilo Vinculado</title>
<link rel="stylesheet" href="estilo1.css" type="text/css">
</head>
<body>
<h1>Bem-Vindo! </h1>
<p> Esta é minha primeira página utilizando estilo
vinculado </p>
<h2> Muito legal né? </h2>
<h1> Vamos experimentar formatação de link também: <a
href="http://google.com">Vamo pro Google!
</a></h1>
</body></html>
Página .css:
body {background-color: #8B4513; font-family:
arial;
font-size: 15pt; margin-top: 2cm}
p {margin-left: 12cm; margin-right: 5cm; color:
#FAFAD2}
h1 {font-family: desdemona; font-size: 50pt;
color: #FFA500; text-align: center}
h2 {font-family: garamond; font-size: 30pt; color:
#FFF68F; text-align: right}
a {text-decoration: none; color: #8B0000}
a:hover {text-decoration: underline; color:
#FF6347}

38
7.4 Aplicando CSS em tabelas
Utilizando seletores do tipo id ou classe pode-se facilmente formatar com CSS diversas
tabelas diferentes no mesmo documento.
Página .html
<html>
<head>
<title>Estilo Vinculado</title>
<link rel="stylesheet" href="estilo.css"
type="text/css">
</head>
<body>
<h1>Formatação de Tabelas </h1>
<table id="tabela" >
<tr>
<td> <h2>oi<h2> </td>
<tr>
</table>
<br><br>
<table id="tabelinha" >
<tr>
<td> <h2>oizinho<h2> </td>
<tr> </table>
<br><br>
<table id="tabelinha2" >
<tr>
<td> <h2>olá<h2> </td>
<tr>
</table>
<br><br>
<table id="tabela2" >
<tr>
<td> <h2>:D HEY!<h2> </td>
<tr></table>
<br><br>
<table id="tabela3" >
<tr>
<td> <h2>Bom-dia!<h2> </td>
<tr>
</table>
<br><br>
<table id="tabela4" ><tr>
<td>
<h2>Boa-tarde!<h2> </td><tr></table><br><br>
<table id="tabela5" ><tr>
<td>
<h2>Boa-noite!<h2> </td><tr>
</table>
</body></html>
Página .css
body {background-color: #FFDAB9; font-family: arial;
font-size: 15pt; margin-top: 2cm}
h1 {font-family: desdemona; font-size: 50pt;
color:#E9967A; text-align: center}
#tabela {border: 1px solid black}
#tabelinha{border: 12px dotted blue}
#tabelinha2{border: 5px dashed #DCDCDC}
#tabela2 {border: 15px groove #98FB98}
#tabela3 {border: 20px ridge #D02090}
#tabela4 {border: 25px inset #548B54}
#tabela5 {border: 25px outset #FF6A6A}

39
7.5 Aplicando CSS em divs
Além dos atributos mais simples para formatação de divs, que vimos na parte de HTML,
como margin-left e margin-top, com o CSS3 podemos fazer algumas modificações na
aparência das divs. Há como alterar seu formato quadradão através da propriedade border-
radius, que recebe valor em pixels. Para colocar uma certa transparência na div é possível
utilizar a propriedade opacity, que recebe valores entre 0 e 1. Para centralizar o texto dentro
da div horizontalmente utilizamos a propriedade text-align, que pode receber os valores
center, left ou right. Já para centralizar o texto dentro da div verticalmente podemos utilizar a
propriedade line-height (que aumenta a entrelinha), pode receber valores em pixels.
Para posicionar divs com valores relativos ao tamanho da tela, pode-se fazer o seguinte:
(nesta explicação estarei tentando colocar a div no meio da página)
1º definir o tamanho da div ex: width: 400 e height 400
2º depois usar as propriedades top: 50% e left: 50% (assim pegamos metade do valor da tela
para desenhar a div. Só que assim a div será desenhada a partir de 50% da tela e nós queremos
ela centralizada)
3º definimos margin-top: -200 e margin-left: -200, assim “voltamos”o posicionamento da div
para metade do seu tamanho total.
Exemplo de formatação de divs com css:
<html>
<head>
<title> minha pagina css </title>
body {background-image: linear-gradient(45deg, white, blue, red, black)}
#div1 {background-color:white; width:300px; height: 500px; top: 50%; left: 50%; margin-top: -250; margin-
left: -150; text-align: center; position:absolute; opacity:0.5;border-radius:40px;"}
</style>
</head>
<body>
<div id="div1">
<br><br><br><br>
texto - texto - texto <br>
</div>
</body></html>

40
7.6 Trabalhando com seletores avançados
Seletor pseudoclasse
Um seletor pseudoclasse estrutural é um conceito de seletor criado pelas CSS para
possibilitar a seleção de um elemento com base em informações que não constam no HTML.
A aplicação de uma pseudoclasse é formada pelo elemento (seja um seletor simples, um
seletor id ou um seletor classe) seguido de : e o nome da pseudoclasse.
Alguns seletores pseudoclasse:
:link
Usamos esta pseudoclasse para alterar a estilização de links não visitados.
Exemplo:
a:link {color: white; text-decoration: none}
:visited
Usamos esta pseudoclasse para alterar a estilização de links visitados.
Exemplo:
a:visited {color: white; text-decoration: none}
:hover
Este seletor modifica o elemento definido que tenha recebido sobre ele um dispositivo
apontador como o ponteiro do mouse, por exemplo. Pode ser usado tanto em links quanto em
elementos da marcação.
Exemplo:
a:hover{color: yellow}
ou
div:hover{background-color: #000000}

41
:active
Este seletor modifica o elemento definido que tenha sido ativado pelo usuário, ou seja,
enquanto este elemento está sendo pressionado pelo clique do mouse. O seletor :active pode
ser usado tanto em links quanto em elementos da marcação.
Exemplo:
a:active{color: green}
:focus
Este seletor modifica o elemento definido que tenha sido posto em foco. Um elemento
da marcação é posto em foco quando o usuário acessa esse elemento via teclado. Pode ser
usado tanto em links quanto em qualquer elemento da marcação.
Exemplo:
a:focus{outline: 2px solid red}
Grupamento de seletores:
É válido agrupar seletores que compartilham uma mesma regra CSS. Seletores devem
ser agrupados com uso de vírgula como separador. A sintaxe para agrupar seletores é a
seguinte:
div, p, span{color: red} /* Elementos div, p e span serão na cor vermelha */
Caracteres de combinação:
Caracteres ou sinais de combinação são os caracteres destinados a escrever a sintaxe de um
seletor composto por outros seletores. Os sinais de combinação de seletores são: espaço em
branco, sinal maior que (>), sinal de adição (+) e sinal til (~). A sintaxe de uso dos sinais de
combinação de seletores é mostrada a seguir:
div > p {…} /* Elemento p filho de div */
Obs: Um elemento A é filho de um elemento B quando A está diretamente contido em B.
div p {…} /* elemento p descendente de div */
Obs: Um elemento A é descendente um elemento B quando A estiver contido em B em
qualquer nível, ou seja, A pode ser elemento filho de B ou de qualquer um dos filhos de B.

42
div ~ p {…} /* Elementos div e p são irmãos e p vem depois de div */
Obs: Um elemento A é irmão de um elemento B quando ambos estiverem contidos no mesmo
elemento pai.
div + p {…} /* Elemento p imediatamente após div */
Obs: Um elemento A precede um elemento B quando A é ancestral de B ou elemento-irmão
de B, posicionado antes dele na marcação HTML.

43
7.7 Aplicação de CSS em divs para criação de um menu.
Página .html
<html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css">
</head>
<body>
<table id="1">
<tr>
<td>
<div id='pai'>
<p> Menu 1 </p>
<div id="mostrada">
<center>
<table id="2">
<tr>
<td>
<a href="#"> Link 1 </a>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</center>
</div>
</div>
</td>
<td>
<div id='pai'>
<p> Menu 2 </p>
<div id="mostrada">
<center>
<table id="2">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</center>
</div>
</div>
</td>
<td>
<div id='pai'>
<p> Menu 3 </p>
<div id="mostrada">
<center>
<table id="2">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</center>
</div>
</div>
</td>
</tr></table>
</body>
</html>

44
Página .css
body{
background-color: #000000;
}
#1{
border-width: 0;
}
#2{
border-width: 1;
width: 100%;
}
p
{
text-align : center;
}
#pai {
background-color:#5E6651;
width:80px;
height:40px;
position:relative;
}
#pai #mostrada {
display:none;
position:absolute;
}
#pai:hover {
background-color:#F28B5D;
}
#pai:hover #mostrada {
display:inline;
}
#mostrada {
background-color:#F28B5D;
position:relative;
width:80px;
}

45
Exemplo final:
<html>
<head>
<title>Pagina Teste</title>
<meta charset="utf-8">
body{background-image: linear-gradient(45deg, black, white, red)}
#a{list-style-image: url(confere.png);}
#b{list-style-image: url(nconfere.png);}
#font1{font-size:20; font-family: Verdana; font-weight: Bold; text-decoration: underline;
color: white;}
#font2{font-size:10; font-family: Verdana; font-weight: Bold; color: white;}
#font3{font-size:10; font-family: Verdana; font-weight: Bold; text-decoration: line-through;
color: white;}
#par1{text-align: center;}
#tab1{width: 300px; background-color: white; margin-left: 40%; border: 5px grey dashed;}
#td1{background-color: #8B0000 }
</style>
</head>
<body>
<table id="tab1"> <tr> <td id="td1">
<font id="font1"><p id="par1"><br>Lista de Afazeres<p></font><br>
</td> </tr> </table>
<br>
<table id="tab1"><tr><td id="td1">
<br>
<ol>
<font id="font3"><li id="a"> Ir ao supermercado </li></font>
<font id="font3"><li id="a"> Arrumar o quarto </li></font>
<font id="font2"><li id="b"> Estudar para a prova </li></font>
<font id="font2"><li id="b"> Ir ao curso de inglês </li></font>
</font></ol><br>
</td></tr></table>
</body>
</html>

46
CAPÍTULO 8 – Caderno de exercícios
HTML:
1) No espaço abaixo desenvolva o esqueleto básico de um documento html
2) Formate um texto qualquer, com html, da seguinte maneira:
A primeira linha deve ser amarela e em negrito.
A segunda linha deve ser vermelha e em itálico

47
A primeira linha deve ser verde e em negrito.
A segunda linha deve ser azul e em itálico.
A terceira linha deve ser vermelha e sublinhada.
A primeira linha deve ser tipo título 1, e de cor verde
A segunda linha deve ser cinza e riscada.
A terceira linha deve ser amarela e em itálico
5) Crie um marquee (animado) com um texto com hyperlink:

48
6) Agora crie um marquee(animado) com uma imagem com hyperlink:
7) Crie uma lista não numerada formatada como na imagem abaixo:

49
8) Crie uma lista de tópicos como na figura abaixo:

50
9) Com base no que aprendemos até o momento, desenvolva um mini-layout com base na
estrutura dada:

51
10) Desenvolva três tabelas como as da figura abaixo:

52
11) Desenvolva uma tabela como a da figura abaixo:

53

54

55
14) Quais atributos utilizamos para modificar largura e altura de tabelas.
15) Qual atributo utilizamos para inserir imagem de fundo em tabelas?
16) Qual atributo utilizamos para definir o alinhamento vertical dos elementos dentro da
tabela?
17) Crie menus:
a) Utilizando imagens com links. Exemplo:

56
b) Utilizando botões do tipo input como hyperlinks. Exemplo:

57
18) Utilizando o recurso “mailto” crie um formulário para envio de e-mail como na imagem
abaixo:

58
19) Utilizando divs, desenvolva um código para um layout simples com imagem de topo, área
central com uma tabela. Exemplo abaixo:

59
20) Crie um layout com base em tabelas inspirado na figura abaixo:

60
21) Fazendo uso de divs, crie um esquema básico de layout posicionando lado a lado um
iframe e uma tabela como na imagem abaixo:

61
22) Utilizando divs, desenvolva o código para um layout simples com imagem de topo, área central e área lateral
esquerda com iframes. Exemplo abaixo:

62
23) Utilizando divs, desenvolva um código para um layout simples com imagem de topo, área
central com uma tabela e área lateral direita com um iframe. Exemplo abaixo:

63
24) Crie um esquema básico de layout em quadros (frames) segundo o esquema da imagem
abaixo:

64
25) Utilizando os conhecimentos até agora adquiridos que desejar, crie um esquema básico de
layout segundo o esquema:

65
CSS:
1) Descreva a regra CSS:
2) Quais os três tipos mais simples de seletores?
3) Usando CSS aplicado no estilo inline faça uma formatação de texto como a da imagem:

66
4) Usando CSS aplicado no estilo inline faça a formatação para um tabela como a da figura
abaixo:
5) Descreva o que é estilo incorporado e o que é estilo vinculado. Quais as principais
vantagens de cada um?

67
6) Usando CSS aplicado no estilo incorporado, e fazendo uso de seletores do tipo id, crie a
formatação para uma página simples como na imagem abaixo:

68
7) Usando CSS aplicado no estilo incorporado, e fazendo uso de seletores do tipo classe, crie
a formatação para uma página como na imagem abaixo:

69
8) Faça uma lista de links e formate-os, usando CSS no estilo incorporado, além de seletor
pseudo-classe :hover para criar um efeito de mudança de cor ao passar o mouse em cima.

70
9) Utilizando CSS no estilo incorporado, faça a formatação de divs usando relação de
parentesco (descendente / ascendente) entre elas, além do seletor pseudo-classe :hover, para
criação de um menu na lógica da imagem abaixo:

71
10) Qual propriedade CSS permite arredondar as bordas de uma div?
11) Qual propriedade CSS podemos usar para criar uma transparência em uma div?
12) Formate, utilizando CSS no estilo vinculado e seletores tipo id ou classe, uma div como a
da imagem abaixo:
HTML CSS

72
13) Que lógica posso usar para centralizar uma div na tela independente da resolução de
monitor do usuário ou do quanto a janela do navegador for redimensionada?
14) Crie uma lista não ordenada e utilize as propriedades CSS para modificar seus tópicos por
imagens:

73
15) Usando CSS no estilo vinculado, fazendo uso de seletores do tipo classe, crie uma página
com fundo gradiente (através da propriedade background-image: linear-gradient() que
aprendemos). Deve haver também a distribuição correta de conteúdo através de divs com
posicionamento independente das configurações de tela do usuário.
HTML CSS

MÓDULO II
PHP + Banco de Dados Mysql, noções de Javascript
e sistemas para sites dinâmicos

75
CAPÍTULO 1 – CONCEITOS BÁSICOS
1.1 O que é PHP?
É uma linguagem de programação muito empregada na criação de sistemas para
websites dinâmicos. Ter conhecimento da linguagem PHP possibilita a construção de
websites que recebam e enviem dados do usuário. Além disso a linguagem possui suporte ao
uso de banco de dados. Segundo o Manual online do PHP “ […] é uma linguagem de script open
source de uso geral, muito utilizada e especialmente guarnecida para o desenvolvimento de aplicações Web
embútivel dentro do HTML.”
Características da linguagem PHP
É uma linguagem server-side.
Isso significa que executa operações diretamente no servidor, sendo enviado para o cliente
apenas HTML puro. Assim é possível interagir com banco de dados e outros serviços
existentes no servidor, com a vantagem de não expor o código fonte.
É case sensitive.
Isso significa que a utilização de letras maiúsculas e minúsculas faz diferença em nomes
de variáveis, constantes, arrays e muitos outros elementos do nosso código. Portanto preste
muita atenção ao programar.
1.2 Primeiros passos
Como vimos anteriormente, php é uma linguagem server - side. Assim é necessário um
servidor web para executar suas operações. Entretanto, seria muito trabalhoso enviar nossos
arquivos .php para um servidor online cada vez que quiséssemos testar alguma coisa. Desta
forma, a melhor maneira de testar códigos desenvolvidos em php é instalar um servidor no
seu computador e rodar os arquivos de forma local. Para isto, utilizaremos o XAMPP que
nada mais é que um pacote de programas para desenvolvimento web. Instalando-o já
teremos um servidor Apache, suporte a banco de dados MySql, phpMyAdmin para
administração de banco de dados, FileZilla FTP Server, entre outros.
Acesse: http://www.apachefriends.org/pt_br/xampp-windows.html
Escolha o modo de instalação com instalador e siga os passos descritos no passo-a-passo
que se encontra na própria página.

76
1.3 XAMPP funcionamento
Abra o painel de controle do XAMPP e observe se o status de seu servidor Apache está como
Running.
Depois abra seu navegador e digite http://localhost. Aqui estará o painel de controle do
nosso servidor web local. Sempre que quisermos abrir um documento hospedado em nosso
servidor deveremos digitar http://localhost/nomedodocumento.php

77
XAMPP: adicionando uma página ao Localhost
A partir de agora, todos os códigos que desenvolvermos em php deverão ser salvos na
seguinte pasta:
Esta é a pasta raiz de nosso servidor. Assim, tudo que for salvo dentro dela será
acessado no navegador web através do endereço http://localhost/nomedoarquivo.php
É possível criar subpastas dentro dela, e salvar determinados arquivos dentro destas
subpastas. Assim, o acesso a estes arquivos será feito através do endereço:
http://localhost/nomedapasta/nomedoarquivo.php

78
CAPÍTULO 2 – FUNDAMENTOS DE PROGRAMAÇÃO
2.1 Formas de delimitar o código PHP
<?php ...código... ?>
<? código ?>
<script language= “php”> código... </script>
<% código %>
2.2 Declarando variáveis

79
2.3 Strings
Uma string é uma seqüência ordenada de caracteres. Segundo o Manual do PHP “Não é
problema uma string ser bastante longa. PHP não impõe limite de tamanho de uma string. O único limite é o de
memória disponível do computador no qual o PHP está sendo executado.” Além disso, ainda é importante
saber que uma string pode ser especificada entre aspas simples ' ' ou aspas duplas “ “.
Para declarar uma string:
$ nomedastring = “conteúdo da string”;
OU
$nomedastring = ‘conteúdo da string’;
http://br2.php.net/language.types.string.php
2.4 Imprimindo texto na tela
echo – imprime uma ou mais strings na página
print – É uma função que imprime uma string na página e retorna true

80
Primeiros exemplos
Abra o Notepad++. Crie um novo arquivo e escolha PHP no menu de linguagem. Depois teste
o seguinte código :
<?php
echo “Este é meu primeiro código Php”
?>
Não esqueça de salvar na pasta htdocs do nosso servidor local. Para visualizar seu
arquivo, abra o navegador web e digite http://localhost/nomedoarquivo.php Faça a mesma
coisa com os exemplos a seguir:
<?php
$t= 20;
$m= 5;
echo $t*$m;
?>
<?php
$y = 0.18;
$x = 5.15;
$z = 4.03;
echo $y/$x/$z;
?>

81
2.5 Concatenação de Strings
Quando dizemos que estamos fazendo uma operação de concatenação, significa que estamos
unindo o conteúdo de duas ou mais strings. Em php o ponto ( . ) é o operador de
concatenação.
Exemplos
<?php
$frase = 'Bom dia!';
$concatena = $frase . ' Tudo bem?';
echo $concatena;
?>
<?php
$verbo = 'Fiquei';
$lugar = 'casa';
$frase = $verbo . ' em ' . $lugar;
echo $frase;
?>
<?php
$produto1 = 'sapatos';
$preço1 = 90;
$produto2 = 'camisa';
$preço2 = 60;
$total = $preço1 + $preço2;
echo ' Comprei um par de ' . $produto1 . ' por R$ ' .
$preço1 . ',00 ' . ' e uma ' . $produto2 . ' por R$ ' .
$preço2 . ',00 ' . ' . No total gastei R$ ' . $total .
',00.';
?>

82
2.6 Arrays
Pode-se dizer que um array é um grupo de posições consecutivas na memória. Cada
posição contém um dado de determinado tipo. Eles podem ser uni ou bi-dimensionais. Aqui
estudaremos apenas os arrays uni-dimensionais, os vetores. Segundo Deitel “Para fazer
referência a uma posição particular ou elemento no array, especificamos o nome do array e o número da
posição daquele elemento no array”.
No php os arrays podem ter índices de inteiros ou strings.
php.net/manual/pt_BR/language.types.array.php
http://revistaphp.com.br/artigo.php?id=98
Declarando arrays no php
Sintaxe dos colchetes:
$array[chave] = valor
Construtor array () :
É um construtor da linguagem usado para representar arrays literais, e não um função normal.
A sintaxe index => values, separados por vírgulas, definem índice e valores
respectivamente. O índice pode ser do tipo string ou número. Quando o índice é
omitido, um índice numérico inteiro é automaticamente gerado, começando do
0. Se o índice é um inteiro, o próximo índice a ser gerado será igual ao maior
índice inteiro + 1; Note que quando dois índices idênticos são definidos, o
último sobrescreve o primeiro. (Manual do PHP)
$array = array (1 => 'vermelho', 2 => 'azul', 3 => 'verde', 4 => 'amarelo');
Leitura complementar
www.php.net/manual/pt_BR/function.array.php

83
Exemplos
a)
<?php
$end['local'] = 'centro';
$end['rua'] = 'principal';
$end['cor'] = 'branca';
$end['tipo'] = 'casa';
echo $end['local'];
?>
b)
<?php
$a[0] = 'Ola!';
$a[1] = 'Oi!';
$a[2] = 'Hello!';
$a[3] = 'Hi!';
echo $a[2];
?>
c)
<?php
$array = array(3,4, 9, 8 => 10,
4 => 2, 14, 3 => 12);
print_r($array);
?>
print_r colocará na tela de
forma legível
informações sobre uma
variável. Portanto neste
exemplo o print_r
deverá imprimir na tela
as posições do array e
seu conteúdo.
<?php
$array = array(3,4, 9, 8 => 10,
4 => 2, 14, 3 => 12);
var_dump($array);
?>
var_dump colocará na tela de
forma legível informações
sobre uma variável. A
diferença do print_r para o
var_dump é que o último
exibe também os tipos do
conteúdo de cada posição do
array.

84
d) <?php
$array = array(3,4, 9, 8 => 10, 4 =>
2, 14, 3 => 12);
echo $array[0] . "<br>";
?>
e) Atribuição e concatenação com
os elementos de um array:
<?php
$a [0] = 'Comprei';
$a [1] = 20;
$a [2] = 'meias';
echo "$a[0] <br>";
echo "$a[1] <br>";
echo "$a[2] <br>";
$a[1] += 2;
$a[2] .= ' listradas';
echo "$a[0] <br>";
echo "$a[1] <br>";
echo "$a[2] <br>";
?>
f)
<?php
$array = array(6,1, 2, 9, 10, 3,
40,7);
for($i = 0; $i <= 7; $i++)
{
echo $array[$i] . "<br>";
}
?>

85
2.7 Estruturas de controle
If
Permite executar um determinado bloco de códigos caso a condição seja verdadeira.
Para criar uma lógica é possível criar vários ifs dentro de outro, ou até mesmo ifs dentro de
outros ifs sequencialmente. Entretanto, a sintaxe da estrutura if é muito simples:
if(condição)
{
bloco de código;
}
Else
É utilizado para indicar um novo bloco de comandos caso a condição do IF não seja satisfeita.
if(condição)
{
bloco de código;
}
else
{
bloco de código;
}

86
Else if
É uma combinação do if e do else. Como um else, ele estenderá o if e executará um
bloco de comandos diferentes caso o if retorne FALSE. Entretanto, diferente do else, seus
comandos só serão executados caso sua condição retorne TRUE.
if(condição)
{
bloco de código;
}
eles if(condição2)
{
bloco de código;
}
else
{
bloco de código;
}

87
2.8 Estruturas de repetição
While
É uma estrutura que possui uma condição para executar um bloco de código, dentro de um laço de
repetição, que será executado repetitivamente enquanto a condição for verdadeira.
while (condição)
{
bloco de código
}
For
É uma estrutura utilizada quando queremos executar um bloco de instruções
determinado número de vezes. Ou seja, quando utilizamos o for temos um controle maior do
número de vezes em que ocorrerá o loop.
for (inicialização; teste; incremento/decremento)
{
Bloco de código
}

88
Foreach
O foreach é uma estrutura de repetição utilizada para percorrer todas as posições de um
array, ou seja, é um loop ESPECÍFICO para utilização com arrays. Retornará mensagem de
erro se utilizado com variáveis de qualquer tipo diferente.
foreach (expressao_array as $valor) *
{
Bloco de código
}

89
CAPÍTULO 3 – ENVIANDO DADOS ATRAVÉS DE FORMULÁRIOS
3.1 Métodos GET e POST
No php existem dois métodos de passagem de parêmetros: GET e POST. No caso de
um formulário, o tipo de método a ser utilizado é especificado na opção method da tag form.
<form action= “pagina.php” method= “POST”> ou <form action= “pagina.php”
method= “GET”>
Método GET
Este é o método padrão para envio de dados. Nesse método os dados serão enviados
juntamente com o nome da página que processará os dados recebidos. Os campos do
formulário serão passados como parâmetros após o endereço de destino. O caractere ?
representa o início de uma cadeia de variáveis, e o símbolo & identifica o início de uma nova
variável. As variáveis e seus respectivos valores são separadas pelo caractere =.
Método POST
Ao contrário do método GET, que envia os dados por uma cadeia de variáveis após o
endereço-destino, o método POST envia os dados do formulário no próprio corpo da
mensagem encaminhada ao servidor. Como os dados são enviados no corpo da mensagem,
quando o usuário clicar no botão de envio ele não verá em sua barra de endereços aquele
endereço enorme contendo uma cadeia de variáveis.
Outra grande vantagem do método POST é que não há limitação de tamanho dos dados que
estão sendo enviados, ao contrário do GET, que envia os dados por uma cadeia de variáveis
de tamanho limitado. Portanto é recomendado utilizar o método POST para formulários que
possuem muitas informações a serem enviadas.

90
Arrays $_GET e $_POST:
O PHP nos disponibiliza dois arrays superglobais, sendo um para acessar os dados
enviados pelo método GET ($_GET) e outro para os dados enviados pelo método POST
($_POST). Utilizando os arrays superglobais, os nomes dos campos do formulário serão
usados como chave associativa para acessar os seus valores. Se usássemos, por exemplo, o
método POST para enviar um formulário com os campos nome e e-mail, dentro do programa
PHP acessaríamos esses dados da seguinte maneira:
$_POST[“nome”];
$_POST[“email”];
Se o método utilizado fosse GET usaríamos:
$_GET[“nome”];
$_GET[“email”];
Exemplo:
<?php
echo "<form method=post action=exemplo.php><br><br>Nome:<br><br><input type=text
name=nome><br><br>Idade:<br><br><input type=text name=idade><br><br><input type=submit
name=enviando value=Envia Dados></form>";
if(!empty($_POST))
{
$variavel = $_POST["nome"];
$variavel2 = $_POST["idade"];
echo "Você enviou os seguintes dados: <br><br><b>" .$variavel . "</b> é seu nome <br><br><b>" .
$variavel2 . "</b> é sua idade";
}
?>

91
3.2 Criando formulários de envio por e-mail com a função mail( )
A função mail ( ) tem espaço para os seguintes parâmetros:
bool mail ( string $to , string $subject , string $message , string $additionl_headers, string
$additional_parameters)
to: E-mail do destinatário.
subject: Assunto do e-mail a ser enviado
message: Mensagem a ser enviada
Exemplo
<?php
echo "
<form method=post action=formulario.php>
Nome: <input name=nome type=text></input><br>
Email:<input name=email type=text></input><br>
Assunto: <input name=assunto type=text></input><br>
Mensagem: <textarea name=mensagem rows=5 cols=30 size=256 align=middle
maxlenght=256></textarea><br>
<input name=envia type=submit value=Enviar></input><br>
</form>";
if(!empty($_POST))
{
$mensagem = "Nome: ".$_POST['nome']."n";
$mensagem .= "Email: ".$_POST['email']."n";
$mensagem .= "Assunto: ".$_POST['assunto']."n";
$mensagem .= "Menagem: ".$_POST['mensagem']."n";
$envia = mail("denisemp_contato@hotmail.com", "Formulário - Teste", $mensagem);
if( $envia == true)
{echo "E-mail enviado com sucesso!";
}
else
{
echo "falha no envio de e-mail!"; } } ?>

92
Configurando o localhost para envio de e-mail através do Fake Sendmail
As trocas de dados realizadas no envio de um e-mail são feitas através de um
protocolo SMTP (Simple Mail Transfer Protocol), ou seja, para haver o envio de um e-mail é
necessário que você tenha acesso a um servidor SMTP. A forma mais fácil de emular isto
localmente é através do Fake Sendmail, que se utiliza de uma conta sua em um servidor de e-
mail qualquer. O XAMPP já disponibiliza esta aplicação. Precisamos apenas configurá-la para
funcionar como queremos. Para isto são necessárias algumas alterações no arquivo php.ini e
no arquivo sendmail.ini
Passo 1: Abra a pasta C:xamppphp e procure pelo arquivo php.ini
Passo 2: Abra o documento php.ini e procure a linha onde está escrito [mail function], pois
abaixo dela estarão os parâmetros de configuração da função mail(). O ; na frente de uma
frase serve como instrumento de comentário. Descomente apenas a linha “sendmail_path =
""C:xamppsendmailsendmail.exe" -t"” para dizer que queremos trabalhar com as
configurações do sendmail. Não esqueça de salvar as alterações feitas antes de fechar o
arquivo.

93
Passo 3: Abra a pasta C:xamppsendmail e procure pelo arquivo sendmail.ini
Passo4: Abra o documento sendmail.ini e procure a linha onde está escrito [sendmail], pois
abaixo dela estarão os parâmetros de configuração do saindmail. Descomente e altere as
seguintes linhas:
smtp_server - Endereço do servidor SMTP
smtp_port – Porta usada pelo servidor
smtp_ssl – Refere-se a conexão criptografada via SSL
auth_username - Seu endereço de e-mail no servidor SMTP especificado
auth_password – Sua senha no servidor especificado
force_sender – Apenas repita seu endereço de e-mail

94
Obs: Os valores acima estão configurados para o servidor smtp do hotmail. No Gmail, por
exemplo, o smtp server é smtp.gmail.com.br e a porta 465. Você pode encontrar o endereço do
servidor SMTP do seu serviço de e-mail e a porta por este utilzada neste site:
http://www.truquesemacetes.com/html/sm/dc/incredimail/pop3_smtp_p01.htm
Obs2: Não esqueça de salvar as alterações feitas antes de fechar o arquivo.
Passo5: Abra o painel de controle do Xampp e reinicie o Apache. Se seguiu todos os passos
certos agora poderá testar no localhost seu formulário de envio por e-mail.

95
CAPÍTULO 4 – VALIDAÇÃO DE FORMULÁRIOS
No desenvolvimento web encontramos quase sempre a necessidade de validar dados
de formulários para evitar o máximo possível o recebimento de informações incorretas.
Podemos desenvolver validações tanto do lado do usuário, com uma linguagem de
programação client-side como javascript, quanto do lado do servidor, com uma linguagem de
programação server-side como php. Cada qual possui suas vantagens e desvantagens. Por
exemplo, a validação client-side tem como vantagem informar ao usuário os problemas com
os dados inseridos nos campos antes do envio do formulário. Entretanto, é menos segura, pois
os recursos javascript podem ser desabilitadas nas configurações do navegador do usuário. Já
a validação server-side não tem este problema de segurança, mas só informa os problemas no
preenchimento dos campos após o clique no botão de envio do formulário. Diz-se então, que o
ideal é uso de ambas.
4.1 Funções para validações server-side com PHP
empty()
Retorna TRUE quando uma variável é vazia. Pode-se usá-la para testar se já houve
um submit no formulário.
Exemplo:
if (!empty($_POST))
{
mail (denisemp_contato@hotmail.com, Titulo, Mensagem);
}

96
strstr()
Procura a primeira ocorrência de uma string dentro de outra. Pode ser utilizada para
detecção de espaços indesejáveis no texto de um determinado campo.
Exemplo:
if (strstr ($email, ' ')!=FALSE)
{
echo "Não deve haver espaços no campo de e-mail";
}
strlen()
Função que retorna o número de caracteres existentes em uma string. Pode ser útil
para verificar se o usuário digitou o número correto de caracteres requeridos para um capo.
Exemplo:
if(strlen($cpf)!=11)
{
echo “Digite o CPF correto";
}

97
str_replace()
Busca por um determinado conjunto de caracteres dentro de uma string e os
substitui por outros. Pode ser usada para correção de erros comuns de digitação como, por
exemplo, espaços em branco, barras, pontos antes ou depois do @ num campo de e-mail.
Exemplo:
<?php
$email = str_replace ( “ “, “”, $email);
$email = str_replace ( “/”, “”, $email);
$email = str_replace ( “@.“, “@”, $email);
$email = str_replace ( “,“, “.”, $email);
$email = str_replace ( “;“, “.”, $email);
?>
is_numeric()
Testa se uma variável é numérica ou se uma string contém apenas números. Muito
utilizada quando precisamos restringir a entrada de dados a apenas numérico em um
determinado campo. Como CEP, telefone, idade, CPF, etc.
Exemplo:
If(!is_numeric($idade))
{
echo “A idade deve ser formada apenas por números”;
}

98
4.2 Validação client-side com Javascript
Uma forma simples de criar validações em Javascript é utilizando o plugin validate da
biblioteca Jquery. Para utilizá-lo é preciso fazer download dos arquivos jquery.js e
jquery.validate.js. Assim, é possível criar uma pequena lógica atribuíndo regras para cada um
dos campos e atribuíndo mensagens de erro para cada uma das regras.
Na primeira linha do código abaixo estamos abrindo um espaço para lógica de validação do
formulário de id formulário. Ou seja, em $(“formulário”), dizemos que esta validação se
aplicará ao formulário cuja tag <form> possui um atributo id=”formulário”.
A seguir, em “rules:{“ abrimos o espaço para as regras desta validação.
Em “email:{“ abrimos um espaço para as regras de validação de um campo cuja tag <input>
recebeu um atributo name=”email”. Dentro deste espaço definimos “required: true”, o que faz
de e-mail um campo de preenchimento obrigatório.
Após, temos “messages:{“ que é um espaço para definição das mensagens de erro que serão
exibidas. Em “email:{“ agora teremos as mensagens que se aplicam a cada regra que
passamos para o campo email. Neste caso temos apenas a regra required.
$("#formulario").validate({
rules:{
e-mail:{
required: true,
},
messages:{
email:{
required: "E-mail é um campo obrigatório!",
}, }
Leituras complementares:
http://jqueryvalidation.org/

99
Exemplo
<html>
<head>
<title> Valida </title>
<meta charset="utf-8">
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery.validate.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready( function() {
$("#formulario").validate({
rules:{
nome:{
required: true,
},
email:{
required: true, email: true
},
mensagem:{
required: true
}
},
messages:{
nome:{
required: "Nome é um campo obrigatório!",
},
email:{
required: "E-mail é um campo obrigatório!",
email: "Digite um e-mail válido!"
},
mensagem:{
required: "Mensagem é um campo obrigatório!",
}
}
});
});
</script>
</head>
<body>
<form id="formulario" method="post" action="valida.html">
Nome<br>
<input type="text" name="nome"><br>
E-mail<br>
<input type="text" name="email"><br>
Mensagem<br>
<textarea name="mensagem"></textarea><br>
<input type="submit" class="submit" value="Enviar">
</form>
</body>
</html>

100
4.3 Como crio uma máscara para campo de formulário?
Para editar um campo de formulário de forma que as barras (/ ) apareçam ao digitar uma
data ou os pontos ( . ) e traços ( - ) apareçam ao digitar um CPF ou CEP é necessário utilizar
uma máscara. Máscaras para campos de formulário são criadas do lado do cliente, antes que
este aperte o botão de envio de dados. Desta forma, precisamos de uma linguagem de
programação que haja do lado do cliente, antes da chegada dos dados no servidor. Aqui
utilizaremos o jquery.maskedinput, um complemento da biblioteca javascript jquery, para
criar de forma simples máscaras para campos de data, cpf e cep. Primeiro faça o download
dos arquivos jquery.js e jquery.maskedinput.js para a mesma pasta do seu projeto. Depois
teste o seguinte código:
<?php
echo "<html>
<head>
<title>Formulário</title>
<script type=text/javascript src=jquery.js></script>
<script type=text/javascript src=jquery.maskedinput.js></script>
</head>
<script type=text/javascript>
$(document).ready(function(){
$('input.data').mask('99/99/9999');
$('input.cpf').mask('999.999.999-99');
$('input.cep').mask('99.999-999');
$('input.telefone').mask('(99)9999-9999');
});
</script>
<body>
<form method=post action=mascara.php>
Data:<br>
<input type=text class=data name=data><br><br>
CPF:<br>
<input type=text class=cpf name=cpf><br><br>
CEP: <br>
<input type=text class=cep name=cep><br><br>
TELEFONE: <br>
<input type=text class=telefone name=telefone><br><br>
<input type=submit value=Cadastrar>";
if(!empty($_POST))
{
$data = $_POST["data"];
$cpf = $_POST["cpf"];
$cep = $_POST["cep"];
$telefone = $_POST["telefone"];
echo "<br> Você enviou os seguintes dados: <br>" . "Data: " . $data . "<br> CPF:" . $cpf . "<br> CEP:" . $cep .
"<br> Telefone:" . $telefone . "<br>";
}
echo "</body></html>";?>

101
CAPÍTULO 5 – SISTEMA DE UPLOAD
Para fazer transferência de arquivos via página web utilizamos o protocolo de
comunicação HTTP. Para isto, criamos um formulário HTML com campo do tipo file, onde o
usuário poderá selecionar o arquivo que deseja enviar. uma lógica simples em .php também
deve ser desenvolvida para validar o arquivo enviado e movê-lo para o diretório desejado na
hospedagem. A seguir a explicação de algumas das principais estruturas PHP para manipular
arquivos e um exemplo prático:
$_FILES
No PHP existe um array superglobal bidimensional chamado $_FILES. Através deste é
possível acessar informações sobre o arquivo que está sendo transferido. Exemplo:
$_FILES [ 'arquivo']['name'] – permite acessar o nome do arquivo original.
$_FILES ['arquivo']['size'] – permite acessar o tamanho do arquivo em bytes
$_FILES ['arquivo']['tmp_name'] – permite acessar o nome do temporário que o servidor
utilizou para armazenar o arquivo.
Função move_uploaded_file ( )
Em sistemas de upload esta função é importante, sobretudo para mover o arquivo do diretório
temporário em que fica hospedado no servidor, para um diretório desejado.
move_uploaded_file ( string $filename , string $destination )

102
Exemplo
Neste exemplo você precisará criar dois arquivos:
upload.html – com as tags do formulário
executa_upload.php – com os códigos que executam esta transferência.
Upload.html
Aqui criamos um formulário que se utiliza do método post para transferência de dados. Devemos usar um
atributo enctype para codificação de dados com o valor multipart/form-data, informando que não há caracteres
a serem codificados, mas sim um arquivo a ser transferido.
<html>
<head>
<title> Sistema de Upload </title>
</head>
<body>
<form method="post" action="executa_upload.php" enctype="multipart/form-data">
<p align="center"> Arquivo: <input type="file" name="arquivo" size="30">
<p align="center"><input type="submit" value="Enviar arquivo">
</form>
</body>
</html>
executa_upload.php
<?php
$nome = $_FILES['arquivo']['name'];
$temporario = $_FILES['arquivo']['tmp_name'];
$caminho = "c:xampphtdocs";
if(!empty($nome))
{
if(move_uploaded_file($temporario, "$caminho/$nome"))
{
echo "<p align=center> O upload do arquivo <b>" . $nome . "</b> foi concluído com
sucesso. </p>";
echo "<p align=center><a href=upload.html>Novo Upload </a></p>";
}
else
{
echo "<p align=center> O arquivo não pode ser copiado para o servidor. </p>";
}
}
else
{
die("Selecione o arquivo a ser enviado");
}?>

103
CAPÍTULO 6 – INTEGRANDO PHP COM BANCO DE DADOS
6.1 Conceitos básicos
SQL – É uma linguagem de consulta a banco de dados. Em decorrência da sua simplicidade
em relação a outras linguagens do gênero, ela se tornou praticamente um padrão.
MySQL – É um sistema de banco de dados que utiliza a linguagem SQL como padrão.
PhpMyAdmin – É um aplicativo web para administração do MySQL pela Internet.
Geralmente hospedagens com suporte a PHP oferecem esta ferramenta que oferece inúmeras
facilidades.
6.2 Utilizando o PHPMyAdmin.
Abra seu navegador e vá em http://localhost, depois acesse o painel de controle indo em
Ferramentas > PHPMyAdmin.

104
Esta deve ser a tela principal do PHPMyAdmin:
Clique em Banco de dados no menu principal:
Dê um nome ao seu novo banco de dados, escolha o tipo de codificação de caracteres
do seu banco em e clique em criar.

105
Você receberá uma mensagem de confirmação e seu novo banco de dados aparecerá na
lista de bancos do seu servidor. Clicando sobre ele agora é possível editá-lo.
Agora você pode criar uma nova tabela para o seu Banco de Dados, preenchendo os
campos nome e número de colunas, logo em seguida clicando em Executar.
Ao clicar em Executar, abrirá uma nova página para formatação da tabela de dados.
Vejamos a seguir o significado dos principais campos:
No campo Coluna colocamos o nome do dado que queremos armazenar.

106
Na caixa de seleção Tipo selecionamos o tipo de dado que será armazenado.
Por exemplo:
INT - Para armazenar números inteiros.
VARCHAR - Variáveis com caracteres, texto não numérico.
DATE - Para armazenar datas.
TIME - Para guardar horas.
TEXT - Para armazenar textos maiores.
Além de outras alternativas que são praticamente auto-explicáveis.
Na caixa Tamanho/Definir coloca-se o tamanho que o registro terá. Um campo com
tamanho definido em 4, terá no máximo 4 dígitos.
marcando a opção auto_increment , toda vez que for armazenado um novo registro este
campo incrementará mais um número automaticamente.
No campo Índice , marcamos uma opção como Primary para indicar ao BD qual é o campo
principal da tabela.
Funções básicas do PHP para integração com MySQL:
mysql_connect( ): Cria uma conexão com o servidor de banco de dados MySQL. Uma
conexão local pode ser feita como “localhost”. Caso a conexão for bem-sucedida, será
retornado link_id, e em caso contrário False.
mysql_close(): Fecha a conexão com o servidor de banco de dados MySQL. Caso a operação
for bem-sucedida, será retornado TRUE, e em caso contrário FALSE.
mysql_fetch_array( ): Retorna os campos do próximo registro da consulta em um vetor. Ou
false caso não houver mais registros.
mysql_query( ): Envia uma consulta SQL ao MySQL. Caso a operação for bem-sucedida,
será retornado o id_do_resultado, caso contrário False.
mysql_result(): Lê os resultados de uma consulta SQL ao MySQL.
mysql_select_db( ): Seleciona um banco de dados para o trabalho. Caso a operação for bem-
sucedida, será retornado id_do_resultado caso contrário False.

107
6.3 Exemplo – Sistema de cadastro
Comece criando um banco de dados novo e nele uma tabela com 4 colunas que devem ser formatadas da
seguinte maneira:
O campo id identifica a tabela, portanto não esqueça de marcar o Índice como Primary e ativar a opção
auto-increment (numeração automática). Se o usuário não for obrigado a preencher algum de seus campos,
por exemplo o telefone, então marque a opção nulo para este campo.

108
Agora o painel de controle do seu banco de dados deve estar assim:
Agora que nossa tabela está pronta, criaremos quatro arquivos:
formulário.html - Arquivo em HTML usado para "pegar" os dados.
conectar.php - Usado para a conexão com o banco de dados.
inserir.php - Para inserirmos dados na Tabela "dados".
exibir.php - Usado para exibir os dados armazenados na nossa Tabela.
1 - Formulário.html
<html>
<head><title>Formulario</title></head>
<body>
<form method="post" action="inserir.php" name="dados-do-cliente">
Nome: <input name="nome"><br><br>
Email <input name="email"><br><br>
Telefone <input name="telefone"><br><br>
<input name="Submit" value="Inserir Dados" type="submit">
</form></body></html>

109
2- Conectar.php
<?php
$servidor = "localhost"; // local do servidor
$usuario = "root"; // nome do usuario
$senha = ""; // senha
$banco= "Cadastros"; // nome do banco de dados
$connect = mysql_connect($servidor,$usuario,$senha) or die ("O servidor não responde!");
// conecta-se ao banco de dados
$dados = mysql_select_db($banco,$connect) or die ("Não foi possivel conectar-se ao banco de dados!");
?>
3- Inserir.php
<html>
<head>
<title>Exibindo a Tabela Dados</title>
</head>
<body>
<?php
require("conectar.php");//chama o arquivo de conexão ao BD
$nome = $_POST['nome'];
$email = $_POST['email'];
$telefone = $_POST['telefone'];
$sqlinsert = "INSERT INTO Users (id, nome, email, telefone)VALUES('','$nome','$email','$telefone')";
mysql_query($sqlinsert) or die("Não foi possível inserir os dados");
echo"Cadastro realizado com sucesso!";
mysql_close($connect);
?></body></html>

110
exibir.php
<?php
require("conectar.php");//chama o arquivo de conexão com o BD
$sql = "SELECT * FROM Users";
$limite = mysql_query("$sql");
while ($sql = mysql_fetch_array($limite)){
$id_cliente = $sql["id"];
$nome = $sql["nome"];
$email = $sql["email"];
$telefone = $sql["telefone"];
echo"Meu cliente ID $id_cliente<br />$nome<br />$email<br />$telefone<br /><br />";
}
mysql_close($connect);
?>

111
CAPÍTULO 7 – SISTEMA DE BUSCA
Neste exemplo você precisará criar quatro arquivos:
post.html – página com um formulário html para postagem com tags
conectar.php – com os códigos que abrem conexão com o servidor e escolha de banco.
Posta.php – documento com os códigos para guardar o post no banco
pesquisa.php – contado os códigos da busca por tags.
Banco
Inicie criando um novo banco com a seguinte tabela:
Post.html
<html>
<head>
<title> Poste </title>
</head>
<body>
<form method="post" action="posta.php">
Post:<br><textarea rows="20" cols="50" name="texto"></textarea> <br>
Tags:<br> <input type="text" name="tag"><br>
<input type="submit" value="Postar">
</form>
</body>
</html>

112
conectar.php
<?php
$servidor = mysql_connect("localhost","root","") or die ("O servidor não responde!");
$banco = mysql_select_db("pesquisa",$servidor) or die ("Não foi possivel conectar-se ao banco de dados!");
?>
posta.php
<?php
require ("conectar.php");
$texto = $_POST["texto"];
$tag = $_POST["tag"];
$sql= "INSERT INTO pesquisa(id,texto,tag)VALUES('','$texto','$tag')";
mysql_query($sql);
echo "post realizado!";
?>
pesquisa.php
<?php
require("conectar.php");
echo "<form method=post action=pesquisa.php>Pesquisa por tag:<input type=text name=tag><input
type=submit value=Pesquisar></form>";
if(!empty($_POST))
{
$tag = $_POST["tag"];
$sql = "SELECT * FROM pesquisa WHERE tag = '$tag'";
$limite = mysql_query("$sql");
$contador = 1;
while ($sql = mysql_fetch_array($limite))
{
$post = $sql["texto"];
echo "Post numero: " . $contador . "<br><br>" . $post . "<br><br>";
$contador++;
}
}?>

113
CAPÍTULO 8 - COOKIES
Trabalhar com desenvolvimento de páginas dinâmicas muitas vezes traz a necessidade
de armazenar informações de navegação entre as páginas de um site (Armazenar uma ação
feita, ou informação enviada, em uma página, para ser utilizada em outra). Isto é necessário,
por exemplo, ao programar um sistema para área restrita, carrinhos de compras, exibição de
anúncios, etc. O mecanismo utilizado para isto são cookies.
Os cookies são arquivos-textos armazenados no computador do usuário e funcionam
como variáves, que são gravadas pelo browser, a pedido do servidor, que podem conter, entre
outros, informações sobre o usuário. Essas informações ficam à disposição do servidor para
serem restauradas quando necessário.
8.1 Criando e Manipulando Cookies
Para criar um Cooki utilizamos a função setcookie( ):
A sintaxe do comando setcookie() é:
Int setcookie( string nome_variável, string valor, int data_expiração, string path,
string domínio, string conexão segura)
nome_variavel – Nome da variável que fará referência a este cookie.
valor – String a ser armazenada no cookie.
path – Path da máquina que gerou o cookie ( como padrão coloque “/”)
Domínio – Domínio que gerou o cookie (como padrão coloque “”)
conexão_segura – Indica se o cookie será transmitido via conexão segura HTTPS. (com
valor 1 se conexão segura e 0 se conexão padrão).
Para se recuperar um valor armazenado em um cookie em qualquer lugar do nosso site nos
referenciamos pela variável global da seguinte forma:
$t = $_COOKIE[“nome_variavel”];
Dessa forma, a variável $t conterá o valor armazenado no cookie de nome “nome_variavel”.

114
8.2 Exemplo – Sistema de login
1º Crie uma página HTML para um formulário de cadastro assim:
<html><body>
<form method="post" action="cadastra.php">
Nome: <input type="text" name="nome"><br>
E-mail: <input type="text" name="email"><br>
Username: <input type="text" name="username"><br>
Senha: <input type="password" name="senha"><br>
<input type="submit" value="Cadastrar"><br>
</form>
</body></html>

115
2º) No PhpMyAdmin crie um banco chamado cadastro com uma tabela chamada usuario com os seguintes
valores:
3º) Agora crie um arquivo php para abertura de conexão com o banco de dados e salve como conectar.php:
<?php
$servidor = mysql_connect("localhost","root","") or die ("O servidor não responde!");
$banco = mysql_select_db("cadastro",$servidor) or die ("Não foi possivel conectar-se ao banco dedados!");
?>

116
4º) Crie o arquivo cadastra.php com o código para inserir os dados do usuário na tabela.
<?php
$nome = $_POST['nome'];
$email = $_POST['email'];
$username = $_POST['username'];
$senha = $_POST['senha'];
$sql= "INSERT INTO usuario
(id,nome,email,username,senha)VALUES('','$nome','$email','$username','$senha')";
mysql_query($sql) or die("Não foi possível inserir os dados");
echo"Cadastro realizado com sucesso!";
?>
5º) Crie outro formulário HTML para sua área de login:
<html><body>
<form method="post" action="logar.php">
Username: <input type="text" name="username"><br>
Senha: <input type="password" name="senha"><br>
<input type="submit" value="Logar"><br>
</form>
</body></html>

117
6º) Crie uma página logar.php com os códigos que
devem controlar a autenticação de usuário:
<?php
//obtém os valores digitados
$username = $_POST["username"];
$senha = $_POST["senha"];
//abre conexão com o banco de dados
//executa uma consulta ao banco procurando se o
username digitado existe
$consulta = mysql_query("SELECT*FROM usuario
WHERE username='$username'");
//Busca as linhas retornadas pela consulta
$retorno = mysql_num_rows($consulta);
//Testa se a consulta retornou algum registro
if($retorno==0)
{
echo "Usuário não cadastrado!<br><a
href='login.html'>Voltar</a>";
}
else
{
if($senha != mysql_result($consulta, 0,
"senha")) //confere a senha
{
echo "Senha incorreta!<br><a
href='login.html'>Voltar</a>";
}
else
{
//Cria os cookies para identificação
do usuário que se logou.
setcookie("usuario", $username);
setcookie("senha", $senha);
//Direciona para a página principal
header("Location: inicial.php");
}
}
?>

118
7º) Crie também um código para logout em um arquivo chamado logout.php. Este script deverá apagar os
dados do cookie criado na hora do login.
<?php
setcookie("usuario");
setcookie("senha");
header("Location: login.html");
?>
8º) Finalmente cria sua página restrita com autenticação via cookies e sistema de logout. Salve-a como
inicial.php
<?php
$username = $_COOKIE[“usuario”];
echo "Seja bem-vindo " . $username . "!!!<br> Não é " . $username . "? <form method='post'
action='logout.php'><input type='submit' value='[Logout]'/></form>";
?>

119
CAPÍTULO 9 – CADERNO DE EXERCÍCIOS
1) Crie um programa php que imprima na tela um conjunto de strings que contenham a letra
de uma música ou poema.

120
2) Crie um programa php que imprima na tela os sucessivos resultados da tabuada do 7.
3) Desenvolva um programa php, que escreva na tela o conjunto dos números primos
positivos menores do que vinte.

121
4) Faça um programa php que, utilizando apenas caracteres textuais, desenhe uma figura na página como no
exemplo abaixo:

122
5) Desenvolva um programa PHP que imprima na tela a seguinte mensagem:

123
6) Crie um vetor de strings e imprima-o na tela em formato de lista numerada, da seguinte
forma:
1. Segunda-feira
2. Terça-feira
3. Quarta-feira
4. Quinta-feira
5. Sexta-feira

124
7) Declare uma variável $a = 0 e incremente até 10, desenhando na tela cada um dos valores
entre 0 e 10 dentro de colunas separadas de uma tabela, como na figura abaixo:
b) Agora faça o mesmo, em nova linha, decrementando a variável $a.

125
8) Crie uma função com duas variáveis $peso e $altura e que retorne o cálculo de IMC
(peso/altura²). Escreva na tela o resultado do peso e altura dados de acordo com a seguinte
tabela:
< 18.5 Abaixo do Peso
Entre 18.5 e 24.9 Peso Normal
Acima de 24.9 Acima do Peso

126
9) crie uma calculadora de IMC como a anterior, mas onde os dados sejam recebidos do
usuário. Utilize seus conhecimentos a respeito dos métodos GET e POST já estudados.

127
10) Com base nos conhecimentos já adquiridos sobre formulários e métodos get e post, além
da experiência adquirida com os exercícios anteriores, crie uma calculadora de quatro
operações

128
11) Utilizando um formulário com radio buttons ou check boxes, crie um jogo de perguntas e
respostas, estilo quizz, que no final envie o resultado e gabarito para o e-mail do usuário:

129
12) Crie um formulário de envio por e-mail que possibilite ao usuário fazer upload de uma
imagem queserá anexada ao corpo do e-mail enviado. Pesquise sobre o uso de headers com a
função mail(), e como habilitar o uso de códigos HTML no corpo do e-mail.

130
BIBLIOGRAFIA
DALL’OGLIO, Pablo. PHP – GTK: Criando Aplicações Gráficas com PHP. São Paulo:
Novatec, 2004.
LUBBERS, Peter. Programação Profissional em HTML 5: Alta Books, 2013
MARCONDES, Christian Alfim. Programando em HTML 4.0. São Paulo: Érica, 2001.
MINERA, Francisco. Guia Profissional de Criação de Sites : Digerati Books, 2009
NIEDERAUER, Juliano. PHP para quem conhece PHP. São Paulo: Novatec, 2004.
SILVA, Maurício S. Desenvolva Aplicações Web Profissionais com uso dos poderosos
recursos de estilização das CSS3: Novatec, 2012
SILVA, Maurício S. Jquery a Biblioteca do Programador Javascript: Novatec, 2010
STOCO, Lucio. Integrando PHP com MySQL. São Paulo: Novatec, 2000.
WEBSITES VISITADOS
ADOBE.COM: https://kuler.adobe.com/create/color-wheel
APACHE FIRENDS: http://www.apachefriends.org/pt_br/xampp-windows.html
COLOR SCHEME DESIGNER: http://colorschemedesigner.com/
COLOR COMBOS: http://colorcombos.com
COLOUR LOVERS[1]: http://www.colourlovers.com/palettes/add
COLOUR LOVERS[2]: http://www.colourlovers.com/copaso/ColorPaletteSoftware
DANILLO NUNES.NET: http://danillonunes.net/curriculo-dos-padroes-web/a-historia-da-
internet-e-da-web-e-a-evolucao-dos-padroes-web
HOW STUFF WORKS: http://informatica.hsw.uol.com.br/servidores-da-web4.htm
HTML.NET: http://pt-br.html.net/tutorials/html/lesson2.php

131
JQUERY VALIDATION: http://jqueryvalidation.org/
MANUAL DO PHP[1]: http://php.net/manual/pt_BR/index.php
MANUAL DO PHP[2]: php.net/manual/pt_BR/language.types.array.php
NOTEPAD++.ORG: http://notepad-plus-plus.org/
REVISTA PHP: http://revistaphp.com.br/artigo.php?id=98
TECMUNDO[1]: http://www.tecmundo.com.br/infografico/10054-a-historia-da-internet-a-
decada-de-1990-infografico-.htm
TECMUNDO[2]: http://www.tecmundo.com.br/982-o-que-e-cliente-servidor-.htm
TRUQUES&MACETES:http://www.truquesemacetes.com/html/sm/dc/incredimail/pop3_smt
p_p01.htm
UNICAMP.BR:http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comu
nicacao.pdf
WEBDIRECTIONS: http://webdirections.org/history/#0

Criação de Sites - Manual do Aluno (web developing - student's manual )

Mais conteúdo relacionado

Semelhante a Criação de Sites - Manual do Aluno (web developing - student's manual )

Mais de Denise Pinho

Criação de Sites - Manual do Aluno (web developing - student's manual )