Apostila TecWeb

CENTRO DE EDUCAO TECNOLGIA DO AMAZONAS
INSTITUTO BENJAMIN CONSTANT
TECNOLOGIA WEB
HABILITAO EM DESENVOLVIMENTO DE SOFTWARE

JUN, 2006
CURSO DE TCNICO EM INFORMTICA
SUMRIO 1. INTERNET ESTRUTURA E FUNCIONAMENTO ....................................................... 6 1.1 COMPONENTES QUE GARANTEM O FUNCIONAMENTO DA REDE MUNDIAL ............................................................................................................................... 11 1.1.1 Protocolo TCP/IP...................................................................................................... 11 1.1.2 Servidores ........................................................................................................................ 12 1.1.3 Roteadores ....................................................................................................................... 12 1.1.4 Backbones........................................................................................................................ 12 1.1.5 Provedores de Acesso ...................................................................................................... 12 1.1.6 Cliente-Servidor .............................................................................................................. 13 1.1.7 FTP (Protocolo de transferncia de arquivos) ................................................................. 13 1.1.8 World Wide Web ............................................................................................................. 13 1.1.9 E-mail .............................................................................................................................. 13 1.2 1.3 1.3.1 1.3.2 HISTRICO ................................................................................................................. 13 SERVIOS E UTILIDADES....................................................................................... 14 Propagao do Conhecimento e Intercmbio de Informaes ................................. 14 Meio de Comunicao .............................................................................................. 14
1.3.3 Servios .......................................................................................................................... 15 1.3.4 Comrcio ......................................................................................................................... 15 1.3.5 1.4 1.4.1 Marketing ................................................................................................................. 15 CONEXO................................................................................................................... 16 Acesso Direto ........................................................................................................... 16
1.4.2 Acesso discado ................................................................................................................ 16 1.4.3 Provedores de acesso ....................................................................................................... 17 1.4.4 Configurar a conexo................................................................................................ 18 1.5 WORLD WIDE WEB ........................................................................................................ 19 1.6 NAVEGADORES .............................................................................................................. 21 1.7 PROTOCOLO FTP TRANSFERNCIA DE ARQUIVOS............................................... 22 1.8 PLUGINS ........................................................................................................................... 24 1.9 TIPOS DE PROGRAMAS ................................................................................................. 25 1.9.1 Shareware ....................................................................................................................... 25 1.9.1 1.9.2 1.9.3 Demos ....................................................................................................................... 26 Trials ......................................................................................................................... 26 Freeware ................................................................................................................... 26
1.9.5 Addware ......................................................................................................................... 26 1.10 CORREIO ELETRONICO .............................................................................................. 26
2. HTML HYPERTEXT MARKUP LANGUAGE ............................................................ 29 2.1 2.2 2.3 2.4 2.5 2.6 2.6.1 2.6.3 HTMLYTIME HYPERMEDIA/TIME-BASED DOCUMENT STRUCTURING ..... 29 SGML - STANDARD GENERALIZED MARKUP LANGUAGE ............................ 29 DTD - DOCUMENT TYPE DEFINITION ................................................................. 29 EDIO DE DOCUMENTOS HTML........................................................................ 30 PUBLICAO DE DOCUMENTOS NA INTERNET (SITES) ................................ 31 DOCUMENTO HMTL BSICO E SEUS COMPONENTES .................................... 31 Seo <HEAD> ........................................................................................................ 32 Cores e Tamanhos .................................................................................................... 33
2.6.2 Seo < BODY > ............................................................................................................. 32 2.6.4 Cabealhos ....................................................................................................................... 35 2.6.5 Separadores...................................................................................................................... 37 2.6.6 Linha Horizontal .............................................................................................................. 38 2.6.7 Lista em Html .................................................................................................................. 39 2.6.7.1 Listas de Definio ....................................................................................................... 39 2.6.7.2 Listas no-numeradas ................................................................................................... 40 2.6.7.3 Listas numeradas .......................................................................................................... 41 2.6.7.4 Listas e Sub-Listas ........................................................................................................ 43 2.6.8 Formatao de Textos e Caracteres ................................................................................. 44 2.6.8.1 Blocos de texto ............................................................................................................. 44 2.6.8.2 <Blockquote> ............................................................................................................... 45 2.6.8.3 <Address>..................................................................................................................... 45 2.6.9 Formatao de Frases ...................................................................................................... 45 2.6.10 Caracteres Especiais ...................................................................................................... 46 2.6.11 Blink .............................................................................................................................. 48 2.6.12 Marquee ......................................................................................................................... 48 2.6.13 Ligaes (uso de Links)................................................................................................. 49 2.6.14 Caminhos (uso de Links) ............................................................................................... 49 2.6.14.1 Caminho Relativo ....................................................................................................... 50 2.6.14.2 Caminho Absoluto ...................................................................................................... 50 2.6.15 Indicadores (Uso de Links) ........................................................................................... 51 2.6.16 Insero de Imagens ...................................................................................................... 51 2.6.17 Atributos Bsicos de Imagem ........................................................................................ 52 2.6.17.1 ALT ............................................................................................................................ 52 2.6.17.2 Width e Height ........................................................................................................... 52 2.6.17.3 Border ......................................................................................................................... 52 2.6.17.4 Align ........................................................................................................................... 53
2.6.17.5 Molduras de Imagem .................................................................................................. 55 2.6.18 Tabelas ........................................................................................................................... 56 2.6.18.1 Extenses de Tabelas .................................................................................................. 58 2.6.19 Frames ........................................................................................................................... 60 2.6.20 udio e Vdeo................................................................................................................ 61 3. INTRODUO AO JAVAESCRIPT BSICO ............................................................. 64 3.1 CONFIGURAES........................................................................................................... 64 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 USANDO O JAVASCRIPT ......................................................................................... 64 COMANDOS: script language - alert - /script ............................................................ 66 VARIVEIS................................................................................................................. 66 WINDOW.PROMPT - ALERT COM VARIVEL .................................................. 67 COMANDOS DOCUMENT........................................................................................ 68 COMANDOS WINDOW ............................................................................................. 69 EVENTOS .................................................................................................................... 70 OBJETOS DE FORMULRIOS ................................................................................. 71 OPERADORES DO JAVASCRIPT ............................................................................ 75 COMANDOS DE BLOCO .......................................................................................... 76 FUNES .................................................................................................................... 81 CLCULOS EM JAVASCRIPT ................................................................................. 83
4. CASCADING STYLE SHEETS - CSS............................................................................ 88 4.1 COMO CRIAR ESTILOS .................................................................................................. 88 4.2 AS FOLHAS DE ESTILO ................................................................................................. 90 4.2.2 Estilos Incorporados ........................................................................................................ 91 4.2.3 Estilos Inline .................................................................................................................... 91 4.3 TAGS PERSONALIZADAS ............................................................................................. 92 4.4 ATALHOS E ATRIBUTOS DE CSS ................................................................................ 94 4.4.1 Atalhos ............................................................................................................................. 94 4.4.2 Atributos .......................................................................................................................... 94 4.5 MLTIPLAS FONTES...................................................................................................... 97 5. INTRODUO A LINGUAGEM PHP & MYSQL ...................................................... 99 5.1 HISTRIA DO PHP ........................................................................................................ 100 5.2 SINTAXE BSICA ......................................................................................................... 100 5.3 TIPOS ............................................................................................................................... 104 5.3.1 Inteiros (integer ou long) ............................................................................................... 104 5.3.2 Nmeros em Ponto Flutuante (double ou float) ............................................................ 105 5.3.3 Strings ............................................................................................................................ 105 5.3.3.1 Funes relacionadas ao HTML ................................................................................. 106
5.3.3.2 Funes relacionadas a ARRAYS .............................................................................. 109 5.3.4 Arrays ............................................................................................................................ 110 5.3.5 Listas.............................................................................................................................. 110 5.3.6 Objetos ........................................................................................................................... 111 5.3.7 Booleanos ...................................................................................................................... 112 5.3.8 Transformao de tipos ................................................................................................. 112 5.3.8.1 Coeres ..................................................................................................................... 112 5.3.8.2 Transformao explcita de tipos................................................................................ 113 5.4 CONSTANTES ................................................................................................................ 114 5.5 OPERADORES ................................................................................................................ 115 5.6 ESTRUTURAS DE CONTROLE .................................................................................... 119 5.6.1 Comandos de seleo .................................................................................................... 119 5.6.2 Comandos de Repetio ................................................................................................ 124 5.7 FUNES ........................................................................................................................ 127 5.8 VARIVEIS..................................................................................................................... 132 5.9 CLASSES E OBJETOS ................................................................................................... 137 5.9 INTERAO COM O BROWSER ................................................................................. 140 5.10 ACESSANDO O MYSQL VIA PHP ............................................................................. 151 5.11 ACESSANDO O POSTGRESQL VIA PHP ................................................................. 156 5.12 ENVIANDO EMAIL ..................................................................................................... 158 5.13 EXEMPLOS DIVERSOS DE CDIGO PHP PARTE I ............................................... 159 5.14 EXEMPLOS DIVERSOS DE CDIGO PHP PARTE II .............................................. 167 5.15 EXEMPLOS DIVERSOS DE CDIGO PHP PARTE III............................................. 168 6. BIBLIOGRAFIA .......................................................................................................... 181
Tecnologia Web
INTERNET ESTRUTURA E FUNCIONAMENTO A Internet uma gigantesca rede mundial de computadores, que inclui desde
computadores at micros do porte de um PC 386 ou 486. Esses equipamentos so interligados atravs de linhas comuns de telefone, linhas de comunicao privadas, cabos submarinos, canais de satlite e diversos outros meios de telecomunicao. Os computadores que compem a Internet podem estar localizados, por exemplo, em universidades, empresas, cooperativas, prefeituras, e nas prprias residncias. No Brasil, o nmero de pessoas e computadores ligados Internet ainda relativamente pequeno, mas deve crescer substancialmente ao longo dos prximos anos com o incio do provimento comercial de servios de acesso que vem ocorrendo a partir do primeiro semestre de 1996. Fazendo um paralelo com a estrutura de estradas de rodagem, a Internet funciona como uma rodovia pela qual a informao contida em textos, som e imagem podem trafegar em alta velocidade entre qualquer computador conectado a essa rede. E por essa razo que a Internet muitas vezes chamada da "super rodovia da informao". Portanto, a melhor forma de entender a Internet pensar nela no apenas como uma rede de computadores, mas como uma rede de redes, conectadas umas as outras. A Internet no tem um dono ou um comando central, cada rede individual conectada ela, pode ser administrada por uma entidade governamental, uma empresa ou uma instituio educacional. Fazendo algumas comparaes, podemos ter uma idia do seu alcance: Um computador isolado limita-se a acessar as informaes gravadas no seu disco rgido. Um computador ligado a uma rede local, consegue compartilhar informaes com as outras mquinas conectadas esta rede. o que acontece quando vrios computadores compartilham uma mesma impressora, ou quando um dos computadores armazena arquivos que podem ser utilizados pelos demais. Um computador ligado a Internet tem o mundo ao seu alcance, ou seja, a Internet permite compartilhar recursos e informaes a nvel mundial. O custo de conexo baixo, voc s paga a ligao local at o seu provedor de acesso, e a partir da, ele assume a conexo com a Internet e voc j estar na rede. Isto significa que voc paga o mesmo preo se enviar uma mensagem para o Japo ou para seu vizinho.
A Internet surpreendentemente no controlada de forma central por nenhuma pessoa ou organizao. No h, por exemplo, um presidente ou um
Tecnologia Web
escritrio central da Internet no mundo. A organizao do sistema desenvolvida a partir dos administradores das redes que a compe e dos prprios usurios. Essa organizao pode parecer um pouco catica primeira vista mas tem funcionado extremamente bem at o presente momento, possibilitando o enorme crescimento da rede observado nos ltimos anos. Estar ligado ou conectado Internet, usualmente significa ter uma "conta" em um computador "servidor" que esteja conectado Internet localizado em uma instituio (ou empresa) que seja provedora de servios de acesso Internet. Essa "conta" nesse computador ligado Internet usualmente acessada de um microcomputador atravs de um modem e de uma ligao telefnica comum. Ter essa conta implica em se ter um "endereo eletrnico" na Internet, que funciona de forma similar ao endereo postal. A ttulo de exemplo, um possvel endereo na Internet poderia ser: lopes@artnet.com.br onde "lopes" representa uma identificao da pessoa no computador em que tem uma conta e "artnet.com.br" o endereo desse computador na Internet. O ".br" no final do endereo indica que o computador da rede brasileira. Se sob o ponto de vista fsico a Internet uma conexo entre redes, para o usurio ela aparece como um grupo de servios disponveis para a troca de informaes entre computadores ou indivduos conectados Internet. Quantas pessoas e computadores esto ligados Internet dado o carter descentralizado da Internet muito difcil se conhecer exatamente o nmero de computadores conectados a ela e o nmero e perfil das pessoas que a utilizam. Pelas contas atuais, j so milhes de usurios conectados em todo o mundo. Segundo a revista americana Board-watch, uma das mais conceituadas publicaes sobre o mundo on-line, essa cifra est hoje na casa dos 45 milhes. Se sob o ponto de vista fsico a Internet uma conexo entre redes, para o usurio ela aparece como um grupo de servios disponveis para a troca de informaes entre computadores ou indivduos conectados Internet. Resumidamente so os seguintes: Correio Eletrnico FTP Listas Usenet Gopher
Tecnologia Web
WWW Telnet Talk Finger
A Internet considerada por muitos como um dos mais importantes e revolucionrios desenvolvimentos da histria da humanidade. Pela primeira vez no mundo um cidado comum ou uma pequena empresa pode (facilmente e a um custo muito baixo) no s ter acesso a informaes localizadas nos mais distantes pontos do globo como tambm - e isso que torna a coisa revolucionria - criar, gerenciar e distribuir informaes em larga escala, no mbito mundial, algo que somente uma grande organizao poderia fazer usando os meios de comunicao convencionais. Isso com certeza afetar substancialmente toda a estrutura de disseminao de informaes existente no mundo, a qual controlada primariamente por grandes empresas. Com a Internet uma pessoa qualquer (um jornalista, por exemplo) pode, de sua prpria casa, oferecer um servio de informao baseado na Internet, a partir de um microcomputador, sem precisar da estrutura que no passado s uma empresa de grande porte poderia manter. Essa perspectiva abre um enorme mercado para profissionais e empresas interessadas em oferecer servios de informao especficos.
Enviando dados para o Servidor HTTP
Programar para a web pode ser considerado como um jogo que consiste em receber os dados do usurio, process-los e enviar a resposta dinmica. Uma vez enviada a resposta, encerrado o contato entre o servidor e o cliente. Portanto a primeira coisa a aprender como fazer para receber os dados enviados pelo browser para o servidor. O protocolo HTTP prov dois principais mtodos para enviar informaes para o servidor web, alm da URL referente ao arquivo solicitado. Esses mtodos so o POST e o GET. O protocolo HTTP/1.0 tambm especifica o mtodo HEAD, utilizado apenas para transmitir informaes do header, alm dos mtodos PUT e DELETE, que no sero abordados neste curso.
Tecnologia Web
O Mtodo GET
A especificao do protocolo HTTP/0.9 (a primeira implementao do HTTP) possua a definio do mtodo GET, utilizado pelo browser para solicitar um documento especfico. Por exemplo: a seguinte requisio HTTP retornaria o documento "index.html", localizado no diretrio do servidro chamado teste:
GET /teste/index.html CRLF
Devemos notar que a requisio GET inicia com a palavra GET, inclui o documento solicitado e encerra com a combinao dos caracteres carriage return e line feed. Para um melhor entendimento, voc pode fazer uma requisio GET conectando diretamente em algum servidor WEB, conectando atravs de um programa de telnet (geralmente o servidor http utiliza a porta 80). A resposta ser o cdigo da pgina solicitada.
telnet www.guia-aju.com.br 80 Trying 200.241.59.16... Connected to www.guia-aju.com.br. Escape character is '^]'. GET /index.php3 (... pgina solicitada ...) Connection closed by foreign host.
Obviamente a diferena do browser que ele trata as informaes recebidas e exibe a pgina j formatada. Atravs do mtodo GET tambm possvel passar parmetros da requisio ao servidor, que pode tratar esses valores e at alterar a resposta a depender deles, como no exemplo abaixo:
telnet www.guia-aju.com.br 80 Trying 200.241.59.16... Connected to www.guia-aju.com.br.
Tecnologia Web
10
Escape character is '^]'. GET /index.php3?id=0024horas&tipo=Taxi (... pgina solicitada ...) Connection closed by foreign host.
No exemplo so passados dois parmetros: id e tipo. Esses parmetros esto no formato conhecido por URLencode, que detalhado no captulo 09. Apesar de ser possvel passar parmetros utilizando o mtodo GET, e com isso gerar pginas dinamicamente, este mtodo tem pelo menos dois problemas que em determinadas circunstncias podem ser considerados srios: O primeiro que o GET permite uma quantidade de dados passados, limitada a 1024 caracteres, o que pode gerar perda de informaes em certos casos. O segundo que pelo fato de que as informaes fazem parte da URL, todos os dados podem ser vistos pelo usurio. Isso pode ser extremamente perigoso quando informaes sigilosas esto envolvidas (senha, por exemplo).
Headers
A verso 1.0 do protocolo HTTP trouxe boas inovaes ao mesmo. Uma delas foi a criao de headers nas mensagens de requisio e de resposta. Os headers so informaes trocadas entre o navegador e o servidor de maneira transparente ao usurio, e podem conter dados sobre o tipo e a verso do navegador, a pgina de onde partiu a requisio (link), os tipos de arquivos aceitos como resposta, e uma srie de outras informaes. Assim foi possvel definir um outro mtodo de requisio de arquivos, que resolveu os principais problemas do mtodo GET.
O Mtodo POST
Atravs da utilizao de headers possvel enviar os parmetros da URL solicitada sem expor esses dados ao usurio, e tambm sem haver um limite de tamanho.
Uma conexo ao servidor HTTP utilizando o mtodo POST seria algo semelhante ao que segue:
Tecnologia Web
11
telnet www.guia-aju.com.br 80 Trying 200.241.59.16... Connected to www.guia-aju.com.br. Escape character is '^]'. POST /index.php3 Accept */* Content-type: application/x-www-form-urlencoded Content-length:22 id=0024horas&tipo=Taxi (... pgina solicitada ...) Connection closed by foreign host. Devemos observar os headers enviados ao servidor: a linha Accept informa os tipos de dados que podem ser enviados como resposta (no caso, todos). A linha Content-type informa o tipo de dado que est sendo enviado (urlencoded). O terceiro header o mais importante pois informa o tamanho do corpo da mensagem, que contm os parmetros. Aps todos os headers h um salto de linha e ento iniciado o corpo da mensagem, no formato urlencoded. Obviamente o usurio no deve se preocupar com os headers, em codificar os dados ou em calcular o tamanho do corpo da mensagem. O browser faz isso de maneira transparente. Utilizando GET e POST O mtodo GET pode ser utilizado atravs da digitao de um endereo no local apropriado do navegador ou atravs de um hiperlink, ou seja, uma referncia de uma
pgina a outra. Nesses casos preciso converter os dados para o formato urlencode. A terceira maneira de utilizar o GET atravs de formulrios HTML, e neste caso o usurio no precisa se preocupar com a codificao dos dados. A utilizao de formulrios HTML a
nica maneira possvel de submeter dados pelo mtodo POST. 1.1 COMPONENTES QUE GARANTEM O FUNCIONAMENTO DA REDE MUNDIAL 1.1.1 Protocolo TCP/IP TCP/IP Protocolo de controle de transmisso/Protocolo Internet. o protocolo bsico para a comunicao entre as mquinas conectadas a Internet, que gerencia toda a parte de transmisso e distribuio dos dados na rede.
Tecnologia Web
12
1.1.2 Servidores So computadores equipados com software que permite "servir" a uma rede de computadores. Quanto mais potente o servidor maior e melhor poder ser a rede por ele atendida. So mquinas de alta capacidade, com grande poder de processamento e conexes velozes. Podemos usar como exemplo a mquina Obelix, que atende a Unicamp.
1.1.3 Roteadores So mquinas que controlam o fluxo de informaes na rede, funcionam como "diretores de trnsito". O roteador l o endereo de destino de um pedido e o direciona ao lugar correto.
1.1.4 Backbones Consideradas as espinhas dorsais da lnternet, possuem uma infra-estrutura de alta velocidade que interliga vrias redes. Os backbones garantem o fluxo da informao entre os provedores e ligam todos os pases. A Embratel possui o principal backbone brasileiro. Ligados aos backbones, podem estar os servidores, roteadores, etc.
1.1.5 Provedores de Acesso uma empresa, uma universidade ou alguma organizao qualquer que fornece acesso Internet a pessoas ou empresas. O provedor de acesso o intermedirio entre os usurios e os servios que existem na rede. Uma conexo permanente com a lnternet chamada de linha privada e bastante cara. O provedor de acesso a empresa que assume o custo de uma conexo permanente e vende o acesso a essa conexo para seus clientes, os usurios. Assim o custo alto dividido entre todos os participantes. Este tipo de provedor possui uma srie de linhas telefnicas, para que os usurios se liguem aos seus computadores e tenham acesso lnternet. Este provedor precisa ter, necessariamente, computadores (os servidores) conectados rede de transmisso de dados que forma a Internet. Esta ligao feita pelas companhias telefnicas.
Tecnologia Web
13
1.1.6 Cliente-Servidor A Internet usa um modelo de rede chamado cliente-servidor, baseado em requisies e respostas. O computador cliente requisita uma informao a outro computador (servidor), que responde a solicitao, enviando o que foi pedido. A maioria das aplicaes na Internet baseada neste modelo, entre elas, as mais usadas so:
1.1.7 FTP (Protocolo de transferncia de arquivos) Um cliente faz requisio a um servidor FTP, que responde enviando o arquivo solicitado.
1.1.8 World Wide Web Neste caso, o cliente um navegador (Internet Explorer, Netscape Navigator) que solicita uma pgina, e aps receber seu contedo do servidor, faz o display para o usurio.
1.1.9 E-mail Um programa cliente de e-mails (Outlook Express, Netscape Messenger, Eudora) faz contato com um servidor de e-mails para enviar e receber mensagens
1.2 HISTRICO A Internet nasceu em resposta a uma necessidade militar. Nos anos 60, perodo de grande tenso entre as superpotncias Estados Unidos e Unio Sovitica, os americanos comearam a pesquisar uma forma de interconectar os vrios centro de comando do pas, de modo que o sistema de informaes norteamericano continuasse funcionando, mesmo que houvesse um conflito nuclear.
Com o fim da guerra fria, a estrutura criada para este empreendimento militar foi empregada para o uso cientfico e educacional. No Brasil, as universidades foram as primeiras a se beneficiarem com essa estrutura de rede. Haviam conexes com a Bitnet, uma rede semelhante Internet, em vrias instituies, como as universidades federais do Rio Grande do Sul e do Rio de Janeiro. Os servios disponveis restringiam-se a correio eletrnico e transferncia de arquivos. Somente
Tecnologia Web
14
em 1990, a Fapesp (Fundao de Amparo Pesquisa de So Paulo) conectou-se com a Internet. A partir de abril de 1995, o Ministrio das Comunicaes e o Ministrio da Cincia e Tecnologia decidiram lanar um esforo comum de implantao de uma rede integrada entre instituies acadmicas e comerciais. Desde ento vrios fornecedores de acesso e servios privados comearam a operar no Brasil.
1.3 SERVIOS E UTILIDADES Desde que foi criada, a Internet no parou de se desenvolver, disponibilizando um grande nmero de servios aos seus usurios. Nesse curso veremos alguns desses servios: World Wide Web, transferncia de arquivos, correio eletrnico, grupos de notcias e listas de discusso. Dentre as muitas utilidades da Internet, podemos destacar:
1.3.1 Propagao do Conhecimento e Intercmbio de Informaes Atravs da Web, possvel encontrar informaes sobre praticamente qualquer assunto, a quantidade e variedade de opes impressionante. Pode-se ficar a par das ltimas notcias, fazer pesquisas escolares, buscar informaes especficas que auxiliem no trabalho (ex: um mdico pesquisando sobre um novo tratamento), etc. O usurio comum tambm pode ser um gerador de informaes, se voc conhece um determinado assunto, pode criar seu prprio site, compartilhando seus conhecimentos com os outros internautas. Podemos citar tambm os vrios projetos de educao a distncia que esto sendo desenvolvidos, inlusive na Unicamp (http://www.ead.unicamp.br/).
1.3.2 Meio de Comunicao O servio de correio eletrnico permite a troca de mensagens entre pessoas do mundo todo, com incrvel rapidez. As listas de discusso, grupos de notcias e as salas de bate-papo (chat) tambm so bastante utilizados.
Tecnologia Web
15
1.3.3 Servios Dentre os vrios servios disponibilizados, podemos citar o Home-banking (acesso a servios bancrios) e a entrega da declarao do imposto de renda via Internet (Receita Federal). Atualmente tambm possvel comprar ingressos para o cinema atravs da Internet (www.kinoplex.com.br).
1.3.4 Comrcio Existe um grande nmero de lojas virtuais, vendendo produtos pela rede. A Livraria Saraiva (http://www.livrariasaraiva.com.br/) uma delas. Recentemente a GM lanou o Celta e com ele a idia de vender automvel pela Internet (www.celta.com.br). O internauta tambm pode vender seus produtos em sites como Arremate.com (www.arremate.com.br).
1.3.5 Marketing Muitas empresas esto utilizando a Internet para divulgao de seus produtos. O Parque Dom Pedro Shopping (www.parquedpedro.com.br/), antes da inaugurao, e j tinha um site na Internet, onde as pessoas podiam acompanhar a evoluo da obra e conferir todos os detalhes do empreendimento. Os estdios de Hollywood tambm incorporaram a Internet como mdia de apoio para o lanamento de filmes. Atualmente, grande parte das produes j tem seu site oficial disponvel antes mesmo de estrear nos cinemas:
Guerra nas Estrelas Episdio II O Ataque dos Clones: http://www.starwars.com/episode-ii/
Matrix Reloaded http://whatisthematrix.warnerbros.com/
Jornada nas Estrelas Nmesis: http://www.startrek.com/production/startrekx/default.asp
Tecnologia Web
16
1.4 CONEXO Voc pode acessar a Internet de vrias maneiras, as mais comuns so:
1.4.1 Acesso Direto o que acontece, por exemplo, na Unicamp, o computador equipado com uma placa de rede fica o tempo todo conectado ao provedor de acesso, atravs da rede da universidade. Veja na ilustrao abaixo, o que ocorre quando se acessa a Internet de uma unidade da Unicamp:
O Velox da Telemar e o Virtua da Net tambm utilizam o acesso direto. 1.4.2 Acesso discado Esse tipo de conexo utilizada pela maior parte dos usurios residenciais. necessrio possuir uma linha telefnica e utilizar um equipamento chamado modem
Tecnologia Web
17
(atualmente os computadores j vem equipados com modem interno, mas tambm existem modelos externos). O modem transforma os sinais emitidos pelo computador (digitais) em sinais que podem ser transmitidos pela linha telefnica (analgicos) e vice versa. Neste caso, no ser possvel fazer e receber ligaes telefnicas, enquanto o computador estiver conectado a Internet. Veja na ilustrao abaixo, o que ocorre quando se acessa a Internet desta maneira:
1.4.3 Provedores de acesso O prximo passo para quem vai acessar a Internet de casa escolher um provedor de acesso. O CCUEC disponibiliza um servio de acesso residencial (http://www.ccuec.unicamp.br/servicos/acessoresidencial/). Este servio, no entanto, no est disponvel para toda a comunidade da Unicamp. Na hora de escolher o seu provedor, alguns fatores devem ser considerados: se ele possui nmeros locais de telefone (seno o custo da ligao ser alto), quantidade de linhas disponveis, velocidade de conexo e se ele possui algum diferencial em relao aos concorrentes (contedo exclusivo para assinantes). Os mais conhecidos so:
Alguns provedores j oferecem o kit de instalao, incluindo o programa para navegar e o programa de correio eletrnico.
Tecnologia Web
18
O assinante recebe um nome de registro, senha e um nmero de telefone para onde o seu computador vai discar. Se voc no tem Internet em casa e deseja contratar os servios de um provedor, utilize outro computador que esteja ligado a rede e acesse o site da empresa, ou ligue para a Central de Atendimento ao Cliente e informe-se. Atualmente, alguns provedores oferecem a opo de discador, um programa que voc instala no seu computador e que disca de forma automtica para o provedor. Este programa mantm a lista de cidades e os nmeros de conexo sempre atualizados, o que garante uma conexo mais rpida. Para instalar o discador, voc deve fazer um download do aplicativo a partir do site do provedor. Voc poder usar o discador, ou ento, configurar a conexo.
1.4.4 Configurar a conexo Para configurar a conexo manualmente, utilizando o Windows, siga os seguintes passos: 1) Na rea de trabalho do Windows, clique em Meu Computador/Acesso rede dial-up/Fazer nova conexo. 2) Abre-se uma nova janela. No campo Digite o nome do computador que voc est chamando: digite um nome que represente a conexo (por exemplo: "Internet Grtis - IG"). No campo Selecionar um modem: o prprio Windows tentar detectar o seu modem. Voc tambm tem a opo de escolher o tipo do modem em uma lista, disponibilizada pelo assistente. Clique em Avanar.
3) Na janela que se abre, digite o nmero do telefone do seu provedor. Clique em Avanar. 4) Uma nova janela o informar que a nova conexo foi criada com xito, s clicar em Concluir. 5) Ser criado um cone no Acesso rede dial-up, se quiser criar um atalho para esta conexo na area de trabalho, clique com o boto direito do mouse sobre o cone e selecione a opo Criar atalho. Sempre que voc clicar no cone de conexo, aparecer uma janela trazendo o nmero do telefone do provedor, e voc dever completar os campos Nome do usurio e Senha.
Tecnologia Web
19
Tambm possvel fazer a configurao utilizando o assistente do Internet Explorer, clique em Iniciar/Programas/Acessrios/Comunicaes/Assistente para conexo com a Internet. 1) Na janela que se abre, selecione a opo Desejo configurar uma conexo com a Internet manualmente, em seguida clique em Avanar. 2) A prxima janela oferece as opes de conectar Atravs de uma linha telefnica e um modem e Atravs de uma rede local (LAN). Selecione a opo que se aplica ao seu caso e clique em Avanar. 3) Digite o nmero do telefone do provedor e os demais dados que o assistente solicitar. No final desse procedimento, o assistente perguntar se voc deseja configurar tambm a conta de correio eletrnico. Podemos deixar este passo para depois, voc ver como fazer isto, mais adiante. Como j dissemos, voc paga sempre o preo de uma ligao local at o seu provedor de acesso, no entanto, depois de conectado, voc estar sujeito a cobrana de pulsos (ou impulsos) de uma ligao normal. Portanto, se voc quiser economizar, escolha os dias e horrios em que vigora a tarifa mais barata. A seguir, veremos em detalhes, alguns dos servios disponveis na Internet: World Wide Web (WWW ou simplesmente Web), transferncia de arquivos, correio eletrnico, grupos de notcias e listas de distribuio.
1.5 WORLD WIDE WEB A World Wide Web(teia mundial) ou WWW, a mais recente coqueluche da Internet. Lanada em 1992, a WWW est em crescimento explosivo. Tem registrado recordes de crescimento por volumes de dados transmitidos por ms e tem sido responsvel pelo aumento da capacidade de trfego em muitos canais de comunicao. A World Wide Web uma rede virtual (no-fsica) "sobre" a Internet, que torna os servios disponveis na Internet totalmente transparentes para o usurio e ainda possibilita a manipulao multimdia da informao. Assim qualquer usurio pode, somente usando o mouse, ter acesso a uma quantidade enorme de informaes na forma de imagens, textos, sons, grficos, vdeos etc., navegando atravs de palavras-chaves e cones. A World Wide Web revolucionou a Internet por reunir interface grfica, recursos de multimdia e hipertexto. A Web possibilitou a construo de pginas grficas,
Tecnologia Web
20
que podem conter fotos, animaes, trechos de vdeo e sons. Nas pginas, a informao est organizada de forma hipertextual, ou seja, as pginas esto ligadas entre si, atravs de links. O nico programa que voc precisa o navegador, o mesmo que voc est utilizando para visualizar essa pgina. formada por milhes de lugares chamados sites. Existem sites de universidades, empresas, rgos do governo e at sites mantidos por apenas uma pessoa. A porta de entrada de um site, chama-se Home Page, ou seja, pgina principal. Os sites so localizados atravs de seus endereos. Esse sistema de endereos tambm chamado de URL (Uniform Resource Locator, localizador uniforme de recursos). Com ele, possvel localizar qualquer informao na Internet. Vejamos o seguinte endereo: http://www.cetam.edu.br/treinamentos/naveg40/www.html. Cada parte do endereo tem um significado: http:// o mtodo pelo qual a informao deve ser buscada. No caso, http://, o mtodo utilizado para buscar pginas na Web. Voc tambm vai encontrar outras formas, como ftp:// (para entrar em servidores de FTP), mailto: (para enviar mensagens), news: (para acessar grupos de discusso), entre outros. Esse protocolo gerencia e formaliza as requisies e as resposta que trafegam entre o cliente e o servidor web. www.cetam.edu.br o nome do computador onde a informao est armazenada, tambm chamado de servidor ou site. Pelo nome do computador voc pode antecipar que tipo de informao ir encontrar. Os que comeam com www so servidores de Web e contm principalmente pginas de hipertexto. Quando o nome do servidor comea com ftp trata-se de um lugar onde permitido copiar arquivos. /treinamentos/naveg40 o diretrio onde est o arquivo. Exatamente como no seu computador, a informao na Internet est organizada em diretrios dentro dos servidores.
Tecnologia Web
21
www.html o nome do arquivo que ser transportado para o seu navegador. Voc deve prestar ateno se o nome do arquivo (e dos diretrios) esto escritos em maisculas ou minsculas. Na maior parte dos servidores Internet, essa diferena importante. No exemplo acima, se voc digitasse o nome do arquivo como WWW.HTML ou mesmo Www.Html, a pgina no seria encontrada. Outro detalhe a terminao do nome do arquivo .html. Ela indica o tipo do documento. No caso, html so pginas da Web. Voc tambm vai encontrar documentos hipertexto com a extenso htm. Outros tipos de arquivos disponveis na Internet so: txt (documentos comuns de textos); exe (programas); zip ou gz (compactados); au, aiff, ram, mp3 e wav (som) e ainda mov e avi (vdeo).
HTML Abreviao de Hypertext Markup Language, a linguagem padro para escrever pginas de documentos Web. Veremos na parte II com mais detalhes. 1.6 NAVEGADORES
Para que possamos explorar todos os recursos que a Web nos oferece, precisamos de um programa chamado navegador. O navegador pode mostrar texto, imagens e animaes, sendo que as novas verses j so capazes de reproduzir sons, msica e vdeo, graas aos Plugins, programas que se acoplam aos navegadores, extendendo suas capacidades multimdia. Atualmente, os navegadores mais utilizados so o Internet Explorer e o Netscape Navigator.
Tecnologia Web
22
Embora ainda no estejam muito difundidos entre os usurios da rede, existem outros navegadores capazes de cumprir funes semelhantes aos dos j citados. Para conhec-los melhor, voc pode acessar seus respectivos sites: Opera - http://www.opera.com/ NeoPlanet - http://www.neoplanet.com/site/products/browser.html NetCaptor - http://www.netcaptor.com/ Tambm existem navegadores especficos para crianas, que impedem o acesso s pginas no aconselhveis para o pblico menor de idade e ainda oferecem endereos de sites adequados aos baixinhos. Nessa categoria podemos citar o ChiBrow (www.chibrow.com). Na sequncia, veremos em detalhes, os navegadores Internet Explorer (verso 5.5 em portugus) e Netscape Navigator (verso 4.76 em ingls).
1.7 PROTOCOLO FTP TRANSFERNCIA DE ARQUIVOS O FTP um protocolo utilizado para transferncia de arquivos entre computadores. Atravs deste protocolo possvel receber um arquivo e grav-lo no seu computador (download) ou enviar um arquivo para outro computador (upload), desde que esse computador seja um servidor FTP.
Tecnologia Web
23
Antigamente, o programa de FTP no possua uma interface grfica, e a transferncia de arquivos era feita digitando-se uma srie de comandos. Hoje em dia, os navegadores incorporaram este programa, e o processo se d de forma transparente. Ao clicarmos num link que contm uma referncia para um arquivo, o navegador contacta o servidor de FTP, fazendo a transferncia do arquivo para o nosso computador. Portanto, o FTP o protocolo usado na Internet para transferncia de arquivos entre computadores. Basicamente os programas que implementam o FTP fazem transferncia de arquivos entre seu computador local e outro remoto. O FTP um dos recursos mais importantes disponveis na Internet, e tambm responsveis por um grande volume de trfego de dados. A princpio, o FTP feito para transferir arquivos de uma mquina remota, conectada a internet, na qual o usurio deve ter uma conta (login) e uma senha (password) para entrar nessa conta. A partir disso pode-se navegar entre os diretrios dessa conta e transferir os arquivos dela para seu computador local, ou vice-versa. Contudo, uma possibilidade muito interessante e o fato de muitos computadores permitem que voc os acesse remotamente (embora de forma restrita) mesmo sem ter uma conta ou senha - o chamado FTP annimo (anonymous FTP). Existem muitos gigabytes de informaes disponveis em FTP annimo nas mquinas da Internet ao redor do mundo. Nesses locais podem-se encontrar programas fontes, programas objetos, sistemas inteiros, documentos, ou seja, todo tipo de informao em arquivos de computador. Normalmente no FTP annimo o login e a palavra anonymous.
Servidores de FTP Podemos usar como exemplo o servidor de FTP da Unicamp, de onde podemos
copiar arquivos para o nosso computador. No endereo http://ftp.unicamp.br/ voc vai encontrar as ltimas verses dos navegadores, programas antivrus, dentre outros softwares. Os servidores de FTP so repositrios de arquivos e programas, e esto divididos em diretrios ou pastas. Exemplo:
Para pegar a verso 4.78 do Netscape Communicator, basta ir caminhado pelos diretrios, at chegar ao seu executvel. Para facilitar, o caminho http://ftp.unicamp.br/pub/netscape/communicator/english/4.78/windows/windows95_o r_nt/complete _install/.
Tecnologia Web
24
Voc chegar a seguinte tela:
Selecione o arquivo cc32d478.exe, escolha o diretrio onde ele ser gravado e clique em Salvar,o arquivo ser copiado para o seu computador. O passo seguinte executar o programa e instalar o Netscape Communicator seguindo as instrues do assistente de instalao.
1.8 PLUGINS Como j dissemos, Plugins so acessrios que extendem as capacidades do seu navegador. Depois de instalados eles funcionam como se fizessem parte do navegador. Os Plugins tambm podem ser instalados por demanda, ou seja, quando voc entrar numa pgina web que necessite de um componente especial, ele ser instalado automaticamente em seu computador. Antes porm, voc ser avisado da instalao, na janela que se abre voc pode aceitar, rejeitar ou obter mais informaes a respeito. Para que possamos aproveitar os recursos de multimdia que a Web nos oferece, como tocar msicas ou assistir a vdeos, temos que copiar certos aplicativos para o nosso micro. Esse processo de copiar arquivos para o nosso computador chamado de download.
Tecnologia Web
25
Existem aplicativos pagos, shareware (voc experimenta o software por um tempo sem pagar) e free (utiliza de graa). O windows j vem com um componente chamado Windows Media Player, que reproduz udio e vdeo (se precisar instal-lo visite o endereo :
http://windowsmedia.com/mg/home.asp). Existem vrios formatos de arquivos na rede, pode ser que voc no consiga reproduzir um determinado arquivo utilizando o Windows Media Player, nesse caso voc precisar de outro componente que seja compatvel com esse arquivo.
Exerccio: Download e instalao do Quicktime
1- Acesse o site http://www.apple.com/quicktime/ 2- Selecione a opo Download 3- Aparecer um formulrio que voc deve preencher com seu e-mail e nome. Selecione o sistema operacional e o idioma. Em seguida, clique no boto Download QuickTime. 4- Selecione o diretrio do seu micro onde ser copiado o arquivo. Aguarde o trmino do download. 5- Com a ajuda do Windows Explorer, selecione o arquivo copiado e siga as instrues do assistente de instalao.
Com o Quicktime, voc poder reproduzir vdeos que encontra em diversos sites na Internet, timo para exibir traillers de filmes que podem ser encontrados no prprio site da QuickTime.
Sites de download
Tucows - http://tucows.uol.com.br/ Download.com - http://download.cnet.com/ 1.9 TIPOS DE PROGRAMAS 1.9.1 Shareware distribudo livremente, voc pode copi-lo para o seu computador e test-lo, mas deve pagar uma certa quantia estipulada pelo autor do programa, se quiser ficar
Tecnologia Web
26
com ele. Normalmente custam menos que os programas comerciais, pois o dinheiro vai direto para o desenvolvedor.
1.9.1 Demos So verses demonstrativas que no possuem todas as funes contidas no programa completo.
1.9.2 Trials Tambm so verses para testes, mas seu uso restrito a um determinado perodo. Depois dessa data, deixam de funcionar.
1.9.3 Freeware So programas gratuitos, que podem ser utilizados livremente. O autor continua detendo os direitos sobre o programa, embora no receba nada por isso. 1.9.5 Addware O usurio usa o programa gratuitamente, mas fica recebendo propaganda.
1.10 CORREIO ELETRONICO O Correio Eletrnico um dos servios mais antigos e utilizados da Internet. Alm de enviar suas mensagens em segundos ao destinatrio (que pode estar no edifcio vizinho ou do outro lado do planeta), ele tambm permite o envio de arquivos de sons, imagens, vdeo e at programas. A vantagem que o destinatrio no precisa estar conectado Internet no momento em que a mensagem chega. O texto fica armazenado em uma espcie de caixa postal eletrnica at que o usurio entre de novo na rede. Depois de ler a mensagem, possvel respond-la imediatamente, imprimi-la ou enviar cpias para outras pessoas. Um fato interessante que, se por algum motivo a sua mensagem no for entregue ao destinatrio, ela retorna para a sua caixa postal, contendo, no cabealho, informaes sobre os motivos dela no ter sido entregue. Devido ao baixo custo, rapidez e facilidade de uso, o correio eletrnico j est ocupando o lugar de alguns meios de comunicao tradicionais como o fax, a carta
Tecnologia Web
27
e a ligao telefnica. Veja na figura abaixo, como ocorre o fluxo de informaes entre dois usurios:
Utilizando um gerenciador de correio eletrnico, que pode ser o Outlook Express ou Netscape Messenger, o remetente, conectado a Internet, envia uma mensagem ao destinatrio. A mensagem vai para o servidor de correio eletrnico do remetente, que a envia para o servidor do destinatrio. Utilizando um gerenciador de correio eletrnico, o destinatrio conectase ao seu servidor e pega a mensagem. Todos os usurios deste servio possuem um endereo eletrnico, tambm denominado email. Esta identificao nica, no podem existir dois endereos iguais. De um modo geral, o e-mail tem o seguinte formato: usuario@provedor.com.br usuario : Nome do usurio (geralmente escolhido pelo prprio). escrita sem espaos e sem acentos;
@ : smbolo chamado arroba, que em ingls quer dizer "at", ou seja, "em"; provedor : Nome da empresa ou instituio provedora de acesso a Internet. Pode ser um provedor comercial, uma empresa, uma universidade, um rgo do governo, etc. com : Tipo de organizao, 'com' se refere a uma organizao de carter comercial, a maior parte dos domnios .com. Outros tipos so: 'edu' (instituio educacional), 'mil' (organizao militar), 'gov' (organizao governamental), 'org' (em sua maioria, organizaes sem fins lucrativos), 'net' (empresas que provem servios para a Internet).
Tecnologia Web
28
br : O final .br indica apenas que o domnio foi registrado no Brasil ("br" a sigla que identifica o Brasil na Internet), e no a localizao fsica do servidor, como muitos pensam. Domnios registrados nos Estados Unidos no tem o final indicando o pas; isso s valido para os outros pases. So mais de duzentas siglas no total.
Conhea algumas delas: uk (Reino Unido), fr (Frana), jp (Japo), ca (Canad), ru (Rssia), de (Alemanha). Os endereos so usualmente escritos com letras minsculas, apesar de j surgirem endereos que contm maisculas, mas isso s causa transtornos na hora de divulgao, pois fogem totalmente do padro que existiu at hoje. Muitos provedores oferecem e-mail grtis. Para se cadastrar, entre no site do BOL (www.bol.com.br) ou IG (www.ig.com.br), e preencha seus dados.
Tecnologia Web
29
HTML HYPERTEXT MARKUP LANGUAGE HTML (HyperText Markup Language - Linguagem de Formatao de Hiper-
texto) fruto do "casamento" dos padres HyTime e SGML.
2.1 HTMLYTIME HYPERMEDIA/TIME-BASED DOCUMENT STRUCTURING
HyTime (ISO 10744:1992) - padro para representao estruturada de hipermdia e informao baseada em tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (udio, vdeo, etc.), conectados por webs ou hiperlinks. O padro HyTime independente dos padres de processamento de texto em geral. Ele fornece a base para a construo de sistemas hipertexto padronizados, consistindo de documentos que aplicam os padres de maneira particular.
2.2 SGML - STANDARD GENERALIZED MARKUP LANGUAGE Padro ISO 8879 de formatao de textos: no foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiperobjetos e para descrever as ligaes. SGML no padro aplicado de maneira padronizada: todos os produtos SGML tm seu prprio sistema para traduzir as etiquetas (tags) para um particular formatador de texto.
2.3 DTD - DOCUMENT TYPE DEFINITION Define as regras de formatao para uma dada classe de documentos. Um DTD ou uma referncia para um DTD deve estar contido em qualquer documento conforme o padro SGML. Portanto, HTML definido segundo um DTD de SGML. Todo documento HTML apresenta elementos entre parnteses angulares (< e >). Esses elementos so as etiquetas (tags) de HTML, que so os comandos de formatao da linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada com uma barra ( / ): <etiqueta>...</etiqueta>
Tecnologia Web
30
Isso necessrio porque as etiquetas servem para definir a formatao de uma poro de texto, e assim marcamos onde comea e onde termina o texto com a formatao especificada por ela. Alguns elementos so chamados vazios, pois no marcam uma regio de texto, apenas inserem alguma coisa no documento, no havendo a necessidade do fechamento: <etiqueta> Todos os elementos podem ter atributos: <etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>
HTML um recurso muito simples e acessvel para a produo de documentos. Nesta apostila, ser possvel aprender grande parte de seus elementos. Dica: No existem programas em HTML, pois HTML no uma linguagem de programao, mas de formatao (marcao). Portanto, a rigor no existem "programadores" de HTML. 2.4 EDIO DE DOCUMENTOS HTML Existem Editores HTML chamados WYSIWYG (what you see is what you get o que voc v o que voc tem). Eles oferecem ambiente de edio com um resultado final das marcaes (pois o resultado final depende do browser1 usado para visitar a pgina). Alguns bastante conhecidos so por exemplo: FrontPage e Dreamweaver.
Tecnologia Web
31
Alm dos editores especficos para HTML, Editores de Textos bastante utilizados, como o Word, entre outros, permitem a exportao de seus documentos prprios para o formato HTML (menu Arquivo, Salvar como, Salvar_como Tipo). Um documento HTML, normalmente ter extenso .html ou .htm.
2.5 PUBLICAO DE DOCUMENTOS NA INTERNET (SITES)
Para que uma pgina esteja permanentemente disponvel pela Web, ela precisa ter um endereo fixo, alojada em um servidor. Existem vrios provedores de espao (hosting) gratuitos e tambm os provedores de acesso geralmente oferecem espao para os sites de seus assinantes. Sites com fins lucrativos geralmente so hospedados em provedores de espao pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP2 ou por uma pgina de envio no prprio provedor de espao) e suas pginas j estaro disponveis para visitas no mundo todo.
2.6 DOCUMENTO HMTL BSICO E SEUS COMPONENTES <HTML> <HEAD> <TITLE> Titulo do Documento </TITLE> </HEAD> <BODY> texto, imagem, links, etc... </BODY> </HTML> As etiquetas (tags) HTML no so sensveis caixa, ou seja, tanto faz escrever HTML>, <Html>, <html>, <HtMl>, etc. No tem diferena entre maisculas e Minsculas. Os documentos se dividem em duas sees principais, que veremos a seguir.
Tecnologia Web
32
2.6.1 Seo <HEAD> <HEAD> contm informaes sobre o documento. O elemento <TITLE>, por exemplo, define um ttulo, que mostrado no alto da janela do browser. Exemplo:
<HEAD> <TITLE> Pgina do Fulano de Tal </TITLE> </HEAD>
Todo documento WWW deve ter um ttulo. Esse ttulo referenciado em buscas pela rede, dando uma identidade ao documento. Ao adicionar uma pgina aos seus Favoritos (Bookmarks), o ttulo da pgina se torna a ncora de atalho para ela. Por isso sugerido que os ttulos dos documentos sejam sugestivos, evitando-se ttulos genricos como "Introduo", por exemplo. O ttulo tambm bastante significativo para a listagem de uma pgina nos resultados de pesquisas nos sites de busca da Internet.
Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html
2.6.2 Seo < BODY > Tudo que estiver contido em <BODY> ser mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos. Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo (marca dgua): <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> Onde: BGCOLOR: Background Color, ou seja, cor de fundo da pgina. Quando no indicada a cor de fundo, o browser ir mostrar uma cor padro, geralmente cinza ou branco. TEXT: Cor dos textos da pgina (padro: preto). LINK: Cor dos links (padro: azul). ALINK: Cor dos links quando acionados, clicados (padro: vermelho).
Tecnologia Web
33
VLINK: Cor dos links depois de visitados (padro: azul escuro ou roxo). Seus valores so dados em hexadecimal, equivalentes a cores no padro RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface bem amigvel atravs da qual escolhemos as cores desejadas, sem nos preocuparmos com nmeros esdrxulos tais como #FF80A0. Browsers que seguem a definio de HTML 3.2 em diante, tambm aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porm, browsers mais antigos no apresentaro as cores indicadas. BACKGROUND: Indica o URL3 da imagem a ser replicada no fundo da pgina, como uma marca dgua. Para efeitos de design, possvel fixar a imagem de fundo, para que ela no se mova junto com o texto ao se rolar a pgina. Esse efeito no padro e funciona no Internet Explorer. Dica: O nome das cores - os 16 nomes de cores aceitos desde a verso 3.2 da HTML so estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. URL: O sistema de endereamento da Web baseado em uma sintaxe chamada URI (Universal Resource Identifier - Identificador Universal de Recursos). Os endereos que utilizamos atualmente so os URLs, que seguem essa sintaxe. URL significa Uniform Resource Locator - Localizador Uniforme de Recursos. Um exemplo de URL : http://www.faccat.br Esse endereo identifica: o protocolo de acesso ao recurso desejado (http) e a mquina a ser acessada (www.faccat.br).
2.6.3 Cores e Tamanhos Cores - As cores so introduzidas atravs do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos), como mostrado no exemplo a seguir:
<FONT COLOR="red"> Texto </FONT>
Produzir na pgina: a palavra Texto escrita na cor vermelha.
Tecnologia Web
34
Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita atravs dos atributos de <BODY>.
Tamanho - Veja a formatao a seguir:
<FONT SIZE=3> Texto </FONT>
Produzir na pgina: a palavra Texto como o tamanho 3. Este comando permite que o autor do documento altere o tamanho das letras em trechos especficos de texto. O tamanho bsico dos textos 3 (padro). Podemos indicar tamanhos relativos a esse, por exemplo:
<FONT SIZE=+2> Letra maior </FONT> Letra normal
<FONT SIZE=-2> Letra menor </FONT>
Letra maior Letra normal Letra menor

Uma evoluo que permite a escolha da fonte para os textos, o atributo FACE:
<FONT FACE="Arial"> Texto </FONT>
Produzir: a palavra Texto com a fonte (tipo de letra) Arial.
Mais exemplos:
<FONT FACE="Verdana" COLOR="blue"> Fonte Verdana Azul </FONT> Fonte Verdana Azul
Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html
<FONT FACE="Arial" COLOR="green"> Fonte Arial Verde </FONT> Fonte Arial verde
Tecnologia Web
35
<FONT FACE="Courier New" COLOR="red"> Fonte Courier New Vermelha </FONT> Fonte Courier New Vermelha
2.6.4 Cabealhos H seis nveis de cabealhos em HTML, de <H1> a <H6>:
<H1> Este um cabealho de nvel 1 </H1> <H2> Este um cabealho de nvel 2 </H2> <H3> Este um cabealho de nvel 3 </H3> <H4> Este um cabealho de nvel 4 </H4> <H5> Este um cabealho de nvel 5 </H5> <H6> Este um cabealho de nvel 6 </H6> Esses cabealhos so mostrados no browser da seguinte forma:
Este um cabealho de nvel 1

Aninhamento de cabealhos
Os cabealhos no podem ser aninhados, isto , a formatao:
<H2>Este <H1>um cabealho de nvel 1 </H1> dentro de um cabealho de nvel 2 </H2> pode produzir algum resultado prximo ao desejado:
Tecnologia Web
36
Este
um cabealho de nvel 1
dentro de um cabealho de nvel 2
Mas o mais comum que os browsers "entendam" essa formatao como sendo:
<H2>Este </H2> <H1>um cabealho de nvel 1</H1> dentro de um cabealho de nvel 2 </H2>
Ou seja, como se estivesse faltando uma etiqueta de fechamento de <H2> antes de <H1> e faltando uma abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte resultado:
Este
um cabealho de nvel 1
dentro de um cabealho de nvel 2
Os editores WYSIWYG naturalmente no permitem o aninhamento de cabealhos.
Alinhamento de cabealhos - os cabealhos tm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabealho centralizado</H2> Cabealho centralizado
<H3 ALIGN=RIGHT>Cabealho alinhado direita</H3> Cabealho alinhado direita
<H4 ALIGN=LEFT>Cabealho alinhado esquerda (default=padro)</H4> Cabealho alinhado esquerda (default=padro)
Tecnologia Web
37
2.6.5 Separadores As quebras de linha do texto fonte no so significativas na apresentao de documentos em HTML. Para organizar os textos, precisamos de separadores, apresentados a seguir.
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <BR>. Isso s necessrio quando queremos uma quebra de linha em determinado ponto, pois os browsers j quebram as linhas automaticamente para apresentar os textos. Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que ser apresentado no item sobre insero de imagens.
Pargrafos
Para separar blocos de texto, usamos o elemento <P>, por exemplo: Pargrafo 1; <P> Pargrafo 2. que produz o seguinte:
Pargrafo1; Pargrafo2.
Combinando pargrafos e quebras de linha, temos por exemplo:
Pargrafo 1;<br> linha 1 do pargrafo 1, <br>linha 2 do pargrafo 1.<P>Pargrafo 2;<br> linha 1 do pargrafo 2, <br>linha 2 do pargrafo 2. O resultado da marcao acima : Pargrafo 1; linha 1 do pargrafo 1, linha 2 do pargrafo 1. Pargrafo 2; linha 1 do pargrafo 2,
Tecnologia Web
38
linha 2 do pargrafo 2.
<P> tem atributo de alinhamento, semelhante aos cabealhos, como nos exemplos a seguir: <P ALIGN=CENTER> Assim como os trens, as boas idias s vezes chegam com atraso. <BR> (Giovani Guareschi) </P>
Assim como os trens, as boas idias s vezes chegam com atraso. (Giovani Guareschi) <P ALIGN=RIGHT>Como diz o provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante para sempre.</P> Como diz o provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante para sempre. <P ALIGN=LEFT>Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.</P> Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial. 2.6.6 Linha Horizontal <HR> insere uma linha horizontal, como a apresentada abaixo:
Essa linha tem diversos atributos, oferecendo resultados diversos. <HR SIZE=7> insere uma linha de largura 7 (pixels):
<HR WIDTH=50%> insere uma linha que ocupa 50% do espao horizontal disponvel:
Tecnologia Web
39
<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional:
<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de <HR>):
Dica: Divises - outros elementos usados para separar pores de texto so o <DIV> e o <CENTER>. <CENTER> centraliza os elementos (textos, imagens, tabelas) que estiverem dentro de sua marcao. <DIV> marca uma diviso lgica de um documento e uma formatao bastante usada atualmente. 2.6.7 Lista em Html H vrios tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers: 2.6.7.1 Listas de Definio Estas listas so chamadas tambm Listas de Glossrio, uma vez que tm o seguinte formato: <DL> <DT> termo a ser definido <DD> definio <DT> termo a ser definido <DD> definio </DL> Que produz: termo a ser definido definio termo a ser definido definio
Tecnologia Web
40
Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas, por permitir a tabulao do texto. Um exemplo a lista composta abaixo: <DL> <DT> Imperadores do Brasil: <DD> D. Pedro I <DL> <DD> Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana e Bourbon </DL> <DD> D. Pedro II <DL> <DD> Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga </DL> </DL> Imperadores do Brasil: D. Pedro I Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana e Bourbon D. Pedro II Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga 2.6.7.2 Listas no-numeradas So equivalentes s listas com marcadores do MS-Word, por exemplo: <UL> <LI> item de uma lista <LI> item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI> item </UL>
Tecnologia Web
41
item de uma lista item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto item
A diferena entre o resultado da marcao HTML e do Word est na mudana dos marcadores, assinalando os diversos nveis de listas compostas: <UL> <LI> Documentos bsicos <LI> Documentos avanados <UL> <LI> formulrios <UL> <LI> CGI </UL> <LI> contadores <LI> relgios </UL> <LI> Detalhes sobre imagens </UL>
Documentos bsicos Documentos avanados o formulrios CGI o contadores o relgios Detalhes sobre imagens
2.6.7.3 Listas numeradas <OL> <LI> item de uma lista numerada <LI> item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se
Tecnologia Web
42
preocupar com a formatao das margens de texto <LI> item de lista numerada </OL>
1. item de uma lista numerada 2. item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto 3. item de lista numerada Estas listas no apresentam numerao em formato 1.1, 1.2, etc., quando compostas apresentam-se da seguinte forma: 1. Documentos bsicos 2. Documentos avanados 1. formulrios 1. CGI 2. contadores 3. relgios 2. Detalhes sobre imagens
Porm, atravs do atributo TYPE (HTML 3.2), pode-se lidar com a numerao dos itens: <OL TYPE=I> <LI> Documentos bsicos <LI> Documentos avanados <OL TYPE=a> <LI > formulrios <OL TYPE=i> <LI>CGI </OL> <LI> contadores <LI> relgios </OL> <LI> Detalhes sobre imagens </OL>
Tecnologia Web
43
I. Documentos bsicos II. Documentos avanados a. formulrios i. CGI b. contadores c. relgios III. Detalhes sobre imagens
Ainda segundo HTML 3.2, o atributo START pode indicar o incio da numerao da lista:
<OL START=4 TYPE=A> <LI> um item <LI> outro item <LI> mais um item </OL> D. um item E. outro item F. mais um item
2.6.7.4 Listas e Sub-Listas As listas podem ser aninhadas. Por exemplo: <DL> <DT> termo a ser definido <DD> definio <OL> <LI> item de uma lista numerada <LI> item de uma lista numerada <UL> <LI> item de uma lista </UL> <LI> item de uma lista numerada </OL> <DT> termo a ser definido
Tecnologia Web
44
<DD> definio </DL> termo a ser definido definio 1. item de uma lista numerada 2. item de uma lista numerada o item de uma lista 3. item de uma lista numerada termo a ser definido definio Dica: Se voc no est vendo diferena alguma entre as listas comuns e as que tm atributos TYPE, isso se deve ao fato de seu browser no estar reconhecendo esses atributos como vlidos. Trata-se de um browser de verso antiga. Isso deve ser pensado quando usamos atributos mais recentes: nem todo usurio poder ver o resultado das novas marcaes.
2.6.8 Formatao de Textos e Caracteres 2.6.8.1 Blocos de texto HTML oferece as seguintes formataes de blocos de texto: <PRE> Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulaes: <pre> uma linha aqui, outra ali, etc. </pre> Resulta em: uma linha aqui, outra ali, etc.
Tecnologia Web
45
Uma vez que <PRE> mantm o texto original, no se deve forar espaos com essa marcao dentro de outra marcao que j apresente tabulaes e espaos especficos.
2.6.8.2 <Blockquote> usado para citaes longas:
<blockquote> A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que a Terra siga uma trajetria reta no espao-tempo quadridimensional, parece-nos que se desloca em rbita circular no espao tridimensional. </blockquote> (Stephen W. Hawking, Uma Breve Histria do Tempo)
A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que a Terra siga uma trajetria reta no espao-tempo quadridimensional, parece-nos que se desloca em rbita circular no espao tridimensional. (Stephen W. Hawking, Uma Breve Histria do Tempo) 2.6.8.3 <Address> Usado para formatar endereos de E-Mail e referncias a autores de documentos, como por exemplo:
Envie crticas e sugestes para <address> fulano@xxx.com.br </address>
Envie crticas e sugestes para fulano@xxx.com.br
2.6.9 Formatao de Frases
<B> Quando disponvel no browser, mostrado em negrito (em alguns browsers, pode aparecer sublinhado). <I> Itlico
Tecnologia Web
46
<U> Sublinhado. Deve ser usado com cuidado, pois confunde-se com a apresentao de links. <STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo ndice, como em H2O, por exemplo. <SUP> Frase em estilo expoente, como em Km2, por exemplo. 2.6.10 Caracteres Especiais HTML permite que caracteres especiais sejam representados por seqncias de
escape, indicadas por trs partes: um & inicial, um nmero ou cadeia de caracteres correspondente ao caractere desejado, e um ; final.
Trs caracteres ASCII - <, >, e & tm significados especiais em HTML e so usados
dentro de documentos seguindo a correspondncia:
Outras seqncias de escape suportam caracteres ISO Latin1. Aqui est uma tabela
com os caracteres mais utilizados em Portugus:
Tecnologia Web
47
Como vemos, as seqncias de escape so sensveis caixa. Os editores de HTML fazem essa traduo automaticamente. Alguns editores, no entanto, mantm a acentuao, sem usar as entidades de formatao. Quando isso acontece, deve-se inserir uma indicao do esquema de codificao ISO Latin1, escrevendo:
<HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> </HEAD> ... Existem alguns smbolos que vm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, ©, que o smbolo , ® para , e § para . Tambm pode-se usar seqncias com cdigos ASCII, por exemplo:
¿ Qu pasa, seor? Qu pasa, seor? Dica: Por que usar essas formataes? Por causa de um problema tcnico relativo transmisso dos caracteres especiais de vrias lnguas. Chama-se conjunto de caracteres uma representao digital de texto. O conjunto de representao
Tecnologia Web
48
amplamente utilizado o ASCII. O ASCII padro tem 7 bits, porm so usadas verses particulares desse padro - o ASCII americano, ASCII portugus, etc., que utilizam 8 bits. Se geramos um texto em ASCII de 8 bits e, na transmisso, esse texto tratado por um sistema que compreende apenas o ASCII de 7 bits, os caracteres especiais sero transformados em caracteres diferentes, pela perda do oitavo bit. Os usurios da Internet j devem ter sofrido experincia semelhante com mensagens de email, que chegam com caracteres estranhos, ou pginas da Web com textos em japons ou russo. 2.6.11 Blink A formatao <BLINK> Frase </BLINK> foi uma das primeiras inovaes introduzidas pelo Netscape. O perigo de se usar o BLINK que, se sua pgina j apresenta cores, desenhos, cabealhos, todos efeitos que chamam a ateno do leitor, o BLINK ser um fator ainda mais chamativo, o que causa um efeito final cansativo e confuso. Evite usar o BLINK. possvel substituir esse recurso por outros efeitos de JavaScript. Felizmente, so poucos os browsers que mostram o efeito dessa formatao. O Internet Explorer um dos browsers que no consideram o BLINK. Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande quantidade, muito menos em frases inteiras ou cabealhos.
2.6.12 Marquee possvel obter o efeito de animao de texto, atravs da formatao <MARQUEE>. <MARQUEE BEHAVIOR=efeito> Texto </MARQUEE> Atributos de largura e direo do efeito permitem diversas apresentaes diferentes, por exemplo: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT> Texto </MARQUEE>
Tecnologia Web
49
Ateno: O efeito Marquee s executado no Internet Explorer e em verses recentes do Netscape e de maneiras diferentes.
2.6.13 Ligaes (uso de Links) Com HTML possvel fazermos ligaes de uma regio de texto (ou imagem) a um outro documento (ou a outra parte do prprio documento). Voc j deve ter visto em alguma pgina da internet exemplos dessas ligaes: o browser destaca essas regies e imagens do texto, indicando que so ligaes de hipertexto - tambm chamadas hypertext links ou hiperlinks ou simplesmente links, onde normalmente, o mouse vira uma mozinha e ao clicar chamamos (abrimos) um outro documento, pgina web ou figura por exemplo. Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: <A HREF = "arquivo_destino"> ncora </A> Onde: arquivo_destino: o endereo do documento de destino, da pgina ou imagem a qual queremos abrir. ncora: o texto ou imagem que servir de ligao hipertexto do documento sendo apresentado para o documento de destino. <A> tem vrios atributos que so utilizados de acordo com a ao associada ao link. Os mais usados so apresentados a seguir: HREF: Indica o arquivo de destino da ligao de hipertexto. TARGET: Indica o frame em que ser carregado o arquivo_destino. Maiores detalhes na seo sobre frames. NAME: Marca um indicador, isto , uma regio de um documento como destino de uma ligao. Maiores detalhes na seo sobre indicadores.
2.6.14 Caminhos (uso de Links) Os links podem estar indicados como caminhos relativos ou absolutos.
Tecnologia Web
50
2.6.14.1 Caminho Relativo O caminho relativo pode ser usado sempre que queremos fazer referncia a um documento armazenado no mesmo servidor do documento atual. Atravs do campo de endereos do browser, possvel identificar se um documento (pgina) que est sendo visualizado est dentro de algum diretrio (pasta). Como, por exemplo, se estivermos em um browser acessando a pgina da FACCAT e vemos o seguinte endereo: http://www.faccat.br/apostilas/apostila_de_informatica.html. O que podemos concluir que o documento que est sendo visualizado no momento, chamado apostila_de_informatica.html, est localizado dentro de um diretrio (pasta) chamado apostilas do servidor www.faccat.br. Ento para escrevermos, por exemplo, um link deste documento (apostila_de_informatica.html) para um documento chamado doc.html que est localizado no diretrio /apostilas/documentos/ do mesmo servidor www.faccat.br, tudo que precisamos fazer escrever: <A HREF="documentos/doc.html"> Exemplo de Caminho Relativo </A> Para usar links com caminhos relativos preciso, portanto, conhecer a estrutura do diretrio do servidor no qual estamos trabalhando, pois devemos indicar todo o caminho onde est o documento no qual estamos nos referindo no link. Quando h alguma dvida, o melhor usar o caminho absoluto.
2.6.14.2 Caminho Absoluto Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo: <A HREF="http://www.faccat.br"> FACCAT - Faculdades de Taquara </A> Que oferece um link FACCAT - Faculdades de Taquara que ao ser clicado com o mouse abrir a pgina cujo endereo http://www.faccat.br. Com a mesma sintaxe, possvel escrever links para qualquer servidor de informaes da Internet.
Tecnologia Web
51
2.6.15 Indicadores (Uso de Links) Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligao hipertexto. A formatao: <A NAME="inicio"> Indicadores (uso de links) </A> faz com que a ncora Indicadores (uso de links) seja o destino de um link. Se escrevermos: <A HREF="#inicio"> Topo do Documento </A> teremos uma ligao hipertexto para um trecho deste mesmo documento:
2.6.16 Insero de Imagens O elemento IMG insere imagens que so apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma: <IMG SRC="URL_imagem"> Onde URL_imagem o URL do arquivo que contm a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, no conveniente). Assim, escrevendo:
<IMG SRC = "nome_da_figura.extenso">
ou, se ela estiver dentro de uma pasta no mesmo servidor:
<IMG SRC = "nome_da_pasta/nome_da_figura.extenso">
Por exemplo, se quisermos inserir na pgina uma imagem chamada arvore.gif localizada no mesmo servidor e na mesma pasta, a tag seria assim:
<IMG SRC = "arvore.gif">
As imagens usadas na Web, normalmente so armazenadas em arquivos com as seguintes extenses: .gif, .jpg (ou .jpeg), .png, .bmp.
Tecnologia Web
52
2.6.17 Atributos Bsicos de Imagem 2.6.17.1 ALT Indica um texto alternativo, descrevendo brevemente a imagem, que apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers grficos. recomendvel que esteja sempre presente. Tambm aparecer ao passar o mouse sobre a imagem.
<IMG SRC="URL_imagem" ALT="descrio_da_imagem">
Dessa forma: <IMG SRC="newred.gif" ALT="Novo!!!"> apresentado nos browsers grficos assim:
e, nos browsers texto, assim: [Novo!!!]. E ao passar o mouse sobre a figura tambm aparecer a descrio Novo!!!
2.6.17.2 Width e Height Atributos de dimenso da imagem, em pixels4. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a insero de uma imagem. <IMG SRC="URL_imagem" ALT="descrio" WIDTH="largura" HEIGHT="altura"> Uma das vantagens de se usar esses atributos que o browser pode montar mais rapidamente as pginas, por saber de antemo o espao que dever ser reservado a elas.
2.6.17.3 Border Quando uma frase marcada como ncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de ncora, ganha uma borda que indica sua condio de link.
Tecnologia Web
53
Porm, por questes de apresentao, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.
Se quisermos uma borda mais larga: <A HREF="URL"> <IMG SRC="imagem" ALT="descrio" BORDER=4> </A>
Se quisermos uma imagem sem borda: <A HREF="URL"> <IMG SRC="imagem" ALT="descrio" BORDER=0> </A>
Essa borda pode ser apresentada tambm em imagens que no so ncora de links. Basta aplicar, por exemplo, a formatao:
<IMG SRC="figura1.gif" ALT="Minha Foto" BORDER=2>
Dica: O pixel, ou ponto, a menor unidade que compe uma imagem digital, ele contm os atributos de cor de cada ponto, a maior ou menor quantidade de pixels em uma rea que determinam a resoluo da imagem, bem como seu maior ou menor tamanho em bytes. So pontos por centmetro quadrado. Quanto maior o nmero de pixels maior a qualidade da imagem e maior ser o tamanho do arquivo tambm. Assim, possvel dar mais destaque a uma imagem, sem ser necessrio edit-la:
2.6.17.4 Align
<IMG SRC="imagem.extenso" ALT="descrio" ALIGN=alinhamento_desejado>
Tecnologia Web
54
Existem tambm atributos de alinhamento, que produzem os seguintes resultados: ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado no seja muito bom. ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado no seja muito bom. ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default). ALIGN=RIGHT Alinha imagem direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. ALIGN=LEFT Alinha imagem esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. Para ter duas imagens, uma em cada margem, numa mesma linha, escreva: <IMG ALIGN=LEFT SRC="imagem.extenso" ALT="descrio"> <IMG
ALIGN=RIGHT SRC="imagem.extenso" ALT="descrio"> ...e pode-se escrever vontade entre as imagens! Isto resulta em:
Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento, ou seja:
Tecnologia Web
55
Suponhamos um texto mais ou menos curto, que desejamos colocar com uma imagem ilustrativa, mas gostaramos que este trecho j estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, no seria possvel usar o alinhamento TOP. Para conseguir isso, seria necessrio incluir diversos <BR> consecutivos, inserindo linhas em branco; mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, ento, o atributo CLEAR para <BR>. Com esse atributo, podemos, por exemplo ter um texto posicionado no ponto em que a margem direita fica livre, com <BR CLEAR=RIGHT> ou no ponto em que a margem esquerda fica livre, com <BR CLEAR=LEFT> Dessa maneira, podemos controlar bem a posio relativa dos textos. Tambm pode-se posicionar o texto no ponto em que ambas as margens esto livres. Isso conseguido com <BR CLEAR=ALL> E, assim, vimos tudo sobre quebras de linha depois de imagens!
2.6.17.5 Molduras de Imagem Para melhorar ainda mais a apresentao das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espao - vertical e horizontal - deixado entre as imagens e os textos circundantes: <IMG SRC="imagem.extenso" VSPACE=espao_vertical> <IMG SRC=" imagem.extenso " HSPACE=espao_horizontal> Outros exemplos: <IMG SRC="foto.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30"> <IMG SRC="foto.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30"> Abaixo, temos um exemplo com os dois atributos, atravs da formatao: <IMG SRC="foto.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20" VSPACE="20">
Tecnologia Web
56
2.6.18 Tabelas A formatao de tabelas foi adotada bem antes de sua incluso na definio de HTML. A manipulao de tabelas, mesmo em editores, trabalhosa. A maior diferena entre tabelas em HTML e em editores como o MS-Word, entretanto, o fato das tabelas em HTML serem definidas apenas em termos de linhas e no de colunas. Mas isso ser percebido no decorrer deste captulo. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas possvel, por exemplo, termos pginas organizadas em colunas, sendo uma delas reservada aos links de navegao dentro de cada seo. Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustraes de maneira harmoniosa. Como j foi possvel perceber, as tabelas contm textos, listas, pargrafos, imagens, formulrios e vrias outras formataes - inclusive outras tabelas. Novas verses de HTML e de browsers populares vm acrescentando diversos atributos s tabelas, e nosso objetivo aqui saber lidar com a maioria desses recursos disponveis. Elementos bsicos de tabelas <TABLE>...</TABLE> delimita uma tabela. Um atributo bsico BORDER, que indica a apresentao da borda. <TABLE BORDER="borda"> ... </TABLE>
Ttulos, linhas e elementos
<CAPTION>...</CAPTION> define o ttulo da tabela
<TR>...</TR> delimita uma linha
<TH>...</TH> define um cabealho para colunas ou linhas (dentro de <TR>)
Tecnologia Web
57
<TD>...</TD> delimita um elemento ou clula (dentro de <TR>)
Uma tabela simples: <TABLE BORDER=4> <CAPTION> Primeiro exemplo </CAPTION> <TR> <TH> Coluna 1 </TH> <TH> Coluna 2 </TH> </TR> <TR> <TD> linha1, coluna 1 </TD> <TD> linha 1, coluna 2 </TD> </TR> <TR> <TD> linha 2, coluna 1 </TD > <TD> linha 2, coluna 2 </TD> </TR> </TABLE>
Ttulos compreendendo mais de uma coluna ou linha
possvel englobar colunas e linhas, atravs dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):
<TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>tres linhas</TD></TR> </TABLE>
Tecnologia Web
58
Neste exemplo, vemos que o cabealho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabealho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
Tabelas sem borda
As pginas deste tutorial foram construdas com tabelas sem borda. Para tanto, foi empregada a seguinte declarao: <TABLE BORDER="0"> ... </TABLE>
Dica: Pior que os acentos... A formatao de tabelas complicada, e o texto fonte chega a ser quase ininteligvel quando montamos tabelas complexas e fazemos uso de seus diversos atributos. A melhor opo, sem dvida, usar os editores WYSIWYG. Alguns editores de modo texto tm uma interface grfica que ajuda na criao de tabelas, mas a edio de tabelas j existentes precisa ser feita mo. 2.6.18.1 Extenses de Tabelas Diversas extenses de tabelas possibilitam a apresentao de efeitos muito bons nas pginas.
Cor de fundo
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9">
Tecnologia Web
59
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10> <TR><TD BGCOLOR="#E1FFD9">janeiro</TD><TD>fevereiro</TD> <TD BGCOLOR="#E1FFD9">maro</TD></TR> <TR><TD>abril</TD><TD BGCOLOR="#E1FFD9">maio</TD><TD>junho</TD></TR> </TABLE>
Cor de borda
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00">
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING=10 BORDERCOLOR="#00FF00"> <TR> <TD bgcolor="#E1FFD9">janeiro</TD><TD>fevereiro</TD> <TD bgcolor="#E1FFD9">maro</TD> </TR> <TR>
Tecnologia Web
60
<TD>abril</TD><TD bgcolor="#E1FFD9">maio</TD><TD>junho</TD> </TR> </TABLE>
2.6.19 Frames Os frames so divises da tela do browser em diversas telas (ou quadros). Com isso, torna-se possvel apresentar mais de uma pgina por vez: por exemplo, um ndice principal em uma parte pequena da tela, e os textos relacionados ao ndice em outra parte (menus). muito fcil colocar frames em pginas, porm, nem todos os usurios gostam deles, pois nem sempre a navegao fcil, alm de problemas para a impresso e a marcao dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames so as tabelas. Uma pgina com frames tem um texto fonte semelhante a: <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="indice1.html"> <FRAME SRC="apresenta.html" NAME="principal"> <NOFRAME> <BODY> <H2>Bem-vindo pgina do assunto X!</h2> <P> Bl bl bl bl bl bl bl bl bl bl </BODY> </NOFRAME> </FRAMESET> </HTML>
Tecnologia Web
61
A parte FRAMESET define a diviso da pgina em quadros. Neste exemplo, a pgina ser dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela. Dentro da formatao de FRAMESET, temos os FRAME SRC, que so referncias s pginas que sero mostradas nos frames definidos. Assim, no cdigo acima vemos que a pgina indice1.html ser mostrada na primeira coluna (que ocupar 20% da tela), e a pgina apresenta.html ser mostrada na segunda (ocupando 80% da tela). A formatao de frames inclui tambm uma parte NOFRAME, que mostrada normalmente pelos browsers que no suportam sua apresentao.
2.6.20 udio e Vdeo O uso de udio e vdeo na Internet vem ganhando muito destaque nos ltimos anos, e bom saber como usar bem estas mdias. udio e vdeo so classificados como "mdias contnuas", pois so geradas segundo determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distores. Quanto mais informaes de uma seqncia de udio ou vdeo digital so armazenados, melhor a qualidade do udio ou vdeo reproduzido. Isso implica, logicamente, no fato de arquivos de udio e vdeo serem geralmente muito grandes, o que torna invivel o uso mais freqente dessas mdias em pginas Web. Alm de procurarmos lidar sempre com pequenos trechos de udio e vdeo, podemos explorar tecnologias recentes que permitem a transmisso em tempo real.
udio
H duas maneiras de inserir som em uma pgina: <EMBED SRC="arquivo_de_som.extenso"> insere o arquivo de som como objeto. <BGSOUND SRC=" arquivo_de_som.extenso "> faz com que o som seja inserido como som de fundo ou 'trilha sonora' de uma pgina. Esta formatao s funciona no Internet Explorer. Essas formataes, porm, no faro efeito algum quando o browser no estiver configurado para "executar" o arquivo de som por meio de um plug-in adequa-
Tecnologia Web
62
do, ou se o computador em que estiver carregada a pgina no tiver instalada uma placa de som.
Tipos de arquivo de udio
Os tipos de arquivo de udio so escolhidos segundo o tipo de udio (voz, sons, msica), a aplicao desse udio e a qualidade de reproduo desejada. Aqui sero apresentados apenas os tipos mais comuns: AU (Sun Audio), usando pelas estaes de trabalho da Sun Microsystems. AIFF, usado geralmente em mquinas Macintosh e Silicon Graphics. RIFF (Resource Interchange File Format): pode conter muitos tipos diferentes de dados, incluindo udio digital (WAV) e MIDI. Geralmente, os "arquivos MIDI" do Microsoft Windows esto, na realidade, em formato RIFF e no MIDI. WAV (Wave) um subconjunto da especificao RIFF. AVI (Audio Video Interleave), formato Microsoft. MPEG (Motion Pictures Expert Group): o padro MPEG-3 (conhecido por MP3) o padro de compresso de udio mais popular atualmente. MIDI (Musical Instrument Digital Interface) no exatamente um formato de udio, mas de representao de msica. Um arquivo MIDI armazena informaes sobre cada nota e instrumento e, a partir dessas informaes, um sintetizador reproduz os sons. Por isso, uma msica instrumental em MIDI geralmente produzir um arquivo muito menor do que a mesma msica em Wave ou qualquer outro formato.
Vdeo
A insero de vdeo depende bastante do tipo de arquivo de vdeo que temos para inserir em uma pgina. De maneira geral, esta formatao pode servir para a insero de um arquivo QuickTime:
<EMBED SRC="arquivo_de_video.extenso">
Tecnologia Web
63
Uma formatao mais completa inclui a indicao do plug-in e controles da reproduo do vdeo.
Tecnologia Web
64
INTRODUO AO JAVAESCRIPT BSICO Javascript linguagem de script para construo de pginas da Web
utilizando recursos dinmicos. Podemos criar efeitos especiais, controlar os dados digitados em um formulrio e criar algumas animaes. A construo de uma pgina usando Java, deve ser desenvolvida junto com HTML. 3.1 CONFIGURAES Antes de iniciar o curso, preciso verificar se o seu navegador est configurado para executar os scripts em Javascript. Com a internet aberta, clique no menu ferramentas Clique na opo: opes da internet
Na guia avanado alterar o item Java VM, ticando toda as 3 opes, como mostra a figura abaixo:
3.2 USANDO O JAVASCRIPT O cdigo em Javascript poder ser inserido em qualquer ponto de sua pgina, desde que dentro das tags <html>..</html> e iniciando-se com a tag <script language = Javascript> e terminando com a tag </script>.
Tecnologia Web
65
Exemplos: <script guage="Javascript"> lan- tag para indicar o incio da codificao JAVA Script
........ cdigo scripts
</script> </head> <body>
tag para indicar o fim da codificao JAVA Script
Corpo da pgina
Codificao normal do HTML
</body> </html>
<html><head><title>Programando em Javascript - aula 1</title> </head> <body> <script language="Javascript">
........ cdigo scripts tags
cdigo em JAVA entre as
<body> .... </body> </script> </body> </html>
Dica: Como o HTML, uma pgina usando JAVA SCRIPT, deve ser digitada em um editor de texto, pode ser o BLOCO DE NOTAS e salvar com a extenso HTML ou HTM.
Tecnologia Web
66
3.3 COMANDOS: script language - alert - /script 1. <script language="Javascript"> Comando para informar o navegador qual a linguagem de scripts que dever ser interpretada. 2. alert(" ..... escreva sua mensagem aqui ...."); Esta funo exibi uma caixa de dilogo com a mensagem que est entre aspas no final da instruo usase ponto-e-vrgula (;) para indicar ao navegador o final de instruo. Tambm pode ser escrito usando o comando window antes de alert. Ex: window.alert("..... escreva sua mensagem aqui ...."); 3. </script> Comando para finalizar o bloco de instrues em Javascript. Exerccio 1 Criar uma pgina usando o comando alert para desejar um Bom Dia. Resultado <html> <head><title>exerccio n 1 </title></head> <script language="Javascript"> alert("Bom dia? Tudo Bem?"); </script>
3.4 VARIVEIS As variveis permitem guardar dados na memria da mquina durante a execuo de programas, pginas ou scripts. Sempre que forem usadas elas estaro prontas para entrarem em ao e receber ou enviar dados conforme a solicitao do usurio. Regras para criar uma varivel: 1. Um nome de varivel deve sempre comear por uma letra
Tecnologia Web
67
2. No utilize smbolos especiais tais como:(! @ # $ % ^ & * : ; " ', . / ? + = ~`) 3. Procure escrever os nomes das variveis sempre em minsculo uma vez que Javascript sensvel a letras maisculas e minsculas 4. Procure dar nomes as variveis que lembrem o seu contedo Para declarar uma varivel em Javascript, voc poder utilizar ou no a denominao var (sempre em letras minsculas), no preciso especificar o tipo de varivel. Se criar uma varivel e atribuir um contedo texto e na linha seguinte atribuir um contedo numrico, o prprio navegador interpreta a instruo e converte normalmente sem nenhum problema. Exemplo-1 var nome="ETE Silvio de Mattos Carvalho"; nome="ETE Silvio de Mattos Carvalho";
As duas declaraes so iguais
3.5 WINDOW.PROMPT - ALERT COM VARIVEL 1. varivel=window.prompt("mensagens para entrada de dados", "ttulo"); Comando para entrada de dados, usando uma varivel que deve ser previamente declarada. Pode ser escrito omitindo-se a palavra window. Ex: varivel=prompt("mensagens para entrada de dados", " "); 2. alert("Mensagem "+nome da varivel+" continuao da mensagem"); Comando para mostrar uma pesagem utllizando uma varivel. A varivel pode vir em qualquer parte da mensagem, sempre entre aspas e com os sinais de + no incio e fim. Exerccio. Escreva um cdigo em Javascript para permitir a entrada de um nome em uma varivel e depois exibi-lo em uma caixa de dilogo.
<html> <head><title>exerccio usando varivel</title></head> <script language="Javascript"> var nome=window.prompt("Digite seu nome.","Nome"); alert("Ol "+nome+" Seja Bem Vindo !!!"); </script> <body> Primeiro exerccio em JAVA SCRIPT </body> </html>
Tecnologia Web
68
Resultado:
3.6 COMANDOS DOCUMENT Este comando permite escrever qualquer informao na pgina que pode ser um texto ou o contedo de uma varivel de memria. Ex: document.write("Programando em Javascript"); document.write("Ol "+nome+" Seja Bem Vindo !!!"); Este comando altera a cor de fundo da pgina. Ex: document.bgColor="pink";
Tecnologia Web
69
Este comando altera a cor da letra na pgina. Ex: document.fgColor="blue;
Define um ttulo para a pgina. Ex: document.title="Curso de Informtica";
Exibe a data da ltima atualizao da pgina. Ex: document.write(document.lastModified); 3.7 COMANDOS WINDOW Comando para abrir uma pgina em uma nova janela, alm de controlar sua posio, tamanho e os controles que devero aparecer na nova janela. Ex:
window.open("URL","nome_da_janela","Parmetros"); URL : o endereo da pgina a ser aberta nome_da_janela : um nome dado a nova janela a ser aberta que mais tarde poder ser referenciada em cdigo, usando o atributo target. Parmetros: para colocar os controles de janela que devero ser exibidos. So eles: a) status (barra de status): possui dois valores yes(habilita a exibio) e no(desabilita a exibio) b) location (barra de endereo) : possui dois valores yes(habilita a exibio) e no(desabilita a exibio) c) toolbar (barra de ferramentas) : possui dois valores yes(habilita a exibio) e no(desabilita a exibio) d) menubar (barra de menus) : possui dois valores yes(habilita a exibio) e no(desabilita a exibio) e) scrollsbars (barra de rolagem) : possui dois valores yes(habilita a exibio) e no(desabilita a exibio) f) left e screenX : definem a posio em pixels da janela a ser aberta a partir do lado esquerdo da janela do navegador. O left utilizado no Internet Explorer e o screenX no Netscape.
Tecnologia Web
70
g) top e screenY: definem a posio em pixels da janela a ser aberta a partir do aldo de cima da janela do navegador. O top utilizado no Internet Explorer e o screenY no Netscape. h) height (altura) : Controla a altura da nova janela. Este valor dever ser informado em pixels. i) width (largura) : Controla a largura da nova janela. Este valor dever ser informado em pixels. Redireciona o internauta para outra url (pgina). Ex: window.location.ref="exec1.html"; Atualizar a pgina atual no navegador. como se voc pressionasse a tecla F5 ou clicar no menu exibir e selecionar atualizar. Ex: window.location.reload(); Fecha a pgina atual que est aberta no navegador e ao fechar ser exibida uma caixa de dilogo do Internet Explorer pedindo para confirmar o fechamento da pgina. Window.Close() Exibe qualquer mensagem na barra de status do navegador. Ex: window.status="Programao em Javascript";
Exerccio: Fazer vrias pginas usando todos os comandos. Procure agrupar vrios comandos em uma nica pgina.
3.8 EVENTOS Eventos so acontecimentos que ocorrem durante a navegao em uma pgina da web. Em Javascript existem basicamente dois tipos de eventos: Eventos de Sistemas e Eventos de Mouse 1) Eventos de Sistemas: So os que entram em ao automaticamente sem a interveno do internauta. Temos: onLoad (ao carregar) e onUnload (ao descarregar) que so escritos na tag <body> . Ex: <html><head><title>Eventos em Java Script </title></head>
Tecnologia Web
71
<body onload="alert('a pgina est sendo carregada .... Seja Bem Vindo!!!')" onUnload = "alert('At mais volte sempre.....')"> </body> </html>
2) Eventos de Mouse: So aqueles que acionam aes mediante o uso do mouse, abaixo uma relao dos eventos de mouse:

onClick : Ocorre quando o boto do mouse for clicado onDblclick: Ocorre quando o boto do mouse sofrer um clique duplo onmouseMove: Ocorre quando o ponteiro do mouse passar sobre o objeto onmouseOver: Ocorre quando o ponteiro do mouse ficar acima do objeto onmouseOut: Ocorre quando voc retirar o ponteiro do mouse do objeto onSubmit: Ocorre quando o internauta clica no boto enviar com objetos de formulrios
onFocus: Ocorre quando um objeto ganhar o foco com o click do mouse ou o uso da tecla TAB
onChange : Ocorre quando o contedo de uma caixa de texto for alterado
3.9 OBJETOS DE FORMULRIOS Os objetos de formulrio permitem a construo de pginas com botes de comando, botes de rdio, caixa de texto, caixa de seleo, para construo de um formulrio para enviar dados a um destinatrio. Para construir um formulrio todas as tags devero ser escritas entre as tag <form> ....... </form>.
1) Boto de comando: <html> <head><title>boto</title></head>
Tecnologia Web
72
<form> <input type="button" name="bt1" value="Clique no boto" onclick="alert('Voc clicou no boto')">
</form> </html> boto do tipo alto relevo
input type="button" name="bt1"
nome do boto, pode ser qualquer um, desde que no seja repetido. rtulo do boto
value="Clique no boto" onclick
evento, ao clicar no boto o comando alert ser executado
2) Boto de radio: <html> <head><title>boto</title></head> <form> <input type="radio" name="opt1" onclick="alert('Voc clicou no boto')">Clique na opo </form>
input type="radio"
boto do tipo boto de opo
Observe que a frase Clique na opo foi colocada fora da tag input 3) Caixa de verificao: <html> <head><title>boto</title></head> <form> <input type="checkbox" name="chk1" onclick="alert('Voc clicou no bo-
to')">Clique na opo </form>
Tecnologia Web
73 boto do tipo caixa de checagem
input type="checkbox" 4) Caixa de Texto: <html>
<head><title>boto</title></head> <form> <input type="text" name="texto1" size="35" maxlength="35" value="Curso de Javascript" onChange="alert('Voc alterou o contedo')"> </form> </html>
input type="text"
caixa de texto
size = 35
tamanho da caixa de texto em caracteres
maxlenght = 35 caixa de texto.
quantidade mxima de caracteres que podem ser escritos na
OnChange=......
evento quanto modificar o contedo da caixa de texto.
Exemplo: Vamos criar um script que permita ao internauta escolher atravs de um clique no boto uma cor de fundo para sua pgina. <html> <head><title>boto</title></head> <form> <body>
Tecnologia Web
74
<align="center"><br><h3> Clique em um dos botes para alterar a cor de sua pgina</h3>
<input type="button" name="btazul" value="Azul" onclick="document.bgColor=('blue')">&nbsp&nbsp
<input type="button" name="btvermelho" value="vermelho" onclick="document.bgColor=('red')">&nbsp&nbsp
<input type="button" name="btverde" value="verde" onclick="document.bgColor=('green')">&nbsp&nbsp
<input type="button" name="btamarelo" value="amarelo" onclick="document.bgColor=('yellow')">&nbsp&nbsp
<input type="button" name="btamareloouro" value="amarelo ouro" onclick="document.bgColor=('gold')">&nbsp&nbsp
<input type="button" name="btazulclaro" value="Azul claro" onclick="document.bgColor=('cyan')">&nbsp&nbsp
<input type="button" name="btverde claro" value="verde claro" onclick="document.bgColor=('lime')">&nbsp&nbsp
</form> </script> </body> </html>
Resultado:
Tecnologia Web
75
&nbsp Exerccio:
Este comando serve para colocar um espao entre os botes.
1 Crie um script igual ao exemplo, usando no lugar do button o radio 2 Crie um script para mudar a cor da pgina e mudar a cor da letra use o button e o radio.
3.10
OPERADORES DO JAVASCRIPT
Os operadores permitem realizar clculos, comparaes e atribuir valores as variveis de memria, durante o acesso a pgina.
1) Operadores Aritmticos : Servem para realizar clculos matemticos. Operador + * / % ++ -Descrio Adio Subtrao Multiplicao Diviso Mdulo(Resto diviso inteira) Incremento Decremento da Exemplo 1+5 20-15 5*3 12/6 12%6 x=5 x++ x=5 x-Resultado 6 5 15 2 0 x=6 x=4
2) Operadores de atribuio: Servem para guardar informaes nas variveis de memria. Operador += -= *= /= Exemplo x+=y x-=y x*=y x/=y Significado x=x+y x=x-y x=x*y x=x/y
Tecnologia Web
76 x%=y x=x%y
%=
3) Operadores de comparao: Servem para comparar contedos de variveis de memria. Operador == != > >= < <= Significado igual a diferente de maior que maior ou igual a menor que menor ou igual a Exemplo 15= =15 verdadeiro 15!=15 falso 15>13 verdadeiro 15>=13 verdadeiro 10<20 verdadeiro 13<=35 verdadeiro
4) Operadores lgicos: Servem para criar um expresso com mais de dois valores para serem comparados. Operador && || ! Significado E OU NO Exemplo x=10 e y=5 (x=10)&& (y<10) verdadeiro (x=10)||(y=10) verdadeiro x!=y verdadeiro
3.11
COMANDOS DE BLOCO
COMANDO: IF E IF ..ELSE A instruo if uma das mais importantes em JavaScript , atravs dela que podemos utilizar o conjunto dos operadores de comparao e determinar um novo curso para seu programa.
1) Estrutura simples if (condio){ Bloco de comandos; }
Tecnologia Web
77
Exemplo: Considere a=10 e b=20 if ( a<=b){ alert("O valor da varivel a menor que b"); }
2) Estrutura composta if (condio){ Bloco de comandos verdade; } else{ Bloco de comandos falso; }
Exemplo : Considere a=30 e b=20 if ( a>=b){ alert("O valor da varivel a menor que b"); } else{ alert("O valor da varivel b menor que a"); }
COMANDO CASE um comando de seleo onde durante a execuo do script ele visa encontrar a igualdade. Sintaxe: switch (varivel){ case 'valor 1': { bloco de comandos; break;} case 'valor2: {bloco de comandos; break;}
Tecnologia Web
78
default:{ comando alternativo;} }
Exemplo <html> <head><title>Uso co comando switch em Javascrit</title> </head> <script language="Javascript"> var mes=window.prompt("Digite um valor entre 1-12",""); switch(mes){ case'1':{alert('Este nmero digitado corresponde ao ms de JANEIRO'); break;} case'2':{alert('Este nmero digitado corresponde ao ms de FEVEREIRO'); break} case'3':{alert('Este nmero digitado corresponde ao ms de MARO'); break;} case'4':{alert('Este nmero digitado corresponde ao ms de ABRIL'); break;} case'5':{alert('Este nmero digitado corresponde ao ms de MAIO'); break;} case'6':{alert('Este nmero digitado corresponde ao ms de JUNHO'); break;} case'7':{alert('Este nmero digitado corresponde ao ms de JULHO'); break;} case'8':{alert('Este nmero digitado corresponde ao ms de AGOSTO'); break;} case'9':{alert('Este nmero digitado corresponde ao ms de SETEMBRO'); break;} case'10':{alert('Este nmero digitado corresponde ao ms de OUTUBRO'); break;} case'11':{alert('Este nmero digitado corresponde ao ms de NOVEMBRO'); break;} case'12':{alert('Este nmero digitado corresponde ao ms de DEZEMBRO'); break;} default:
Tecnologia Web
79
case'1':{alert('Este nmero digitado no corresponde a nenhum ms');} } </script> </html>
ESTRUTURA FOR Supondo que devemos imprimir dez vezes o nome ETE Silvio de Mattos Carvalho. Os cdigos em Java so: <html><head><title>Lao de repetio for</title></head> <script language="Javascript">
for(i=1;i<11;i++){ document.write(i+" ETE Silvio de Mattos Carvalho"+"<br>");}
</script> </html> A estrutura for composta de trs partes: (inicializao da varivel ; teste condicional e incremento da varivel) assim no exemplo acima a varivel i iniciada
com o valor 1. Logo em seguida o teste i<11, isto quer dizer que o lao se repetir at que o valor da varivel i atingir 11. Por fim o incremento a varivel i i++ ( igual a i=i+1).
Resultado
Tecnologia Web
80
ESTRUTURA WHILE A estrutura while faz a mesma coisa que a estrutura for, porm a varivel de controle do lao deve ser iniciada antes da instruo while. Veja a colocao no cdigo abaixo: <script language="Javascript"> var i=1; while(i<11){ document.write(i+" ETE Silvio de Mattos Carvalho"+"<br>"); i++;} </script> </html> <html><head><title>Lao de repetio fo</title></head>
ESTRUTURA DO..WHILE A estrutura do.. while faz a mesma coisa que as outras duas anteriores, porm alm da varivel de controle do lao ser iniciada antes da instruo do..while, a repetio executada pelo menos uma vez antes da verificao do teste condicional.Veja a colocao no cdigo abaixo:
<html><head><title>Lao de repetio fo</title></head>
<script language="Javascript"> var i=1; do{ document.write(i+" ETE Silvio de Mattos Carvalho"+"<br>"); i++;} while(i<11); </script>
<html>
Tecnologia Web
81
EXERCCIOS
Desenvolver uma pgina que contenha cdigo em Javascript que exiba os nmeros de 1 a 15 sucessivamente. Salve com o nome de conta.htm e depois abra no seu navegador.
Agora altere o cdigo e faa a impresso na tela em ordem decrescente , ou seja, de 15 a 1. Salve este arquivo com o nome de contadesc.htm
3.12
FUNES Uma funo uma rotina com vrios comandos desenvolvidos pelo progra-
mador que fica disposta de uma forma lgica para chegar a um resultado desejado.
FUNO SIMPLES O exemplo abaixo mostra uma funo para digitar um nome e mostra-lo 10 vezes, a funo executada no evento onclick. <html><head><title>Funes de Usurio em JavaScript</title></head> <script language="Javascript">
function entra(){ var i; var nome=window.prompt("Digite um Nome", ""); for (i=1;i<11;i++){ document.write(nome,"<br>");} }
</script> <body> <center><input type="button" name="bt1" value="Clique" onclick="entra()"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="button" name="bt2" value="Fechar" onclick="window.close()"> </center> </body> </html>
Tecnologia Web
82
DETALHES DO CDIGO
onclick="entra()" faz a chamada da funo no instante que o ponteiro do mouse for posicionado sobre o boto e efetuar o click. A funo comea com a palavra FUNCTION e termina com } ela abre uma caixa de dilogo e aguarda a digitao de um nome. Depois a informao armazenada na varivel nome. Logo em seguida um lao de repetio iniciado, imprimindo na pgina dez vezes o nome digitado atravs do comando document.write( ). Dentro deste comando existe a varivel nome e depois o cdigo em HTML que realiza a quebra de linha <br> Aps a execuo do exemplo, clique no boto voltar do navegador e depois no boto fechar da pgina que exibida e confirme seu fechamento.
FUNO COM PARMETRO Quando trabalhamos com parmetros, significa chamar a funo e enviar um valor que possa ser recebido na funo solicitada. Em alguns casos precisamos de uma informao para depois completar a execuo de uma funo. Veja o exemplo abaixo:
<html><head><title>Funes de Usurio em JavaScript com parmentros</title> <script language="Javascript">
function entra(recebe){ var i; for (i=1;i<11;i++){ document.write(recebe,"<br>");} }
</script> </head> <body> <center><input type="button" name="bt1" value="Clique" onclick="entra('Curso de Javascript')"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="button" name="bt2" value="Fechar" onclick="window.close()">
Tecnologia Web
83
</center> </body> </html>
DETALHES DO CDIGO
onclick="entra('Curso de Javascript')" refere-se a chamada da funo entra, porm com o parmentro 'Curso de Javascript' que ser enviado para a funo chamada. Na funo chamada function entra(recebe) , existe uma varivel de nome recebe que guarda o valor passado como parmetro. Logo em seguida um lao de repetio iniciado, imprimindo na pgina dez vezes o contedo da varivel recebe atravs do comando document.write( ). Dentro deste comando existe a varivel recebe e depois o cdigo em HTML que realiza a quebra de linha <br>. Aps a execuo do exemplo, clique no boto voltar do navegador e depois no boto fechar da pgina que exibida e confirme seu fechamento.
3.13
CLCULOS EM JAVASCRIPT Em Javascript possvel realizar clculos, basta para isto entender que ne-
cessrio o uso de uma funo que converta um alfanumrico em um nmero inteiro, assim o clculo ser efetuado. 1) Alfanumrico: Imagine uma operao para somar dois nmeros. "10"+"10"= 1010 Observe as aspas, isto quer dizer que os nmeros so alfanumricos e portanto foram concatenados (unidos) um ao outro. Veja o cdigo abaixo: <html><head><title>Cculo entre dois afanumricos</title>
</head> <script language="Javascript"> var n1='10'; var n2='10'; total=n1+n2; alert("O Resultado da operao com alfanumrico -> "+ total); </script> </html>
Tecnologia Web
84
Resultado do script:
2) Numrico: Agora para realizar uma operao preciso utilizar uma varivel que guarde este valor entre duas variveis total=10+10 o resultado da varivel 20. Veja o cdigo abaixo: <html><head><title>Cculo entre dois afanumricos</title> </head> <script language="Javascript"> var n1=10; var n2=10; total=n1+n2; alert("O Resultado da operao com alfanumrico -> "+ total); </script> </html> Resultado do script.
Tecnologia Web
85
Vamos supor que desejamos digitar os dados em duas caixas de textos distintas e depois clicar em um boto que faa o clculo. Ser necessrio o uso de uma funo matemtica que converta os alfanumricos em inteiro. Faremos um script para criar a pgina mostrada abaixo:
LISTAGEM DO CDIGO COMPLETO <htm><head><title>Clculos entre objeto de Texto</title> </head> <script language="Javascript"> function operacao(){ var a=eval(document.formcalc.t1.value); var b=eval(document.formcalc.t2.value); var c=a+b; alert("O Resultado da operao -> "+c); } </script> <body> <form name="formcalc"> <h3><center>Clculo em JavaScript</h3> Digite o primeiro nmero:<input type="text" name="t1" size="4" maxlenght="4">
Tecnologia Web
86
<br><br> Digite o segundo nmero:<input type="text" name="t2" size="4" maxlenght="4"> <br><br><hr><br><br> <input type="button" name="bt1" value="Calcular" onclick="operacao()"> &nbsp&nbsp <input type="reset" name="bt2" value="Cancelar" onclick="document.formcalc.t1.focus()"> &nbsp&nbsp <input type="button" name="bt3" value="Fechar" onclick="window.close()"></center> </form></body></html>
DETALHES DO CDIGO
1) Cdigo em Javascript <script language="Javascript"> function operacao(){ var a=eval(document.formcalc.t1.value); var b=eval(document.formcalc.t2.value); var c=a+b; alert("O Resultado da operao -> "+c); } </script> Definio da funo com o nome de operacao e logo em seguida as duas linhas para capturar os valores digitados nas caixas de textos converte-los atravs da funo eval( ) .. Em seguida realizado o clculo para adio guardando o resultado na varivel c e exibido na caixa de sada com o comando alert( )
2) Chamada da funo calculo( ) em Javascript onclick="operacao()"
Esta instruo simples, pois foi usado o evento de mouse e feita a meno ao nome de uma funo j citada no cdigo em Javascript.Observe o detalhe das letras minscula, pois como j sabe se colocar acentos ou digitar qualquer letra em maisculo a funo no ser localizada.
Tecnologia Web
87
3) Limpando o dados digitados
<input type="reset" name="bt2" value="Cancelar" onclick="document.formcalc.t1.focus()"> Esta linha o reset representa recomeo e mais adiante a instruo localiza o formulrio(formcalc) e depois a primeira caixa de texto chamada aqui de (t1). Por ltimo o comando (focus( )) se encarrega de fazer o cursor ficar piscando nesta caixa caso o internauta queira digitar outro nmero.
4) Fechando a Janela
<input type="button" name="bt3" value="Fechar" onclick="window.close()"> A instruo (onclick="window.close()") executa o fechamento da janela aps o clique do mouse.
Tecnologia Web
88
CASCADING STYLE SHEETS - CSS
Todo documento escrito utiliza certos elementos de design para formatar sees de texto a fim de manter a mesma aparncia, seguir um padro. Por exemplo, um elemento de design Heading 1 geralmente alguma fonte grande que identifica todas as principais divises de tpicos de um captulo, artigo ou pgina da web. Um elemento de design Heading 2 identifica todos os ttulos dos subtpicos. A HTML inclui uma tag para praticamente todos os elementos de design comumente utilizados, incluindo tags de ttulo (<H1>,<H2>...), lista (a tag <OL> para lista ordenada, a tag <UL> para lista no ordenada) e assim por diante. No passado , a tag <H1> em quase todos os web sites parecia a mesma texto preto era consideravelmente maior que o corpo do texto normal. Se voc quisesse fazer seus prprios ttulos diferenciados, tinha de formatar cada tag de ttulo individualmente, utilizando tags <FONT> ou similares. Se mais tarde mudasse de idias sobre a aparncia desses ttulos, tinha de voltar e mudar cada ttulo individualmente. Ou seja: um processo lento e trabalhoso. As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, voc pode fazer uma "declarao global", como "quero que todos os meus ttulos <H1> sejam verdes". Voc precisa dizer isso somente uma vez e cada ttulo <H1> em seu site ser verde. Se depois decidir que azul uma cor melhor, no preciso voltar e alterar cada tag <H1> para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus ttulos <H1> sejam azuis" e pronto! Obviamente voc no est limitado a ttulos e nem a cor azul. possvel definir um estilo personalizado para cada elemento de design em seu web site, incluindo ttulos, lista, tabelas e imagens, para citar s alguns. E, alm de definir uma cor, voc pode definir a fonte, o tamanho, o alinhamento, a espessura da borda, e assim por diante.
4.1 COMO CRIAR ESTILOS Cada estilo que voc cria definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: elemento {atributo1: valor; atributo2: valor ...}
Tecnologia Web
89
Explicao desta sintaxe: Elemento - descreve o elemento de design ao qual o estilo ser aplicado. A mesma tag HTML mas sem os sinais de maior e menor. Essa parte da regra s vezes chamadas de seletor. Atributo - o aspecto especfico do elemento que voc quer usar como estilo. Deve ser um nome de atributo CSS vlido, como o atributo font-size. Valor - a configurao aplicada ao atributo. Deve ser uma configurao vlida para o atributo em questo , como 20pt (20 pontos) para font-size. Atributo:valor - a parte declarao da regra. Voc pode atribuir mltiplas declaraes se desejar separ-los com ponto-e-vrgula (;). No coloque um ponto-evrgula depois da ltima declarao. Agora hora de exemplos. Eis uma regra CSS que especifica que todos os ttulos de nvel 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos: H1 {font-size: 36pt} Aqui est um exemplo de regra que diz que todos os ttulos de nvel 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul; H2 {font-size: 24pt; color: blue} Voc pode inserir quebras de linha e espaos em branco dentro da regra como quiser. Assim, possvel ver mais facilmente todas as declaraes e certificarse de que colocou todos os sinais de ponto-e-vrgula e colchetes nos lugares corretos. Por exemplo, aqui est uma regra que diz que os pargrafos aparecero em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da pgina: P {font-family: Times; font-size: 12pt; color: blue; margin-left: 0.5in} Note como fcil aplicar todas as declaraes ao elemento pargrafo (P) e como cada declarao, exceto a ltima, seguida pelo caracter de ponto-e-vrgula exigido.
Tecnologia Web
90
4.2 AS FOLHAS DE ESTILO Voc pode definir regras de CSS em trs lugares. E, por definio, pode utilizar uma combinao dos trs mtodos nos seus web sites. A maneira como as regras interagem entre si est relacionada parte "em cascata".Os trs lugares so: 1) em um documento separado fora de todos os documentos HTML, 2) no cabealho de um documento HTML e 3) dentro de uma tag de HTML. Cada um destes mtodos tem um nome e afeta as pginas HTML em seu site de um modo diferente, como discutido aqui: Externo - Externo significa que voc coloca as regras de CSS em um arquivo separado, e ento sua pgina HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma pgina do seu web site. Incorporado - Incorporado significa que voc especifica as regras de CSS no cabealho do documento. As regras incorporadas afetam somente a pgina atual. Inline - Inline significa que voc especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.
4.2.1 Estilos Externos Para definir um conjunto de regras de estilo que voc pode facilmente aplicar em alguma pgina do seu site, preciso colocar as regras em um arquivo de texto. Voc pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extenso .css. Sempre que quiser utilizar esses estilos em uma nova pgina, basta colocar uma tag <LINK> no cabealho que referencie esse arquivo .css. Veja o exemplo: Arquivo meu_estilo.css H1 {font-family: 'Comic Sans MS'; font-size: 36pt; color: blue} P {font-family: 'Courier';
Tecnologia Web
91 margin-left: 0.5in}
Agora, para utilizar os estilos definidos neste arquivo .css voc precisa adicionar a tag a seguir ao cabealho da pgina, onde nome_do_arquivo uma referncia absoluta ou relativa ao arquivo .css. <LINK REL="STYLESHEET" HREF="http://www.iecentral.net/meu_estilo.css" TYPE="text/css"> OBS: Voc deve inserir este texto entre as tags <HEAD>...</HEAD> e colocar a localizao correta do seu arquivo e seu nome.
4.2.2 Estilos Incorporados
Se quiser criar um conjunto de estilos que se aplicam a uma nica pgina, voc pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque estas tags na prpria pgina HTML. A estrutura bsica de uma pgina da web que utiliza estilos incorporados semelhante ao seguinte cdigo: <HTML> <HEAD> <TITLE>Exemplo Estilos Incorporados</TITLE> <STYLE TYPE="text/css"><!-P {background-color: #FFFFFF; font-family:'Comic Sans MS'; font-size: 14pt} --></STYLE> </HEAD></BODY></HTML>
4.2.3 Estilos Inline Os estilos inline so os que tm menos efeitos. Eles afetam somente a tag atual - no outras tags na pgina e tampouco outros documentos. A sintaxe para definir um estilo inline a seguinte: <TAG STYLE="regras css">
Tecnologia Web
92
Exemplo: <A STYLE="color: green; text-decoration: none" HREF="http://www.iecentral.net"> Note que em vez das tags <STYLE>...</STYLE>, voc apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, voc as coloca entre aspas, separando-as com ponto-e-vrgula como de costume.
4.3 TAGS PERSONALIZADAS Com as classes de estilo, possvel definir diversas variaes de uma nica tag. Por exemplo, voc poderia fazer um estilo de pargrafo "texto alinhado direita", um estilo de pargrafo "texto centralizado" e assim por diante, criando mltiplos temas em torno da tag de pargrafo. (<P>) Voc pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (No h sentido em definir uma classe em um estilo inline!) A sintaxe praticamente idntica sintaxe normal para os estilos externo e incorporado, com adio de um ponto e o nome da classe depois do elemento na qual ser utilizado o atributo. <STYLE TYPE="text/css"><!-elemento.nomedaClasse {atrbuto:valor; ... } --></STYLE> Para dar um exemplo mais prtico, uma classe de estilo que eu particularmente uso muito nos links de minhas pginas a seguinte: <STYLE TYPE="text/css"><!-A.meuslinks {color: blue; text-decoration: none} --></STYLE> Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu desejar que fiquem azuis e no-sublinhados. Veja como deve ficar: <A CLASS="meuslinks" HREF="http://www.iecentral.net"> Utilizando a tag <DIV> As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de texto - uma diviso - abrangendo diversos pargrafos e outros elementos.
Tecnologia Web
93
Isso as torna uma boa opo para definir estilos que afetam grandes sees de um texto em uma pgina. Veja: <STYLE TYPE="text/css"><!-DIV.sidebar {font=family: "Arial"; font-size: 12pt; text-align: right; background-color: #C0C0C0; margin-left: 1in; margin-right: 1in} --></STYLE> Ao colocar na tag <DIV> o atributo CLASS, voc estar fazendo com que todos os elementos que estejam englobados nesta tag sigam estes padres.
Utilizando a tag <SPAN> As tags <SPAN>...</SPAN> so como tags <DIV>...</DIV> no sentido de que voc pode utiliz-las para definir estilos que formatam um bloco de texto. Ao contrrio de <DIV>, contudo, que utilizada para divises de texto grandes, a tag <SPAN> especializada para blocos de textos menores - que podem ser to pequenos como um nico caracter. Veja um bom exemplo do que se pode fazer utilizando esta tag. <STYLE TYPE="text/css"><!-SPAN.hot {color:green; text-decoration: underline} --></STYLE> Utilizada no cdigo HTML... <BODY> Para sair de um programa: <OL> <LI>Selecione <SPAN CLASS="hot">A</SPAN>rquivo <SPAN CLASS="hot">S</SPAN>air </OL></BODY> Veja como fica: Para sair de um programa:
Tecnologia Web
94
Selecione Arquivo - Sair
4.4 ATALHOS E ATRIBUTOS DE CSS 4.4.1 Atalhos Alguns atributos de CSS lhe permitem fazer diversas configuraes em uma declarao. Por exemplo, suponha que voc queira definir diversos aspectos da fonte utilizada para tags H1, como segue: H1 {font-style: italic; font-weight: bold; font-size: 18pt; font-family: 'Times Roman'} Como alternativa a especificar todas essas formataes de fonte individualmente, voc pode utilizar o atributo font: para defini-las todas de uma s vez, assim: H1 {font: italic bold 18pt 'Times Roman'} Note como diversos valores - itlico, negrito, 18pt e Times Roman - so separados apenas por um espao em branco. Essas regras abreviadas certamente poupam espao e tempo de digitao. 4.4.2 Atributos Atributo de CSS background background-attachment background-image background-color background-position background-repeat O que ele formata Cor de fundo, imagem, transparncia. Rolagem do fundo / Marca d'gua. Imagem de fundo. Cor de fundo ou transparncia. Posicionamento da imagem de fundo. Configurao lado-a-lado da imagem de fundo. Largura, estilo e cor de todas as 4 bordas. Largura, estilo e cor da borda inferior.
border border-bottom
Tecnologia Web
95 Cor da citada borda. Estilo da citada borda. Largura da citada borda. Cor das 4 bordas. Largura, estilo e cor da borda esquerda. Cor da borda citada. Estilo da borda citada. Largura da borda citada. Largura, estilo e cor da borda direita. Cor da borda citada. Estilo da borda citada. Largura da borda citada. Estilo de todas as 4 boras. Largura, estilo e cor da borda superior. Cor da borda citada. Estilo da borda citada. Largura da borda citada. Largura de todas as 4 bordas. Elementos flutuantes esquerda ou direita de um elemento. Parte visvel de um elemento. Cor de primeiro plano. Tipo de ponteiro do mouse. Se o elemento exibido e o espao reservado para ele. Tipo de filtro aplicado ao elemento. Se o elemento flutua. Estilo, variante, peso, tamanho e altura da linha do tipo de fonte. Incorporao da fonte ao arquivo HTML. Tipo de fonte. Tamanho da fonte.
border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width clear clip color cursor display filter float font @font-face font-family font-size
Tecnologia Web
96 Fonte itlico. Fonte bold. Peso da fonte de claro a negrito. Altura exibida ao elemento. Folha de estilo a importar. Posio do elemento em relao a margem esquerda da pgina. Distncia entre as letras. Distncia entre linhas de base. Tipo, imagem e posio do estilo da lista. Marcador de item de lista. Posio do marcador de item da lista. Marcador de item de lista alternativo. Tamanho de todas as 4 margens. Tamanho da margem esquerda. Tamanho da margem direita. Tamanho da margem inferior. Tamanho da margem superior. Exibio de imagens que so maiores do que suas molduras. Espao em torno de um elemento em todos os lados. Espao a partir da margem inferior de um elemento. Espao esquerda do elemento. Espao direita do elemento. Espao a partir da margem superior do elemento. Inserir quebra de pgina depois de um elemento. Inserir quebra de pgina antes de um elemento.
font-style Fonte-variant font-weight height @import left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-left margin-right margin-bottom margin-top overflow
padding
padding-bottom padding-left padding-right padding-top
page-break-after
page-break-before
Tecnologia Web
97 Como o elemento posicionado na pgina. Alinhamento do texto. Sublinhado, sobrelinhado ou riscado. Recuo da primeira linha do pargrafo. Transformao para todas maisculas, minsculas ou inicial maiscula. Posio do elemento em relao a parte superior da pgina. Alinhamento vertical do elemento. Se elemento visvel ou invisvel. Largura do elemento. Posio do elemento na pilha.
position text-align text-decoration text-indent text-transform
top vertical-align visibility width z-index
4.5 MLTIPLAS FONTES Mltiplas fontes Voc pode utilizar na tag <FONT> mltiplas fontes especificando a ordem de preferncia. Ou seja, se a primeira fonte indicada por voc no constar no computador do visitante, a segunda ser a escolhida, caso no tenha passa a ser a terceira e assim por diante. Veja o exemplo: <FONT FACE="Arial, Comic Sans MS, Helvetica" SIZE="12" COLOR="purple">
Ou na declarao CSS: H1 {font-family: "Arial, Comic Sans MS, Helvetica" ... }
Fonte incorporada Utilizando as fontes incorporadas, o visitante de seu site far o download e a instalao da fonte utilizada por voc em seu site caso ele ainda no a tenha em seu micro. A sintaxe para incorporao a seguinte:
Tecnologia Web
98 <STYLE TYPE="text/css"><!-@font-face {font-family: nome_da_fonte; font-style: estilo_da_fonte; font-weight: densidade_da_fonte; src: url_da_fonte} --></STYLE>
OBS: Essa declarao deve estar entre as tags <HEAD>...</HEAD> em sua pgina HTML.
Tecnologia Web
99
INTRODUO A LINGUAGEM PHP & MYSQL
Client-Side Scripts
So responsveis pelas aes executadas no browser, sem contato com o servidor. Os exemplos mais comuns de aplicaes client-side so imagens e textos que mudam com o passar do mouse. Os scripts client-side so muito teis para fazer validaes de formulrios sem utilizar processamento do servidor e sem provocar trfego na rede. Outra utilizao comum na construo de interfaces dinmicas e leves.
Server-Side Scripts Os scripts server-side so responsveis pela criao de pginas em tempo real. Num mecanismo de busca, por exemplo, seria invivel manter um arquivo para cada consulta a ser realizada. O que existe um modelo da pgina de resposta, que mesclado com os dados no momento em que a pgina requisitada. PHP uma linguagem server-side que permite criar sites WEB dinmicos, possibilitando uma interao com o usurio atravs de formulrios, parmetros da URL e links. A diferena de PHP com relao a linguagens semelhantes a Javascript que o cdigo PHP executado no servidor, sendo enviado para o cliente apenas html puro. Desta maneira possvel interagir com bancos de dados e aplicaes existentes no servidor, com a vantagem de no expor o cdigo fonte para o cliente. Isso pode ser til quando o programa est lidando com senhas ou qualquer tipo de informao confidencial. O que diferencia PHP de um script CGI escrito em C ou Perl que o cdigo PHP fica embutido no prprio HTML, enquanto no outro caso necessrio que o script CGI gere todo o cdigo HTML, ou leia de um outro arquivo. O que pode ser feito com PHP? Basicamente, qualquer coisa que pode ser feita por algum programa CGI pode ser feita tambm com PHP, como coletar dados de um formulrio, gerar pginas dinamicamente ou enviar e receber cookies. PHP tambm tem como uma das caractersticas mais importantes o suporte a um grande nmero de bancos de dados, como dBase, Interbase, mSQL, mySQL,
Tecnologia Web
100
Oracle, Sybase, PostgreSQL e vrios outros. Construir uma pgina baseada em um banco de dados torna-se uma tarefa extremamente simples com PHP. Alm disso, PHP tem suporte a outros servios atravs de protocolos como IMAP, SNMP, NNTP, POP3 e, logicamente, HTTP. Ainda possvel abrir sockets e interagir com outros protocolos.
5.1 HISTRIA DO PHP A linguagem PHP foi concebida durante o outono de 1994 por Rasmus Lerdorf. As primeiras verses no foram disponibilizadas, tendo sido utilizadas em sua home-page apenas para que ele pudesse ter informaes sobre as visitas que estavam sendo feitas. A primeira verso utilizada por outras pessoas foi disponibilizada em 1995, e ficou conhecida como Personal Home Page Tools (ferramentas para pgina pessoal). Era composta por um sistema bastante simples que interpretava algumas macros e alguns utilitrios que rodavam por trs das home-pages: um livro de visitas, um contador e algumas outras coisas. Em meados de 1995 o interpretador foi reescrito, e ganhou o nome de PHP/FI, o FI veio de um outro pacote escrito por Rasmus que interpretava dados de formulrios HTML (Form Interpreter). Ele combinou os scripts do pacote Personal Home Page Tools com o FI e adicionou suporte a mSQL, nascendo assim o PHP/FI, que cresceu bastante, e as pessoas passaram a contribuir com o projeto. Estima-se que em 1996 PHP/FI estava sendo usado por cerca de 15.000 sites pelo mundo, e em meados de 1997 esse nmero subiu para mais de 50.000. Nessa poca houve uma mudana no desenvolvimento do PHP. Ele deixou de ser um projeto de Rasmus com contribuies de outras pessoas para ter uma equipe de desenvolvimento mais organizada. O interpretador foi reescrito por Zeev Suraski e Andi Gutmans, e esse novo interpretador foi a base para a verso 3. Atualmente o uso do PHP3 vem crescendo numa velocidade incrvel, e j est sendo desenvolvida a verso 4 do PHP.
5.2 SINTAXE BSICA Delimitando o cdigo PHP O cdigo PHP fica embutido no prprio HTML. O interpretador identifica quando um cdigo PHP pelas seguintes tags:
Tecnologia Web
101
<?php comandos ?>
<script language=php> comandos </script>
<? comandos ?>
<% comandos %>
O tipo de tags mais utilizado o terceiro, que consiste em uma abreviao do primeiro. Para utiliz-lo, necessrio habilitar a opo short-tags na configurao do PHP. O ltimo tipo serve para facilitar o uso por programadores acostumados sintaxe de ASP. Para utiliz-lo tambm necessrio habilit-lo no PHP, atravs do arquivo de configurao php.ini.
Separador de instrues Entre cada instruo em PHP preciso utilizar o ponto-e-vrgula, assim como em C, Perl e outras linguagens mais conhecidas. Na ltima instruo do bloco de script no necessrio o uso do ponto-e-vrgula, mas por questes estticas recomenda-se o uso sempre.
Nomes de variveis Toda varivel em PHP tem seu nome composto pelo caracter $ e uma string, que deve iniciar por uma letra ou o caracter _. PHP case sensitive, ou seja, as variveis $vivas e $VIVAS so diferentes. Por isso preciso ter muito cuidado ao definir os nomes das variveis. bom evitar os nomes em maisculas, pois como
Tecnologia Web
102
veremos mais adiante, o PHP j possui alguma variveis pr-definidas cujos nomes so formados por letras maisculas.
Comentrios H dois tipos de comentrios em cdigo PHP:
Comentrios de uma linha Marca como comentrio at o final da linha ou at o final do bloco de cdigo PHP o que vier antes. Pode ser delimitado pelo caracter # ou por duas barras ( // ). Exemplo:
<? echo teste; #isto um teste ?> <? echo teste; //este teste similar ao anterior ?>
Comentrios de mais de uma linha
Tem como delimitadores os caracteres /* para o incio do bloco e */ para o final do comentrio. Se o delimitador de final de cdigo PHP ( ?> ) estiver dentro de um comentrio, no ser reconhecido pelo interpretador.
Exemplos:
<? echo teste; /* Isto um comentrio com mais de uma linha, mas no funciona corretamente ?> */
<? echo teste; /* Isto um comentrio com mais de uma linha que funciona corretamente */ ?>
Tecnologia Web
103
Neste exemplo, criaremos um script com uma sada simples, que servir para testar se a instalao foi feita corretamente:
<html> <head><title>Aprendendo PHP</title></head> <body> <?php echo "Primeiro Script"; ?> </body> </html> Salve o arquivo como primeiro.php3 no diretorio de documentos do Apache (ou o Web Server escolhido). Abra uma janela do navegador e digite o endereo http://localhost/primeiro.php3. Verificando o cdigo fonte da pgina exibida, temos o seguinte:
<html> <head><title>Aprendendo PHP</title></head> <body>
Primeiro Script
</body> </html>
Isso mostra como o PHP funciona. O script executado no servidor, ficando disponvel para o usurio apenas o resultado. Agora vamos escrever um script que produza exatamente o mesmo resultado utilizando uma varivel:
<?php $texto = "Primeiro Script";
Tecnologia Web
104
echo $texto; ?>
</body> </html>
5.3 TIPOS
PHP suporta os seguintes tipos de dados:

Inteiro Ponto flutuante String Array Objeto
PHP utiliza checagem de tipos dinmica, ou seja, uma varivel pode conter valores de diferentes tipos em diferentes momentos da execuo do script. Por este motivo no necessrio declarar o tipo de uma varivel para us-la. O interpretador PHP decidir qual o tipo daquela varivel, verificando o contedo em tempo de execuo. Ainda assim, permitido converter os valores de um tipo para outro desejado, utilizando o typecasting ou a funo settype (ver adiante).
5.3.1 Inteiros (integer ou long) Uma varivel pode conter um valor inteiro com atribuies que sigam as seguintes sintaxes:
$vivas = 1234; # inteiro positivo na base decimal
$vivas = -234;
# inteiro negativo na base decimal
$vivas = 0234; # inteiro na base octal-simbolizado pelo 0 # equivale a 156 decimal
Tecnologia Web
105 # inteiro na base hexadecimal(simbolizado # pelo 0x) equivale a 52 decimal.
$vivas = 0x34;
A diferena entre inteiros simples e long est no nmero de bytes utilizados para armazenar a varivel. Como a escolha feita pelo interpretador PHP de maneira transparente para o usurio, podemos afirmar que os tipos so iguais.
5.3.2 Nmeros em Ponto Flutuante (double ou float)
Uma varivel pode ter um valor em ponto flutuante com atribuies que sigam as seguintes sintaxes:
$vivas = 1.234; $vivas = 23e4; # equivale a 230.000
5.3.3 Strings Strings podem ser atribudas de duas maneiras: utilizando aspas simples ( ' ) Desta maneira, o valor da varivel ser exatamente o texto contido entre as aspas (com exceo de \\ e \' ver tabela abaixo) utilizando aspas duplas ( " ) Desta maneira, qualquer varivel ou caracter de escape ser expandido antes de ser atribudo.
Exemplo:
<? $teste = "Mauricio"; $vivas = '---$teste--\n'; echo "$vivas"; ?> A sada desse script ser "---$teste--\n". <? $teste = "Mauricio"; $vivas = "---$teste---\n";
Tecnologia Web
106
echo "$vivas"; ?>
A sada desse script ser "---Mauricio--" (com uma quebra de linha no final). A tabela seguinte lista os caracteres de escape: Sintaxe Significado \n \r Nova linha Retorno de carro (semelhante a \n) \t \\ \$ \ \ Tabulao horizontal A prpria barra ( \ ) O smbolo $ Aspa simples Aspa dupla
A seguir veremos algumas funes para tratamentos de strings 5.3.3.1 Funes relacionadas ao HTML Htmlspecialchars
string htmlspecialchars(string str);
Retorna a string fornecida, substituindo os seguintes caracteres: & para '&' " para '"' < para '<' > para >'
Htmlentities
string htmlentities(string str);
Funciona de maneira semelhante ao comando anterior, mas de maneira mais
Tecnologia Web
107
completa, pois converte todos os caracteres da string que possuem uma representao especial em html, como por exemplo: para 'º' para 'ª' para 'á' para ç'
nl2br string nl2br(string str);
Retorna a string fornecida substituindo todas as quebras de linha (\n) por quebras de linhas em html (<br>).
Exemplo: echo nl2br(Mauricio\nVivas\n); Imprime: Maurcio<br>Vivas<br>
get_meta_tags
array get_meta_tags(string arquivo);
Abre um arquivo html e percorre o cabealho em busca de meta tags, retornando num array todos os valores encontrados.
Exemplo: No arquivo teste.html temos: ... <head> <meta name="author" content="jose"> <meta name="tags" content="php3 documentation"> ... </head> ...
Tecnologia Web
108
a execuo da funo:
get_meta_tags(teste.html);
retorna o array:
array(author=>jose,tags=>"php3 documentation");
strip_tags
string strip_tags(string str);
Retorna a string fornecida, retirando todas as tags html e/ou PHP encontradas.
Exemplo:
strip_tags('<a href="teste1.php3">testando</a><br>'); Retorna a string testando
Urlencode string urlencode(string str);
Retorna a string fornecida, convertida para o formato urlencode. Esta funo til para passar variveis para uma prxima pgina.
Urldecode string urldecode(string str);
Funciona de maneira inversa a urlencode, desta vez decodificando a string fornecida do formato urlencode para texto normal.
Tecnologia Web
109
5.3.3.2 Funes relacionadas a ARRAYS Implode e join
string implode(string separador, array partes); string join(string separador, array partes);
As duas funes so idnticas. Retornam uma string contendo todos os elementos do array fornecido separados pela string tambm fornecida.
Exemplo:
$partes = array("a", "casa nmero", 13, " azul"); $inteiro = join(" ",$partes);
$inteiro passa a conter a string: a casa nmero 13 azul
Split array split(string padrao, string str, int [limite]);
Retorna um array contendo partes da string fornecida separadas pelo padro fornecido, podendo limitar o nmero de elementos do array.
Exemplo:
$data = 11/14/1975; $data_array = split(/,$data);
O cdigo acima faz com que a varivel $data_array receba o valor: array(11,14,1975);
explode
array explode(string padrao, string str);
Tecnologia Web
110
Funciona de maneira bastante semelhante funo split, com a diferena que no possvel estabelecer um limite para o nmero de elementos do array.
5.3.4 Arrays Arrays em PHP podem ser observados como mapeamentos ou como vetores indexados. Mais precisamente, um valor do tipo array um dicionrio onde os ndices so as chaves de acesso. Vale ressaltar que os ndices podem ser valores de qualquer tipo e no somente inteiros. Inclusive, se os ndices forem todos inteiros, estes no precisam formar um intervalo contnuo. Como a checagem de tipos em PHP dinmica, valores de tipos diferentes podem ser usados como ndices de array, assim como os valores mapeados tambm podem ser de diversos tipos. Exemplo: <? $cor[1] = vermelho; $cor[2] = verde; $cor[3] = azul; $cor[teste] = 1; ?>
Equivalentemente, pode-se escrever:
<? $cor = array(1 => vermelho, 2 => verde, 3 => azul, teste => 1); ?> 5.3.5 Listas As listas so utilizadas em PHP para realizar atribuies mltiplas. Atravs de listas possvel atribuir valores que esto num array para variveis. Vejamos o exemplo: Exemplo: list($a, $b, $c) = array(a, b, c); O comando acima atribui valores s trs variveis simultaneamente. bom notar
Tecnologia Web
111
que s so atribudos s variveis da lista os elementos do array que possuem ndices inteiros e no negativos. No exemplo acima as trs atribuies foram bem sucedidas porque ao inicializar um array sem especificar os ndices eles passam a ser inteiros, a partir do zero. Um fator importante que cada varivel da lista possui um ndice inteiro e ordinal, iniciando com zero, que serve para determinar qual valor ser atribudo. No exemplo anterior temos $a com ndice 0, $b com ndice 1 e $c com ndice 2. Vejamos um outro exemplo: $arr = array(1=>um,3=>tres,a=>letraA,2=>dois); list($a,$b,$c,$d) = $arr; Aps a execuo do cdigo acima temos os seguintes valores: $a == null $b == um $c == dois $d == tres Devemos observar que varivel $a no foi atribudo valor, pois no array no existe elemento com ndice 0 (zero). Outro detalhe importante que o valor tres foi atribudo varivel $d, e no a $b, pois seu ndice 3, o mesmo que $d na lista. Por fim, vemos que o valor letraA no foi atribudo a elemento algum da lista, pois seu ndice no inteiro. Os ndices da lista servem apenas como referncia ao interpretador PHP para realizar as atribuies, no podendo ser acessados de maneira alguma pelo programador. De maneira diferente do array, uma lista no pode ser atribuda a uma varivel, servindo apenas para fazer mltiplas atribuies atravs de um array.
5.3.6 Objetos Um objeto pode ser inicializado utilizando o comando new para instanciar uma classe para uma varivel.
Exemplo: class teste { function nada() { echo nada; } }
Tecnologia Web
112
$php = new teste; $php -> nada();
A utilizao de objetos ser mais detalhada mais frente.
5.3.7 Booleanos PHP no possui um tipo booleano, mas capaz de avaliar expresses e retornar true ou false, atravs do tipo integer: usado o valor 0 (zero) para representar o estado false, e qualquer valor diferente de zero (geralmente 1) para representar o estado true.
5.3.8 Transformao de tipos A transformao de tipos em PHP pode ser feita das seguintes maneiras:
5.3.8.1 Coeres Quando ocorrem determinadas operaes (+, por exemplo) entre dois valores de tipos diferentes, o PHP converte o valor de um deles automaticamente (coero). interessante notar que se o operando for uma varivel, seu valor no ser alterado. O tipo para o qual os valores dos operandos sero convertidos determinado da seguinte forma: Se um dos operandos for float, o outro ser convertido para float, seno, se um deles for integer, o outro ser convertido para integer.
Exemplo:
$php = 1;
// $php a string 1
$php = $php + 1; // $php o integer 2 $php = $php + 3.7;// $php o double 5.7 $php = 1 + 1.5 // $php o double 2.5
Como podemos notar, o PHP converte string para integer ou double
Tecnologia Web
113
mantendo o valor. O sistema utilizado pelo PHP para converter de strings para nmeros o seguinte: analisado o incio da string. Se contiver um nmero, ele ser avaliado. Seno, o valor ser 0 (zero); O nmero pode conter um sinal no incio (+ ou -); Se a string contiver um ponto em sua parte numrica a ser analisada, ele ser considerado, e o valor obtido ser double; Se a string contiver um e ou E em sua parte numrica a ser analisada, o valor seguinte ser considerado como expoente da base 10, e o valor obtido ser double;
Exemplos:
$php = 1 + 10.5; $php = 1 + -1.3e3; $php = 1 + teste10.5; $php = 1 + 10testes;
// $php == 11.5 // $php == -1299 // $php == 1 // $php == 11
$php = 1 + " 10testes"; // $php == 11 $php = 1 + "+ 10testes"; // $php == 1
5.3.8.2 Transformao explcita de tipos A sintaxe do typecast de PHP semelhante ao C: basta escrever o tipo entre parnteses antes do valor
Exemplo: $php = 15; $php = (double) $php $php = 3.9 // $php integer (15) // $php double (15.0) // $php double (3.9)
$php = (int) $php // $php integer (3) // o valor decimal truncado Os tipos de cast permitidos so: (int), (integer)
muda para integer;
(real), (double), (float) muda para float;
Tecnologia Web
114 (string) (array) (object)

muda para string; muda para array; muda para objeto.
Com a funo settype A funo settype converte uma varivel para o tipo especificado, que pode ser integer, double, string, array ou object.
Exemplo: $php = 15; settype($php,double) // $php integer // $php double
5.4 CONSTANTES Constantes pr-definidas
O PHP possui algumas constantes pr-definidas, indicando a verso do PHP, o Sistema Operacional do servidor, o arquivo em execuo, e diversas outras informaes. Para ter acesso a todas as constantes pr-definidas, pode-se utilizar a funo phpinfo(), que exibe uma tabela contendo todas as constantes pr-definidas, assim como configuraes da mquina, sistema operacional, servidor http e verso do PHP instalada.
Definindo constantes
Para definir constantes utiliza-se a funo define. Uma vez definido, o valor de uma constante no poder mais ser alterado. Uma constante s pode conter valores escalares, ou seja, no pode conter nem um array nem um objeto. A assinatura da funo define a seguinte: int define(string nome_da_constante, mixed valor); A funo retorna true se for bem-sucedida. Veja um exemplo de sua utilizao a seguir: define ("pi", 3.1415926536);
Tecnologia Web
115
$circunf = 2*pi*$raio;
5.5 OPERADORES Aritmticos
S podem ser utilizados quando os operandos so nmeros (integer ou float). Se forem de outro tipo, tero seus valores convertidos antes da realizao da operao. + * / % adio subtrao multiplicao diviso mdulo
Strings S h um operador exclusivo para strings:
concatenao
Atribuio Existe um operador bsico de atribuio e diversos derivados. Sempre retornam o valor atribudo. No caso dos operadores derivados de atribuio, a operao feita entre os dois operandos, sendo atribudo o resultado para o primeiro. A atribuio sempre por valor, e no por referncia. = += -= *= atribuio simples atribuio com adio atribuio com subtrao atribuio com multiplicao /= atribuio com diviso
Tecnologia Web
116 %= .= atribuio com mdulo atribuio com concatenao
Exemplo:
$a = 7; $a += 2; // $a passa a conter o valor 9
bit a bit Comparam dois nmeros bit a bit.
& | ^ ~
e lgico ou lgico ou exclusivo no (inverso)
<< >>
shift left shift right
Lgicos Utilizados para inteiros representando valores booleanos
and or xor !
e lgico ou lgico ou exclusivo no (inverso)
&& ||
e lgico ou lgico
Existem dois operadores para e e para ou porque eles tm diferentes posies na ordem de precedncia.
Tecnologia Web
117
Comparao
As comparaes so feitas entre os valores contidos nas variveis, e no as referncias. Sempre retornam um valor booleano. == != < > <= igual a diferente de menor que maior que menor ou igual a >= maior ou igual a Expresso condicional Existe um operador de seleo que ternrio. Funciona assim:
(expressao1)?(expressao2):( expressao3)
O interpretador PHP avalia a primeira expresso. Se ela for verdadeira, a expresso retorna o valor de expresso2. Seno, retorna o valor de expresso3.
Incremento e decremento
++ --
incremento decremento
Podem ser utilizados de duas formas: antes ou depois da varivel. Quando utilizado antes, retorna o valor da varivel antes de increment-la ou decrement-la. Quando utilizado depois, retorna o valor da varivel j incrementado ou decrementado. Exemplos: $a = $b = 10; // $a e $b recebem o valor 10 $c = $a++; // $c recebe 10 e $a passa a ter 11
Tecnologia Web
118
$d = ++$b; // $d recebe 11, valor de $b j incrementado
Ordem de precedncia dos operadores A tabela a seguir mostra a ordem de precedncia dos operadores no momento de avaliar as expresses: Precedncia 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. Associatividade Esquerda Esquerda Esquerda Esquerda Direita Esquerda Esquerda Esquerda Esquerda Esquerda Esquerda Esquerda no associa no associa Esquerda Esquerda Esquerda Direita , or xor and print = += -= *= /= .= %= &= != ~= <<= >>= ?: || && | ^ & == != < <= > >= << >> +-. */% ! ~ ++ -- (int) (double) (string) (array) (object) @ 19. 20. Direita no associa [ new Operadores
Tecnologia Web
119
5.6 ESTRUTURAS DE CONTROLE As estruturas que veremos a seguir so comuns para as linguagens de programao imperativas, bastando, portanto, descrever a sintaxe de cada uma delas, resumindo o funcionamento. Blocos Um bloco consiste de vrios comandos agrupados com o objetivo de relacion-los com determinado comando ou funo. Em comandos como if, for, while, switch e
em declaraes de funes blocos podem ser utilizados para permitir que um comando faa parte do contexto desejado. Blocos em PHP so delimitados pelos caracteres { e }. A utilizao dos delimitadores de bloco em uma parte qualquer do cdigo no relacionada com os comandos citados ou funes no produzir efeito algum, e ser tratada normalmente pelo interpretador.
Exemplo if ($x == $y) comando1; comando2; Para que comando2 esteja relacionado ao if preciso utilizar um bloco: if ($x == $y){ comando1; comando2; } 5.6.1 Comandos de seleo Tambm chamados de condicionais, os comandos de seleo permitem executar comandos ou blocos de comandos com base em testes feitos durante a execuo.
IF O mais trivial dos comandos condicionais o if. Ele testa a condio e executa o comando indicado se o resultado for true (valor diferente de zero). Ele possui duas sintaxes:
Tecnologia Web
120
if (expresso) comando; if (expresso){ comando1; comando2; comando3; comando4; comando5; comando1; comando2; comando3; } if (expresso): comando; ... comando; endif; Para incluir mais de um comando no if da primeira sintaxe, preciso utilizar um bloco, demarcado por chaves. O else um complemento opcional para o if. Se utilizado, o comando ser executado se a expresso retornar o valor false (zero). Suas duas sintaxes so: if (expresso) comando; else comando; if (expresso): comando; ... comando; else comando; ...
Tecnologia Web
121 comando;
endif; A seguir, temos um exemplo do comando if utilizado com else:
if ($a > $b) $maior = $a; else $maior = $b; O exemplo acima coloca em $maior o maior valor entre $a e $b Em determinadas situaes necessrio fazer mais de um teste, e executar condicionalmente diversos comandos ou blocos de comandos. Para facilitar o entendimento de uma estrutura do tipo:
if (expressao1) comando1; else if (expressao2) comando2; else if (expressao3) comando3; else comando4; Foi criado o comando, tambm opcional elseif. Ele tem a mesma funo de um else e um if usados seqencialmente, como no exemplo acima. Num mesmo if podem ser utilizados diversos elseifs, ficando essa utilizao a critrio do programador, que deve zelar pela legibilidade de seu script. O comando elseif tambm pode ser utilizado com dois tipos de sintaxe. Em resumo, a sintaxe geral do comando if fica das seguintes maneiras:
if (expressao1) comando;
Tecnologia Web
122
[ elseif (expressao2) comando; ] [ else comando; ] if (expressao1) : comando; ... comando; [ elseif (expressao2) comando; ... comando; ] [ else comando; ... comando; ] endif;
Switch O comando switch atua de maneira semelhante a uma srie de comandos if na mesma expresso. Freqentemente o programador pode querer comparar uma varivel com diversos valores, e executar um cdigo diferente a depender de qual valor igual ao da varivel. Quando isso for necessrio, deve-se usar o comando switch. O exemplo seguinte mostra dois trechos de cdigo que fazem a mesma coisa, sendo que o primeiro utiliza uma srie de ifs e o segundo utiliza switch: if ($i == 0) print i igual a zero; elseif ($i == 1) print i igual a um; elseif ($i == 2) print i igual a dois; switch ($i) { case 0: print i igual a zero;
Tecnologia Web
123 break; case 1: print i igual a um; break; case 2: print i igual a dois; break;
importante compreender o funcionamento do switch para no cometer enganos. O comando switch testa linha a linha os cases encontrados, e a partir do momento que encontra um valor igual ao da varivel testada, passa a executar todos os comandos seguintes, mesmo os que fazem parte de outro teste, at o fim do bloco. por isso usa-se o comando break, quebrando o fluxo e fazendo com que o cdigo seja executado da maneira desejada. Veremos mais sobre o break mais adiante. Veja o exemplo:
switch ($i) { case 0: print i igual a zero; case 1: print i igual a um; case 2: print i igual a dois; }
No exemplo acima, se $i for igual a zero, os trs comandos print sero executados. Se $i for igual a 1, os dois ltimos print sero executados. O comando s funcionar da maneira desejada se $i for igual a 2. Em outras linguagens que implementam o comando switch, ou similar, os valores a serem testados s podem ser do tipo inteiro. Em PHP permitido usar valores do tipo string como elementos de teste do comando switch. O exemplo abaixo funciona perfeitamente: switch ($s) { case casa:
Tecnologia Web
124 print A casa amarela; case arvore: print a rvore bonita; case lmpada: print Joo apagou a lmpada; }
5.6.2 Comandos de Repetio While O while o comando de repetio (lao) mais simples. Ele testa uma condio e executa um comando, ou um bloco de comandos, at que a condio testada seja falsa. Assim como o if, o while tambm possui duas sintaxes alternativas:
while (<expresso>) <comando>;
while (<expresso>){ <comando1>; <comando2>; <comando3>; <comando4>; <comando5>; <comando3>; } while (<expresso>): <comando>; ... <comando>; endwhile;
A expresso s testada a cada vez que o bloco de instrues termina, alm do teste inicial. Se o valor da expresso passar a ser false no meio do bloco de instrues, a execuo segue at o final do bloco. Se no teste inicial a condio for
Tecnologia Web
125
avaliada como false, o bloco de comandos no ser executado. O exemplo a seguir mostra o uso do while para imprimir os nmeros de 1 a 10: $i = 1; while ($i <=10) print $i++;
Do... While O lao do...while funciona de maneira bastante semelhante ao while, com a simples diferena que a expresso testada ao final do bloco de comandos. O lao do...while possui apenas uma sintaxe, que a seguinte:
do { <comando> ... <comando> } while (<expresso>);
O exemplo utilizado para ilustrar o uso do while pode ser feito da seguinte maneira utilizando o do... while:
$i = 0; do { print ++$i; } while ($i < 10); FOR O tipo de lao mais complexo o for. Para os que programam em C, C++ ou Java, a assimilao do funcionamento do for natural. Mas para aqueles que esto acostumados a linguagens como Pascal, h uma grande mudana para o uso do for. As trs sintaxes permitidas so:
for (<inicializao>;<condio>;<incremento ou decremento>) <comando>;
Tecnologia Web
126
for (<inicializao>;<condio>;<incremento ou decremento>){ <comando>; <comando>; <comando>; <comando>; <comando>; } for (<inicializao>;<condio>;<incremento ou decremento>): <comando>; ... <comando>; endfor; As trs expresses que ficam entre parnteses tm as seguintes finalidades: Inicializao: comando ou seqncia de comandos a serem realizados antes do inicio do lao. Serve para inicializar variveis. Condio: Expresso booleana que define se os comandos que esto dentro do lao sero executados ou no. Enquanto a expresso for verdadeira (valor diferente de zero) os comandos sero executados. Incremento: Comando executado ao final de cada execuo do lao. Um comando for funciona de maneira semelhante a um while escrito da seguinte forma: <inicializao> while (<condio>) { comandos ... <incremento> } Quebra de fluxo BREAK O comando break pode ser utilizado em laos de do, for e while, alm do uso
Tecnologia Web
127
j visto no comando switch. Ao encontrar um break dentro de um desses laos, o interpretador PHP para imediatamente a execuo do lao, seguindo normalmente o fluxo do script. while ($x > 0) { ... if ($x == 20) { echo erro! x = 20; break; ... } No trecho de cdigo acima, o lao while tem uma condio para seu trmino normal ($x <= 0), mas foi utilizado o break para o caso de um trmino no previsto no incio do lao. Assim o interpretador seguir para o comando seguinte ao lao. CONTINUE O comando continue tambm deve ser utilizado no interior de laos, e funciona de maneira semelhante ao break, com a diferena que o fluxo ao invs de sair do lao volta para o incio dele. Vejamos o exemplo: for ($i = 0; $i < 100; $i++) { if ($i % 2) continue; echo $i ; } O exemplo acima uma maneira ineficiente de imprimir os nmeros pares entre 0 e 99. O que o lao faz testar se o resto da diviso entre o nmero e 2 0. Se for diferente de zero (valor lgico true) o interpretador encontrar um continue, que faz com que os comandos seguintes do interior do lao sejam ignorados, seguindo para a prxima iterao. 5.7 FUNES Definindo funes A sintaxe bsica para definir uma funo :
Tecnologia Web
128
function nome_da_funo([arg1, arg2, arg3]) {

Comandos; ... ; [return <valor de retorno>]; }
Qualquer cdigo PHP vlido pode estar contido no interior de uma funo. Como a checagem de tipos em PHP dinmica, o tipo de retorno no deve ser declarado,
sendo necessrio que o programador esteja atento para que a funo retorne o tipo desejado. recomendvel que esteja tudo bem documentado para facilitar a leitura e compreenso do cdigo. Para efeito de documentao, utiliza-se o seguinte formato de declarao de funo:
tipo function nome_da_funcao(tipo arg1, tipo arg2, ...); Este formato s deve ser utilizado na documentao do script, pois o PHP no aceita a declarao de tipos. Isso significa que em muitos casos o programador deve
estar atento aos tipos dos valores passados como parmetros, pois se no for passado o tipo esperado no emitido nenhum alerta pelo interpretador PHP, j que este no testa os tipos.
Valor de retorno Toda funo pode opcionalmente retornar um valor, ou simplesmente executar os comandos e no retornar valor algum. No possvel que uma funo retorne mais
de um valor, mas permitido fazer com que uma funo retorne um valor composto, como listas ou arrays.
Argumentos possvel passar argumentos para uma funo. Eles devem ser declarados logo
aps o nome da funo, entre parnteses, e tornam-se variveis pertencentes ao escopo local da funo. A declarao do tipo de cada argumento tambm utilizada apenas para efeito de documentao. Exemplo:
function imprime($texto){ echo $texto; }
Tecnologia Web
129
imprime(teste de funes); Passagem de parmetros por referncia Normalmente, a passagem de parmetros em PHP feita por valor, ou seja, se o contedo da varivel for alterado, essa alterao no afeta a varivel original.
Exemplo: function mais5($numero) { $numero += 5; }
$a = 3; mais5($a); //$a continua valendo 3
No exemplo acima, como a passagem de parmetros por valor, a funo mais5 intil, j que aps a execuo sair da funo o valor anterior da varivel recuperado. Se a passagem de valor fosse feita por referncia, a varivel $a teria 8 como valor. O que ocorre normalmente que ao ser chamada uma funo, o interpretador salva todo o escopo atual, ou seja, os contedos das variveis. Se uma dessas variveis for passada como parmetro, seu contedo fica preservado, pois a funo ir trabalhar na verdade com uma cpia da varivel.7 Porm, se a passagem de parmetros for feita por referncia, toda alterao que a funo realizar no valor passado como parmetro afetar a varivel que o contm. H duas maneiras de fazer com que uma funo tenha parmetros passados por referncia: indicando isso na declarao da funo, o que faz com que a passagem de parmetros sempre seja assim; e tambm na prpria chamada da funo. Nos dois casos utiliza-se o modificador &. Vejamos um exemplo que ilustra os dois casos: function mais5(&$num1, $num2) { $num1 += 5; $num2 += 5; }
$a = $b = 1;
Tecnologia Web
130
mais5($a, $b); /* Neste caso, s $num1 ter seu valor alterado, pois a passagem por referncia est definida na declarao da funo. */ mais5($a, &$b); /* Aqui as duas variveis tero seus valores alterados. */
Argumentos com valores pr-definidos (default) Em PHP possvel ter valores default para argumentos de funes, ou seja, valores que sero assumidos em caso de nada ser passado no lugar do argumento. Quando algum parmetro declarado desta maneira, a passagem do mesmo na chamada da funo torna-se opcional.
function teste($php = testando) { echo $php; }
teste(); // imprime testando teste(outro teste); // imprime outro teste
bom lembrar que quando a funo tem mais de um parmetro, o que tem valor default deve ser declarado por ltimo:
function teste($figura = circulo, $cor) { echo a figura um . $figura. de cor $cor; } teste(azul);
/* A funo no vai funcionar da maneira esperada, ocorrendo um erro no interpretador. A declarao correta : */
function teste2($cor, $figura = circulo) { echo a figura um . $figura. de cor $cor; } teste2(azul);
/* Aqui a funo funciona da maneira esperada, ou seja, imprime o texto: a figura
Tecnologia Web
131
um crculo de cor azul */ Contexto O contexto o conjunto de variveis e seus respectivos valores num determinado ponto do programa. Na chamada de uma funo, ao iniciar a execuo do bloco que contm a implementao da mesma criado um novo contexto, contendo as variveis declaradas dentro do bloco, ou seja, todas as variveis utilizadas dentro daquele bloco sero eliminadas ao trmino da execuo da funo.
Escopo O escopo de uma varivel em PHP define a poro do programa onde ela pode ser utilizada. Na maioria dos casos todas as variveis tm escopo global. Entretanto, em funes definidas pelo usurio um escopo local criado. Uma varivel de escopo global no pode ser utilizada no interior de uma funo sem que haja uma declarao. Exemplo: $php = Testando; function Teste() { echo $php; } Teste(); O trecho acima no produzir sada alguma, pois a varivel $php de escopo global, e no pode ser referida num escopo local, mesmo que no haja outra com nome igual que cubra a sua visibilidade. Para que o script funcione da forma desejada, a varivel global a ser utilizada deve ser declarada. Exemplo: $php = Testando; function Teste() { global $php; echo $php;
Tecnologia Web
132
} Teste(); Uma declarao global pode conter vrias variveis, separadas por vrgulas. Uma outra maneira de acessar variveis de escopo global dentro de uma funo utilizando um array pr-definido pelo PHP cujo nome $GLOBALS. O ndice para a varivel referida o prprio nome da varivel, sem o caracter $. O exemplo acima e o abaixo produzem o mesmo resultado: Exemplo: $php = "Testando";
function Teste() { echo $GLOBALS["php"]; // imprime $php echo $php; // no imprime nada
} Teste(); 5.8 VARIVEIS O modificador static Uma varivel esttica visvel num escopo local, mas ela inicializada apenas uma vez e seu valor no perdido quando a execuo do script deixa esse escopo. Veja o seguinte exemplo: function Teste() { $a = 0; echo $a; $a++; } O ltimo comando da funo intil, pois assim que for encerrada a execuo da funo a varivel $a perde seu valor. J no exemplo seguinte, a cada chamada da funo a varivel $a ter seu valor impresso e ser incrementada: function Teste() { static $a = 0; echo $a;
Tecnologia Web
133
$a++; } O modificador static muito utilizado em funes recursivas, j que o valor de algumas variveis precisa ser mantido. Ele funciona da seguinte forma: O valor das variveis declaradas como estticas mantido ao terminar a execuo da funo. Na prxima execuo da funo, ao encontrar novamente a declarao com static, o valor da varivel recuperado. Em outras palavras, uma varivel declarada como static tem o mesmo tempo de vida que uma varivel global, porm sua visibilidade restrita ao escopo local em que foi declarada e s recuperada aps a declarao. Exemplo: function Teste() { echo "$a"; static $a = 0; $a++; } O exemplo acima no produzir sada alguma. Na primeira execuo da funo, a impresso ocorre antes da atribuio de um valor funo e, portanto o contedo de $a nulo (string vazia). Nas execues seguintes da funo Teste() a impresso ocorre antes da recuperao do valor de $a e, portanto nesse momento seu valor ainda nulo. Para que a funo retorne algum valor o modificador static deve ser utilizado.
Variveis Variveis O PHP tem um recurso conhecido como variveis variveis, que consiste em variveis cujos nomes tambm so variveis. Sua utilizao feita atravs do duplo cifro ($$).
$a = teste; $$a = Mauricio Vivas;
O exemplo acima e equivalente ao seguinte:
Tecnologia Web
134
$a = teste; $teste = Mauricio Vivas; Variveis enviadas pelo navegador Para interagir com a navegao feita pelo usurio, necessrio que o PHP possa enviar e receber informaes para o software de navegao. A maneira de enviar informaes, como j foi visto anteriormente, geralmente atravs de um comando de impresso, como o echo. Para receber informaes vindas do navegador atravs de um link ou um formulrio html o PHP utiliza as informaes enviadas atravs da URL. Por exemplo: se seu script php est localizado em http://localhost/teste.php3 e voc o chama com a url
http://localhost/teste.php3?php=teste, automaticamente o PHP criar uma varivel com o nome $php contendo a string teste. Note que o contedo da varivel est no formato urlencode. Os formulrios html j enviam informaes automaticamente nesse formato, e o PHP decodifica sem necessitar de tratamento pelo programador.
URLencode O formato urlencode obtido substituindo os espaos pelo caracter + e todos os outros caracteres no alfa-numricos (com exceo de _) pelo caracter % seguido do cdigo ASCII em hexadecimal. Por exemplo: o texto Testando 1 2 3 !! em urlencode fica Testando+1+2+3+%21%21 O PHP possui duas funes para tratar com texto em urlencode. Seguem suas sintaxes: string urlencode(string texto); string urldecode(string texto); Essas funes servem respectivamente para codificar ou decodificar um texto passado como argumento. Para entender melhor o que um argumento e como funciona uma funo, leia o tpico funes.
Variveis de ambiente O PHP possui diversas variveis de ambiente, como a $PHP_SELF, por exemplo, que contm o nome e o path do prprio arquivo. Algumas outras contm
Tecnologia Web
135
informaes sobre o navegador do usurio, o servidor http, a verso do PHP e diversas informaes. Para ter uma listagem de todas as variveis e constantes de ambiente e seus respectivos contedos, deve-se utilizar a funo phpinfo().
Verificando o tipo de uma varivel
Por causa da tipagem dinmica utilizada pelo PHP, nem sempre possvel saber qual o tipo de uma varivel em determinado instantes no contar com a ajuda de algumas funes que ajudam a verificar isso. A verificao pode ser feita de duas maneiras:
Funo que retorna o tipo da varivel Esta funo a gettype. Sua assinatura a seguinte:
string gettype(mixed var);
A palavra mixed indica que a varivel var pode ser de diversos tipos. A funo gettype pode retornar as seguintes strings: integer, double, string, array, object e unknown type.
Funes que testam o tipo da varivel So as funes is_int, is_integer, is_real, is_long, is_float, is_string, is_array e is_object. Todas tm o mesmo formato, seguindo modelo da assinatura a seguir:
int is_integer(mixed var);
Todas essas funes retornam true se a varivel for daquele tipo, e false em caso contrrio.
Destruindo uma varivel possvel desalocar uma varivel se ela no for usada posteriormente atravs da funo unset, que tem a seguinte assinatura:
Tecnologia Web
136
int unset(mixed var);
A funo destri a varivel, ou seja, libera a memria ocupada por ela, fazendo com que ela deixe de existir. Se mais na frente for feita uma chamada varivel, ser criada uma nova varivel de mesmo nome e de contedo vazio, a no ser que a chamada seja pela funo isset. Se a operao for bem sucedida, retorna true.
Verificando se uma varivel possui um valor Existem dois tipos de teste que podem ser feitos para verificar se uma varivel est setada: com a funo isset e com a funo empty. A funo isset Possui o seguinte prottipo:
int isset(mixed var);
E retorna true se a varivel estiver setada (ainda que com uma string vazia ou o valor zero), e false em caso contrrio. A funo empty
Possui a seguinte assinatura:
int empty(mixed var);
E retorna true se a varivel no contiver um valor (no estiver setada) ou possuir valor 0 (zero) ou uma string vazia. Caso contrrio, retorna false. Arrays Multidimensionais Arrays multidimensionais so arrays simples com um dos (ou todos) seus elementos sendo outro array e assim consecutivamente. Exemplo: $Campeao[5] = 123456789 ;
Tecnologia Web
137
$Tricampeao[casa] = $Campeao; $Tricampeao[predio] = 19191919;

$Brasil[1] = $Tricampeao; $Brasil[2] = Bicampeao; $Brasil[copa] = $Tricampeao;
$Brasil[4] = Tetracampeao; $Brasil[mundo] = Pentacampeao; echo $Campeao[5]; // resultar 123456789 echo $Brasil[1][casa][5] ; // resultar 19191919 Array tridimensional Array bidimensional Array simples
echo $Tricampeao[casa][5]; // resultar 123456789
echo $Brasil[copa][predio]; // resultar 19191919 Array bidimensional
5.9 CLASSES E OBJETOS Classe Uma classe um conjunto de variveis e funes relacionadas a essas variveis. Uma vantagem da utilizao poder usufruir o recurso de encapsulamento de informao. Com o encapsulamento o usurio de uma classe no precisa saber como ela implementada, bastando para a utilizao conhecer a interface, ou seja, as funes disponveis. Uma classe um tipo e, portanto no pode ser atribuda a uma varivel. Para definir uma classe, deve-se utilizar a seguinte sintaxe: class Nome_da_classe { var $variavel1;
var $variavel2; function funcao1 ($parmetro) { /* === corpo da funo === */ }
Objeto Como foi dito anteriormente, classes so tipos, e no podem ser atribudas a variveis. Variveis do tipo de uma classe so chamadas de objetos, e devem ser
Tecnologia Web
138
criadas utilizando o operador new, seguindo o exemplo abaixo:
$varivel = new $nome_da_classe;
Para utilizar as funes definidas na classe, deve ser utilizado o operador >, como no exemplo:
$varivel->funcao1();
A varivel $this Na definio de uma classe, pode-se utilizar a varivel $this, que o prprio objeto. Assim, quando uma classe instanciada em um objeto, e uma funo desse objeto na definio da classe utiliza a varivel $this, essa varivel significa o objeto que estamos utilizando. Como exemplo da utilizao de classes e objetos, podemos utilizar a classe conta, que define uma conta bancria bastante simples, com funes para ver saldo e fazer um crdito.
class conta { var $saldo; function saldo() { return $this->saldo; } function credito($valor) { $this->saldo += $valor; } }
$minhaconta = new conta; $minhaconta->saldo(); // a varivel interna no foi // inicializada, e no contm // valor algum $minhaconta->credito(50); $minhaconta->saldo(); // retorna 50
Tecnologia Web
139
SubClasses
Uma classe pode ser uma extenso de outra. Isso significa que ela herdar todas as variveis e funes da outra classe, e ainda ter as que forem adicionadas pelo programador. Em PHP no permitido utilizar herana mltipla, ou seja, uma classe pode ser extenso de apenas uma outra.Para criar uma classe extendida, ou derivada de outra, deve ser utilizada a palavra reservada extends, como pode ser visto no exemplo seguinte:
class novaconta extends conta { var $numero; function numero() { return $this->numero; } }
A classe acima derivada da classe conta, tendo as mesmas funes e variveis, com a adio da varivel $numero e a funo numero().
Construtores Um construtor uma funo definida na classe que automaticamente chamada no momento em que a classe instanciada (atravs do operador new). O construtor deve ter o mesmo nome que a classe a que pertence. Veja o exemplo:
class conta { var $saldo; function conta () { $this.saldo = 0; }
function saldo() { return $this->saldo; } function credito($valor) {
Tecnologia Web
140 $this->saldo += $valor; }
Podemos perceber que a classe conta agora possui um construtor, que inicializa a varivel $saldo com o valor 0. Um construtor pode conter argumentos, que so opcionais, o que torna esta ferramenta mais poderosa. No exemplo acima, o construtor da classe conta pode receber como argumento um valor, que seria o valor inicial da conta. Vale observar que para classes derivadas, o construtor da classe pai no automaticamente herdado quando o construtor da classe derivada chamado.
5.9 INTERAO COM O BROWSER PHP tambm permite interagir com informaes do browser automaticamente. Por exemplo, o script a seguir mostra informaes sobre o browser do usurio.
<? echo $HTTP_USER_AGENT; ?>
</body> </html> Esse cdigo em um Internet Explorer 6.0 com sistema operacional Windows 98, geraria: Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)
<html> <head><title>Aprendendo PHP</title></head> <body> <? if (strpos($HTTP_USER_AGENT,"MSIE) != 0) { echo "Voc usa Internet Explorer"; } else {
Tecnologia Web
141
echo "Voc no usa Internet Explorer"; } ?>
</body> </html>
Neste exemplo, ser apenas exibido um texto informando se est sendo utilizado o Microsoft Internet Explorer ou no, mas para outras funes poderia ser utilizado algo semelhante. bom notar o surgimento de mais uma funo no cdigo anterior: strpos(string1,string2). Essa funo retorna a posio da primeira apario de string2 em string1, contando a partir de zero, e no retorna valor algum se no ocorrer. Assim, para testar se a string $HTTP_USER_AGENT contm a string MSIE, basta testar se strpos devolve algum valor.
Utilizando formulrios HTML Por ser uma linguagem de marcao, a sintaxe do HTML na maioria dos casos exige uma tag de incio e uma de final daquele bloco. Exatamente isso que ocorre com a definio de um formulrio: uma tag no incio e outra no final, sendo que todos os elementos do formulrio devem estar entre as duas tags. Isto torna possvel a incluso de mais de um formulrio num mesmo html. As tags citadas so: <form name= action= method= enctype=> Onde temos: name: o identificador do formulrio. Utilizado principalmente em Scripts clientside (JavaScript); action: nome do script que receber os dados do formulrio ao ser submetido. Mais frente esto abordadas as maneiras de tratar esses dados recebidos;
method: mtodo de envio dos dados: get ou post; enctype: formato em que os dados sero enviados. O default urlencoded. Se for utilizado um elemento do tipo upload de arquivo (file) preciso utilizar o tipo multipart/form-data.
Tecnologia Web
142
Exemplo: <form action="exemplo.php" method="post"> (textos e elementos do form) </form> Cada elemento do formulrio deve possuir um nome que ir identific-lo no momento em que o script indicado no ACTION for tratar os dados.
A tag <input> Muitos elementos de um formulrio html so definidos pela tag <input>. Cada tipo de elemento possui parmetros prprios, mas todos possuem pelo menos dois parmetros em comum: type, que define o tipo de elemento, e name, que como j foi dito define o nome daquele elemento.
Campo de Texto <input type="text" name="" value="" size="" maxlength="">
O campo mais comum em formulrios. Exibe na tela um campo para entrada de texto com apenas uma linha.
Parmetros:
Value o valor pr-definido do elemento, que aparecer quando a pgina for carregada; Size O tamanho do elemento na tela, em caracteres; Maxlength O tamanho mximo do texto contido no elemento, em caracteres;
Campo de Texto com Mscara <input type="password" name="" value="" size="" maxlength="">
Tipo de campo semelhante ao anterior, com a diferena que neste caso os dados digitados so substitudos por asteriscos, e por isso so os mais recomenda-
Tecnologia Web
143
dos para campos que devam conter senhas. importante salientar que nenhuma criptografia utilizada. Apenas no aparece na tela o que est sendo digitado.
Parmetros: Value o valor pr-definido do elemento, que aparecer quando a pgina for carregada; Size O tamanho do elemento na tela, em caracteres; Maxlength O tamanho mximo do texto contido no elemento, em caracteres;
Checkbox <input type="checkbox" name="" value="" checked>
Utilizado para campos de mltipla escolha, onde o usurio pode marcar mais de uma opo.
Parmetros: Value o valor que ser enviado ao servidor quando o formulrio for submetido, no caso do campo estar marcado Checked O estado inicial do elemento. Quando presente, o elemento j aparece marcado;
Radio Button <input type="radio" name="" value="" checked>
Utilizado para campos de mltipla escolha, onde o usurio pode marcar apenas uma opo. Para agrupar vrios elementos deste tipo, fazendo com que eles sejam exclusivos, basta atribuir o mesmo nome a todos do grupo. Parmetros: Value o valor que ser enviado ao servidor quando o formulrio for submetido, no caso do campo estar marcado. Checked O estado inicial do elemento. Quando presente, o elemento j aparece marcado;
Tecnologia Web
144
Submit Button <input type="submit" name="" value="">
Utilizado para enviar os dados do formulrio para o script descrito na seo action da definio do formulrio
Parmetros: Value o texto que aparecer no corpo do boto.
Reset Button <input type="reset" name="" value="">
Utilizado para fazer todos os campos do formulrio retornem ao valor original, quando a pgina foi carregada. Bastante utilizado como boto limpar, mas na realidade s limpa os campos se todos eles tm como valor uma string vazia.
Button <input type="button" name="" value="">
Utilizado normalmente para ativar funes de scripts client-side (JavaScript, por exemplo). Sem essa utilizao, no produz efeito algum
TextArea <textarea cols="" rows="" name="" wrap="">texto</textarea>
Tecnologia Web
145
Exibe na tela uma caixa de texto, com o tamanho definido pelos parmetros cols e rows.
Parmetros: Cols - nmero de colunas do campo, em caracteres; Rows - nmero de linhas do campo, em caracteres; Wrap - maneira como so tratadas as quebras de linha automticas. O valor soft faz com que o texto quebre somente na tela, sendo enviado para o servidor o texto da maneira como foi digitado; O valor hard faz com que seja enviado para o servidor da maneira como o texto aparece na tela, com todas as quebras de linhas inseridas automaticamente; o valor off faz com que o texto no quebre na tela e nem quando enviado ao servidor. Value - o elemento do tipo textarea no possui o parmetro value. O valor pr-definido do campo o texto que fica entre as tags <textarea> e </textarea>.
Select <select name="" size="" multiple> <option value="">texto</option> </select> Se o parmetro size tiver o valor 1 e no houver o parmetro multiple, exibe na tela uma combo box. Caso contrrio, exibe na tela uma select list
Parmetros: Size nmero de linhas exibidas. Default: 1;
Multiple - parmetro que, se presente, permite que sejam selecionadas duas ou mais linhas, atravs das teclas Control ou Shift; option - Cada item do tipo option acrescenta uma linha ao select; value - Valor a ser enviado ao servidor se aquele elemento for selecionado. Default: o texto do item; text - valor a ser exibido para aquele item. No definido por um parmetro, mas pelo texto que fica entre as tags <option> e </option>
Tecnologia Web
146
Upload de arquivos <input type="file" name="" size="">
Exibe na tela do browser um campo de texto e um boto, que ao clicado abre uma janela para localizar um arquivo no disco. Para utilizar este tipo de componente, o formulrio dever utilizar o mtodo POST e ter o parmetro enctype com o valor "multipart/form-data".
Parmetros: Size O tamanho do campo de texto exibido. Exemplo: Ao clicar num boto Submit em um formulrio HTML as informaes dos campos sero enviadas ao servidor especificado para que possa ser produzida uma resposta. O PHP trata esses valores como variveis, cujo nome o nome do campo definido no formulrio. O exemplo a seguir mostra isso, e mostra tambm como o cdigo PHP pode ser inserido em qualquer parte do cdigo HTML: <html> <head><title>Aprendendo PHP</title></head> <body> <?php if ($texto != "") echo "Voc digitou \"$texto\"<br><br>"; ?> <form method=post action="<? echo $PATH_INFO; ?>"> <input type="text" name="texto" value="" size=10> <br> <input type="submit" name="sub" value="Enviar!"> </form> </body> </html> Ao salvar o arquivo acima e carreg-lo no browser, o usurio ver apenas um
Tecnologia Web
147
formulrio que contm um espao para digitar o texto. Ao digitar um texto qualquer e submeter o formulrio, a resposta, que o mesmo arquivo PHP (indicado pela constante $PATH_INFO, que retorna o nome do arquivo) exibir a mensagem "Voc digitou <<mensagem>>". Isso ocorre porque o cdigo PHP testa o contedo da varivel $texto. Inicialmente ele uma string vazia, e por isso nada impresso na primeira parte. Quando algum texto digitado no formulrio e submetido, o PHP passa a trat-lo como uma varivel. Como no formulrio o campo possui o nome texto, a varivel com seu contedo ser $texto. Assim, no prximo teste o valor da varivel ser diferente de uma string vazia, e o PHP imprime um texto antes do formulrio.
Cookies
Cookies so mecanismos para armazenar e consultar informaes nos browsers dos visitantes da pgina. O PHP atribui cookies utilizando a funo setcookie, que deve ser utilizada antes da tag <html> numa pgina. O uso de cookies no recomendado quando se trata de informaes sigilosas. Os dados dos cookies so armazenados no diretrio de arquivos temporrios do visitante, sendo facilmente visualizado por pessoas mal intencionadas. Alm da opo aceitar cookies que pode ser desativada a qualquer momento pelo visitante. Para uma transmisso de dados segura recomendvel o uso de sesses(ver adiante).
Setcookie(nome_do_cookie,seu_valor,tempo_de_vida,path,domnio,conex o_segura)
Nome_do_cookie = o nome que, posteriormente, se tornar a varivel e o que o servir de referncia para indicar o cookie. Seu_valor de todos os tipos. Tempo_de_vida = o tempo, em segundos, que o cookie existir no = o valor que a varivel possuir. Esse valor pode ser
computador do visitante. Uma vez excedido esse prazo o cookie se apaga de modo
Tecnologia Web
148 Se esse argumento ficar vazio, o cookie se apagar quando o
irrecupervel.
visitante fechar o browser. Path = endereo da pgina que gerou o cookie automtico Domnio = domnio ao qual pertence o cookie automtico Conexo_segura = Indica se o cookie dever ser transmitido somente em uma conexo segura HTTPS. Sesso Sesses so mecanismos muito parecidos com os tradicionais cookies. Suas diferenas so que sesses so armazenadas no prprio servidor e no expiram a menos que o programador queira apagar a sesso. Existem algumas funes que controlam sesses e esto detalhadas no captulo 12.Bibliotecas de funes. Aqui esto as funes de sesso mais usadas. Nome da funo Session_start() Session_register() Session_unregister() Argumentos No precisa de argumento A varivel sem o cifro A varivel sem o cifro
Session_is_registered() A varivel sem o cifro O session_destroy() s deve ser usado quando for da vontade do programador
acabar com todos as sesses daquele visitante, portanto muito cuidado com essa funo.
Require A funo require pe o contedo de um outro arquivo no arquivo php atual, antes de ser executado. Quando o interpretador do PHP ler este arquivo, ele encontrar todo o contedo dos requires adicionado no arquivo corrente. Require(nomedoarquivo);
Criando o hbito de usar essa funo, o programador pode vir a encontrar um erro de arquivo j declarado. Para evitar isso recomendvel que sempre que a funo require for utilizada ela seja substituda pela funo require_once.
Require_once(nome_do_arquivo);
Tecnologia Web
149
Include
A funo Include semelhante funo require, com a diferena que o cdigo do arquivo includo processado em tempo de execuo, permitindo que sejam usados includes dentro de estruturas de controle como for e while.
$arqs = array(a1.inc,a2.inc,a3.inc) ; for ($i=0;$i<count($arqs); $i++){ include($arqs[$i]); } if ($x == $y){ include($arquivo1); } else{ include($arquivo2); } /* Note que quando se utiliza a funo include Dentro de estruturas necessrio a utilizao das chaves */ Formulrios Avanados O PHP tambm entende as matrizes em forma de variveis vindas de um formulrio.
Exemplo: <form action=matrizes.php method=POST> Nome : <input type=text name=dados[nome]><br> Email : <input type=text name=dados[email]><br> Esportes de preferncia: <br> <select multiple name=esportes[]> <option value=futebol>Futebol</option> <option value=vlei>Vlei</option> </select><br>
Tecnologia Web
150 <input type=submit value=enviar>
</form> Depois de enviado, os campos se tornaro variveis e campos como este dados[nome] se transformaro em arrays que no deixam de ser variveis.
Arquivos Remotos Nas funes que trabalham com arquivos, possvel utilizar URLs para acessar arquivos em outros servidores na Web ou no prprio servidor. As funes aqui utilizadas sero detalhadas mais frente no captulo Biblioteca de Funes.
Exemplo: Lendo $f = fopen(http://www.php.net,r); if (!$f){ echo Erro ao abrir a URL.<br>; exit; } while (!feof($f)){ $s = fgets($f,256); echo $s; } fclose($f); Escrevendo $f = fopen(ftp://user:senha@site,w); if (!$f){ echo Erro ao abrir a URL.<br>; exit; } else{ fputs($f,texto a ser escrito);
Tecnologia Web
151 fputs($f,mais texto a ser escrito); fputs($f,mais texto a ser escrito); fputs($f,mais texto a ser escrito); fputs($f,mais texto a ser escrito); fclose;
Tratamento de erros Existem quatro tipos(at a verso 4.0) de erros no PHP para indicar a gravidade do erro encontrado ou ocorrido. Eles so:
1. Erros de funes (function errors) 2. Avisos (warnings) 3. Erros de processamento (parser error) 4. Observaes (notice)
As mensagens de erro so uma coisa com que os programadores devem prestar muita ateno, afinal nenhum programador quer por no ar um sistema que quando o primeiro visitante entra aparea uma mensagem de erro. Para evitar essas inconvenincias use sempre um @ antes da cada chamada as funes. Se a opo track_errors no arquivo php.ini estiver habilitada, a mensagem de erro
poder ser encontrada na varivel global $php_errormsg. A chamada da funo ficaria assim: @strtolower(); Essa funo deixaria todos os caracteres em minsculo, mas como no foi passado nenhum argumento essa funo deveria exibir uma mensagem de erro.
5.10 ACESSANDO O MYSQL VIA PHP Neste documento todos os exemplos referentes a acesso de bancos de dados utilizaro o gerenciador de banco de dados MySQL, que pode ser copiado gratuitamente no site http://www.mysql.org.
Tecnologia Web
152
Para interagir com uma base de dados SQL existem trs comandos bsicos que devem ser utilizados: Um que faz a conexo com o servidor de banco de dados, um que seleciona a base de dados a ser utilizada e um terceiro que executa uma query SQL.
Conexo com o servidor
A conexo com o servidor de banco de dados mySQL em PHP feita atravs do comando mysql_connect, que tem a seguinte sintaxe:
int mysql_connect(string /*host [:porta]*/ , string /*login*/ , string /*senha*/ );
Os parmetros so bastante simples: o endereo do servidor(host), o nome do usurio (login) e a senha para a conexo. A funo retorna um valor inteiro, que o identificador da conexo estabelecida e dever ser armazenado numa varivel para ser utilizado depois. No nosso exemplo, temos como servidor de banco de dados a mesma mquina que roda o servidor http, como login o usurio root e senha phppwd:
$conexao = mysql_connect(localhost, root, phppwd);
Assim, se a conexo for bem sucedida (existir um servidor no endereo especificado que possua o usurio com a senha fornecida), o identificador da conexo fica armazenado na varivel $conexo.
Seleo do banco de dados Uma vez conectado, preciso selecionar o banco de dados existente no servidor com o qual desejamos trabalhar. Isso feito atravs da funo int mysql_select_db, que possui a seguinte sintaxe: int mysql_select_db(string /*nome_base*/, int /*conexao*/ ); O valor de retorno 0 se o comando falhar, e 1 em caso de sucesso. O nome da base de dados a selecionar o primeiro parmetro fornecido, seguido pelo identificador
da conexo. Se este for omitido, o interpretador PHP tentar utilizar a ltima conexo esta-
Tecnologia Web
153
belecida. Recomenda-se sempre explicitar esse valor, para facilitar a legibilidade do cdigo. No nosso exemplo, a base de dados a ser selecionada possui o nome ged:
mysql_select_db(ged, $conexao);
Aps a execuo desse comando qualquer consulta executada para aquela conexo utilizar a base de dados selecionada. Execuo de queries SQL Aps estabelecida a conexo e selecionada a base de dados a ser utilizada, quase
toda a interao com o servidor mySQL pode ser feita atravs de consultas escritas em SQL (Structured Query Language), com o comando mysql_query, que utiliza a seguinte sintaxe:
int mysql_query(string consulta, int [conexao] ); O valor de retorno 0 se falhar ou 1 em caso de sucesso. Sucesso aqui significa que a consulta est sintaticamente correta e foi executada no servidor. Nenhuma informao sobre o resultado retornada deste comando, ou at mesmo se o resultado o
esperado. No caso da consulta ser um comando SELECT, o valor de retorno um valor interno que identifica o resultado, que poder ser tratado com a funo mysql_result() e outras. A string query no deve conter ponto-e-vrgula no final do comando, e o identificador da conexo opcional. Vamos criar uma tabela como exemplo:
$cria = CREATE TABLE exemplo (codigo INT AUTO_INCREMENT PRIMARY KEY, nome CHAR(40), email CHAR(50)); mysql_query($cria, $conexao); Agora vejamos como ficou o cdigo completo para executar uma query SQL numa base de dados mySQL, com um exemplo que cria uma tabela chamada exemplo e adiciona alguns dados: $conexao = mysql_connect(localhost, root, phppwd); mysql_select_db(ged, $conexao); $cria = CREATE TABLE exemplo (codigo INT AUTO_INCREMENT PRIMARY KEY, nome CHAR(40), email CHAR(50)); $insere1 = INSERT INTO exemplo (nome,email) VALUES (Mauricio
Tecnologia Web
154
Vivas,vivas@usa.net); $insere2 = INSERT INTO exemplo (nome,email) VALUES (Jose da Silva,jose@teste.com); $insere3 = INSERT INTO exemplo (nome,email) VALUES (Fernando Henrique Cardoso,fhc@planalto.gov.br); $insere4 = INSERT INTO exemplo (nome,email) VALUES (Bill Clinton,president@whitehouse.gov); mysql_query($cria, $conexao); mysql_query($insere1, $conexao); mysql_query($insere2, $conexao); mysql_query($insere3, $conexao); mysql_query($insere4, $conexao); Tratamento de resultados de query SELECT Ao executar uma query SQL SELECT atravs do comando mysql_query, o identificador do resultado deve ser armazenado numa varivel que pode ser tratada de diversas formas. Duas maneiras interessantes de faz-lo usam o comando mysql_result e o comando mysql_fetch_row, respectivamente. O comando mysql_result tem a seguinte sintaxe: int mysql_result(int resultado, int linha, mixed [campo]); Onde resultado o identificador do resultado, obtido com o retorno da funo mysql_query, linha especifica a tupla a ser exibida, j que uma query SELECT pode retornar diversas tuplas, e campo o identificador do campo a ser exibido, sendo o tipo descrito como mixed pela possibilidade de ser de diversos tipos (neste caso, inteiro ou string). Vejamos um exemplo utilizando a tabela criada anteriormente: $consulta = SELECT nome, email FROM exemplo WHERE email LIKE vivas; $resultado = mysql_query($consulta, $conexao); printf("Nome: ", mysql_result($resultado,0,"nome"), <br>\n);
Tecnologia Web
155
printf("e-mail: ", mysql_result($resultado,0,"email"),<br>); Com o exemplo acima, o resultado ser: Nome: Mauricio Vivas<br> e-mail: vivas@usa.net<br> importante notar que a utilizao desta funo um pouco trabalhosa, j que no caso de um resultado com vrias linhas preciso controlar o nmero de linhas para trat-las (pode-se utilizar a funo mysql_num_rows(int resultado), que retorna o nmero de linhas de um resultado), e no caso de uma alterao no nome do campo preciso alterar tambm a maneira de trat-lo. Por isso mais aconselhvel que se use uma outra funo, como por exemplo mysql_fetch_row, que possui a seguinte sintaxe: array mysql_fetch_row(int result); A varivel resultado o identificador da memria de resultados, obtido como retorno da funo mysql_query. O resultado produzido por esta funo de retirar a primeira linha da memria de resultados, se houver, e coloc-la num array. Assim torna-se mais fcil tratar um resultado com vrias linhas, e sem utilizar os nomes dos campos na rotina de tratamento do resultado: $consulta = SELECT nome, email FROM exemplo; $resultado = mysql_query($consulta, $conexao); echo "<table border=1>\n"; echo "<tr><td>Nome</td><td>e-mail</tr>\n"; while ($linha = mysql_fetch_row($resultado)) { printf("<tr><td>$linha[0]</td>); printf("<td>$linha[1]</td></tr>); } echo "</table>\n"; O cdigo acima ir imprimir todos os registros da tabela exemplo numa tabela html. Se o programador desejar pular alguma(s) linha(s) do resultado, poder utilizar a funo mysql_data_seek, que tem por objetivo definir qual ser a prxima linha da memria de resultados a ser impressa. Sua sintaxe :
Tecnologia Web
156
int mysql_data_seek(int resultado, int linha); Sendo resultado o identificador do resultado e linha o numero da linha. Retorna 0 em caso de falha, e um valor diferente de zero em caso de sucesso. Existem diversas outras funes para o tratamento de resultados, que armazenam as linhas em arrays e objetos, assim como outras funes para administrar o banco de dados, mas como este documento trata-se de uma introduo, inicialmente no tratar tpicos mais avanados.
5.11 ACESSANDO O POSTGRESQL VIA PHP Estabelecendo conexes Para acessar bases de dados num servidor Postgres, necessrio antes estabelecer uma conexo. Para isso, deve ser utilizado o comando pg_connect, ou o pg_pconnect. A diferena entre os dois comandos que o pg_pconnect estabelece uma conexo permanente, ou seja, que no encerrada ao final da execuo do script. As assinaturas dos dois comandos so semelhantes, como pode ser verificado a seguir: int pg_connect(string host, string porta, string opcoes, string tty, string db); int pg_pconnect(string host, string porta, string opcoes, string tty, string db); O valor de retorno um inteiro que identifica a conexo, ou falso se a conexo falhar. Uma conexo estabelecida com o comando pg_connect encerrada ao final da execuo do script. Para encerr-la antes disso deve ser utilizado o comando pg_close, que tem a seguinte assinatura: int pg_close(int identificador da conexo ); IMPORTANTE: o comando pg_close no encerra conexes estabelecidas com o comando pg_pconnect. Os comandos pg_connect e pg_pconnect tambm podem ser utilizados da seguinte forma:
Tecnologia Web
157
pg_connect("dbname=db port=n host=localhost tty=tty options=opcoes user=usuario password=senha");
Realizando consultas Para executar consultas SQL no Postgres, utiliza-se o comando pg_exec, que tem a seguinte assinatura: int pg_exec(int conexao, string query ); Onde query a expresso SQL a ser executada, sem o ponto-e-vrgula no final, e conexao o identificador da conexo a ser utilizada. A consulta ser executada na base de dados selecionada quando for efetuada a conexo com o banco. Para saber qual a base de dados selecionada, basta utilizar a funo string pg_dbname, que tem a seguinte assinatura: string pg_dbname(int conexo); bom lembrar que uma consulta no significa apenas um comando SELECT. A consulta pode conter qualquer comando SQL aceito pelo banco. O valor de retorno falso se a expresso SQL for incorreta, e diferente de zero se for correta. No caso de uma expresso SELECT, as linhas retornadas so armazenadas numa memria de resultados, e o valor de retorno o identificador do resultado. Alguns comandos podem ser realizados com esse resultado:
Verificando o erro na execuo de uma query
Para ter acesso mensagem de erro no caso de falha na execuo de uma query SQl, basta utilizar o comando pg_errormessage(): string pg_errormessage(int connection);
Apagando o resultado int pg_freeresult(int result); O comando pg_freeresult deve ser utilizado para apagar da memria o resultado indicado. No PHP 4, este comando tornou-se obsoleto, j que o interpretador
Tecnologia Web
158
trata de apagar o resultado automaticamente em caso de no ser mais utilizado.
Nmero de linhas int pg_numrows(int result); O comando pg_numrows retorna o nmero de linhas contidas num resultado.
Utilizando os resultados Existem diversas maneiras de ler os resultados de uma query SELECT. As mais comuns sero vistas a seguir: int pg_result(int result, int linha, mixed [campo] );
Retorna o contedo de uma clula da tabela de resultados.
result o identificador do resultado; linha o nmero da linha, iniciado por 0; campo uma string com o nome do campo, ou um nmero correspondente ao nmero da coluna. Se foi utilizado um alias na consulta, este deve ser utilizado no comando pg_result. Este comando deve ser utilizado apenas para resultados pequenos. Quando o volume de dados for maior, recomendado utilizar um dos mtodos a seguir: array pg_fetch_array(int result, int linha);
L uma linha do resultado e devolve um array, cujos ndices so os nomes dos campos. O ndice das linhas iniciado por zero. array pg_fetch_row(int result, int linha); Semelhante ao comando anterior, com a diferena que os ndices do array so numricos, iniciando pelo 0 (zero).
5.12 ENVIANDO EMAIL Para enviar e-mail atravs de um script PHP bastante simples. Basta utilizar
Tecnologia Web
159
a funo mail: mail(string to, string subject, string message, string [headers]); onde: to string contendo o e-mail do destinatrio; subject assunto da mensagem; message o corpo da mensagem. headers outras informaes de cabealho, como por exemplo from, replyto, bcc, etc. Para facilitar a compreenso dos scripts, os argumentos (como geralmente so strings grandes) devem ser atribudos a variveis antes da chamada da funo mail.
5.13 EXEMPLOS DIVERSOS DE CDIGO PHP PARTE I Inicio.php <?php $nome = 'Fernando'; $mostra1 = "Meu nome $nome!"; $mostra2 = 'Meu nome $nome!'; // Aqui carrega com aspas duplas // Aqui carrega com aspas simples
echo "$mostra1 este resultado das aspas duplas <br>"; echo "$mostra2 este resultado das aspas simples"; ?> cookie1.php
<?php setcookie('nome', 'Fernando'); // grava o Cookie com a varivel nome e valor = Fernando setcookie('cao', 'Mylla'); // No mesmo Cookie outra varivel cao e valor = Mylla echo "$cao pertence a $nome";
Tecnologia Web
160
?> cookie2.php
<?php setcookie('nome', 'tem o olho azul'); // altera o valor da varivel nome echo "$cao branquinha e $nome"; ?>
data1.php
<?php $niver = mktime(13,30,0,4,13,2000); $niverEmTexto = date('d \de F \de Y - g:i a', $niver); echo "Mylla nasceu em $niverEmTexto."; ?>
data2.php <html> <form>
<SELECT NAME="Escolha o dia:"> <?php $dia = time(); for ($i = 0; $i < 7; $i++) { echo '<option value="'.date('d',$dia).'">'.date('F d',$dia); $dia += 86400; } ?> </SELECT>
</form> </html>
Tecnologia Web
161
data3.php
<html> <?php $arrDia = array('Domingo','Segunda','Tera','Quarta','Quinta', 'Sexta','Sbado'); $arrMes = array( 1 => 'Janeiro','Fevereiro','Maro','Abril','Maio','Junho', 'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'); ?> <form> Selecione a data completa<br> <SELECT NAME="semana"> <?php for ($i = 0; $i < 7; $i++) { echo "<OPTION> $arrDia[$i]"; } echo '</SELECT> <SELECT NAME="dia">'; for ($i = 1; $i <= 31; $i++) { echo "<OPTION> $i"; } echo '</SELECT> de <SELECT NAME="mes">'; for ($i = 1; $i <= 12; $i++) { echo "<OPTION VALUE=\"$i\"> $arrMes[$i]"; } echo '</SELECT> de <SELECT NAME="ano">'; $start_year = date('Y') - 10; $end_year = $start_year + 20; for ($i = $start_year; $i <= $end_year; $i++) { echo "<OPTION> $i"; } ?> </form> </html>
Tecnologia Web
162
data4.php
<?php $niver = mktime(13,30,0,4,13,2000); echo 'A Mylla nasceu em '.date('d \de F \de Y - g:i a', $niver); echo '<br>'; echo 'Mas em GMT ela nasceria '.gmdate('d \de F \de Y - g:i a', $niver); ?> variavel.php
<?php $comeco = "Aprendendo "; $valor = 2 + 3; $valor--;
// Desse jeito echo "$comeco PHP $valor";
// Colocar um saltador de linha echo "<br><br>";
// ou desse jeito echo $comeco. " PHP ".$valor; ?> Array.php
<?PHP $fruta = array('banana', 'tomate', 'mamo'); /* Curiosidade aqui tomate uma fruta e no um legume ou algo assim como muitos pensam */ $MeuFavorito = array('animal' => 'cachorro', 'carro' => 'kadett'); $planExcel =
Tecnologia Web
163
array( array('1 Clula da 1 Linha', '2 Clula da 1 Linha'), array('1 Clula da 2 Linha', '2 Clula da 2 Linha ') );
// Exemplo das funes
echo "Funes relacionadas aos Arrays"; echo "<br><br>"; echo "Exemplo da funo count: ".count($fruta); echo "<br>"; echo "Exemplo da funo sizeof: ".sizeof($fruta); echo "<br>"; echo "Exemplo da funo reset: ".reset($fruta); echo "<br>"; echo "Exemplo da funo end: ".end($fruta); echo "<br>"; echo "Exemplo da funo prev: ".prev($fruta); echo "<br>"; echo "Exemplo da funo next: ".next($fruta); echo "<br>"; echo "Exemplo da funo pos: ".pos($fruta); echo "<br>"; echo "Exemplo da funo key: ".key($fruta); echo "<br>"; $cesta = each($fruta); echo "Exemplo da funo each: ".pos($cesta); echo "<br>"; echo "Array Original: ".$fruta[0]." | ".$fruta[1]." | ".$fruta[2]; shuffle($fruta); echo "<br>"; echo "Depois da funo shuffle: ".$fruta[0]." | ".$fruta[1]." | ".$fruta[2]; echo "<br>"; sort($fruta); echo "Depois da funo sort: ".$fruta[0]." | ".$fruta[1]." | ".$fruta[2];
Tecnologia Web
164
echo "<br>"; rsort($fruta); echo "Depois da funo rsort: ".$fruta[0]." | ".$fruta[1]." | ".$fruta[2]; echo "<br>"; ?> repetir.php
<?PHP echo "Este conjunto foi obtido com o comando FOR<br>"; for ($i = 0; $i < 10; $i++) { echo "Este a $i Linha<br>"; } echo "<br><br>"; echo "Este conjunto foi obtido com o comando WHILE<br>"; $i = 0; while ($i < 10) { echo "Este a $i Linha<br>"; $i++; } echo "<br><br>"; echo "Este conjunto foi obtido com o comando DO WHILE<br>"; $i = 0; do { echo "Este a $i Linha<br>"; $i++; } while ($i < 10); ?> condicao.php <?PHP // Variveis usadas $suaIdade = 36; $seuSexo = "M"; echo "Este exemplo foi obtido com o comando IF<br>";
Tecnologia Web
165
if ($suaIdade > 20) { echo "Voc atingiu a maioridade"; } elseif ($suaIdade > 17) { echo "Voc est na adolescncia"; } else { echo "Voc ainda est crescendo"; } echo "<br><br>"; echo "Este conjunto foi obtido com o comando IF de Linha<br>"; echo (($seuSexo == "M") ? "Voc Homem" : "Voc Mulher"); echo "<br><br>"; echo "Este conjunto foi obtido com o comando SWITCH<br>"; switch ($suaIdade) { case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: case 8: case 9: case 10: case 11: case 12: case 13: case 14: case 15: case 16: case 17: echo "Voc ainda est crescendo"; break; case 18: case 19: case 20: echo "Voc est na adolescncia"; break; default: echo "Voc atingiu a maioridade"; } ?> basico.php
<html> <body> <?php if ($nome == "") { ?> <form method="POST"> <input type=text name="nome" value="Fernando Anselmo">
Tecnologia Web
166
<input type=submit> </form> <?php } else echo "Bom dia $nome"; ?> </body> </html> processa.php
<?php // 1a. Parte switch ($rgVinho) { case 'br' : $msgVinho = 'O Vinho branco excelente para o corao'; break; case 'tt' : $msgVinho = 'O Vinho tinto excelente para refinar o sangue'; break; default: $msgVinho = 'O Merlot excelente para esquentar a noite'; break; } // 2a. Parte $qtsVezes = count($bebi); if ($qtsVezes <= 1) { $msgVezes = 'e voc bebe moderadamente.'; } elseif ($qtsVezes > 1 && $qtsVezes < 4) { $msgVezes = 'e melhor voc ir com calma.'; } else { $msgVezes = 'mas como voc bebe melhor procurar um posto do AA.'; }
// 3a. Parte echo "Como vai $edNome. $msgVinho $msgVezes"; ?> bebendo.html <html> <form method="POST" action="processa.php" >
Tecnologia Web
167
Seu Nome: <input type=TEXT NAME="edNome"> <br><br> Vinho preferido: <input type=RADIO name="rgVinho" value="br" CHECKED>Vinho Branco <input type=RADIO name="rgVinho" value="mr">Merlot <input type=RADIO name="rgVinho" value="tt" >Tinto <br><br> Hora ideal para beber: <input type=CHECKBOX name="bebi[]"value="m">Manh <input type=CHECKBOX name="bebi[]"value="a">Almoo <input type=CHECKBOX name="bebi[]"value="j">Jantar <input type=CHECKBOX name="bebi[]"value="d">A dois <br><br> <input type=SUBMIT VALUE="Click Aqui"> </form> </html>
5.14 EXEMPLOS DIVERSOS DE CDIGO PHP PARTE II criartab.php <?php $dbNome = "pessoal"; $tbNome = "cliente"; $db = mysql_connect("localhost", "root");
$elimina = "DROP TABLE $tbNome"; $criacao = "CREATE TABLE $tbNome ( " ." seq_cliente int," ." nom_cliente varchar(80))"; $indice = "CREATE UNIQUE INDEX indCli ON $tbNome(seq_cliente)";
$resDrop = mysql_db_query($dbNome, $elimina); $resCria = mysql_db_query($dbNome, $criacao);
Tecnologia Web
168
$resIndx = mysql_db_query($dbNome, $indice);
if ($resDrop > 0) { echo "Tabela $tbNome eliminada.<br>"; } else { echo "Tabela $tbNome no existe.<br>"; }
if ($resCria > 0) { echo "Tabela $tbNome criada.<br>"; } else { echo "Tabela $tbNome no pode ser criada.<br>"; }
if ($resIndx > 0) { echo "ndice da Tabela $tbNome criado.<br>"; } else { echo "ndice da Tabela $tbNome no pode ser criado.<br>"; }
mysql_close(); ?> informa.php
<?php phpinfo(); ?>
5.15 EXEMPLOS DIVERSOS DE CDIGO PHP PARTE III altera.php <?php $res1 = mysql_connect("localhost", "root"); if ($res1) {
Tecnologia Web
169
$sql = "update cliente set " ." nom_cliente = '$edNome'," ." sex_cliente = '$rgSexo'," ." end_cliente = '$edEndereco' " ." where seq_cliente = $hdSequencial"; $res2 = mysql_db_query("pessoal", "$sql", $res1); if ($res2) { echo("Cliente modificado"); } else { echo("Erro na alterao ".mysql_error()."\n"); } } else { echo("Erro na tentativa de conexo ".mysql_error()."\n"); } mysql_close($res1); ?>
consulta.php <html> <head> <title>Consulta Registros</title> </head>
<? $res1 = mysql_connect("localhost", "root"); $sql = "select * from cliente"; $res2 = mysql_db_query("pessoal", "$sql", $res1); ?>
<body> <h1>Consulta de Clientes</h1>
<table border=1 width=100%>
Tecnologia Web
170
<tr> <th>Seq</th> <th>Nome</th> <th>Sexo</th> <th>Endereo</th> </tr>
<? while($valor = mysql_fetch_array($res2)) { ?> <tr> <td><?=$valor["seq_cliente"]?></td> <td><?=$valor["nom_cliente"]?></td> <td><?=(($valor["sex_cliente"] == "M")?"Masculino":"Feminino")?></td> <td><?=$valor["end_cliente"]?></td> </tr> <? } mysql_close($res1); ?>
</table> </body> </html>
calend.php <? $d = mktime(0,0,0, $mes, 1, $ano); $diaSem = date('w',$d);
echo "<pre>\n"; echo "---------------------------\n"; echo "$mes / $ano\n"; echo "---------------------------\n"; echo "Dom Seg Ter Qua Qui Sex Sb\n";
Tecnologia Web
171
// Coloca os dias em Branco for ($i = 0; $i < $diaSem; $i++) { echo " } ";
// Enquanto houver dias
for ($i = 2; $i < 33; $i++) { $linha = date('d',$d); if ($i > 3) { } echo " $linha ";
// Se Sbado desce uma linha if (date('w',$d) == 6) { echo "\n"; } $d = mktime(0,0,0, $mes, $i, $ano); if (date('d',$d) == "01") { break; } } echo "\n---------------------------"; echo "\n</pre>"; ?>
exclui.php
<?php $res1 = mysql_connect("localhost", "root");
if ($res1){ $sql = "delete from cliente " ." where seq_cliente = $hdSequencial"; $res2 = mysql_db_query("pessoal", "$sql", $res1); if ($res2) { echo("Cliente excludo");
Tecnologia Web
172
} else { echo("Erro na excluso ".mysql_error()."\n"); } } else { echo("Erro na tentativa de conexo ".mysql_error()."\n"); }
mysql_close($res1); ?>
informa.php
<?php phpinfo(); ?>
inclui.php
<?php $res1 = mysql_connect("localhost", "root");
if ($res1) { $sql = "insert into cliente " ." (nom_cliente, sex_cliente, end_cliente)" ." values ('$edNome','$rgSexo','$edEndereco')"; $res2 = mysql_db_query("pessoal", "$sql", $res1); if ($res2) { echo ("Novo cliente adicionado"); } else { echo("Erro de incluso ".mysql_error()."\n"); } } else { echo("Erro de conexo ".mysql_error()."\n"); }
Tecnologia Web
173
mysql_close($res1); ?> seldata.php <html> <?php

$arrMes = array( 1 => 'Janeiro','Fevereiro','Maro','Abril','Maio','Junho', 'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro');
?> <form action="calend.php" method=POST> Selecione ms e o ano para visualizar o Calendrio: <br><br> <?php
echo '<SELECT NAME="mes">'; for ($i = 1; $i <= 12; $i++) { echo "<OPTION VALUE=\"$i\"> $arrMes[$i]";
} echo '</SELECT> de <SELECT NAME="ano">'; $inc_ano = date('Y') - 10; $fim_ano = $inc_ano + 20; for ($i = $inc_ano; $i <= $fim_ano; $i++) { echo "<OPTION> $i"; } ?> </select> <br><br> <input type="submit" value="Click Aqui"> </form> </html> senha.php <?PHP $sopinha = "abcdefghijkmnpqrstuvwxyz23456789";
Tecnologia Web
174
srand((double)microtime()*1000000); for($i=0; $i<8; $i++) { $password .= $sopinha[rand()%strlen($sopinha)]; } echo "Sua senha $password"; ?> showaltera.php <html> <head> <title>Altera Registros</title> </head> <? $res1 = mysql_connect("localhost", "root"); $sql = "select * from cliente where seq_cliente = $edSequencial"; $res2 = mysql_db_query("pessoal", "$sql", $res1); $valor = mysql_fetch_array($res2); if ($valor["seq_cliente"] > 0) { ?>
<form name="showCliente" action="altera.php" method="post"> <h1>Alterao de Clientes</h1> <input type="hidden" name="hdSequencial" value="<?=$valor["seq_cliente"];?>"> <p><b>Nome: </b><input type="text" name="edNome" size=40 maxlength=80 value="<?=$valor["nom_cliente"];?>"> </p> <p><b>Sexo: </b> <input type="radio" name="rgSexo" value="M" <? if ($valor["sex_cliente"] == "M") { echo " CHECKED"; } ?> >Masculino</input> <input type="radio" name="rgSexo" value="F" <? if ($valor["sex_cliente"] == "F") { echo " CHECKED"; } ?> >Feminino</input> </p> <p><b>Endereo: </b>
Tecnologia Web
175
<textarea name="edEndereco" rows="3" cols="40">

<?=$valor["end_cliente"];?> </textarea> </p> <center><input type="submit" value=" Altera "></center> </form> <? } else { echo "Cliente no encontrado"; } mysql_close($res1); ?>
</html> showexclui.php <html> <head> <title>Exclui Registros</title> </head> <? $res1 = mysql_connect("localhost", "root"); $sql = "select * from cliente where seq_cliente = $edSequencial"; $res2 = mysql_db_query("pessoal", "$sql", $res1); $valor = mysql_fetch_array($res2); if ($valor["seq_cliente"] > 0) { ?> <form name="showCliente" action="exclui.php" method="post"> <h1>Excluso de Clientes</h1> <input type="hidden" name="hdSequencial" value="<?=$valor["seq_cliente"];?>"> <p><b>Nome:</b><?=$valor["nom_cliente"];?></p> <p><b>Sexo:</b><?=($valor["sex_cliente"] == "M"?"Masculino":"Feminino");?> <p><b>Endereo:</b><?=$valor["end_cliente"];?></p> <center><input type="submit" value=" Exclui "></center> </form> <?
Tecnologia Web
176
} else { echo "Cliente no encontrado"; } mysql_close($res1); ?> </html>
tstacesso.php
<html> <head> <title>Consulta Registros</title> </head> <? require("Local.cla"); $acc = new AcessoLoc; $acc->localiza("select * from Cliente"); ?> <body> <h1>Consulta de Clientes</h1> <table border=1 width=100%> <tr> <th>Seq</th> <th>Nome</th> <th>Sexo</th> <th>Endereo</th> </tr> <? while($acc->proxRegistro()) { ?> <tr> <td><?=$acc->RegAtual["seq_cliente"]?></td> <td><?=$acc->RegAtual["nom_cliente"]?></td> <td><?=(($acc->RegAtual["sex_cliente"] == "M")?"Masculino":"Feminino")?></td> <td><?=$acc->RegAtual["end_cliente"]?></td> </tr> <?
Tecnologia Web
177
} ?> </table> </body> </html>
valcartao.php
<?php function teste($rgCartao, $nuCartao = 'desconheo') { $rgCartao = strtolower($rgCartao); $nuCartao = ereg_replace('[-[:space:]]', '',$nuCartao); if ($rgCartao == 'desconheo') { } // se nada foi especificado elseif ($rgCartao == 'mast'){ if (strlen($nuCartao) != 16 || !ereg('5[1-5]', $nuCartao)) return "Carto com nmero Invlido"; } elseif ($rgCartao == 'visa'){ if ((strlen($nuCartao) != 13 && strlen($nuCartao) != 16) || substr($nuCartao, 0, 1) != '4') return "Carto com nmero Invlido"; } elseif ($rgCartao == 'amex'){ if (strlen($nuCartao) != 15 || !ereg('3[47]', $nuCartao)) return "Carto com nmero Invlido"; } elseif ($rgCartao == 'disc'){ if (strlen($nuCartao) != 16 || substr($nuCartao, 0, 4) != '6011') return "Carto com nmero Invlido"; } else { return "Tipo no foi informado"; }
$dig = toCharArray($nuCartao);
Tecnologia Web
178
$numdig = sizeof ($dig); $j = 0; for ($i=($numdig-2); $i>=0; $i-=2){

$dbl[$j] = $dig[$i] * 2; $j++; }
$dblsz = sizeof($dbl); $validate =0; for ($i=0;$i<$dblsz;$i++){

$add = toCharArray($dbl[$i]); for ($j=0;$j<sizeof($add);$j++){ $validate += $add[$j];
} $add = ''; } for ($i=($numdig-1); $i>=0; $i-=2){ $validate += $dig[$i]; } if (substr($validate, -1, 1) == '0') return "Carto correto"; else return "Carto com digito invlido"; } function toCharArray($input){
$len = strlen($input); for ($j=0;$j<$len;$j++){ $char[$j] = substr($input, $j, 1); } return ($char);
} echo teste($rgCartao, $nuCartao); ?> altcliente.html <html> <head>
Tecnologia Web
179
<title>Altera Registros</title> </head> <form name="altCliente" action="showAltera.php" method="post"> <h1>Alterao de Clientes</h1> <p><b>Sequencial: </b><input type="text" name="edSequencial" size=20 maxlength=11> </p> <center><input type="submit" value=" Pesquisa "></center> </form> </html> exccliente.html <html> <head> <title>Exclui Registros</title> </head>
<form name="excCliente" action="showExclui.php" method="post"> <h1>Excluso de Clientes</h1> <p><b>Sequencial: </b><input type="text" name="edSequencial" size=20 maxlength=11> </p> <center><input type="submit" value=" Pesquisa "></center> </form> </html> inccliente.html <html> <head> <title>Inclui Registros</title> </head> <form name="incCliente" action="insere.php" method="post"> <h1>Incluso de Clientes</h1> <p><b>Nome: </b><input type="text" name="edNome" size=40 maxlength=80>
Tecnologia Web
180
</p> <p><b>Sexo: </b> <input type="radio" name="rgSexo" value="M" CHECKED>Masculino <input type="radio" name="rgSexo" value="F">Feminino </p> <p><b>Endereo: </b> <textarea name="edEndereco" rows="3" cols="40"></textarea> <br><br> </p> <center><input type="submit" value=" Inclui "></center> </form> </html> selcartao.html <html>
<form method="POST" action="valCartao.php">
Selecione o Tipo do Carto: <input type=RADIO name="rgCartao" value="Amex"><img src="ccamex.gif" border="0"> <input type=RADIO name="rgCartao" value="Disc"><img src="ccdisc.gif" border="0"> <input type=RADIO name="rgCartao" value="Mast"><img src="ccmast.gif" border="0"> <input type=RADIO name="rgCartao" value="Visa"><img src="ccvisa.gif" border="0"> <br><br> Informe o nmero do Carto: <input type=TEXT name="nuCartao"> <br><br> <input type="submit" value="Click Aqui"> </form> </html>
Tecnologia Web
181
BIBLIOGRAFIA A apostila foi baseada no manual de PHP, disponvel em www.php.net, e em
diversos tutoriais disponveis no site www.phpbuilder.com. Esses dois endereos contm uma vasta documentao sobre a linguagem, alm de endereos para listas de discusso, onde pode-se solicitar ajuda de programadores mais experientes. Uma boa referncia em portugus a lista PHP para quem fala Portugus, que pode ser assinada no endereo www.egroups.com/group/php-pt/. Em ingls, alm dos endereos citados acima, uma boa fonte o site PHPWizard, que pode ser encontrado em www.phpwizard.net. Tambm em ingls, uma documentao mais completa sobre cookies pode ser encontrada em www.netscape.com/newsref/std/cookie_spec.html. Site oficial do PHP Site do projeto Zend que originou o PHP4 Site do servidor web Apache, que amplamente utilizado e compatvel com o PHP Site da lista principal de discusso de PHP no Brasil Site com diversos exemplos de PHP. timo para iniciantes Site com diversas classes em PHP para utilizar Site com diversos artigos e tutoriais Artigos e informaes sobre PHP para WebMasters Tutorial de PHP com MySQL Como criar um site de busca, como o Yahoo!, em PHP e MySQL. Diversos projetos, tutoriais e informaes sobre o PHP PHP Knowledge Base http://www.br.php.net http://www.php.net http://www.zend.org http://www.apache.org
http://www.allfinder.com.br/php
http://www.weberdev.com
http://www.thewebmasters.net/php http://www.phpbuilder.com http://www.devshed.com/Server_Side/PHP http://www.hotwired.com/webmonkey/99/21/index2a.html http://webreference.com/perl/xhoo/php1
http://www.phpwizard.net
http://e-gineer.com/phpkb

Apostila TecWeb

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Apostila TecWeb

Diunggah oleh

Hak Cipta:

Format Tersedia

CENTRO DE EDUCAO TECNOLGIA DO AMAZONAS

INSTITUTO BENJAMIN CONSTANT

HABILITAO EM DESENVOLVIMENTO DE SOFTWARE

CURSO DE TCNICO EM INFORMTICA

1.9.5 Addware ......................................................................................................................... 26 1.10 CORREIO ELETRONICO .............................................................................................. 26

WWW Telnet Talk Finger

Enviando dados para o Servidor HTTP

GET /teste/index.html CRLF

telnet www.guia-aju.com.br 80 Trying 200.241.59.16... Connected to www.guia-aju.com.br.

Guerra nas Estrelas Episdio II O Ataque dos Clones: http://www.starwars.com/episode-ii/

Matrix Reloaded http://whatisthematrix.warnerbros.com/

Jornada nas Estrelas Nmesis: http://www.startrek.com/production/startrekx/default.asp

Voc chegar a seguinte tela:

Exerccio: Download e instalao do Quicktime

texto) fruto do "casamento" dos padres HyTime e SGML.

2.1 HTMLYTIME HYPERMEDIA/TIME-BASED DOCUMENT STRUCTURING

2.5 PUBLICAO DE DOCUMENTOS NA INTERNET (SITES)

<HEAD> <TITLE> Pgina do Fulano de Tal </TITLE> </HEAD>

Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html

<FONT COLOR="red"> Texto </FONT>

Produzir na pgina: a palavra Texto escrita na cor vermelha.

Tamanho - Veja a formatao a seguir:

<FONT SIZE=3> Texto </FONT>

<FONT SIZE=+2> Letra maior </FONT> Letra normal

<FONT SIZE=-2> Letra menor </FONT>

Letra maior Letra normal Letra menor

<FONT FACE="Arial"> Texto </FONT>

Produzir: a palavra Texto com a fonte (tipo de letra) Arial.

Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html

2.6.4 Cabealhos H seis nveis de cabealhos em HTML, de <H1> a <H6>:

Este um cabealho de nvel 1

Os cabealhos no podem ser aninhados, isto , a formatao:

Alinhamento de cabealhos - os cabealhos tm atributos de alinhamento:

<H2 ALIGN=CENTER>Cabealho centralizado</H2> Cabealho centralizado

<H3 ALIGN=RIGHT>Cabealho alinhado direita</H3> Cabealho alinhado direita

<H4 ALIGN=LEFT>Cabealho alinhado esquerda (default=padro)</H4> Cabealho alinhado esquerda (default=padro)

Combinando pargrafos e quebras de linha, temos por exemplo:

2.6.8.2 <Blockquote> usado para citaes longas:

Envie crticas e sugestes para <address> fulano@xxx.com.br </address>

Envie crticas e sugestes para fulano@xxx.com.br

2.6.9 Formatao de Frases

<IMG SRC = "nome_da_figura.extenso">

ou, se ela estiver dentro de uma pasta no mesmo servidor:

<IMG SRC = "nome_da_pasta/nome_da_figura.extenso">

<IMG SRC = "arvore.gif">

<IMG SRC="URL_imagem" ALT="descrio_da_imagem">

<IMG SRC="figura1.gif" ALT="Minha Foto" BORDER=2>

<IMG SRC="imagem.extenso" ALT="descrio" ALIGN=alinhamento_desejado>

Ttulos, linhas e elementos

<CAPTION>...</CAPTION> define o ttulo da tabela

<TR>...</TR> delimita uma linha

<TH>...</TH> define um cabealho para colunas ou linhas (dentro de <TR>)

<TD>...</TD> delimita um elemento ou clula (dentro de <TR>)

Ttulos compreendendo mais de uma coluna ou linha

Tabelas sem borda

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9">

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00">

<TD>abril</TD><TD bgcolor="#E1FFD9">maio</TD><TD>junho</TD> </TR> </TABLE>

Tipos de arquivo de udio

........ cdigo scripts

</script> </head> <body>

tag para indicar o fim da codificao JAVA Script

Codificao normal do HTML