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?...................
3
MÓDULO II – PHP + Banco de dados Mysql, noções de javascript
e sistemas para sites dinâmicos
CAPÍTULO 1: Conceitos básic...
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 Proje...
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 criad...
7
1.2 HTML: peculiaridades
Chamamos os comandos HTML de tags
Cada comando é iniciado e finalizado por uma tag
Todas as tag...
8
<title> … </title>
Tag que tem por finalidade inserir um título na Barra de Títulos do navegador Web. Deve ser
utilizada...
9
1.4 Editor
Utilizaremos nesta disciplina o editor de código open source Notepad++. Para fazer o
download basta acessar :...
10
1.5 Atributos
No HTML um atributo funciona como uma formatação, ou especificação, da tag. Isso quer
dizer que algumas t...
11
1.6 Tag <meta>
A tag <meta> traz metadados (podemos dizer, de forma bem simplificada, que um metadado é
um dado intelig...
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 ...
13
Exemplo:
<html>
<head>
<title> Minha primeira página HTML </title>
</head>
<body>
<h2><font color="#483D8B">Das Utopias...
14
Exemplo:
<html>
<head>
<title> Minha primeira página HTML </title>
</head>
<body>
<h2><font color="#483D8B">Das Utopias...
15
2.3 Hyperlinks
Para criar um hyperlink utilizamos a tag <a>, mas ela depende de alguns atributos
para que funcione:
Hre...
16
Mail to
Para criar um link para envio de e-mail utilizamos a tag <a> da seguinte maneira:
<html>
<head>
<title> Link pa...
17
2.4 Formatação de parágrafos
<center>
Esta tag centraliza qualquer elemento de uma página. Tanto texto quanto imagem.
<...
18
Listas Numeradas
<ol>
Define o início e o fim de uma lista numerada. Ol vem de Ordered List.
<li>
Define os elementos d...
19
CAPÍTULO 3 – RECURSOS VISUAIS
3.1 Inserir imagens
Para inserir uma imagem utilizamos a tag <img>, mas ela depende de al...
20
3.2 Linhas horizontais
A tag utilizada para inserir linhas horizontais é <hr>. Podemos formatá-la através de quatro
atr...
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...
22
Atributos para formatação de tabelas
Align: Com este atributo definimos o alinhamento horizontal dos elementos dentro d...
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...
24
Exemplo
<html>
<head>
<title> Meu primeiro formulário </title>
</head>
<body>
<form action="mailto:denisemp_contato@hot...
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 containe...
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...
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 pe...
28
5.2 Paleta de cores
Outro passo importante na idelização de um layout é a definição da paleta de cores. É
importante qu...
29
CAPÍTULO 6 – COMO TRANSFERIR ARQUIVOS PARA SUA
HOSPEDAGEM ONLINE
6.1 Fazendo transferência de arquivos com o Filezilla
...
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 abr...
32
Passo 5: Clique em Conectar e aguarde. Se tudo estiver certo as pastas e arquivos de sua
hospedagem devem aparecer no l...
33
CAPÍTULO 7 – CSS básico
7.1 Introdução
Sabemos que originalmente o HTML, que estudamos até agora, é uma linguagem de
ma...
34
7.2 Trabalhando com seletores :
Como vimos anteriormente, a sintaxe da regra CSS é seletor { propriedade: valor}. Sabem...
35
Seletor Classe:
Um seletor classe é aquele que toma como base o valor do atributo class de uma tag do
documento HTML. A...
36
Estilo incorporado
O estilo incorporado é muito utilizado em páginas onde várias estruturas HTML utilizam o
mesmo tipo ...
37
Estilo Vinculado
No estilo vinculado criamos dois tipos de arquivos separados. Um apenas para as
formatações CSS e outr...
38
7.4 Aplicando CSS em tabelas
Utilizando seletores do tipo id ou classe pode-se facilmente formatar com CSS diversas
tab...
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 mar...
40
7.6 Trabalhando com seletores avançados
Seletor pseudoclasse
Um seletor pseudoclasse estrutural é um conceito de seleto...
41
:active
Este seletor modifica o elemento definido que tenha sido ativado pelo usuário, ou seja,
enquanto este elemento ...
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...
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"...
44
Página .css
body{
background-color: #000000;
}
#1{
border-width: 0;
}
#2{
border-width: 1;
width: 100%;
}
p
{
text-alig...
45
Exemplo final:
<html>
<head>
<title>Pagina Teste</title>
<meta charset="utf-8">
<style type="text/css">
body{background...
46
CAPÍTULO 8 – Caderno de exercícios
HTML:
1) No espaço abaixo desenvolva o esqueleto básico de um documento html
2) Form...
47
3) Formate um texto qualquer, com html, da seguinte maneira:
A primeira linha deve ser verde e em negrito.
A segunda li...
48
6) Agora crie um marquee(animado) com uma imagem com hyperlink:
7) Crie uma lista não numerada formatada como na imagem...
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
12) Desenvolva uma tabela como a da figura abaixo:
54
13) Desenvolva uma tabela como a da figura abaixo:
55
14) Quais atributos utilizamos para modificar largura e altura de tabelas.
15) Qual atributo utilizamos para inserir im...
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. Exemp...
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 image...
61
22) Utilizando divs, desenvolva o código para um layout simples com imagem de topo, área central e área lateral
esquerd...
62
23) Utilizando divs, desenvolva um código para um layout simples com imagem de topo, área
central com uma tabela e área...
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...
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 é e...
67
6) Usando CSS aplicado no estilo incorporado, e fazendo uso de seletores do tipo id, crie a
formatação para uma página ...
68
7) Usando CSS aplicado no estilo incorporado, e fazendo uso de seletores do tipo classe, crie
a formatação para uma pág...
69
8) Faça uma lista de links e formate-os, usando CSS no estilo incorporado, além de seletor
pseudo-classe :hover para cr...
70
9) Utilizando CSS no estilo incorporado, faça a formatação de divs usando relação de
parentesco (descendente / ascenden...
71
10) Qual propriedade CSS permite arredondar as bordas de uma div?
11) Qual propriedade CSS podemos usar para criar uma ...
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...
73
15) Usando CSS no estilo vinculado, fazendo uso de seletores do tipo classe, crie uma página
com fundo gradiente (atrav...
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 p...
76
1.3 XAMPP funcionamento
Abra o painel de controle do XAMPP e observe se o status de seu servidor Apache está como
Runni...
77
XAMPP: adicionando uma página ao Localhost
A partir de agora, todos os códigos que desenvolvermos em php deverão ser sa...
78
CAPÍTULO 2 – FUNDAMENTOS DE PROGRAMAÇÃO
2.1 Formas de delimitar o código PHP
<?php ...código... ?>
<? código ?>
<script...
79
2.3 Strings
Uma string é uma seqüência ordenada de caracteres. Segundo o Manual do PHP “Não é
problema uma string ser b...
80
Primeiros exemplos
Abra o Notepad++. Crie um novo arquivo e escolha PHP no menu de linguagem. Depois teste
o seguinte c...
81
2.5 Concatenação de Strings
Quando dizemos que estamos fazendo uma operação de concatenação, significa que estamos
unin...
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 de...
83
Exemplos
a)
<?php
$end['local'] = 'centro';
$end['rua'] = 'principal';
$end['cor'] = 'branca';
$end['tipo'] = 'casa';
e...
84
d) <?php
$array = array(3,4, 9, 8 => 10, 4 =>
2, 14, 3 => 12);
echo $array[0] . "<br>";
echo $array[1] . "<br>";
echo $...
85
2.7 Estruturas de controle
If
Permite executar um determinado bloco de códigos caso a condição seja verdadeira.
Para cr...
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 ...
87
2.8 Estruturas de repetição
While
É uma estrutura que possui uma condição para executar um bloco de código, dentro de u...
88
Foreach
O foreach é uma estrutura de repetição utilizada para percorrer todas as posições de um
array, ou seja, é um lo...
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 pa...
90
Arrays $_GET e $_POST:
O PHP nos disponibiliza dois arrays superglobais, sendo um para acessar os dados
enviados pelo m...
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âmet...
92
Configurando o localhost para envio de e-mail através do Fake Sendmail
As trocas de dados realizadas no envio de um e-m...
93
Passo 3: Abra a pasta C:xamppsendmail e procure pelo arquivo sendmail.ini
Passo4: Abra o documento sendmail.ini e procu...
94
Obs: Os valores acima estão configurados para o servidor smtp do hotmail. No Gmail, por
exemplo, o smtp server é smtp.g...
95
CAPÍTULO 4 – VALIDAÇÃO DE FORMULÁRIOS
No desenvolvimento web encontramos quase sempre a necessidade de validar dados
de...
96
strstr()
Procura a primeira ocorrência de uma string dentro de outra. Pode ser utilizada para
detecção de espaços indes...
97
str_replace()
Busca por um determinado conjunto de caracteres dentro de uma string e os
substitui por outros. Pode ser ...
98
4.2 Validação client-side com Javascript
Uma forma simples de criar validações em Javascript é utilizando o plugin vali...
99
Exemplo
<html>
<head>
<title> Valida </title>
<meta charset="utf-8">
<script language="JavaScript" src="jquery.js" type...
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 (/ ) apa...
101
CAPÍTULO 5 – SISTEMA DE UPLOAD
Para fazer transferência de arquivos via página web utilizamos o protocolo de
comunicaç...
102
Exemplo
Neste exemplo você precisará criar dois arquivos:
upload.html – com as tags do formulário
executa_upload.php –...
103
CAPÍTULO 6 – INTEGRANDO PHP COM BANCO DE DADOS
6.1 Conceitos básicos
SQL – É uma linguagem de consulta a banco de dado...
104
Esta deve ser a tela principal do PHPMyAdmin:
Clique em Banco de dados no menu principal:
Dê um nome ao seu novo banco...
105
Você receberá uma mensagem de confirmação e seu novo banco de dados aparecerá na
lista de bancos do seu servidor. Clic...
106
Na caixa de seleção Tipo selecionamos o tipo de dado que será armazenado.
Por exemplo:
INT - Para armazenar números in...
107
6.3 Exemplo – Sistema de cadastro
Comece criando um banco de dados novo e nele uma tabela com 4 colunas que devem ser ...
108
Agora o painel de controle do seu banco de dados deve estar assim:
Agora que nossa tabela está pronta, criaremos quatr...
109
2- Conectar.php
<?php
$servidor = "localhost"; // local do servidor
$usuario = "root"; // nome do usuario
$senha = "";...
110
exibir.php
<?php
require("conectar.php");//chama o arquivo de conexão com o BD
$sql = "SELECT * FROM Users";
$limite =...
111
CAPÍTULO 7 – SISTEMA DE BUSCA
Neste exemplo você precisará criar quatro arquivos:
post.html – página com um formulário...
112
conectar.php
<?php
$servidor = mysql_connect("localhost","root","") or die ("O servidor não responde!");
$banco = mysq...
113
CAPÍTULO 8 - COOKIES
Trabalhar com desenvolvimento de páginas dinâmicas muitas vezes traz a necessidade
de armazenar i...
114
8.2 Exemplo – Sistema de login
1º Crie uma página HTML para um formulário de cadastro assim:
<html><body>
<form method...
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Criação de Sites - Manual do Aluno (web developing - student's manual )
Próximos SlideShares
Carregando em…5
×

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

479 visualizações

Publicada em

Apostila que desenvolvi enquanto professora nas matérias de Criação de Sites I e II no curso técnico em Informática. Contém noções básicas de HTML, CSS, PHP, banco de dados Mysql e Javascript, além dos programas Filezilla e PHPMyAdmin.
Contém cadernos de exercícios.

Prof. Denise Moraes Pinho.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
479
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. CRIAÇÃO DE SITES I E II MANUAL DO ALUNO Elaboração: Professora Denise Moraes Pinho Taquara - RS 2014
  2. 2. 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. 3. 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. 4. 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
  5. 5. MÓDULO I HTML, CSS e design de sites estáticos
  6. 6. 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. 7. 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. <!-- comentário --> 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. 8. 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> <!-- comentários --> Aqui você poderá inserir os elementos que quiser<br> </body></html>
  9. 9. 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. 10. 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> <title> Minha primeira página HTML </title> </head> <body bgcolor="grey"> 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> 2- <html> <head> <title> Minha primeira página HTML </title> </head> <body background="imagem.jpg"> 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>
  11. 11. 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> <title> Minha primeira página HTML </title> <meta name="description" content="Poema – Mário Quintana"> <!-- descreve o conteúdo da página --> <meta name="keywords" content="Poemas, Mario Quintana, utopias"> <!-- descreve palavras-chave --> <meta name="author" content="Denise Pinho"> <!-- descreve o autor da página --> <meta charset="utf-8"> <!-- descreve em qual codificação de caracteres/idioma a página está. A nossa é utf-8 --> </head> <body bgcolor="grey"> 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>
  12. 12. 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. 13. 13 Exemplo: <html> <head> <title> Minha primeira página HTML </title> </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. 14. 14 Exemplo: <html> <head> <title> Minha primeira página HTML </title> </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. 15. 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> <title> Um hyperlink </title> </head> <body link=”blue” alink=”yellow” vlink=”red”> <a href=”http://google.com.br”> Google </a> </body></html> <html> <head> <title> Um hyperlink </title> </head> <body> <a href=”http://google.com.br”><font color=”red”> Google</font> </a> </body></html>
  16. 16. 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> <title> Minha primeira página HTML </title> </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. 17. 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. 18. 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. 19. 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. 20. 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. 21. 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. 22. 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. 23. 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. 24. 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. 25. 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> Aqui vão os elementos da sua div.<br> 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"> Aqui vão os elementos da sua div.<br> Aqui vão os elementos da sua div.<br> Aqui vão os elementos da sua div.<br> </div> </body> </html>
  26. 26. 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. 27. 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. 28. 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. 29. 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. 30. 30 Será exebida uma página com os seguintes dados: Passo 2: Abra o Filezilla.
  31. 31. 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. 32. 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. 33. 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. 34. 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. 35. 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. 36. 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. 37. 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. 38. 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. 39. 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> <style type="text/css"> 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> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> </div> </body></html>
  40. 40. 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. 41. 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. 42. 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. 43. 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> <a href="#"> Link 2 </a> </td> </tr> <tr> <td> <a href="#"> Link 3 </a> </td> </tr> </table> </center> </div> </div> </td> <td> <div id='pai'> <p> Menu 2 </p> <div id="mostrada"> <center> <table id="2"> <tr> <td> <a href="#"> Link 4 </a> </td> </tr> <tr> <td> <a href="#"> Link 5 </a> </td> </tr> <tr> <td> <a href="#"> Link 6 </a> </td> </tr> </table> </center> </div> </div> </td> <td> <div id='pai'> <p> Menu 3 </p> <div id="mostrada"> <center> <table id="2"> <tr> <td> <a href="#"> Link 7 </a> </td> </tr> <tr> <td> <a href="#"> Link 8 </a> </td> </tr> <tr> <td> <a href="#"> Link 9 </a> </td> </tr> </table> </center> </div> </div> </td> </tr></table> </body> </html>
  44. 44. 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. 45. 45 Exemplo final: <html> <head> <title>Pagina Teste</title> <meta charset="utf-8"> <style type="text/css"> 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. 46. 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. 47. 47 3) Formate um texto qualquer, com html, da seguinte maneira: 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. 4) Formate um texto qualquer, com html, da seguinte maneira: 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. 48. 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. 49. 49 8) Crie uma lista de tópicos como na figura abaixo:
  50. 50. 50 9) Com base no que aprendemos até o momento, desenvolva um mini-layout com base na estrutura dada:
  51. 51. 51 10) Desenvolva três tabelas como as da figura abaixo:
  52. 52. 52 11) Desenvolva uma tabela como a da figura abaixo:
  53. 53. 53 12) Desenvolva uma tabela como a da figura abaixo:
  54. 54. 54 13) Desenvolva uma tabela como a da figura abaixo:
  55. 55. 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. 56. 56 b) Utilizando botões do tipo input como hyperlinks. Exemplo:
  57. 57. 57 18) Utilizando o recurso “mailto” crie um formulário para envio de e-mail como na imagem abaixo:
  58. 58. 58 19) Utilizando divs, desenvolva um código para um layout simples com imagem de topo, área central com uma tabela. Exemplo abaixo:
  59. 59. 59 20) Crie um layout com base em tabelas inspirado na figura abaixo:
  60. 60. 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. 61. 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. 62. 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. 63. 63 24) Crie um esquema básico de layout em quadros (frames) segundo o esquema da imagem abaixo:
  64. 64. 64 25) Utilizando os conhecimentos até agora adquiridos que desejar, crie um esquema básico de layout segundo o esquema:
  65. 65. 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. 66. 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. 67. 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. 68. 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. 69. 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. 70. 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. 71. 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. 72. 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. 73. 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
  74. 74. MÓDULO II PHP + Banco de Dados Mysql, noções de Javascript e sistemas para sites dinâmicos
  75. 75. 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. 76. 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. 77. 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. 78. 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. 79. 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’; Leituras complementares 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. 80. 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. 81. 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. 82. 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. Leituras complementares 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. 83. 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. 84. 84 d) <?php $array = array(3,4, 9, 8 => 10, 4 => 2, 14, 3 => 12); echo $array[0] . "<br>"; echo $array[1] . "<br>"; echo $array[2] . "<br>"; echo $array[3] . "<br>"; echo $array[4] . "<br>"; echo $array[8] . "<br>"; echo $array[9] . "<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. 85. 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. 86. 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. 87. 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. 88. 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. 89. 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. 90. 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. 91. 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. 92. 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. 93. 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. 94. 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. 95. 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. 96. 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. 97. 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. 98. 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. 99. 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. 100. 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. 101. 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. 102. 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. 103. 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. 104. 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. 105. 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. 106. 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. 107. 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. 108. 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. 109. 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. 110. 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. 111. 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. 112. 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. 113. 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. 114. 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>

×