CENTRO UNIVERSITRIO

Programao Web
Professor: CLAUDIONEI MADEIRA GUIMARES

Lages (SC), Agosto de 2011

O Que significa Internet?

O termo internet vem do ingls inter: entre net: redes Traduzindo: entre redes Ou seja: trata-se da unio de vrias pequenas rede e servidores com o intuito de montar uma rede enorme e nica, a qual suporta mais recurso, do que uma nica rede. (CHICOLI, 2008, p. 6).

Caractersticas Bsicas da Internet

No h controle centralizado; No h gerncia; Inteligncia nas pontas; Conectividade total entre dois pontos por meio do protocolo TCP/IP; Acesso quase instantneo e de baixo custo; Comunicao entre todos os clientes da rede; Acesso a milhares de bases de dados no mundo; Discusso de assuntos dos mais variados tipos; Oferecimento e aquisio de produtos, acesso a revistas e jornais eletrnicos. Fonte: (MARCONDES, 1976, p. 25).

O Que WWW?
O termo WWW vem do ingls: World Wide Web Traduzindo: teia de alcance mundial Esses termos vem do fato de os primeiros desenhos esquemticos da internet, nos Estados Unidos, serem linhas que ligavam vrios pontos, parecendo uma teia de aranha.(CHICOLI, 2008, p. 6).

Para que criar um site?

O que faz uma pgina receber visitas?

Necessidade de pessoas que precisam da informao nela escrita, curiosidade ou oferta de vantagens. Ningum fica digitando endereos aleatoriamente para ver o que aparece. As pessoas chegam aos sites por meio de mecanismos de busca, por indicao de outra pessoa ou por meio de um link em outro site. Fonte: (CHICOLI, 2008, p. 9).

Planejamento do site

Definir o objetivo de criar o site. Para que est criando o site? Definir o contedo do site. Como esse contedo ser apresentado.

O que acontece em cada link.

Elementos Bsicos de Site

Nome Mapa do site Layout

Menu (com uma breve descrio do que indicar cada link).

Nome do Site

como ele ser conhecido pelas pessoas; Verifique se est disponvel para registro e se no existem nomes parecidos;

Evite registrar domnios com caracteres especiais; Crie um logo ou uma forma personalizada de escrever o nome do seu site;

Mapa do Site

Aqui deve aparecer tudo que o site vai ter; Costume organizar o mapa pelos nomes dos arquivos HTML, descrevendo o que cada um deles possuir; O mapa poder servir de guia no processo de montagem do site, para no se esquecer de nada ou mesmo para orientar os links do menu.

Exemplo de Mapa de Site

Formato Grfico
Index.html Entrada: foto do carro e alguns pequenos textos descrevendo o carro.

Agencias.html Lista de concessionrias que tm o carro para venda.

Site Camaro

Ficha.html Ficha Tcnica: dados do carro, motor, espao, acessrios, etc.

Contato.html Link para entrar em contato com a fbrica ou com as concessionrias.

Fotos.html Fotos: Diversas fotos do carro por fora e do interior mostrando os pontos fortes.

Exemplo de Mapa de Site

Site Camaro

Formato Texto

Index.html Entrada: foto do carro e alguns pequenos textos descrevendo-o. Fotos.html Fotos: diversas fotos do carro por fora e do interior mostrando os pontos fortes. Ficha.html Ficha Tcnica: dados do carro, motor, espao, acessrios, etc. Agencias.html Lista de concessionrias que tm o carro para venda.

Contato.html Link para entrar em contato com a fbrica ou com as concessionrias.

Layout do Site

Onde sero posicionados os elementos principais do site;

Se o site ter texto com imagens; Onde ficar o menu;

O tamanho das figuras;

Quais as cores padres para o site; Onde ficar algum banner (se houver).

O Menu do Site

O menu uma forma importante de organizar o site; Os nomes dos itens devem identificar, de forma clara e precisa, o local para onde aquele ramo leva o visitante; Cada item do menu deve servir de atalho para um contedo especifico.

O Que significa HTML?

O termo HTML vem do ingls e significa: Hiper Text Markup Language ou Linguagem de Marcao de HiperTexto
Com ela, podemos formatar documentos inteiros para exibio na Internet, transformado textos simples em hipertexto (SANTOS, 2005, p. 8).

O que um hipertexto?
So informao organizada na forma de pginas webs, que pode conter textos, imagens, sons, programas e vdeos, onde atravs de atalhos (links), h a possibilidade de acessar contedos armazenados em outros endereos de forma rpida e prtica. Fonte: (MARCONDES, 1976, p. 30).

Para que serve a linguagem HTML?

Determinar a disposio geral dos elementos da pgina; Indicar quais arquivos devem ser localizados, baixados e armazenados para mostrar a pgina de forma correta; Apresentar e identificar os elementos da pgina; Orientar o navegador sobre o que fazer com cada arquivo armazenado.

Aplicaes Cliente-Servidor Web

ARQUIVO .PHP

BROWSER DO CLIENTE(S)

SOLICITAO HTTP (ARQUIVO PHP)

SOLICITAO HTTP (ARQUIVO HTML)

SERVIDOR WEB

CLIENTE WEB

Sistema Operacional de disco; Sistema Operacional de rede;

Driver do Hardware Protocolo de Rede (TCP/IP)

Navegadores WEB: So programas capazes de interpretar o cdigo HTML da pgina, aplicar uma formatao ao documento e exibir o resultado.
Ex: Internet Explorer, Netscape, Mozila, Opera, etc.

Servidor WEB

Sistema Operacional de disco; Sistema Operacional de rede;

Driver do Hardware Protocolo de Rede (TCP/IP)

Servidores Web: Trata-se de computadores que armazenam e disponibilizam sites para visitao, a custos relativamente baixos. Ex: IIS, Apache

Ferramentas de Programao HTML

O HTML pode ser programado usando-se qualquer editor de texto comum como o Notepad ou utilizando-se de editores profissionais como Front-Page ou Dreamweaver (CARDOSO, 2004, p. 12). Em nosso curso sugiro adotarmos o Notepad ou o Notepad++ como ferramenta bsica.

As Tags HTML

O HTML estruturado em tags (ou elementos HTML) que podem ser escritas tanto em minsculas como em maisculas. As tags possuem os caracteres < e > para marcar o incio e final. As tags geralmente possuem um comando iniciador e um finalizador. O comando finalizador possui os caracteres </ e >. (CARDOSO, 2004, p. 12).

Algumas tags descartam o uso da tag de finalizao. Alguns exemplos so as tags para pular linha <BR> e inserir divisrias <HR>(MARCONDES, 1976, p. 45).

Elementos da Pgina
<html>
<head>
AQUI VAI FICAR O CONTEDO DO CABEALHO

Inicio da pgina
Cabealho da pgina

</head>

<body>
AQUI VAI FICAR O CONTEDO DO CORPO, OU SEJA, O QUE AS PESSOAS VO VER!

Corpo da pgina

</body> </html>

Fim da pgina

Cabealho da Pgina

No cabealho ficam os marcadores que definem parmetros e informaes para o navegador, mas que no aparecero no site.

Exemplos de marcadores: O ttulo da pgina; Identificao do autor da pgina; Mtodos de abertura de pginas; Linguagens incorporadas ao texto.

Comandos Meta
Os comandos meta encontram-se no cabealho da pgina e os principais so:

META KEYWORDS; META DESCRIPTION; META REFRESH

META KEYWORDS
1.
2. 3. 4. 5.

<html> <head> <meta name=keywords content=palavras chaves de identificao da pgina> </head> <body>
comandos do corpo da pgina

6. 7.

</body> </html>

META DESCRIPTION
1.
2. 3. 4. 5.

<html> <head> <meta name=description content=Frases que resumem o contedo da pgina> </head> <body>
comandos do corpo da pgina

6. 7.

</body> </html>

META REFRESH
1. 2. 3.

4. 5. 6. 7.

<html> <head> <meta http-equiv=refresh content=30;url=http://www.outrosite.com. br"> </head> <body> comandos do corpo da pgina </body> </html>

META DE AUTORIA
1.
2. 3. 4. 5. 6.

<html> <head> <meta name=author content=Claudionei> <meta name=copyright content=Facvest> </head> <body> </body> </html>
comandos do corpo da pgina

7.
8.

Ttulo da Pgina
1. 2. 3.

4.
5.

6.
7.

<html> <head> <title>Minha Primeira Pgina</title> </head> <body> comandos do corpo da pgina </body> </html>

Corpo da Pgina
O corpo de um documento HTML a parte que o navegador realmente mostra para os usurios como textos, imagens, links etc. O corpo marcado pelas tags BODY. exemplo de body: <BODY bgcolor=A link=B vlink=C alink=D> comandos do corpo da pgina </BODY> bgcolor=indica a cor de fundo da pgina ou backgroud=indica uma imagem como fundo da pgina.

PrimeiraPagina.html
1. <html> 2. <head> 3. <title>Primeira 4. </head> 5. <body

Pgina</title>

bgcolor="#FFFF00" text="#0000FF" link="#FF0000" alink="#FF00FF"> 6. Minha Primeira Pgina 7. </body> 8. </html>

Cdigos de Cores
Cores
Vermelho

Ingls
Red

Cdigo
#FF0000

Verde Azul Preto Branco Amarelo Rosa Cinza Marrom Laranja

Green Blue Black White Yellow Pink Grey Brown Orange

#00FF00 #0000FF #000000 #FFFFFF #FFFF00 #FF00FF #666666 #800000 #FF8000

Fonte: (CARDOSO, 2004, p. 15).

Cores Padronizadas
Cores
Black Silver

Cdigo
#000000 #C0C0C0

Cores
Green Lime

Cdigo
#008000 #00FF00

Gray White Maroon Red Purple Fuchsia

#808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF

Olive Yellow Navy Blue Teal Aqua

#808000 #FFFF00 #000080 #0000FF #008080 #00FFFF

Fonte:(MARCONDES, 1976, p. 68).

FORMATAO DE TEXTOS

Ttulos do Texto
Os ttulos so formataes especiais com 6 tamanhos predefinidos. Os ttulos geram quebras de pargrafos, ou seja, geram uma quebra de linha maior que o normal. Eles so marcados pelas tags <H#><H#>. Onde # varia de 1 a 6:

<H[1..6] ALIGN=[left/right/center]> [ttulo] </ H[1..6]>

Quebra de Linha e Pargrafo

Os textos podem ser quebrados utilizando-se a tag <BR> ou separados por pargrafos. Veja o exemplo a seguir:
<html> <body> Primeira Linha<br> <br><br> Segunda Linha<br> <p>pargrafo</p> </body> </html>

1.
2. 3. 4. 5. 6. 7. 8.

SegundaPagina.html
1. 2. 3. 4. 5. 6. 7. 8.

9.
10. 11.

<html> <head><title>Segunda Pgina</title></head> <body> <H1>T&iacute;tulo 1</H1> <H2>T&iacute;tulo 2</H2> <H3>T&iacute;tulo 3</H3> <H4>T&iacute;tulo 4</H4> <H5>T&iacute;tulo 5</H5> <H6>T&iacute;tulo 6</H6> </body> </html>

TerceiraPagina.html
1. 2.

3.
4. 5. 6. 7. 8. 9. 10.

<html> <head><title>Terceira Pgina</title></head> <body> <H1 ALIGN="CENTER">T&iacute;tulo Principal</H1> Texto <H2>Subt&iacute;tulo</H2> Texto <H3 ALIGN="RIGHT">Detalhe do Subt&iacute;tulo</H3> </body> </html>

Estilos de Texto
Os estilos de texto so muitos. Veja exemplos: 1. <html> 2. <head><title>Pgina 4</title></head> 3. <body> 4. Texto sem formatao<br> 5. <b>Texto negritado</b><br> 6. <i>Texto italico</i><br> 7. <u>Texto sublinhado</u><br> 8. <s>Texto riscado</s><br> 9. <big>Texto aumentado</big><br> 10. <small>Texto diminuido</small><br> 11. EX_{Texto subscrito}<br> 12. EX^{texto sobrescrito}<br> 13. </body> 14. </html>

Textos Usando Fontes

1. 2.

3.
4. 5. 6. 7. 8.

<html> <head><title>Pgina 5</title></head> <body bgcolor=cyan> <Font face=Arial size=3 color=#0000ff>texto1</font> <Font face=tahoma size=5 color=red>texto2</font> <Font face=calibri size=7 color=#800080>texto2</font> </body> </html>

Alinhamento de Texto

Os textos podem esquerda, direita, justificado no HTML.

ser alinhados centralizado ou

<html> <body> <DIV align=left>Alinhamento a esquerda</DIV> <DIV align=center>Centralizado</DIV> <DIV align=right>Alinhamento a Direita</DIV> <DIV align=Justify>Alinhamento Justificado</DIV> </body> </html>

Pr-Formatao de Textos
A marcao <PRE>, delimita uma rea de texto em que espaos, novas linhas e tabulaes so mantidos. Ou seja, o texto ser apresentado exatamente da forma como foi digitado (MARCONDES, 1976, p. 69).

Exemplo de Pre-Formatao
<HTML> <HEAD> <TITLE>PRE-FORMATAO</TITLE> </HEAD> <BODY> <PRE> Extrato Bancrio de jogador de futebol Dia Transao Valor (R$) 10/07/2011 Pagamento do ms +90.000,00 15/07/2011 Danceteria - 1.500,00 20/07/2011 Carro novo - 40.000,00 10/07/2000 Penso da Ex - 10.000,00 Saldo +38.500,00 </PRE> </BODY> </HTML>

LISTAS
Podem ser numricas ou no; Utilizados para organizar as informaes de forma sequncia e alinhadas; As listas no numeradas so configuradas pelas tags <UL></UL>; As listas numeradas so configuradas pelas tags <OL TYPE=t></OL>

Fonte: (CARDOSO, 2004, p. 18).

Valores de t <OL TYPE=t></OL>

Default = 1; A para letras maisculas; a para letras minsculas; I para numerais romanos grandes; i para numerais romanos pequenos;

ExemplosListas.html
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

12.

<HTML> <HEAD><TITLE> ExemplosListas.html </TITLE> </HEAD> <BODY> <OL><LI>Lista numerada A <LI>Lista numerada B</OL><UL> <LI><LI>Lista no numerada A <LI>Lista no numerada B</UL> <UL TYPE=i><LI>romano A <LI> romano B</UL> </BODY> </HTML>

Letreiros Animados
possvel obter o efeito de animao de texto por meio da formatao <MARQUEE>. Com ele voc pode fazer o texto se mover de um lado para o outro de sua pgina, como se escorregasse por ela.

Comando Marquee
<MARQUEE BEHAVIOR=[scroll/slide/alternate] DIRECTION=[left/right] LOOP=[1..n/infinite] ALIGN=[left/right/center] BGCOLOR=[cor] SCROLLAMOUNT=[espao] SCROLLDELAY=[tempo] HEIGHT=[altura] WIDTH=[largura] HSPACE=[espaamento horizontal] VSPACE=[espaamento vertical]> [Letreiro] </MARQUEE>

Linhas Horizontais
As linhas da html so extremamente atraentes e utilizadas para diviso de assuntos ou partes de um assunto. A tag <HR> cria uma linha horizontal em alto relevo e de ponta a ponta da pgina. (MARCONDES, 1976, p. 99). <HR WIDTH=[largura] SIZE=[espessura] ALIGN=[left/rigth/center] NOSHADE COLOR=[cor]>

Exemplos de Linhas
Linha simples: <HR> Linha dimensionada: <HR WIDTH=100> <HR WIDTH=50%> <HR SIZE=8> Uma linha vertical: <HR WIDTH=3 SIZE=50> Linha com alinhamento: <HR WIDTH=50% ALIGN=left> <HR WIDTH=50% ALIGN=right> Linha sem sombra: <HR NOSHADE> Linha colorida: <HR NOSHADE COLOR=red>

Links e Imagens
Links e imagens so os dois recursos importantes em HTML. Os links tornam a navegao entre as pginas possvel e as imagens representam um dos recursos estticos mais importantes do layout de uma pgina. (MARCONDES, 1976, p. 95).

Links
So interligaes de textos com outros textos ou arquivos HTML. O link pode ser identificado por textos sublinhados com cores diferentes ou por imagens e fotos que mudam o formato do cursor ao passarmos o mouse sobre eles (CARDOSO, 2004, p. 20).
<A HREF=nomedoarquivo.html>texto</A>

Para email: <A HREF=mailto:ana@bol.com.br>ana</A>

Inserindo Imagens/Figuras
Inserir figuras ou imagens no HTML bem simples.
<IMG SRC=nomedaimagem WIDTH=X HEIGHT=Y ALIGN=Z VSPACE=W HSPACE=T BORDER=K ALT=TEXTO> FONTE (CARDOSO, 2004, p. 21)

Paginacomfigura.html
1. 2. 3.

4.
5. 6. 7. 8. 9. 10.

11.
12.

<HTML> <HEAD><TITLE> Pagina com figura </TITLE> </HEAD> <BODY> <IMG SRC=figura1.gif ALIGN=left HSPACE=0>Texto1 <IMG SRC=figura1.gif WIDTH=20 HEIGHT=20 HSPACE=1>Texto2 <IMG SRC=figura1.gif ALIGN=right VSPACE=10 HSPACE=2>Texto3 </BODY> </HTML>

O QUE PHP ?

uma linguagem de Script embutida em HTML no servidor;

Sistemas

Operacionais: Windows, Linux e Unix; Apache, IIS;

Servidores: Bancos

de dados: Acess, MySQL, Oracle, DB2, Informix, SQL Server;

interpretada;

executado no servidor e retorna apenas cdigo html no navegador do cliente;

O Que pode ser feito com PHP??

A principal funo do PHP criar pginas dinmicas e automticas para Internet. Os principais usos de PHP a coleta de dados de formulrios e a gerao de pginas dinmicas. Alm disso, tambm muito utilizado em pginas que trabalham com banco de dados.

Sintaxe Bsica

Delimitando o cdigo PHP; Separador de Instrues; Nomes de Variveis; Comentrios

De uma linha; De mais linha.

Delimitando o cdigo PHP

<?php comandos; ?>
<? comandos; ?>

Delimitando o cdigo PHP

<script language=php> comandos; </script>
<% comandos; %>

Separador de Instrues
<? echo com ponto e virgula; ?>

<? If ($x == $x) { //Aqui no precisa de ponto e vrgula echo ponto e virgula; //Aqui precisa } ?>

Nomes de Variveis
Toda varivel em PHP tem seu nome composto pelo caracter $ e um string, que deve iniciar por uma letra ou o caracter _.

PHP case sensitive

Isso quer dizer que as variveis $php e $PHP so diferentes. bom evitar os nomes em maisculas, pois, com veremos, o PHP j possui algumas variveis definidas em letras maisculas.

Comentrio de Uma Linha

<? echo teste1; #Esse o teste1 echo teste2; //Esse o teste2 ?>

Comentrio de Mais de Uma Linha

<? echo teste1; /* Esse um comentrio com mais de uma linha que funciona corretamente. */ ?>

Inteiro (Ex: 10, -56, 0234, 0x34);

TIPOS SUPORTADO POR PHP

Ponto Flutuante (Ex: 1.234, 23e4);

Strings (Ex: Brasil, teste ); Arrays (Ex: sexo[1]=Masc, sexo[2]=Fem Listas (ex: list (a, e, i, o, u) )

Tipo Inteiro

$php = 1234; # inteiro positivo na base decimal

$php = -234; # inteiro negativo na base decimal $php = 0234; # inteiro na base octal $php = 0x34; # inteiro na base hexadecimal.

Ponto Flutuante

$php = 1.234;
$php = 23e4; # equivale a 230.000

String
<? $teste = Brasil; $php = -$teste-\n; echo $php; ?>
A sada desse script ser -$teste-\n

String
<? $teste = Brasil; $php = -$teste-\n; echo $php; ?>
A sada desse script ser Brasil--

Arrays
<?
$cor[1] = vermelho; $cor[2] = verde; $cor[3] = azul; $cor[teste] = 1;

?>

Arrays
<?
$cor = array [1 => vermelho, 2 => verde, 3 => azul, teste => 1);

?>

Listas
<?
List ($a, $b, $c) = array (a, b, c);

?>

Transformao de tipos

$php $php $php $php

= = = =

1 = 10.5; // $php == 11.5 1 = -1.3e3; // $php == -1299 3.9 // $php double (3.9) (int) $php // $php inteiro (3)

Constantes
<?php
Define (PI, 3.1415); $raio = 10; $circunf = 2*PI*$raio; echo O valor da circunferencia : $circunf;

?>

Incremento e Decremento

$a = $b = 10; // $a e $b recebem o valor 10

$c = $a++; // $c recebem 10 e $a passa a ter 11 $d = ++$b; $d recebe 11, valor de $b j incrementado

Blocos
if ($x == $y) comando1; comando2.
if ($x == $y){ comando1; comando2; }

Comando IF
if ($x == $y) comando1; comando2; else comando2; comando3; endif if ($a > $b) $maior = $a; else $maior = $b.

Comando IF
<?php $i = 2; if ($i == 0) { print "i igual a zero"; } elseif ($i == 1) { print "i igual a um"; } elseif ($i == 2) { print "i igual a dois"; } ?>

Comando Switch
<?php $i = 2; switch ($i) { case 0: print "i igual a zero"; break; case 1: print "i igual a um"; break; case 2: print "i igual a dois"; break; default: echo opo invalida; break; } ?>

while

<?php $i = 1; while ($i < 10) { echo "O valor atual do contador $i <br>"; $i++; } ?>

do...while
<?php $i = 1; do { echo "O valor atual do contador $i <br>"; $i++; } while ($i < 10) ?>

Funo
<?php fuction triplo ($numero) { $x = $numero * 3; return $x; } //programa principal $valor = 5; echo "O triplo de $valor ".triplo($valor); ?>

Referncias Bibliogrficas

ANSELMO, Fernando. PHP e MySQL para Windows. Florianpolis: Editora Visual Books Ltda., 2000. MACEDO, Marcelo da Silva. Construindo Sites Adotando Padres Web. Rio de Janeiro: Editora Cincia Moderna Ltda., 2004. SOARES, Bruno Augusto Lobo. Aprendendo a Linguagem PHP. Rio de Janeiro: Editora Cincia Moderna Ltda., 2007. TANSLEY, David. Como Criar Web Pages Rpidas e Eficientes Usando PHP e MySQL. Rio de Janeiro: Editora Cincia Moderna Ltda., 2002.

CENTRO UNIVERSITRIO

claudioneimadeira@yahoo.com

Dvidas ?

Claudionei M. Guimares