Home

Aplicativos

1. Abril maio junho lt TABLE BORDER 1 CELLSPACING 0 CELLPADDING 10 BORDERCOLOR 00FF00 gt lt TR gt lt TD bgcolor fEIFFD9 gt J5aneiro lt TD gt lt TD gt fevereiro lt TD gt lt TD bgcolor fEIFFD9 gt mar o lt TD gt lt TR gt lt TR gt lt TD gt abril lt TD gt lt TD bgcolor HFE1IFFD9 gt maio lt TD gt lt TD gt Junho lt TD gt lt TR gt lt TABLE janeiro fevereiro mar o abril maio junho Imagem de fundo lt TABLE BORDER 5 BACKGROUND imagem gt janeiro fevereiro mar o abril maio junho lt TD BACKGROUND imagem gt janeiro fevereiro mar o abril maio junho Frames Os frames s o divis es da tela do browser em diversas telas ou quadros Com isso torna se poss vel apresentar mais de uma p gina por vez por exemplo um ndice principal em uma parte pequena da tela e os textos relacionados ao ndice em outra parte E muito f cil colocar frames em p ginas por m nem todos os usu rios gostam deles pois nem sempre a navega o f cil al m de problemas para a impress o e a marca o dos documentos interiores aos frames nos bookmarks A alternativa natural para os frames s o as tabelas Uma p gina
2. Concluida Z Estruturas de Controle As estruturas que veremos a seguir s o comuns para as linguagens de programa o imperativas bastando portanto descrever a sintaxe de cada uma delas resumindo o funcionamento IF O IF usado como estrutura condicional Indica que se uma express o for verdade ent o fa a tal a o Sua sintaxe simples Se a a o a ser executada for de uma nica linha as chaves s o opcionais caso contr rio se a a o tiver v rios comandos a serem executados as chaves s o obrigat rias Veja um exemplo lt 7 php ta 3 b i if i a gt b echo a maior que b f7 nico comando if i a gt b varios comandos uso obrigatorios das chaves b a at pa ELSE O ELSE usado para que uma a o seja executada caso a express o analisada no IF seja falsa Em outras palavras se uma express o for verdade fa a a a o do IF sen o fa a a a o do ELSE Veja um exemplo I b 5 if a gt bj i echo a maior que bp alse i echo b maior que a Es ELSEIF A estrutura ELSEIF faz com que o usu rio possa definir v rias situa es para que uma a o ocorra Suponha que voc quer executar uma a o para cada valor da uma vari vel Por exemplo se var for igual a x execute tal a o se for igual a y outra a o se for igual a z outra a o e assim por diante Exemplo
3. application x www form urlencoded Outro tipo aceito por alguns browsers text plain Os formul rios podem conter qualquer formata o par grafos listas tabelas imagens exceto outros formul rios Em especial colocamos dentro da marca o de lt rorm gt as formata es para campos de entrada de dados que s o tr s lt INPUT gt lt SELECT gt lt TEXTAREA gt Todos os campos de entrada de dados t m um atributo NAME ao qual associamos um nome que ser utilizado posteriormente pelo script S o os scripts que organizam esses dados de entrada em um conjunto de informa es significativas para determinado prop sito Primeiro vamos ver os tipos de campos para montar um formul rio e depois passaremos aos scripts Formul rios Um formul rio um modelo para a entrada de um conjunto de dados O primeiro passo para fazer formul rios aprender as etiquetas que desenham as janelinhas de entrada de dados para depois trabalharmos com os scripts que s o os programas que tratam esses dados oferecendo os servi os desejados acesso a banco de dados envio de e mail etc O elemento lt rorm gt delimita um formul rio e cont m uma seq ncia de elementos de entrada e de formata o do documento lt FORM ACTION URL de script METHOD m todo gt lt FORM gt Os atributos de FORM que nos interessam agora s o ACTION Especifica o URL do script ao qual ser o enviados os dados do formul rio METHOD
4. gt arravi6 gt 5 13 gt 9 Mar gt dq21 echo Sarcre chave l 6 echo Sarcre chave l 13 echo arr chavre a Al m de definir arrays com o comando array voc ainda pode definir diretamente com atribui o Veja o exemplo 2 php Sarr 0 valor x Sarr l vValor v echo Sarr 0 echo Sarr d 2 Como vimos as chaves podem conter inteiros Voc pode ainda inserir novos valores num array apenas usando os colchetes Continuando o exemplo anterior lt 7 php arr 0 o o Sarr l maria Sarr l j 05 Sarr paulo echo Sarr 0 echo Sarr i echo Sarr 2 echo Sarr 3 Para apagar uma chave do vetor voc pode utilizar a fun o unset Como no exemplo a seguir lt php Sarr 0 jo o Sarr 1 maria unset Sarr 0 echo Sarr 0 gt Mais informa es sobre Arrays voc ir visualizar na se o dedicada Trabalhando com Arrays Tipo Objetos Objetos s o Inst ncias de classes definidas pelo usu rio Para inicializar um objeto voc usa a Instru o new criando uma inst ncia do objeto em uma vari vel Exemplo 7 php Class oon 1 function do fool 1 echo Fazendo foo H H Shar new foo har do fool pa Tipo NULL O valor especial NULL representa que a vari vel n o tem valor NULL o nico valor poss vel do tipo NULL H apenas um nico valor do tipo NULL e a palavra insensitiva ao
5. Conforme a aplica o apenas um destes tipos de intera o pode ou deve ser utilizado Formul rios Um formul rio um modelo para a entrada de um conjunto de dados O primeiro passo para fazer formul rios aprender as etiquetas que desenham as janelinhas de entrada de dados para depois trabalharmos com os scripts que s o os programas que tratam esses dados oferecendo os servi os desejados acesso a banco de dados envio de e mail etc O elemento lt rorm gt delimita um formul rio e cont m uma segi ncia de elementos de entrada e de formata o do documento lt FORM ACTION URL de script METHOD m todo gt lt FORM gt Os atributos de FORM que nos interessam agora s o ACTION Especifica o URL do script ao qual ser o enviados os dados do formul rio METHOD Seleciona um m todo para acessar o URL de a o Os m todos usados atualmente s o GET e POST Ambos os m todos transferem dados do browser para o servidor com a seguinte diferen a b sica e POST os dados entrados fazem parte do corpo da mensagem enviada para o servidor transfere grande quantidade de dados o GET os dados entrados fazem parte do URL endere o associado consulta enviada para o servidor suporta at 128 caracteres Veremos maiores detalhes sobre m todos no item CGI FORM tamb m pode apresentar o atributo ENCTYPE Indica o tipo de codifica o dos dados enviados atrav s do formul rio O tipo default
6. GOVERNO DO ESTADO po CEAR Secretaria da Educa o FSCOLA ESTADUAL DE FDUCA O PROFISSIONAL EEEP Ensino M DIO INTEGRADO A EDUCA O PROFISSIONAL Curso T CNICO EM INFORM TICA DRC ANA O WEB HTML CSS PHP GOVERNO DO ESTADO po CEAR Secretaria da Educa o Governador Cid Ferreira Gomes Vice Governador Francisco Jos Pinheiro Secret ria da Educa o Maria Izolda Cela de Arruda Coelho Secret rio Adjunto Maur cio Holanda Maia Secret rio Executivo Ant nio Idilvan de Lima Alencar Assessora Institucional do Gabinete da Seduc Cristiane Carvalho Holanda Coordenadora de Desenvolvimento da Escola Maria da Concei o Avila de Misquita Vinas Coordenadora da Educa o Profissional SEDUC Thereza Maria de Castro Paes Barreto Escola Estadual de Educa o Profissional EEEP Ensino M dio Integrado Educa o Profissional ndice Inform tica Programa o WEB HTML CSS PHP l a LE fer ERR RS PDA SER DR PENSAR EN RIDER SED ONES DR DR E 43 ANO OO asas iai ad is ad ad a o SS 46 list style type os tipos de marcadores de lista erre errar 91 AVC Dm SA fo PANDA ARMAS ENE IR DINNERS a Aa ENO 126 ONA CA cessa fs da saia in da go add io saio fica cabia sao d arg is da asda ad iso di aos sra E Dario dignos ia gades 126 O nisi RELA 6 E e TND DOTE DEDO DN DON RONDON NNE NO 127 O que Internet Estamos acostumados a ouvir que Internet
7. Para conseguir isso seria necess rio incluir diversos lt BR gt consecutivos inserindo linhas em branco mesmo assim o resultado final poderia ser bem pouco elegante Surgiu ent o o atributo CLEAR para lt BR gt Com esse atributo podemos por exemplo ter um texto posicionado no ponto em que a margem direita fica livre com lt BR CLEAR RIGHT gt ou no ponto em que a margem esquerda fica livre com lt BR CLEAR LEFT gt Dessa maneira podemos controlar bem a posi o relativa dos textos Tamb m se pode posicionar o texto no ponto em que ambas as margens est o livres Isso conseguido com lt BR CLEAR ALL gt E assim vimos tudo sobre quebras de linha depois de imagens Molduras de imagem Para melhorar ainda mais a apresenta o das imagens junto com os textos foram desenvolvidos atributos de moldura Estes atributos definem o espa o vertical e horizontal deixado entre as imagens e os textos circundantes lt IMG SRC imagem VSPACE espa o vertical gt lt IMG SRC imagem HSPACE espa o horizontal gt O efeito desses atributos pode ser percebido nos textos abaixo No primeiro texto as imagens n o t m atributos de moldura f cil notar como o texto fica grudado na imagem O Instituto de Ci ncias Matem ticas e de Computa o ICMC USP formado pelos Departamentos de Matem tica e de Ci ncias de Computa o e Estat stica O ICMC originou se em 1953 como Departamento de Matem tica da Escola
8. Seleciona um m todo para acessar o URL de a o Os m todos usados atualmente s o GET e POST Ambos os m todos transferem dados do browser para o servidor com a seguinte diferen a b sica e POST os dados entrados fazem parte do corpo da mensagem enviada para o servidor transfere grande quantidade de dados o GET os dados entrados fazem parte do URL endere o associado consulta enviada para o servidor suporta at 128 caracteres Veremos maiores detalhes sobre m todos no item CGI FORM tamb m pode apresentar o atributo ENCTYPE Indica o tipo de codifica o dos dados enviados atrav s do formul rio O tipo default application x www form urlencoded Outro tipo aceito por alguns browsers text plain Os formul rios podem conter qualquer formata o par grafos listas tabelas imagens exceto outros formul rios Em especial colocamos dentro da marca o de lt rorm gt as formata es para campos de entrada de dados que s o tr s lt INPUT gt lt SELECT gt lt TEXTAREA gt Todos os campos de entrada de dados t m um atributo NAME ao qual associamos um nome que ser utilizado posteriormente pelo script S o os scripts que organizam esses dados de entrada em um conjunto de informa es significativas para determinado prop sito Primeiro vamos ver os tipos de campos para montar um formul rio e depois passaremos aos scripts SELECT lt SELECT gt apresenta uma lista de valo
9. o operador de atribui o de concatena o previamente explicado em Operadores de atribui o que acrescenta o argumento do lado direito no argumento do lado esquerdo Exemplo php a ola h a mundo a ola a mundo P Preced ncia de Operadores A preced ncia de um operador especifica quem tem mais prioridade quando h duas delas juntas Por exemplo na express o 1 5 3 a resposta 16 e n o 18 porque o operador de multiplica o tem prioridade de preced ncia que o operador de adi o Par nteses podem ser utilizados para for ar a preced ncia se necess rio Assim 1 5 3 avaliado como 18 Express es Eo s o as pe as de constru o mais importantes do PHP No PHP quase tudo o que voc escreve s o express es A maneira mais simples e ainda mais precisa de definir uma express o tudo o que tem um valor As formas mais b sicas de express es s o constantes e vari veis Quando voc digita a 5 voc est atribuindo 5 para a 5 obviamente tem o valor 5 neste caso 5 uma constante inteira Depois desta atribui o voc pode esperar que o valor de a seja 5 Assim se voc escrever b a voc pode esperar que b se comporte da mesma forma que se voc escrevesse b 5 H mais uma express o que podem parecer estranha se voc n o a viu em outras linguagens o operador condicional tern rio k php primei
10. Departamento de Computa o e Estat stica SCE Para maiores informa es Cursos de Gradua o grad icmc usp br Cursos de P s Gradua o posgrad icmc usp br O conte do informativo por m a apresenta o n o agrad vel devido disposi o do texto na tabela Primeiro vamos mexer com os alinhamentos Alinhamentos simples Os alinhamentos padr o em tabelas como podemos ver no exemplo acima s o no sentido horizontal alinhamento esquerda no sentido vertical alinhamento no centro da c lula As linhas e c lulas podem ter alinhamentos definidos atrav s dos atributos ALIGN alin horizontal VALIGN alin vertical Vejamos como esses alinhamentos funcionam nas c lulas lt TD ALIGN alin horizontal gt Texto da c lula lt TD gt lt TD VALIGN alin vertical gt Texto da c lula lt TD gt Padr o ALIGN LEFT ALIGN CENTER ALIGN RIGHT VALIGN TOP Padr o VALIGN MIDDLE VALIGN BOTTOM Obs a tabela acima foi feita especialmente para mostrar as diferen as entre os alinhamentos Uma tabela comum ajusta o tamanho de suas c lulas ao conte do desta forma Padr o align left align center align right Padr o valign top valign middle valign bottom Alinhamentos combinados Uma mesma c lula pode ter atributos ALIGN VALIGN lt TD ALIGN alin horizontal VALIGN alin vertical gt Texto da c lula lt s ID gt Por exemplo ALIGN CENTER E VALIGN TOP ALIGN RIGHT Padr o ALIGN LEFT ATTON Ci VALIGN BOTTOM
11. HhE voar tapls if igvar x i echo variavel eh A elseif i var w i echo variavel eh Tre F elseif war gZ J i echo variavel eh amp H else i echo variavel tem outro valor t SWITCH A Instru o switch similar a uma s rie de instru es IFs seguidas Os exemplos seguintes mostram duas maneiras diferentes de escrever a mesma coisa uma utilizando uma s rie de IFs e ELSEIFs e a outra utilizando a instru o switch it Si 0 echo Ti igual at elseif Gi 1 1 echo Ti igual a 1 3 elseif i 81 1 Echo F acgual a E switch i Case DO echo i igual a tf Hreaky zaze dl echo Ti igual a If breat Case Zi echo Ti igual a amp fs Breat m e y E importante entender como a instru o switch funciona para evitar enganos A instru o switch executa linha a linha No in cio nenhum c digo executado Somente quando uma instru o case encontrada com um valor que combina com a express o do switch faz com que o PHP execute as instru es a partir da O PHP continua executando as instru es at o fim do bloco switch ou na primeira vez que encontrar uma instru o break Se voc n o escrever uma instru o break no fim das instru es case o PHP continuar executando os cases seguintes Um case especial o default Esse case executado quando nenhum outro case combina Ele precisa ser a ltima instru o
12. center center 8 center right 9 bottom left 10 bottom center 11 bottom right Vamos a seguir analisar cada uma delas detalhadamente atrav s de exemplos pr ticos Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada bem como um trecho do documento HTML onde se aplicam as regras A seguir mostro o efeito que a regra produz Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o c digo no seu editor mude os valores e veja o resultado no browser Esta a melhor e mais r pida maneira de voc aprender CSS Bons estudos E fa a timo proveito dos tutoriais A cor do fundo lt html gt lt head gt lt style type text css gt nd tss body fbackground color YCCPFEF azul claro h2 background color YFF0000 vermelho p background color 00FF0O0O verde gt lt style gt lt head gt lt body gt lt h2 gt Estude CSS lt h2 gt lt p gt Com CSS voc controla melhor seu layvouts p gt lt body gt LJ AEM Este o efeito da folha de estilo acima A imagem de fundo lt html gt lt head gt lt style type text css gt E and body background image url images css gif gt lt style gt lt head gt lt body gt lt body gt lt html gt Este o efeito da folha de estilo acima Repetir verticalmen
13. lo alter lo e redistribu lo sem pagar nada Dentro de uma p gina HTML voc pode embutir c digo PHP que ser executado toda vez que a p gina for visitada O c digo PHP interpretado no servidor Web e gera HTML ou outra sa da que o visitante ver Vejamos um exemplo da utiliza o do PHP lt DOCTYPE HTML PUBLIC WS5C DTD HTML 4 01 Transitional EN gt lt html gt lt head gt lt title gt PHP 5 Projeto E jovem lt c title gt meta http equiv Content Type content text html charset utf a gt lt head gt lt body gt lt 4 php echo Ol Mundo LM 2 lt body gt lt html gt Este exemplo produz esta p gina HTML PHP 5 Projeto E jovem e C fi 7 htp i MAocalhostapostilas Ol bTlundo Como surgiu PHP foi concebido em 1994 como resultado do trabalho de uma nica pessoa Rasmus Lerdorf O PHP foi adotado por outras pessoas inteligentes e foi reescrito tr s para proporcionar o amplo e aperfei oado produtos que hoje Em outubro de 2002 ele era utilizado em mais de nove milh es de dom nios em todo o mundo e esse n mero est crescendo rapidamente Voc pode constatar o n mero atual em www php net usage php principal vers o atual do PHP a vers o 5 Porque aprender PHP prender PHP lhe capacitar a construir Web sites din micos do mundo real onde os usu rios poder o interagir de modo significativo diferente de um conte do est tico de um Web site
14. recuo do texto e text transform forma das letras e direction dire o do texto e white space como o browser trata os espa os em branco Valores v lidos para as propriedades do texto e color 1 c digo hexadecimal HFFFFFF 2 c digo rgb rgb 255 235 0 3 nome da cor red blue green etc e letter spacing 1 normal o espa amento default 2 lenght uma medida reconhecida pelas CSS px pt em cm S o v lidos valores negativos e word spacing 1 normal o espa amento default 2 lenght uma medida reconhecida pelas CSS px pt em cm S o v lidos valores negativos e text align 1 left alinha o texto a esquerda 2 right alinha o texto a direita 3 center alinha o texto no centro 4 justify for a o texto a ocupar toda a extens o da linha da esquerda a direita e text decoration 1 none nenhuma decora o 2 underline coloca sublinhado no texto 09 overline coloca um sobrelinhado no texto 4 line through coloca uma linha em cima do texto 5 blink faz o texto piscar e text indent 1 lenght uma medida reconhecida pelas CSS px pt em cm 2 porcentagem da largura do elemento pai e text transform 1 none texto normal 2 capitalize todas as primeiras letras do texto em mai sculas 3 uppercase todas as letras do texto em mai sculas 4 lowercase todas as letras do texto em min sculas e direction 1 ltr texto escrito da
15. Alinhamentos de linhas O alinhamento pode ser aplicado a linhas inteiras com lt TR ALIGN alin horizontal VALIGN alin vertical gt Texto da c lula lt TR gt Por m o alinhamento declarado em uma c lula prevalece sobre o alinhamento da linha como se v no exemplo center center center TD ALIGN RIGHT TD VALIGN TOP bottom bottom bottom Isso pode ser interessante para algumas aplica es J conseguimos mexer um pouco na tabela inicial inserindo alinhamentos combinados ser o necess rios mais alguns passos para que a tabela fique realmente apresent vel o exemplo continua nos itens sobre larguras e espa amentos O Instituto de Ci ncias Matem ticas e de Computa o ICMC USP formado pelos Departamentos de Matem tica e de Ci ncias de Computa o e Estat stica O ICMC originou se em 1953 como Departamento de Matem tica da SETE ETEN do ICMC USP Escola de Engenharia de S o Carlos EESC USP fundado por renomados matem ticos italianos e brasileiros Departamento de Matem ticaAtualmente o Departamento de Matem tica oferece cursos de SMA Licenciatura e Bacharelado em Matem tica e de Bacharelado em Matem tica Aplicada e Computa o Cient fica Departamento de Computa oO Departamento de Computa o e Estat stica respons vel pelo e Estat stica SCE Bacharelado em Ci ncia de Computa o e pelo curso noturno de Bacharelado em Inform tica Atributos de largura No item anterior
16. Banana A linha a seguir poderia ser utilizada para adicionar um novo elemento Banana ao final do array icesta 3 Banana fornecendo um total de quatro elementos echo cesta D Scestall Scestal2 Scestal5 Para exibir o conte do poder amos digitar Observe que embora a an lise sint tica da string de PHP seja relativamente inteligente voc pode confundi la Se voc estiver tendo problemas com arrays ou outras vari veis que n o s o interpretadas corretamente quando s o inseridas dentro de uma string entre aspas duplas pode coloc las fora das aspas A instru o echo anterior funcionar corretamente mas em muitos dos exemplos mais complexos voc notar que as vari veis est fora das strings entre aspas Como com outras vari veis de PHP os arrays n o precisam ser inicializados ou criados antecipadamente Eles s o criados de forma autom tica na primeira vez em que voc os utiliza icesta 0 P ra icesta l Uva jcestal2 Ma O c digo a seguir criar o mesmo array cesta criado anteriormente com a instru o array Se cesta n o existir ainda a primeira linha criar um novo array com apenas um elemento As linhas subsequentes adicionam valores ao array O array redimensionado dinamicamente medida que voc adiciona elementos a ele Essa funcionalidade de redimensionamento n o est presente na maioria das outras linguagens de programa o Utili
17. alho 2 Este o cabe alho 3 Este o par grafo cujo texto foi alongado para mais de duas linhas para que voc possa visualizar o efeito de text align justify que for a o texto a estender se desde a direita at a esquerda text decoration Decora o do texto lt html gt lt head gt lt style type text css gt o hi text decoration underline h2 text decoration line through A3 Lt xt q coration overlanes a text decoration none gt lt style gt lt head gt lt body gt lt hi gt Texto com sublinhado lt h1 gt lt h2 gt Texto com linha em cima lt h2 gt lt h3 gt Texto com sobrelinhado lt h3 gt lt p gt lt a Este um link sem sublinhado lt a gt lt p gt lt body gt lt html gt Este o efeito da folha de estilo ac ma Texto com sublinhado Texto com sobrelinhado Este um link sem sublinhado text indent Recuo do texto lt ntml gt lt head gt lt style type text css gt E aa h3 text indent 80px p text indent 3em gt lt style gt lt head gt lt body gt lt n3 gt Texto com recuo de 80 pixel lt h3 gt lt p gt Texto com recuo de 3 0em lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima href http www maujor com gt Texto com recuo de 80 pixeis Texto com recuo de 3 0em text transform Forma das letras do texto lt html gt lt head gt lt style type text css
18. atributo color E se o seu cliente tivesse pedido para mudar a cor dos textos e do fundo Bem este exemplo simples d uma dimens o de um dos problemas criados com a mistura de marca o com apresenta o estiliza o A solu o proposta Cada vez mais ficava evidente que esta mistura que maravilhou os projetistas Web no In cio tornara se uma grande dor de cabe a E claro a solu o passava por dissociar linguagem de marca o da estiliza o Desta necessidade eu diria mesmo uma imposi o nasceu as CSS sigla em ingl s para Cascading Style Sheet que em portugu s foi traduzido para Folha de Estilo em Cascata A introdu o deste conceito preconiza o uso dos elementos tags HTML exclusivamente para marcar e estruturar o conte do do documento Nenhum elemento HTML ser usado para alterar a apresenta o ou seja estilizar O conte do A tarefa de estiliza o ficar a cargo das CSS que nada mais do que um arquivo independente do arquivo HTML no qual s o declaradas propriedades e valores de estiliza o para os elementos do HTML Estas declara es de estilo quer sejam estruturadas em um arquivo externo com extens o css quer sejam declaradas de outros modos importadas lincadas incorporadas ou inline cont m todas as regras de estilo para os elementos do documento HTML Voltando quela situa o criada no item anterior agora voc mudaria a cor de TODOS os cabe alhos n1 em TODO o site em CINCO SEGUN
19. constru do utilizando somente HTML Com o PHP poss vel desenvolver diversos tipos de projetos dentre eles podemos destacar e Formul rios de cadastro ou contato e F runs Web e Sistemas de gerenciamento de conte do e Sistemas de compra e venda de produtos via Web E commerce e Sites din micos alimentados pelo Banco de Dados e Sistemas complexos gerenciamento de servidores mala direta usu rios etc At aqui voc j deve ter notado as grandes possibilidades do PHP seguindo este ponto positivo temos tamb m a portabilidade onde o PHP est dispon vel para muitos sistemas operacionais diferentes Voc pode escrever o c digo de PHP em sistemas operacionais do tipo Unix gratuitos como Linux e o FreeBSD vers es comerciais do Unix como o Solaris e IRIX ou em vers es diferentes do Microsoft Windows Um c digo bem escrito normalmente funcionar sem modifica es em um sistema diferente executando o PHP Neste curso abordaremos desde o b sico at o avan ado Sinta se vontade para navegar pela apostila voltando quando desejar E ent o preparado Vamos l Sintaxe b sica PHP tem uma sintaxe muito simples e enxuta o que facilita muito a organiza o dos scripts a serem desenvolvidos Outro ponto interessante que veremos que os c digos em PHP s o embutidos no HTML ao inv s de ger lo por completo facilitando muito a an lise de poss veis erros nos scripts desenvolvidos Delimitador e separa
20. do de maneira a finalizar o processamento daquele arquivo e retornar para o script que o chamou Tamb m poss vel retornar valores de arquivos inclu dos Voc pode pegar o valor de retorno de um include como faria com uma fun o normal O return se aplica apenas para a fun o e n o para todo o arquivo 4 php var PHFP return war E Ilustra o ex return inc php lt php var PHP E Ilustra o ex return inc 2 php lt 3 php teste include ex return Inc php echo Steste Lester include ex return ane dephpo echo ftestez gt Ilustra o ex return inc 3 php teste2 assimila o valor 1 porque a inclus o foi realizada com sucesso Verifique a diferen a entre os exemplos O primeiro utiliza return dentro do arquivo inclu do enquanto que o outro n o H outras maneiras de incluir arquivos dentro de vari veis com fopen file ou utilizando include Fun es de Data ma das tarefas mais comum em se tratando de PHP o uso de fun es para trabalhar com Datas Aqui veremos as mais comuns Date A fun o date utilizada para formatar data e hora locais do servidor onde o PHP est rodando Tabela com os caracteres utilizados junto com a fun o Caractere de Descri o Exemplo de valores formato retornados E Retorna Ante meridiem e Post meridiem em ma usculo am ou PM g Dia do m s 2 digitos com leading zeros 01to31 E Uma representa o text
21. foi comentado que uma tabela comum ajusta o tamanho de suas c lulas ao conte do Por exemplo janeiro fevereiro mar o abril maio junho Para apresentar uma tabela ocupando determinado espa o dispon vel na linha usamos o atributo WIDTH Esse atributo pode ser aplicado tamb m a linhas e c lulas Essa largura pode ser definida em porcentagem do espa o dispon vel WIDTH x ou em pixels WIDTH x Ex 1 Tabela ocupando 50 do espa o dispon vel lt TABLE BORDER 1 width 50 gt janeiro fevereiro mar o abril maio junho Ex 2 Tabela ocupando 50 do espa o dispon vel com uma coluna de 60 do espa o dispon vel na tabela lt TABLE BORDER 1 width 50 gt TRA lt TD gt janeiro lt TD gt lt TD width 60 gt fevereiro lt TD gt lt TD gt mar o lt TD gt ESTERS lt TR gt lt TD gt abril lt TD gt lt TD width 60 gt maio lt TD gt lt TD gt jJunho lt TD gt CY TR lt TABLE gt janeiro fevereiro mar o abril maio junho Ex3 O controle da largura da tabela est limitado dimens o de seu conte do lt TABLE BORDER 1 width 50 gt lt TR gt lt TD gt janeiro lt TD gt lt TD width 1 gt fevereiro lt TD gt lt TD gt mar o lt TD gt lt TR gt LPR lt TD gt abril lt TD gt lt TD width 1 gt maio lt TD gt lt TD gt junho lt TD gt lt TR gt lt TABLE gt janeiro fevereiro mar o abril maio junho De volta ao exemplo inicial j podemos melhorar um pouco mais nossa tabela Mantendo os alinhamento
22. frrggbb ALINK frrggbb VLINK Yfrrggbb BACKGROUND URL gt onde BGCOLOR cor de fundo quando n o indicada o browser ir mostrar uma cor padr o geralmente o cinza ou branco alguns editores poder o estabelecer o branco para o fundo da p gina TEXT cor dos textos da p gina padr o preto LINK cor dos links padr o azul ALINK cor dos links quando acionados padr o vermelho VLINK cor dos links depois de visitados padr o azul escuro ou roxo Seus valores s o dados em hexadecimal equivalentes a cores no padr o RGB Reg Green Blue Existem tabelas de cores com esses valores mas grande parte dos editores j oferece uma interface bem amig vel atrav s da qual escolhemos as cores desejadas sem nos preocuparmos com n meros esdr xulos tais como FF80A0 Browsers que seguem a defini o de HTML 3 2 em diante tamb m aceitam 16 nomes de cores tirados da paleta VGA do Windows por exemplo podemos escrever BGCOLOR BLUE Por m browsers mais antigos n o apresentar o as cores indicadas BACKGROUND indica o URL da imagem a ser replicada no fundo da p gina como uma marca d gua Veja o exemplo de uma p gina cuja imagem de fundo REZA Para efeitos de design poss vel fixar a imagem de fundo para que ela n o se mova junto com o texto ao se rolar a p gina Esse efeito n o padr o e funciona no Internet Explorer Cabe alhos H seis n veis de cabe alhos em HTML de lt H1 gt a lt
23. o relativos a um outro valor anterior declarado Este valor anterior h que estar bem definido e em geral esta defini o est em uma determinada propriedade do mesmo elemento na propriedade do elemento pai por exemplo uma medida CSS de comprimento ou mesmo no contexto geral da formata o por exemplo a largura do bloco de conte do p ftont saz 10px DA Lin chelghnt 120 17212068 de font Blze 120x Definindo cores em uma regra CSS Objetivo Detalhar as diferentes maneiras de se escrever a sintaxe para os valores das cores em uma regra CSS Valores v lidos para cores em CSS Observe as regras de estilo a seguir l div um background color YFF0000 2 div dois background color F007 div tres backgronnd coloc rogb 255 O Djs A div quatro lbackground color r9gb 100 0 0 7 divoucinco l background color red 6 div seis background color ThreeDShadow Como voc j deve ter concluido apresentei 06 seis maneiras diferentes de definir uma cor de fundo para uma DIV E se considerarmos que para as duas primeiras regras v lido usar letras min sculas existem 08 oito maneiras de se definir uma cor em uma regra CSS As maneiras mais usadas s o as mostradas em 1 e em 2 ou seja com uso do c digo hexadecimal de cores O efeito das regras no navegador Observe agora no screenshot a seguir como estas seis DIV s ser o renderizadas H Mozilla a File Edt Mem Go Bookmark
24. poderia escrever a v rias vezes mas esta obviamente n o uma forma muito eficiente ou confort vel Uma pr tica muito mais comum escrever a a 3 a 3 avaliada como o valor de a mais 3 e atribu do de volta a a que resulta em incrementar a de 3 Em PHP como em v rias outras linguagens como o C voc pode escrever isto de uma forma mais curta que com o tempo se torna mais limpa e r pida de se entender tamb m Somar 3 ao valor corrente de a pode ser escrito a 3 Qualquer operador de dois par metros pode ser usado neste modo operador atribui o por exemplo a 5 subtrai 5 do valor de a b 7 multiplica o valor de b por 7 etc O exemplo a seguir mostra os tipos de express es explicados nesta parte HhE function doublelgij return Sites Sh fa 5 oe Gar Se d HSE SE double i d g douhbleil rgel h g 10 Ea Trabalhando com Arrays J vimos no cap tulo sobre Tipos que um Array ou Vetor um mapa ordenado que relaciona valores por chaves Neste cap tulo vamos aprofundar um pouco mais os estudos neste tipo de dados que largamente utilizados em muitas opera es no PHP O que um array Uma vari vel escalar uma localiza o identificada com um nome em que armazenado um valor de maneira semelhante um array um lugar identificado com um nome para armazenar um conjunto de valores permitindo que voc agrupe valores escal
25. Language Linguagem de Formata o de Hipertexto fruto do casamento dos padr es HyTime e SGML HyTime Hypermedia Time based Document Structuring Language Hy Time ISO 10744 1992 padr o para representa o estruturada de hiperm dia e informa o baseada em tempo Um documento visto como um conjunto de eventos concorrentes dependentes de tempo udio v deo etc conectados por webs ou hiperlinks O padr o HyTime independente dos padr es de processamento de texto em geral Ele fornece a base para a constru o de sistemas hipertexto padronizados consistindo de documentos que alicam os padr es de maneira particular SGML Standard Generalized Markup Language Padr o ISO 8879 de formata o de textos n o foi desenvolvido para hipertexto mas torna se conveniente para transformar documentos em hiper objetos e para descrever as liga es SGML n o padr o aplicado de maneira padronizada todos os produtos SGML t m seu pr prio sistema para traduzir as etiquetas para um particular formatador de texto e DTD Document Type Definition define as regras de formata o para uma dada classe de documentos Um DTD ou uma refer ncia para um DTD deve estar contido em qualquer documento conforme o padr o SGML Portanto HTML definido segundo um DTD de SGML Todo documento HTML apresenta elementos entre par nteses angulares lt e gt esses elementos s o as etiquetas tags de HTML que s o os comandos de for
26. ao qual possivel atribuir se uma cor Considere um dispositivo de exibi o construido com uma densidade de 90 dpi dpi dots per inch pontos por polegada Por defini o a refer ncia padr o para pixel igual a um ponto no citado dispositivo Da pode se concluir que 1 pixel naquele dispositivo de exibi o igual a 1 90 inch 0 28 mm Para uma densidade de 300 dpi 1 pixel igual a 1 300 inch 0 085mm Assim pixel uma medida relativa a resolu o do dispositivo de exibi o A unidade de medida em A unidade de medida de comprimento em referencia se ao tamanho da fonte letra do seletor onde for declarada Quando em for declarada para a propriedade font size referencia se ao tamanho da fonte letra do elemento pai Quando em for declarada para o elemento raiz do documento p ex lt html gt em documentos html referencia se ao valor inicial default do tamanho de fonte letra Os exemplos abaixo esclarecem as defini es hi line height 1 2em line height de lt h1 gt ser 20 maior do que o tamanho das letras de lt h1 gt hi font size 1 2em font size de lt h1 gt ser 20 maior do que o tamanho das letras herdado por lt h1 gt p ex se hl estiver contido numa div com font size 10px ent o font size de hl 12px A unidade de medida ex A unidade de medida de comprimento ex igual a altura da letra x x1s min scula A unidade de medida percentagem Valores em percentagem s
27. body gt lt html gt Este o efeito da folha de estilo acima Um espa amento superior de 20px um espa amento direito de 40px um espa amento inferior de 80px e um espa amento esquerdo de 5px A propriedade background O fundo dos elementos HTML A propriedade background define as caracter sticas os valores na regra CSS do fundo dos elementos HTML As propriedades background s o as listadas abaixo e background color cor do fundo e background image Imagem de fundo e background repeat maneira como a Imagem de fundo posicionada e background attachment se a imagem de fundo rola ou n o com a tela e background position como e onde a imagem de fundo posicionada e background maneira abreviada para todas as propriedades Valores v lidos para as propriedades do fundo e background color 1 c digo hexadecimal HFFFFFF 2 c digo rgb rgb 255 235 0 3 nome da cor red blue green etc 4 transparente transparent e background image 1 URL url caminhoimagem gif e background repeat l n o repete no repeat 2 repete vertical e horizontal repeat 3 repete vertical repeat y 4 repete horizontal repeat x e background attachment 1 imagem fixa na tela fixed 2 imagem rola com a tela scroll e background position l x pos y pos 2 x y 3 top left top center 4 5 top right 6 center left 7
28. border e padding entre outras Por exemplo voc pode definir um padding superior um padding direita um padding Inferior e um padding esquerda para uma div sequ ncia em que voc escreve os valores para estilizar os quatro lados de uma caixa r gida e fixa em uma regra CSS e obedece a seguinte ordem em cima lado direito embaixo lado esquerdo Fa a uma analogia com O rel gio para n o esquecer a sequ ncia 12 horas superior 3 horas direita 6 horas inferior 9 horas esquerda A regra div padding 2 pX 3PX 8px TOX I define para a div um padding inferior igual a Spx um padding superior igual a 2px um padding esquerda igual a Tpx um padding direita igual a 3px Al m da mostrada acima v lido abreviar declara es que envolvem os quatros lados de uma caixa de outras 3 maneiras diferentes como mostradas a seguir l div padding 10px padding de 10px para os 4 lados 2 div padding 6px 8px padding de 6px para os lados superior e inferior e de 8px para os lados direito e esquedo 3 div padding 2px 4px 9px padding de 2px para o lado superior de 4px para os lados direito e esquerdo e de 9px para o lado inferior Propriedades que admitem abrevia o Veremos ao longo deste tutorial como abreviar as seguintes propriedades CSS 1 margin a padding background font list outline O o a i E a border Abreviando margin As regras a seguir definem va
29. caso NULL Exemplo lt php vwar NULL o Para verificar se uma vari vel NULL utilize a fun o is_null passando como par metro a vari vel Exemplo lt php var NULL if is nulligvar i echo A vari vel foi setada como NULL Vari veis As vari veis no PHP s o representadas por um cifr o seguido pelo nome da vari vel Os nomes de vari vel no PHP fazem distin o entre mai sculas e min sculas Os nomes de vari vel seguem as mesmas regras como outros r tulos no PHP Um nome de vari vel v lido se Inicia com uma letra ou sublinhado seguido de qualquer n mero de letras algarismos ou sublinhados N o v lido portanto vari veis que iniciem com n meros Exemplo lt 7 php Svar Grupo SVar E overm echo ivar SVar Sevar iteste avar teste gt Constantes ma constante um identificador nome para um nico valor Como o nome sugere esse valor n o pode mudar durante a execu o do script As constantes s o sens veis ao caso por padr o Por conven o os nomes de constantes s o sempre em mai sculas O nome de uma constante tem as mesmas regras de qualquer identificador no PHP Um nome de constante v lida come a com uma letra ou sublinhado seguido por qualquer n mero de letras n meros ou sublinhados Voc pode definir uma constante utilizando se da fun o define Quando uma constante definida ela n o pode ser mais modificada ou anu
30. de retorno o identificador do resultado Alguns comandos podem ser realizados com esse resultado Apagando o resultado int mysql free result int result O comando mysql free result deve ser utilizado para apagar da mem ria o resultado indicado N mero de linhas int mysql num rows int result O comando mysql num rows retorna o n mero de linhas contidas num resultado Utilizando os resultados Existem diversas maneiras de ler os resultados de uma query SELECT As mais comuns ser o vistas a seguir int mysql result int result int linha mixed campo Retorna o conte do de uma c lula da tabela de resultados e result o identificador do resultado e linha o n mero da linha iniciado por O e campo uma string com o nome do campo ou um n mero correspondente ao n mero da coluna Se foi utilizado um alias na consulta este deve ser utilizado no comando mysql result Este comando deve ser utilizado apenas para resultados pequenos Quando o volume de dados for maior recomendado utilizar um dos m todos a seguir array mysql fetch array int result L uma linha do resultado e devolve um array cujos ndices s o os nomes dos campos A execu o seguinte do mesmo comando ler a pr xima linha at chegar ao final do resultado array mysql fetch row int result Semelhante ao comando anterior com a diferen a que os ndices do array s o num ricos iniciando pelo O zero Alt
31. de Engenharia de S o Carlos EESC USP fundado por renomados matem ticos italianos e brasileiros Atualmente o Departamento de Matem tica oferece cursos de Licenciatura e Bacharelado em Matem tica em n vel de gradua o al m de um programa de p s gradua o que inclui mestrado e doutorado na rea de Matem tica O Departamento de Computa o e Estat stica respons vel pelo curso de Bacharelado em Ci ncia de Computa o no qual ingressam 40 alunos por ano Em n vel de p s gradua o oferece desde 1975 o programa de mestrado em Ci ncias de Computa o e Matem tica Computacional e a partir de agosto de 1995 o programa de doutorado na mesma rea Neste segundo texto s o usadas respectivamente as formata es lt IMG SRC icones fotoicm gif WIDTH 148 HEIGHT 95 ALIGN left VSPACE 30 gt e lt IMG SRC icones smallpos gif WIDTH 160 HEIGHT 71 ALIGN right HSPACE 30 gt O Instituto de Ci ncias Matem ticas e de Computa o ICMC USP formado pelos Departamentos de Matem tica e de Ci ncias de Computa o e Estat stica O ICMC originou se em 1953 como Departamento de Matem tica da Escola de Engenharia de S o Carlos EESC USP fundado por renomados matem ticos italianos e brasileiros Atualmente o Departamento de Matem tica oferece cursos de Licenciatura e Bacharelado em Matem tica em n vel de gradua o al m de um programa de p s gradua o que inclui mestrado e doutorado na rea de Mate
32. de listas ordenadas lt html gt lt head gt lt style type text cs9 gt gies ol decimal list style type ol lroman list style type ol uroman list style type ol lalpha list style type ol ualpha decimal lower roman upper roman lower alpha list style type upper alpha gt x S tCyLE gt lt head gt lt body gt lt ol class decimal gt lt l li gt Item um lt li gt lt li gt Item dois lt 1li gt lt li gt Item tres lt li gt lt 7oLl gt lt o class ILroman gt lt li gt Item um lt li gt lt li gt Item dois lt li gt lt li gt Item tres lt li gt lt ol gt lt ol class uroman gt lt li gt Item um lt li gt lt li gt ltem dois lt 1li gt lt li gt ltem tres lt 1li gt Cro lt ol class lalpha gt lt li gt Item um lt li gt lt li gt Item dois lt li gt lt li gt Item tres lt li gt lt ol gt lt ol class ualpha gt lt li gt Item um lt li gt lt li gt ltem dois lt 1li gt lt li gt ltem tres lt 1li gt lt ol gt lt body gt lt html gt Este o efeito da folha de estilo acima 1 Item um 2 Item dois 3 Item tres 1 Item um 2 Item dois 3 Item tres 1 Item um 2 Item dois 3 Item tres 1 Item um 2 Item dois 3 Item tres 1 Item um 2 Item dois 3 Item tres list style duas propriedades das listas em uma declara o nica Esta a maneir
33. de unidade de defini o de cor denominado System Colors est em desuso e n o dever constar das futuras Recomenda es CSS3 Trata se de uma lista de nomes de cores v lidas semelhan a da listagem de cores por palavra chave e que se refere a reas do sistema operacional As cores previstas s o ActiveBorder ActiveCaption AppWorkspace Background ButtonFace ButtonHighlight ButtonShadow ButtonText CaptionText GrayText Highlight HighhghtText InactiveBorder InactiveCaption InactiveCaptionText InfoBackground InfoText Menu MenuText Scrollbar ThreeDDarkShadow ThreeDFace ThreeDHighhght ThreeDLightShadow ThreeDShadow Window WindowFrame Window Text Embora os valores CSS sejam case Insensitives recomenda se usar a grafia com letras mai sculas e min sculas ao se escrever o nome das cores de sistema por raz es de legibilidade Exemplos p color ThreeDLightShadow div background ButtonShadow Abreviando declara es e valores em regras CSS Relembrando a sintaxe e a terminologia de uma regra CSS E comum encontrar se em muitos artigos sobre CSS escritos em blogs e sites em textos de posts em f runs em listas de discuss o e at mesmo em revistas e jornais diferentes refer ncias e denomina es equivocadas para os componentes de uma regra CSS Seletores s o chamados de elementos ou de tags propriedades s o chamadas de seletores ou de atributos valores s o chamados de atributos ou de pr
34. dia do ano come ando de 0 0a 365 Timezone offset in seconds The offset for timezones west of 23200 at 43200 UTC is always negative and for those east of UTC is always positive Vejamos sua utiliza o lt 7 php SdataLocal date d m TY Hii s echo dataLocal pi Getdate A fun o getdate retorna a data e hora local em formato de Array Abaixo a tabela com as respectivas chaves retornadas no array Chave Descri o Exemplo dos valores retornados seconds Representa o num rica dos segundos Paso minutes Representa o num rica dos minutos Qa 39 mday Representa o num rica do dia do m s ati wday Representa o num rica do dia da semana 0 para Sunday a 6 para Saturday year Pr A 1999 ou 2003 digitos year semana month Representa o textual completa de um m s January a December tal como January ou March Segundos desde a poca UNIX similar System Dependent tipicamente de aos valores retornados por time e 2147483648 a 2147483647 usados por date lt php hoje qetdatel echo hojel year F Vejamos sua utiliza o Time A fun o time retorna o timestamp Unix atual Um timestamp a hora atual medida no n mero de segundos desde a Era Unix 01 01 1970 lt 2 php tas tual timel echo Stsitual 2 gt Exemplo Mktime A fun o mktime utilizada para se retornar um timestamp Unix formato utilizado para data
35. efeito especial combinado Controlando as entrelinhas e o espa amento entre elementos HTML As propriedades line height margin A propriedade CSS de dimensionamento line height permite controlar o espa amento entre linhas e a propriedade CSS margin permite controlar o espa amento entre elementos HTML Observe abaixo o c digo HTML para um texto composto de dois par grafos lt nemi gt lt head gt lt head gt lt body gt lt p gt LO P tagrato s LoOrem lpsumdolor sit amet consectetuer adipiscing elit Nulla pharetra egestas neque Duis dolor lacus volutpat ac vesti bulum nec suscipit a Telis Aenean pharetra orci id edit Duis non dui Suspendisse potenti Ut ac risus Etiam dignissim Quisque nec felis lt p gt lt p gt 20sParagra Orres eask Sed blandit est non ante Ut imperdiet sagittis mi Sed gravida sodales nisl Ut hendrerit ipsum eu enim Duis tempus consequat mauris In hac habitasse platea dictumst Vivamus lectus justo commodo in rutrum non eleifend eget pede Sed ac lacus In tortor lt p gt lt body gt een O c digo acima renderizado pelo navegador conforme mostrado abaixo Notar a dist ncia entre as linhas em cada par grafo ou seja as entrelinhas n o confunda com dist ncia entre par grafos lo Par grafo Lorem ipsum dolor sit amet consectetuer adipiscing elit Nulla pharetra egestas neque Duis dolor lacus volutpat ac vestibulum nec suscipit a
36. esquerda para a direita 2 rtl texto escrito da direita para a esquerda e white space 1 normal os espa os em branco ser o ignorados pelo browser 2 pre os espa os em branco ser o preservados pelo browser 3 nowrap o texto ser apresentado todo ele numa linha nica na tela N o h quebra de linha at ser encontrada uma tag lt br gt Vamos a seguir analisar cada uma delas detalhadamente atrav s de exemplos pr ticos Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada bem como um trecho do documento HTML onde se aplicam as regras A seguir mostro o efeito que a regra produz Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o c digo no seu editor mude os valores e veja o resultado no browser Esta a melhor e mais r pida maneira de voc aprender CSS Bons estudos E fa a timo proveito dos tutoriais color A cor do texto Em ISA lt head gt lt style type text css gt hi color FF00002 h2 color 00FF00 O reolor ros 0 0 255 0 gt lt style gt lt head gt lt body gt lt nl gt Este cabe alho vermelho lt h1l gt lt h2 gt Este cabe alho verde lt h2 gt lt p gt Este par grafo azul lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Este cabe alho vermelho Este cabe alho ver
37. facilitar enormemente o trabalho de quem escreve os documentos a linguagem garante a uniformidade de apresenta o de cabe alhos par grafos listas etc A formata o l gica segue o significado l gico do texto marcado um endere o de e mail uma cita o etc Sua apresenta o final varia conforme o browser podendo oferecer resultados mais ricos A formata o f sica especifica explicitamente o estilo que se quer para o texto it lico grifado etc Sua apresenta o final n o sofre grandes varia es Blocos de texto HTML oferece as seguintes formata es de blocos de texto lt PRE gt Apresenta o texto na mesma maneira em que foi digitado mantendo quebras de linha e tabula es lt pre gt uma linha aqui outra ali SECss pre Resulta em uma linha aqui outra ali etc Uma vez que lt PRE gt mant m o texto original n o se deve for ar espa os com essa marca o dentro de outra marca o que j apresente tabula es e espa os espec ficos lt BLOCKQUOTE gt usado para cita es longas lt blockquote gt A massa do Sol arqueia o espa o tempo de tal maneira que ainda que a Terra siga uma trajet ria reta no espa o tempo quadridimensional parece nos que se desloca em rbita circular no espa o tridimensional lt blockquote gt Stephen W Hawking Uma Breve Hist ria do Tempo A massa do Sol arqueia o espa o tempo de tal maneira que ainda que a Terra siga uma trajet ria reta
38. facultativo y No exemplo abaixo o seletor o documento todo body a p gina web a propriedade o fundo do documento e o valor a cor branca body background EFFEFF Se o valor for uma palavra composta dever estar entre aspas duplas ou simples na tont Lamily Comic Sans ME Para maior legibilidade das folhas de estilo de boa pr tica usar linhas distintas para escrever cada uma das declara es propriedade e seu valor como mostrado abaixo p text align raghts color FF0000 Isto n o obrigat rio A regra abaixo tem o mesmo efeito da regra acima e ambas as sintaxes est o corretas text align rightscolor 22000072 NOTA A raz o do uso de ponto e v rgula na ltima declara o ou mesmo quando s h uma declara o que durante a fase de projeto da Folha CSS quase sempre estaremos acresentando novas declara es e a ltima declara o quase nunca a ltima na fase de projeto Assim esta pr tica certamente nos poupar Agrupamento de Seletores Uma regra CSS quando v lida para v rios seletores estes podem ser agrupados Separe cada seletor com uma v rgula No exemplo abaixo agrupamos todos os elementos cabe alho A cor de todos os cabe alhos ser verde Eli fiz AS Ads Ao RG q color T00FFO0 O seletor classe Mas voc n o est restrito somente aos elementos HTML tags para aplicar regras de estilo Voc pode inventar
39. folha de estilo acima Este um par grafo em negrito font Todas as propriedades das fontes em uma declara o nica Esta a maneira abreviada de voc escrever uma regra para as propriedades das fontes A sintaxe geral esta font style variant weight size line height caption icon menu message box small caption status bar inherit Voc pode declarar todas ou algumas das propriedades family Os valores size e family s o obrigat rios Os demais s o facultativos se voc os omitir ser adotado o valor default ou herdado do elemento pai Os valores style variant weight size podem ser declarados em qualquer ordem lt nteml gt lt head gt kotyle type text css gt S p fonte italic smalis caos bold 14px Comi Sans MS sans serif gt lt style gt lt head gt lt body gt lt p gt Par grafo em declara o nica lt p gt lt body gt sincs Este o efeito da folha de estilo acima PAR GRAFO EM DECLARA O NICA O valores caption icon menu message box small caption status bar referem se s fontes usadas pelo sistema operacional do visitante do site e devem ser declarados isolados na propriedade font e caption fontes usadas em bot es ICON aparato fontes usadas em cones e mMenu fontes usadas em menus e message box fontes ussadas em caixas de mensagens e small caption font
40. function nome de funcao Sargl argz2 SarahN walor argi farg2 Sargil return Svalor Es No exemplo a seguir criamos uma fun o que calcula o ndice de obesidade de alguem A fun o recebe dois par metros peso e altura e retorna um valor definido por uma formula function calcula obesidade j fpeso Saltura i return peso 7 Saltura Saltura echo calcula obesidade 7F0 1 85 E Resultado 20 45288531775 Retornando Valores de uma Fun o poss vel a uma fun o retornar um valor o qual pode ser de qualquer tipo aceito pelo PHP inteiro ponto flutuante booleano string array etc Para 1sso devemos utilizar a instru o return seguida do valor que desejamos retornar 9ou express o lt php function cubo l valor i cubo Svalor gvalort t valor return cubo valor T echo O cubo de valor cubol valor Es O resultado desse script O cubo de 7 343 Valores s o retornados pelo uso de comandos opcionais de retorno Qualquer tipo pode ser retornado incluindo listas e objetos lt php function teste numero i return ifnumero numero a f echo teste 7 E Ilustra o func return val php Criando bloco de c digos reutiliz veis uando estiver projetando seu site da Web voc apontar alguns elementos encontrados em muitas Qo em todo o site Tais elementos podem ser barras de navega o ou uma linha de base com o endere
41. head gt lt style type text css gt is tpedding lefes 1027 gt lt style gt lt head gt lt body gt lt p gt Um espa amento esquerdo de 10 lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Um espa amento esquerdo de 10 padding tOdOS os quatro espa amentos em uma declara o nica A propriedade padding permite que voc controle o espa amento entre o conte do e as bordas dos elementos HTML N o s o v lidos valores negativos para espa amento Em declara o nica a ordem das espa amentos superior direito inferior e esquerdo H quatro modos de se declarar abreviadamente os espa amentos 1 padding valorl os 4 espa amentos ter o valor1 2 padding valorl valor2 espa amento superior e inferior ter o valorl espa amento direito e esquerdo ter o valor 3 padding valori valor2 valor3 espa amento superior ter valorl espa amento direito e esquerdo ter o valor2 espa amento inferior ter valor3 4 padding valorl valor2 valor3 valor4 os espa amentos superior direito Inferior e esquerdo nesta ordem lt html gt lt head gt lt style type text csg gt ne 0 padding 20px 40px 20px Spx gt lt style gt lt head gt lt body gt lt p gt Um espa amento superior de 20px um espa amento direito de 40px um espa amento inferior de 80px e um espa amento esquerdo de 5px lt p gt lt
42. imagem gt Dessa forma lt IMG SRC icones newred gif ALT Novo gt apresentado nos browsers gr ficos assim Se nos browsers texto assim Novo WIDTH e HEIGHT Atributos de dimens o da imagem em pixels Grande parte dos editores HTML coloca automaticamente os valores destes atributos quando indicamos a inser o de uma imagem lt IMG SRC imagem ALT descri o WIDTH Jargura HEIGHT altura gt Uma das vantagens de se usar esses atributos que o browser pode montar mais rapidamente as p ginas por saber de antem o o espa o que dever ser reservado a elas BORDER Quando uma frase marcada como ncora de um link ela se apresenta sublinhada quando uma imagem A A J faz as vezes de ncora ganha uma borda que indica sua condi o Por exemplo 4 Por m por quest es de apresenta o nem sempre interessa termos essa borda ao redor da imagem Assim com o atributo BORDER podemos controlar esse detalhe Ju Se quisermos uma borda mais larga 4 lt A HREF URL gt lt IMG SRC imagem ALT descri o BORDER 4 gt lt A gt F Se quisermos uma imagem sem borda 4 lt A HREF URL gt lt IMG SRC imagem ALT descri o BORDER 0 gt lt A gt Essa borda pode ser apresentada tamb m em imagens que n o s o ncora de links Basta aplicar por exemplo a formata o lt IMG SRC icones fotoicm gif ALT Foto antiga do ICMC BORDER 2 gt Assim poss vel dar mais de
43. listas e Este texto destina se a demonstrar o valor outside dos marcadores e E aqui continuamos com mais texto para fixar o valor outside dos marcadores de listas list style type OS tipos de marcadores de lista Definir os marcadores de listas n o ordenadas Este exemplo demonstra como definir os marcadores de listas n o ordenadas lt nEemI gt lt head gt lt style type text css gt O ul none list style type none is dus A last stiyle type disc ul circle 4 li St style type circle ul square list style type square gt lt style gt lt head gt lt body gt lt ul class none gt lt li gt item um lt 1i gt lt li gt ltem dois lt 1li gt lt li gt ltem tres lt 1li gt O Bs lt s l class qise gt lt li gt Item um lt 11 gt lt li gt Item dois lt 1li gt lt li gt ltem tres lt 1li gt lt ul gt ul class err le gt lt li gt item um lt li gt lt Lr gt Ttem dols lt s 15 gt lt li gt ltem tres lt 1li gt o ABRE lt ul class square gt lt l1 gt Item um lt 1i gt e lastrem dores dr lt li gt ltem Cres lt li gt lt ul gt lt body gt z html gt Este o efeito da folha de estilo acima e tem um e Item dois e Item tres e tem um e Item dois e Item tres e tem um e Item dois e tem tres e tem um e Item dois e tem tres Definir os marcadores de listas ordenadas Este exemplo demonstra como definir os marcadores
44. mauris In hac habitasse platea dictumst Vivamus lectus justo commodo in rutrum non eleifend eget pede Sed ac lacus In tortor Voc deve ter notado que o espa amento do lo par grafo para a borda superior do quadro amarelo e tamb m a do 2o par grafo para a borda inferior do quadro amarelo ambas AUMENTARAM Sim este aumento no espa amento cumpriu o prescrito na nova regra ou seja 40 pixel de margem superior e 40 pixel de margem inferior nos par grafos Mas lembre se o controle SEU Tem como evitar este espa amento n o previsto Veja o item 1 abaixo Dicas adicionais l Para evitar aquele espa amento referido acima crie e aplique uma classe no par grafo superior com margin top 0 ou n pixels e outra classe ao par grafo inferior com margin bottom 0 ou n pixels Voc pode tamb m declarar margin 0 0 40px 0 e suprimir o espa amento superior ou ainda margin 40px O O 0 e suprimir o espa amento inferior E uma s rie de outras combina es que ficam a t tulo de exerc cios para voc 2 Se voc deseja aplicar regras CSS em alguns elementos do documento e n o em todos por exemplo alguns par grafos na p gina seguir o uma regra line height outros n o crie classes e aplique aos elementos As medidas CSS de comprimento Introdu o Unidades de medida de comprimento CSS As unidades de medida de comprimento CSS referem se a medidas na horizontal ou na vertical e em sentido mais am
45. necess rias para montar um documento HTML ela constitui por si s uma folha de estilo Quando for combinada com outras folhas de estilo ela determinar a apresenta o final do documento uma caracter stica fundamental que as folhas de estilo podem ser combinadas O seletor funciona como a ponte de liga o entre o documento HTML e a folha de estilo e todos os elementos HTML podem funcionar como poss veis seletores Os v rios elementos HTML est o definidos na Recomenda o HTML 29 etc A Recomenda o do W3C define claramente que uma regra CSS composta de um seletor e uma declara o e que a declara o compreende uma propriedade e um valor Na regra CSS a seguir HL Color blues a terminologia correta e H1 seletor e color blue declara o e color propriedade e blue valor e a sintaxe correta e Escrever o seletor e a seguir a declara o e A declara o deve estar entre chaves e Na declara o separar a propriedade e o valor por dois pontos e E permitido usar espa os em branco em qualquer quantidade entre cada um dos caracteres da regra e E permitido grupar declara es em uma mesma regra e neste caso as declara es dever o ser separadas por ponto e v rgula podendo todas elas estar em uma mesma linha ou em linhas distintas E facultativo o uso de ponto e v rgula ap s a ltima declara o na regra e E indiferente o uso de mai sculas e min scula
46. no espa o tempo quadridimensional parece nos que se desloca em rbita circular no espa o tridimensional Stephen W Hawking Uma Breve Hist ria do Tempo lt ADDRESS gt Usado para formatar endere os E mail e refer ncias a autores de documentos Envie cr ticas e sugest es para lt address gt webmasterficmc usp br lt address gt Envie cr ticas e sugest es para webmaster O icmc usp br Formata o de frases Como visto anteriormente em Formata o de Textos e Caracteres HIML permite dois tipos de formata o l gico e f sico aqui veremos as formata es mais utilizadas Estilos L gicos lt CITE gt Para t tulos de livros filmes e cita es curtas Exemplo Assisti Guerra nas Estrelas umas oito vezes lt CODE gt Para indicar trechos de c digo de programas Exemplo for x 0 cl amp amp feof stdin x lt DE N gt Indica defini o de uma palavra em geral apresenta o texto em it lico Exemplo CERN Centre d studes et Recherches Nucleaires lt EM gt nfase tamb m normalmente apresentado em it lico Exemplo E preciso pesquisar muito para encontrar o termo exato lt KBD gt Indica uma entrada via teclado Exemplo Para ler mensagens recebidas digite pine i lt SAMP gt Indica uma sequ ncia de caracteres por exemplo uma mensagem de erro ou um resultado Exemplo O resultado do primeiro applet Hello World lt STRONG gt Forte nfase mostrado n
47. o de e mail do seu webmaster Outros elementos podem ser fragmentos de c digos para exibir o dia dados computados financeiros padr o e muitos outros c digos padronizados de HTML ou PHP como por exemplo constantes require A instru o require e include s o id nticos em todas as formas exceto pela manipula o de erros O include produz Warning enquanto require produzir um Fatal Error Em outras palavras n o hesite em utilizar require se na falta de um arquivo quiser parar o processamento da p gina O include n o se comporta da mesma maneira e o script poder continuar nessa situa o Veja os exemplos abaixo de sua utiliza o php require teste php require Sarquivo require arquivo txe F Nota At o PHP 4 0 2 havia o seguinte comportamento require ocorre mesmo que a linha onde ele est nunca seja executada por isso que instru es condicionais n o afetam require Entretanto se a linha onde ocorre o require n o for executada nada do c digo inclu do do arquivo tamb m ser Similarmente estruturas de loop n o afetam o funcionamento do require Mas o c digo inclu do pela fun o ser submetido ao loop A instru o require apenas ocorre uma vez include A instru o include inclui e avalia o arquivo informado Sua semelhan a com o require dispensa maiores explica es Qualquer vari vel dispon vel da linha onde a chamada da inclus o ocor
48. s Se avaliada como FALSE a execu o do loop termina No fim de cada itera o expr3 avaliada executada Veja um exemplo que imprime n meros de 1 a 10 na tela lt php for Si 1 i 10 Si i echo Gi i Explicando a vari vel i iniciada com valor 1 em seguida feita a verifica o i lt 10 se for verdade entra no loop caso contr rio termina e em cada itera o a vari vel i incrementada em 1 i FOREACH O construtor foreach permite interagir com arrays de forma mais simples em for a de la o percorrendo todo o vetor E til caso voc queira por exemplo usar os valores de todo o vetor para realizar alguma opera o ou imprimir na tela Tem se 2 tipos de sintaxe A primeira n o leva em considera o a chave do array e a segunda utiliza as chaves 7 php foreach expressao array as Sivalor foreach expressao array as ichave gt Gvalor E Sintaxe Vejamos um exemplo lt php ia arravil 2 3 17 foreach Sa as fv echo Valor atual Sven ia array um gt 1 dois gt amp tr s gt j REZESSELEP gt 17 foreach Sa as fk gt gw d echo MSal k gt w n s E WHILE While outra estrutura de la o loop mais simples Enquanto a express o passada como par metro for verdade ser executada a es dentro do bloco de chaves while expressao rE a es Vejamos o mesmo exemplo de impress o de
49. sintaxe pr pria e que define como ser aplicado estilo a um ou mais elementos HTML Um conjunto de regras CSS formam uma Folha de Estilos Uma regra CSS na sua forma mais elementar comp e se de tr s partes um seletor uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo seletor propriedade valor Seletor genericamente o elemento HTML identificado por sua tag ou por uma classe ou por uma ID ou etc e para o qual a regra ser v lida por exemplo lt p gt lt h1 gt lt form gt minhaclasse etc Propriedade o atributo do elemento HTML ao qual ser aplicada a regra por exemplo font color background etc Valor a caracter stica espec fica a ser assumida pela propriedade por exemplo letra tipo arial cor azul fundo verde etc Na sintaxe de uma regra CSS escreve se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves Quando mais de uma propriedade for definida na regra deve se usar ponto e v rgula para separ las O ponto e v rgula facultativo no caso de propriedade nica e tamb m ap s a declara o da ltima propriedade no caso de mais de uma No entanto de boa t cnica usar se sempre o ponto e v rgula ap s cada regra para uma propriedade Ver os exemplos abaixo p font size 1260 ponto e virgula facultativo 7 body color 1000000 background HFFFFFF font weight bold ponto e virgula
50. 1 e font style 1 normal fonte normal na vertical 2 italic fonte inclinada 3 oblique fonte obliqua e font variant nome nome da fonte gen rico 1 normal fonte normal 2 small caps transforma em mai sculas de menor altura e font weight 1 normal 2 bold 3 bolder 4 lighter 5 100 6 200 7 300 8 400 9 500 10 600 11 700 12 800 13 900 Vamos a seguir analisar cada uma delas detalhadamente atrav s de exemplos pr ticos Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada bem como um trecho do documento HTML onde se aplicam as regras A seguir mostro o efeito que a regra produz Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o c digo no seu editor mude os valores e veja o resultado no browser Esta a melhor e mais r pida maneira de voc aprender CSS Bons estudos E fa a timo proveito dos tutoriais color A cor da fonte lt html gt lt head gt lt style type text css gt ul es hd color 1EF0000 ha color YO00FFOO0O pofeolor 90 0 0 255 41 gt lt style gt lt head gt lt body gt lt ni gt Cabe alho com letras vermelhas lt h1 gt lt h2 gt Cabe alho com letras verdes lt h2 gt lt p gt Par grafo com letras azuis lt p gt lt body gt lt html gt Este o efeito da folha de estilo acim
51. CMC USP Departamento de Atualmente o Departamento de Matem tica oferece cursos de Licenciatura e Matem tica SMA Bacharelado em Matem tica e o Bacharelado em Matem tica Aplicada e Computa o Cient fica paramen teg Departamento de Computa o e Estat stica respons vel pelo Bacharelado em Fomputi o Ci ncia de Computa o e o curso noturno de Bacharelado em Inform tica Estat stica SCE l Para maiores informa es Cursos de Gradua o grad icmc usp br Cursos de P s Gradua o posgrad icmc usp br Agora j vimos grande parte dos recursos dispon veis para manipular tabelas que permitem produzir bons efeitos de apresenta o Extens es de tabelas Diversas extens es de tabelas possibilitam a apresenta o de efeitos muito bons nas p ginas Cor de fundo lt TABLE BORDER 5 CELLSPACING 5 CELLPADDING 10 BGCOLOR E1FFD9 gt janeiro fevereiro mar o abril maio junho lt TABLE BORDER 5 CELLSPACING 5 CELLPADDING 10 gt lt TR gt lt TD BGCOLOR EIFFD9 gt Janeiro lt TD gt lt TD gt fevereiro lt TD gt lt TD BGCOLOR E1FFD9 gt mar o lt TD gt lt TR gt lt TR gt lt TD gt abril lt TD gt lt TD BGCOLOR tE1IFFD9 gt maio lt TD gt lt TD gt junho lt TD gt lt TR gt lt TABLE gt janeiro fevereiro mar o abril maio junho Cor de borda lt TABLE BORDER 5 CELLSPACING 5 CELLPADDING 10 BGCOLOR fE1IFFDO9O BORDERCOLOR Y00FFO0O gt janeiro fevereiro mar o
52. Cruz S o Paulo AEA lt input type radio name time value palmeiras gt Palmeiras lt input type radio name time value nautico gt N utico lt input type radio name time value fla gt Flamengo Sabor de lt select alue sabor name sorvete gt sorvete que aa ds option Aloe asda prefere lt option gt Creme lt option Morango lt option gt Chocolate lt select gt Algo mais lt textarea cols 40 rows 5 name comentario gt Escreva um Coment rio lt textarea gt tio onbhs type submit name submit value Enviar gt lt input type reset name cancela value Apagar gt Note que na entrada de dados sobre esportes cada item tem um nome diferente esportel esporte2 pois mais de um esporte pode ser escolhido No caso da entrada sobre o time preferido todos os itens t m o mesmo nome time pois somente um poder ser selecionado Experimente entrar dados nesse formul rio ou apenas pressione Enviar e veja como conseguido o resultado Aqui est a formata o completa do formul rio acima abrangendo uma tabela lt form name forml action forml php method post gt lt table class conteudo border 0 cellpadding 5 cellispacing 0 width 95 align center gt SEE std yalign LOT bagcolor CCeCEC gt lt p class conteudo gt Nome lt p gt lt td gt lt La poco Lor FCccece gt lt p class conteudo gt lt input type text name nome size 35 gt lt p gt E
53. DOS As 19 20h voc retorna a liga o do cliente e pede para a secret ria avis lo de que j est no ar sem maiores traumas correrias e estresses Ah e mais mesmo que o site tivesse 1 800 p ginas e n o as 180 da situa o criada voc gastaria os mesmos cinco segundos As restri es A id ia a filosofia mesmo de projeto Web aponta para uso amplo das CSS ainda n o explorada em toda sua potencialidade por raz es de incompatibilidades de certas propriedades CSS com navegadores mais antigos e com as Interpreta es diferentes das CSS por parte das aplica es de usu rios criadas por fabricantes distintos Contudo h uma tend ncia e torcemos para que se concretize rapidamente de que as novas tecnologias voltadas para o desenvolvimento n o s das variadas aplica es de usu rio como tamb m de softwares e hardwares atendam e se enquadrem dentro das recomenda es e especifica es dos rg os normatizadores notadamente as standards do W3C Quando o projeto Web em todas as suas incont veis variantes seguir a normatiza o e padroniza o recomendada pelo W3C teremos uma Web muito mais f cil din mica e agrad vel O efeito cascata Que estilo ser aplicado quando h conflito de estilos especificados por exemplo uma regra de estilo determina que os par grafos ser o na cor preta e outra que ser o na cor azul para um mesmo elemento HTML Aqui entra o efeito cascata que nada mais do que o es
54. H6 gt lt Hi gt Este um cabe alho de n vel I1 lt Hl gt lt H2 gt Este um cabe alho de n vel 2 lt H2 gt lt H3 gt Este um cabe alho de n vel 3 lt H3 gt lt H4 gt Este um cabe alho de n vel 4 lt H4 gt lt H5 gt Este um cabe alho de n vel 5 lt H5 gt lt H6 gt Este um cabe alho de n vel 6 lt H6 gt Esses cabe alhos s o mostrados da seguinte forma Este um cabe alho de n vel 1 Este um cabe alho de n vel 2 Este um cabe alho de n vel 3 Este um cabe alho de n vel 4 Este um cabe alho de n vel 5 Este um cabe alho de n vel 6 Aninhamento de cabe alhos Os cabe alhos n o podem ser aninhados isto a formata o lt H2 gt Este lt Hl gt um cabe alho de n vel 1 lt H1 gt dentro de um cabe alho de n vel 2 lt H2 gt pode produzir algum resultado pr ximo ao desejado Este um cabe alho de n vel 1 Dentro de um cabe alho de n vel 2 mas o mais comum que os browsers entendam essa formata o como sendo lt H2 gt Este lt H2 gt lt Hl gt um cabe alho de n vel 1 lt Hl gt dentro de um cabe alho de n vel 2 02 gt OU seja como se estivesse faltando uma etiqueta de fechamento de lt H2 gt antes de lt H1 gt e faltando uma abertura de lt H2 gt depois do fechamento de lt H1 gt oferecendo o seguinte resultado Este um cabe alho de n vel 1 dentro de um cabe alho de n vel 2 Os editores WYSIWYG naturalmente n o permite
55. Internet Explorer que n o suporta outline Abreviando border As regras a seguir definem valores para propriedades de borda GL border width 1px border style solid border color f00 E pode ser abreviada para div border 1px solid f00 Erro Indicador n o definido As regras a seguir definem valores para espessuras de borda p border Lop width Zpx border right width 1lpx border bottom width 3px border left width 5px E pode ser abreviada para tborder width 2px 1px SpX 5PX Erro Indicador n o definido As regras a seguir definem valores para cores de borda hi 4 border top color 4t00 p rder tignt color teco border bottom color r0o0f border left color 999 E pode ser abreviada para p border color tf00 fccc 00f 999 Erro Indicador n o definido As regras a seguir definem valores para estilos de borda p border top style solid border right style ridge border bottom style double border left style dotted E pode ser abreviada para p border style solid ridge double dotted Introdu o ao PHP O que PHP HP acr nimo de Hypertext Preprocessor pr processador de hipertexto uma poderosa linguagem de programa o mundialmente usada principalmente no ambiente Web para gerar conte dos din micos na internet O PHP um produto de c digo fonte aberto o que significa que voc tem acesso ao seu c digo fonte poss vel utiliz
56. LLER spo SJ IITLE gt lt META HTTP EQUIV Refresh CONTENT segundos URL pagina html gt lt HEAD gt onde pagina html a p gina a ser carregada automaticamente segundos o n mero de segundos passados at que a p gina indicada seja carregada Como foi comentado no exemplo o efeito interessante mas para que serve Se n o pensamos em uma finalidade til para esse efeito ca mos na tenta o de us lo toa A aplica o mais utilizada a atualiza o autom tica de um documento que por exemplo tenha uma foto produzida por uma c mara de v deo pode se for ar com o Refresh a atualiza o dessa p gina mostrando para o leitor sempre uma imagem mais atual de algum evento sendo focalizado pela c mara Outra utiliza o em chats ou em p ginas que desviem a navega o por documentos desenvolvidos para browsers avan ados A se o lt BODY gt Tudo que estiver contido em lt BODY gt ser mostrado na janela principal do browser sendo apresentado ao leitor lt BoDy gt pode conter cabe alhos par grafos listas tabelas links para outros documentos imagens formul rios anima es v deos sons e scripts embutidos Veja um documento b sico em HTML Atributos de lt BODY gt Atrav s de atributos de lt BoDY gt podemos definir cores para os textos links e para o fundo das p ginas bem como uma imagem de fundo marca d gua lt BODY BGCOLOR frrggbb TEXT frrggbb LINK
57. S acima em uma p gina web Todas as propriedades do fundo em uma declara o nica Esta a maneira abreviada de voc escrever uma regra para as propriedades do fundo Voc pode declarar todas ou algumas das propriedades estudadas em uma regra nica 2 A sintaxe geral background Color image repeat attachment em qualquer ordem podendo ser omitido um mais valores esta position Veja o exemplo abaixo lt html gt lt head gt gt lt style type text css gt gt lt l s Dody 4 background 00FF00 url css gif no repeat fixed 200px 70px gt lt style gt lt head gt Voc poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos para complementar este tutorial nesta p gina interativa A propriedade list Mudando o estilo das listas HTML A propriedade list define as caracter sticas valores das listas HTML As propriedades list s o as listadas abaixo e list style image Imagem como marcador da lista e lIist style position onde o marcador da lista posicionado e list style type tipo do marcador da lista e Iist style maneira abreviada para todas as propriedades Valores v lidos para as propriedades do lista e Jlist style image l none 2 URL url caminho marcador gif e Jlist style position 1 outside marcador fora do alinhamento do texto 2 inside marcador al
58. SIZE 70 WIDTH 2 ALIGN LEFT gt insere uma linha de largura 70 pixels comprimento 2 pixels alinhada esquerda o Netscape aparentemente n o aceita esta formata o de lt HR gt Listas em HTML H v rios tipos de listas em HTML sendo estas as mais usadas e corretamente apresentadas pelos browsers Listas de Defini o Estas listas s o chamadas tamb m Listas de Gloss rio uma vez que t m o formato lt DL gt lt DT gt termo a ser definido lt DD gt defini o lt DT gt termo a ser definido lt DD gt defini o S DL gt Que produz termo a ser definido defini o termo a ser definido defini o Este tipo de lista muito utilizado para diversos efeitos de organiza o de p ginas por permitir a tabula o do texto Um exemplo s o os ndices de navega l o presentes nas p gi nas deste tutorial outro exemplo a lista composta abaixo lt DL gt lt DT gt Imperadores do Brasil CDE gt Pedro I lt DL gt lt DD gt Nome completo Pedro de Alc ntara Francisco Ant nio Jo o Carlos Xavier de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragan a e Bourbon X DL gt lt DD gt D Pedro II lt DL gt lt DD gt Nome completo Pedro de Alc ntara Jo o Carlos Leopold Salvador Bibiano Francisco Xavier de Paula Leoc dio Miguel Gabriel Rafael Gonzaga lt DL gt IDL Imperadores do Brasil D Pedro I Nome completo Pedro de Alc ntara Francisco Ant nio Jo o Carlos Xavier de P
59. TR gt lt TD gt duas linhas lt TD gt lt TR gt lt TR gt lt TD gt tres linhas lt TD gt lt TR gt lt TABLE gt Colunas 1 e 2 linhal coluna 1 linha 1 coluna 2 linha 2 coluna 1 linha 2 coluna 2 uma linha 3 linhas duas linhas tres linhas Neste exemplo vemos que o cabe alho Colunas 1 e 2 compreende duas colunas CoLSPAN 2 O cabe alho 3 linhas compreende por sua vez 3 linhas RowsPAN 3 Tabelas sem borda As p ginas deste tutorial foram constru das com tabelas sem borda Para tanto foi empregada a seguinte delara o lt TABLE BORDER 0 gt lt TABLE gt Alinhamentos em tabelas Este exemplo servir para estudarmos alinhamentos controle de larguras e espa amento em tabelas O Instituto de Ci ncias Matem ticas e de Computa o ICMC USP formado pelos Departamentos de Matem tica e de Ci ncias de Computa o e Estat stica O ICMC originou se em 1953 como Departamento de Matem tica da ni Escola de Engenharia de S o Carlos EESC USP fundado por Pr dio E cipal do ICMC USP renomados matem ticos italianos e brasileiros Atualmente o Departamento de Matem tica oferece cursos de Licenciatura e Bacharelado em Matem tica e de Bacharelado em Matem tica Aplicada e Computa o Cient fica O Departamento de Computa o e Estat stica respons vel pelo Bacharelado em Ci ncia de Computa o e pelo curso noturno de Bacharelado em Inform tica Departamento de Matem tica SMA
60. a Cabe alho com letras vermelhas Cabe alho com letras verdes Par grafo com letras azuis font family O tipo de fonte lt html gt lt head gt lt style type text css gt Lic NA Arront family arral helvetica Serii p cfont fFanalys Sans serit gt lt style gt lt head gt lt body gt lt n2 gt Fam lia por nome arial helvetica serif lt h2 gt lt p gt Fam lia gen rica sans serif lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Fam lia por nome arial helvetica serif Fam lia gen rica sans serif Notas A propriedade font family usada para definir uma lista de tipos de fontes O browser assume o primeiro nome que ele reconhece na lista Separar cada nome por uma v rgula e sempre prever um nome gen rico Se o nome da fonte for composto mais de uma palavra p ex Comic Sans MS usar aspas duplas no nome Se estiver definindo um atributo de style em HTML onde as aspas duplas j est o presentes usar no nome de fonte composto aspas simples font size O tamanho de fonte lt html gt lt head gt lt style type text css gt e O hill TONG SIze Mpx AZ tont saz Smalter pi tont saze LOOS gt ap etyle gt lt head gt lt body gt lt ni gt Letras com tamanho 14px lt h1 gt lt n2 gt Letras com tamanho smaller lt h2 gt lt p gt Letras com tamanho 100 lt p gt lt body gt lt html g
61. a grande rede mundial de computadores Entretanto essa defini o n o exata Na realidade Internet o conjunto de diversas redes de computadores que se comunicam atrav s dos protocolos TCP IP O hardware para conex o Internet Para conex o discada preciso ter um modem para comunica o com o provedor de acesso via linha telef nica comum Para conex o dedicada ADSL preciso ter uma placa de rede Ethernet 10 100 e um modem ADSL al m de um separador de sinais do telefone e da transmiss o de dados Para conex o dedicada a cabo preciso um cablemodem e tamb m um separador de sinais de TV e dos dados Para conex o dedicada wireless preciso um receptor de microondas e uma antena externa para o acesso rede do provedor O software b sico para conex o Internet Cada equipamento de hardware tem seus programas pr prios para seu funcionamento Al m do software associado ao hardware para conex o Internet preciso ter pelo menos um browser navegador para se poder visitar os sites dispon veis Exemplos de browser navegador Netscape Internet Explorer Opera Mozilla Protocolos Assim como temos nossas regras sociais de comunica o por exemplo em uma palestra somente uma pessoa fala em uma assembl ia s o v rias as pessoas que falam e mesmo assim uma pessoa fala por vez tamb m os computadores precisam de algumas regras para trocar informa es No caso da Internet essas
62. a se quisermos um link deste documento para um outro que esteja em diret rio diferente neste mesmo servidor escrevemos por exemplo lt A HREF ensino material gt Instituto de Ci ncias Matem ticas e de Computa o Material Did tico lt A gt que produz o link Instituto de Ci ncias Matem ticas e de Computa o Material Did tico Para usar links com caminhos relativos preciso portanto conhecer a estrutura do diret rio do servidor no qual estamos trabalhando Quando h alguma d vida o melhor usar o caminho absoluto Caminho absoluto Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor por exemplo lt A HREF http www labes icmc usp br gt Laborat rio de Engenharia de Software lt A gt que oferece um link para um documento no servidor WWW do Laborat rio de Engenharia de Software Laborat rio de Engenharia de Software Com a mesma sintaxe poss vel escrever links para qualquer servidor de informa es da Internet Indicadores uso de links Como foi dito anteriormente o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma liga o hipertexto A formata o lt A NAME inicio gt Indicadores uso de links lt A gt faz com que a ncora Indicadores uso de links seja o destino de um link Se escrevermos lt A HREF finicio gt Topo do documento lt A gt teremos uma liga o hipertexto para um trecho
63. a abreviada de voc escrever uma regra para as propriedades das listas Voc pode declarar duas das propriedades estudadas em uma regra nica A sintaxe geral esta list style position imagem OU list style position type podendo inverter a ordem Veja o exemplo abaixo lt html gt lt head gt lt style typo teEext csS gt Slez ul list style inside Url seta gif gt lt style gt lt head gt lt body gt lt ul gt lt li gt Texto para demonstrar a propriedade de declara o nica para listas usando CSS Folhas de Estilo em Cascata lt 1li gt lt li gt Item dois lt 1li gt lt l15 gt Item tres lt I gt s as lt body gt lt html gt A folha de estilo acima resultar nesta lista e Texto para demonstrar a propriedade de declara o nica para listas usando CSS Folhas de Estilo em Cascata e Item dois e Item tres Pseudo elementos CSS Sintaxe S o usados em CSS para adicionar efeitos a um seletor ou a parte de um seletor A sintaxe dos pseudo elementos seletor pseudo elemento propriedade valor As classes em CSS podem tamb m ser usadas com pseudo elementos Esta regra permite que voc defina diferentes efeitos para pseudo elementos localizados em diferentes lugares em uma mesma p gina seletor classe pseudo elemento propriedade valor O pseudo elemento sirst 1etter O pseudo elemento first letter usado para obter um efeito
64. a nesse instante Se o penhor dessa igualdade Conseguimos conquistar com bra o forte Em teu seio liberdade Desafia o nosso peito a pr pria morte P tria amada Idolatrada Salve Salve Brasil um sonho intenso um raio v vido De amor e de esperan a terra desce Se em teu formoso c u risonho e l mpido A imagem do Cruzeiro resplandece Gigante pela pr pria natureza Es belo s forte imp vido colosso E o teu futuro espelha essa grandeza Terra adorada Entre outras mil Es tu Brasil O P tria amada Dos filhos deste solo s m e gentil P tria amada Brasil Deitado eternamente em ber o espl ndido Ao som do mar e luz do c u profundo Fulguras Brasil flor o da Am rica Iluminado ao sol do Novo Mundo Do que a terra mais garrida Teus risonhos lindos campos t m mais flores Nossos bosques t m mais vida Nossa vida no teu seio mais amores P tria amada Idolatrada Salve Salve Brasil de amor eterno seja s mbolo O l baro que ostentas estrelado E diga o verde louro dessa fl mula Paz no futuro e gl ria no passado Mas se ergues da justi a a clava forte Ver s que um filho teu n o foge luta Nem teme quem te adora a pr pria morte Terra adorada Entre outras mil Es tu Brasil O P tria amada Dos filhos deste solo s m e gentil P tria amada Brasil Hino do Estado do Cear Poesia de Thomaz Lopes M sica
65. a uma das quatro bordas individualmente Neste tutorial abordei sumariamente algumas das propriedades fornecendo as bases para seus estudos mais completos Voc poder fazer uso de um excelente editor de bordas para descobrir mais efeitos e complementar este tutorial nesta p gina interativa A propriedade padding Os espa amentos nos elementos HTML A propriedade para espa amentos alguns traduzem como enchimento define um valor para os espa amentos entre o conte do e as bordas dos elementos HTML As propriedades para espa amentos s o as listadas abaixo e padding top define a espa amento superior e padding right define a espa amento direita e padding bottom define a espa amento inferior e padding left define a espa amento esquerda e padding maneira abreviada para todas os espa amentos Valores v lidos para as propriedades de espa amento 1 auto valor default da margem 2 length uma medida reconhecida pelas CSS px pt em cm 3 porcentagem da largura do elemento pai Vamos a seguir analisar cada uma delas detalhadamente atrav s de exemplos pr ticos Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada bem como um trecho do documento HTML onde se aplicam as regras A seguir mostro o efeito que a regra produz Observe a regra e o efeito e pa
66. ad gt lt style type text css gt gros p line height 200 margin 40px 0 40px O gt lt style gt lt head gt lt DoOdv gt lt p gt To Par grafo saborem ipsum dolor sit amet consectetuer adipiscing elit Nulla pharetra egestas neque DuLs d Lor Lacus volntpat ac vestibulum nec suscipit a felis Aenean pharetra orci id edit Duis non dui Suspendisse potenti Ut de risus Etiam dignissim Quisque nec felis lt p gt lt p gt 2OsP arag ral Ork etra Sed blandit est non ante Ut imperdiet sagittis mi Sed gravida sodales nisl Ut hendrerit ipsum eu enim Duis tempus consequat mauris In hac habitasse platea dictumst Vavamus lectus Justo Commodo in rutrum non eleifend eget pede Sed ac lacus In tortor lt p gt lt body gt lt html gt O c digo acima renderizado pelo navegador conforme mostrado abaixo Notar que a entrelinha continua em 200 e agora o espa amento entre par grafos cresceu para 40 pixels cumprindo a regra CSS escrita lo Par grafo Lorem ipsum dolor sit amet consectetuer adipiscing elit Nulla pharetra egestas neque Duis dolor lacus volutpat ac vestibulum nec suscipit a felis Aenean pharetra orci id elit Duis non dui Suspendisse potenti Ut ac risus Etiam dignissim Quisque nec felis 20 Par grafo Sed blandit est non ante Ut imperdiet sagittis mi Sed gravida sodales nisl Ut hendrerit ipsum eu enim Duis tempus consequat
67. ado para selecionar entre dois valores dependendo de uma terceira em vez de selecionar duas senten as ou encadeamentos de execu o Englobar express es tern rias com par nteses uma boa id ia Operadores de atribui o O operador b sico de atribui o 112 sua primeira vista deve ser a de definir isto como igual N o Isto quer dizer na verdade que o operando da esquerda recebe o valor da express o da direita ou seja configurado para O valor de uma express o de atribui o o valor atribu do Ou seja o valor de a 3 3 Isto permite que voc fa a alguns truques No exemplo abaixo a igual a 9 agora e b foi configurado como 4 lt php a Sb 4 5 E H ainda o que chamamos de operadores combinados Significa combinar operadores aritm ticos e de concatena o com o operador de atribui o Exemplo vamos verificar como concatenar duas strings fazendo uso dos operadores combinados lt 7 php a Bom a Dia echo ia A Acima o operador significa concatenar com o valor anterior da vari vel o novo valor passado lt php a 5 a 3 echo a Es Vejamos outro exemplo com operador aritm tico O operador soma vari vel o valor passado Neste caso foi somado o valor 3 ao valor 5 Da mesma forma voc pode usar para subtra o para multiplica o etc Operadores aritm ticos Lem
68. ando PHP escrever amos o c digo a seguir para configurar os dados no array mostrado na figura acima cesta array array PER P ra T J array TUVA Uwa 3 array MAC Ma 1 j J Voc pode ver a partir dessa defini o que nosso array de produtos agora cont m tr s arrays Para acessar os dados em um array dimensional lembre se de que precisamos do nome dos arrays e do ndice dos elementos Um array bidimensional semelhante exceto que cada elemento tem dois ndices uma linha e uma coluna A linha superior a linha O e a coluna na extremidade esquerda a coluna 0 Para exibir o conte do desse array poder amos acessar manualmente cada elemento no pedido deste modo echo cestal 0 cesta 0 1 cesta z2 br gt echo Scesta l 0 Scestali dl cScestali 2J cbr gt echo Scesta le D Scesta lel 1 Scestale 2 lt cpbr gt for Slinha O Slinhax lt 3 Slinha t for Scoluna 0 Scoluna lt 3 Scoluna echo cesta linba coluna echo lt hr gt Alternativamente poder amos colocar um loop for dentro de outro para alcan ar o mesmo resultado As duas vers es desse c digo produzem a mesma sa da no navegador EMozilla Firefon O OO arquivo Editar Exibir Hist rico Favoritos Ferramentas Ajuda C ps A E https Mocalhostfejovem rs D JPER P ral UY Aval BWLA CMla l
69. ar grafo 1 linha 1 do par grafo 1 linha 2 do par grafo 1 Par grafo 2 linha 1 do par grafo 2 linha 2 do par grafo 2 lt P gt tem atributo de alinhamento como os cabe alhos lt P ALIGN CENTER gt Assim como os trens as boas id ias s vezes chegam com atraso lt BR gt Giovani Guareschi lt P gt Assim como os trens as boas id ias as vezes chegam com atraso Giovani Guareschi lt P ALIGN RIGHT gt Como diz o prov rbio chin s melhor passar por ignorante uma vez do que permanecer ignorante para sempre lt P gt Como diz o prov rbio chin s E melhor passar por ignorante uma vez do que permanecer ignorante para sempre lt P ALIGN LEFT gt Este o alinhamento padr o default e por isso n o vou colocar nenhuma frase especial lt P gt Este o alinhamento padr o default e por 1sso n o vou colocar nenhuma frase especial Linha Horizontal lt HR gt Insere uma linha horizontal Erro Indicador n o definido Essa linha tem diversos atributos oferecendo resultados diversos lt HR SIZE 7 gt insere uma linha de largura 7 pixels Erro Indicador n o definido lt HR WIDTH 50 gt insere uma linha que ocupa 50 do espa o horizontal dispon vel Erro Indicador n o definido lt HR WIDTH 30 ALIGN RIGHT NOSHADE gt insere uma linha de comprimento 30 do espa o horizontal dispon vel alinhada direita sem efeito tridimensional Erro Indicador n o definido lt HR
70. ares Uma lista de frutas ser o array para nosso exemplo Na figura abaixo voc pode ver uma lista de tr s frutas armazenadas em um formato de array e uma vari vel chamada cesta que armazena os tr s valores Veremos como criar uma vari vel como essa em um minuto Ss cesta Os valores armazenados em um array s o chamados elementos do array Cada elemento do array tem um ndice associado tamb m denominado chave que utilizado para acessar o elemento Os arrays na maioria das linguagens de programa o t m ndices num ricos que geralmente iniciam em zero ou um O PHP permite o uso de n meros e strings como ndices de array E poss vel usar arrays da maneira tradicional indexada numericamente ou agrupar as chaves para que a indexa o seja mais significativa e til Essa abordagem deve ser familiar caso voc j tenha usado arrays associativos ou mapas em outras linguagens de programa o A abordagem de programa o pode variar um pouco dependendo se voc est usando array indexados numericamente de forma padr o ou valores de ndice mais Interessantes Iniciaremos examinando arrays numericamente indexados e depois veremos as chaves definidas pelo usu rio Arrays numericamente indexados Esses arrays s o suportados na maioria das linguagens de programa o Em PHP os ndices iniciam no zero por padr o embora voc possa alterar isso Inicializando arrays numericamente indexadosPara criar o a
71. as m dias udio e v deo s o classificados como m dias cont nuas pois s o geradas segundo determinadas taxas devendo ser reproduzidas nessa mesma taxa para evitar distor es Quanto mais informa es de uma sequ ncia de udio ou v deo digital s o armazenados melhor a qualidade do udio ou v deo reproduzido Isso implica logicamente no fato de arquivos de udio e v deo serem geralmente muito grandes o que torna invi vel o uso mais frequente dessas m dias em p ginas Web Al m de procurarmos lidar sempre com pequenos trechos de udio e v deo podemos explorar tecnologias recentes que permitem a transmiss o em tempo real Folhas de Estilo Um avan o interessante na linguagem HTML ap s a vers o 3 2 foi a introdu o das Style Sheets ou Cascading Style Sheets Essas folhas de estilo permitem o uso de formata es uniformes em um site de maneira bastante econ mica Logo nas primeiras se es deste tutorial Cores e fontes de textos vimos que para poder formatar um texto era preciso escrever uma marca o parecida com SnS gt lt font face Arial color 4A D7B gt Um ELBULO gen rico lt font gt lt h3 gt lt p gt lt font face Arial size 2 gt Um texto gen rico com algum lt font gt lt font face Arial size 2 color red gt destaque qualquer lt font gt lt font face Arial size 2 gt junto ap s um t tulo gen rico etc lt font gt lt p gt para ter o resultado Um t tulo ge
72. aula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragan a e Bourbon D Pedro H Nome completo Pedro de Alc ntara Jo o Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leoc dio Miguel Gabriel Rafael Gonzaga Listas n o numeradas S o equivalentes s listas com marcadores do MS Word lt UL gt lt LI gt item de uma lista lt LI gt item de uma lista que pode ser t o grande quanto se queira sem que seja necess rio se preocupar com a formata o das margens de texto lt LI gt item lt LL UL e item de uma lista e item de uma lista que pode ser t o grande quanto se queira sem que seja necess rio se preocupar com a formata o das margens de texto e item A diferen a entre o resultado da marca o HTML e do Word est na mudan a dos marcadores assinalando os diversos n veis de listas compostas lt UL gt lt LI gt Documentos b sicos lt LI gt Documentos avan ados lt UL gt lt LI gt formul rios lt UL gt lt LI gt CGI lt UL gt lt LI gt contadores lt LI gt rel gios lt UL gt lt LI gt Detalhes sobre imagens lt UL gt e Documentos b sicos e Documentos avan ados o formul rios CGI o contadores o rel gios e Detalhes sobre imagens Essa lista pode ter marcadores diferentes indicados atrav s do atributo TYPE que assume os valores CIRCLE SQUARE e DISC default L TXPESCIRCLES lt LI gt um item lt LI gt mais um item lt UL gt o um i
73. bra se da aritm tica b sica da escola Estes operadores funcionam exatamente como aqueles Exemplo Nome Resultado a b Adi o Somade ae b a b Subtra o Diferen a entre a e b a b Multiplica o Produto de a e b saso Pi o fuocienedeSaporSh a b M dulo Resto de a dividido por b O operador de divis o sempre retorna um valor com ponto flutuante fracion rio mesmo que os dois operandos sejam inteiros ou strings convertidos para inteiros Operadores de compara o Operadores de compara o como os seus nomes implicam permitem que voc compare dois valores A tabela abaixo lista os operadores de compara o existentes no PHP Exemplo Nome Resultado Sa b Igual Verdadeiro TRUE se a igual a b a b Pe TRUE se a igual a b e eles s o do mesmo tipo somente para PHP4 a b Diferente Verdadeiro se a n o igual a b a lt gt b Diferente Verdadeiro se a n o igual a b a b PM de a n o igual a b ou eles n o s o do mesmo ipo somente para o PHP4 a lt b Menor que Verdadeiro se a estritamente menor que b a gt b Maior que Verdadeiro se a estritamente maior que b a lt b erdadeiro se a menor ou igual a b a gt b Maior ou igual Verdadeiro se a maior ou igual a b Outro operador condicional o operador ou tern rio que opera como no C e em muitas outras linguagens Vejamos um exempl
74. case Por exemplo 4 php switch Si case 0 echo i igual a co break case 1 echo i igual a Il break CASE Zi echo i igual a zZz break default echo i n o igual a O 1 ou e BREAK BREAK cancela a execu o do comando for foreach while do while ou switch atual Break aceita um argumento num rico opcional que diz a ele quantas estruturas aninhadas englobadas devem ser quebradas CONTINUE CONTINUE usado dentro de estruturas de loops para saltar o resto da itera o do loop atual e continuar a execu o no In cio da pr xima itera o Continue aceita um argumento num rico opcional que diz a ele de quantos n veis de loops aninhados ele deve saltar at o fim php i 0 while i i lt 5 4 echo Foracbe gt in while 1 f echo enbsp enbsp Meio lt sbr gt in s while 1 f echo enbsp enbsp Dentrocbre gt rin continue Ss h echo Isto nunca ser exibido lt br gt in h echo Nem isso lt br gt in h p Ilustra o ex_continue php FOR A estrutura de la o loop FOR realiza repetidas a es a depender das express es passadas como par metro No total s o 3 express es for exprl expr 2 EXpr ji A ES A primeira express o expr1 avaliada executada uma vez no come o do loop No come o de cada itera o expr2 avaliada Se ela avaliada como TRUE o loop continua e o s comando s aninhado s s o executado
75. cia de Hipertexto O HTTP o protocolo usado para a transmiss o de dados no sistema World Wide Web Cada vez que voc aciona um link seu browser realiza uma comunica o com um servidor da Web atrav s deste protocolo URL O sistema de endere amento da Web baseado em uma sintaxe chamada URI Universal Resource Identifier Identificador Universal de Recursos Os endere os que utilizamos atualmente s o os URLS que seguem essa sintaxe URL significa Uniform Resource Locator Localizador Uniforme de Recursos Um exemplo de URL http www icmc usp br ensino material html url html Esse endere o identifica o protocolo de acesso ao recurso desejado http a m quina a ser contactada www icmc usp br 0 caminho de diret rios at o recurso ensino material html O recurso arquivo a ser obtido ur1 html Atrav s de URLs tamb m acionamos programas scripts enviamos par metros para esses programas etc HTML HTML significa HyperText Markup Language Linguagem de Marca o de Hipertexto N o poss vel programar em linguagem HTML pois ela simplesmente uma linguagem de marca o ela serve para indicarmos formata es para textos inserir imagens e liga es de hipertexto Os browsers s o os respons veis por identificar as marca es em HTML e apresentar os documentos conforme o que foi especificado por essas marca es Introdu o Linguagem HTML HTML HyperText Markup
76. com frames tem um texto fonte semelhante a lt HTML gt lt HEAD gt lt TITLE gt Assunto X lt TITLE gt lt HEAD gt lt FRAMESET COLS 20 80 gt lt FRAME SRC indicel html gt lt FRAME SRC apresenta html NAME principal gt lt NOFRAME gt lt BODY gt lt H2 gt Bem vindo p gina do assunto X lt h2 gt lt P gt Bl bl bl bl bl bl bl bl bl bl lt BODY gt lt NOFRAME gt lt FRAMESET gt lt HTML gt A parte FRAMESET define a divis o da p gina em quadros Neste exemplo a p gina 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 formata o de FRAMESET temos Os FRAME SRC que s o refer ncias s p ginas que ser o mostradas nos frames definidos Assim no c digo acima vemos que a p gina indicel htmi ser mostrada na primeira coluna que ocupar 20 da tela e a p gina apresenta html ser mostrada na segunda ocupando 80 da tela A formata o de frames inclui tamb m uma parte NOFRAME que mostrada normalmente pelos browsers que n o suportam sua apresenta o Atributos de Frames At este ponto vimos os atributos COLS ROWS para FRAMESET SRC NAME para FRAME Outros atributos permitem um maior controle sobre a apresenta o Elimina o das bordas dos frames lt FRAMESET COLS 20 80 FRAMEBORDER no gt lt FRAME SRC indice4 html gt lt FRAME SRC apre
77. cos A dissemina o da cultura UNIX no mercado comercial s teve In cio com o advento da d cada de 80 Cita o de texto encontrado p gina 18 do livro UNIX Guia do Usu rio Autores Marcus C Sampaio Jacques P Sauv e J Ant o B Moura McGraw Hill 1988 Tabelas A formata o de tabelas foi adotada bem antes de sua inclus o na defini o de HTML A manipula o de tabelas mesmo em editores trabalhosa a maior diferen a 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 n o de colunas Mas isso ser percebido no decorrer destas p ginas As tabelas foram uma grande conquista para os autores de documentos para a Web Com elas poss vel por exemplo termos estas p ginas do tutorial organizadas em colunas sendo uma delas reservada aos links de navega o dentro de cada se o Tabelas implementam um conceito importante de layout as grades segundo as quais organizamos textos e ilustra es de maneira harmoniosa Como j foi poss vel perceber as tabelas cont m textos listas par grafos Imagens formul rios e v rias outras formata es inclusive outras tabelas Novas vers es de HTML e de browsers populares v m acrescentando diversos atributos s tabelas e nosso objetivo aqui saber lidar com a maioria desses recursos dispon veis Elementos b sicos de tabelas lt TABLE gt lt TABLE gt d
78. de Este par grafo azul letter spacing O espa o entre letras lt html gt lt head gt lt style type text css gt an h2 letter spacing 1 2em p lletter spacing 0 4em gt lt style gt lt head gt lt body gt lt h2 gt Este o cabe alho lt h2 gt lt p gt Este o par grafo lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Este o cabe alho L E ste o paragr f o word spacing O espa o entre palavras lt nEem gt lt head gt lt style type text css gt lim es h2 word spacing 1 8em word specing S0px gt lt style gt lt head gt lt body gt lt h2 gt Este o cabe alho lt h2 gt lt p gt Este o par grafo lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Este o cabe alho Este o paragr fo text align Alinhar o texto lt html gt lt head gt lt style type text css gt ul es ht texr align Lert h2 rext aligns center nn Atert alhan EON rext alagan qJ0strEyvo gt lt style gt lt head gt lt body gt lt hl gt Este o cabe alho 1 lt h1l gt lt h2 gt Este o cabe alho 2 lt hn2 gt lt nh3 gt Este o cabe alho 3 lt hn3 gt lt p gt Este O par grafo cujo texto ss lt p gt lt body gt Ss nem Este o efeito da folha de estilo acima Este o cabe alho 1 Este o cabe
79. de Alberto Nepomuceno Terra do sol do amor terra da luz Soa o clarim que tua gl ria conta Terra o teu nome a fama aos c us remonta Em clar o que seduz Nome que brilha espl ndido luzeiro Nos fulvos bra os de ouro do cruzeiro Mudem se em flor as pedras dos caminhos Chuvas de prata rolem das estrelas E despertando deslumbrada ao v las Ressoa a voz dos ninhos H de florar nas rosas e nos cravos Rubros o sangue ardente dos escravos Seja teu verbo a voz do cora o Verbo de paz e amor do Sul ao Norte Ruja teu peito em luta contra a morte Acordando a amplid o Peito que deu al vio a quem sofria E foi o sol iluminando o dia Tua jangada afoita enfune o pano Vento feliz conduza a vela ousada Que importa que no seu barco seja um nada Na vastid o do oceano Se proa v o her is e marinheiros E v o no peito cora es guerreiros Se n s te amamos em aventuras e m goas Porque esse ch o que embebe a gua dos rios H de florar em meses nos estios E bosques pelas guas Selvas e rios serras e florestas Brotem no solo em rumorosas festas Abra se ao vento o teu pend o natal Sobre as revoltas guas dos teus mares E desfraldado diga aos c us e aos mares A vit ria imortal Que foi de sangue em guerras leais e francas E foi na paz da cor das h stias brancas GOVERNO DO ESTADO po CEAR Secretaria da Educa o
80. deste mesmo documento Topo do documento Da mesma forma constru mos links para trechos determinados de outros documentos desde que saibamos quais trechos do documento destino est o marcados para ponto de chegada de um link Por exemplo S o Carlos um lt A HREF ambiente saocarlos histprog htmlfpolo gt p lo de alta tecnologia lt A gt produz um link para um par grafo marcado com lt A NAME polo gt no arquivo histprogr htm1 sobre a cidade de S o Carlos no diret rio ambiente saocarlos S o Carlos um p lo de alta tecnologia Inser o de imagens O elemento IMG insere imagens que s o apresentadas junto com os textos Um atributo src deve estar presente da seguinte forma lt IMG SRC URL imagem gt onde URL imagem o URL do arquivo que cont m a imagem que se quer inserir pode ser referenciada uma imagem que esteja em um outro servidor o que logicamente n o conveniente Assim escrevendo lt IMG SRC icones newred gif gt inserimos a figura Eno documento As imagens usadas na Web s o armazenadas em arquivos com extens o gif xbm jpg ou jpeg png Atributos b sicos de imagem 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 gr ficos E recomend vel que esteja sempre presente lt IMG SRC URL imagem ALT descri o da
81. dor do c digo em PHP O c digo de um programa escrito em PHP deve estar contido entre os seguintes delimitadores lt php gt Coment rios Tt 2 s 2 4 2 e E 3 maneira de inserir coment rios num c digo PHP Duas delas s o para coment rio de uma nica e linha e a outra para coment rios de mais de uma linha Em coment rios de 1 linha voc pode usar ou J para coment rios de v rias linhas delimite o com GT zhi gt Exemplo 1 7 hi gt php echo Testando coment rios no FHP echo Teste lt hl gt Exemplo Z2 hi gt php echo Testando coment rios no FHP echo Testez E lt hl Exemplo 3 lt h1l gt php echo Testando coment rios no FHP Ee Extens o de arquivos A forma mais comum de nomear programas em PHP a seguinte Extens o Significado php Arquivo PHP contendo um programa Class php Arquivo PHP contendo uma classe Inc php Arquivo PHP a ser inclu do pode incluir constantes ou configura es Comandos de sa da output ml s o comandos utilizados para gerar uma sa da em tela output Se um script php geralmente tem como resultado uma p gina html ou algum outro texto Para gerar esse resultado deve ser utilizada uma das fun es de impress o echo e print Para utiliz las deve se utilizar um dos seguintes formatos 7 php print argumento echo argumentoi echo argumento F echo E um comando qu
82. dor n o definido Como vemos as sequ ncias de escape s o sens veis caixa Os editores de HTML fazem essa tradu o automaticamente Alguns editores no entanto mant m a acentua o sem usar as entidades de formata o Quando 1sso acontece deve se Inserir uma indica o do esquema de codifica o ISO Latin escrevendo lt HTML gt lt HEAD gt lt TITLE gt TILIILE gt lt META HTTP EQUIV Content Type CONTENT text html charset IS0 8859 1 gt lt HEAD gt Existem alguns s mbolos que v m sendo incorporados ao conjunto de caracteres reconhecidos em HTML Por exemplo copy que o s mbolo o reg para o amp sect para s Tamb m se pode usar segqii ncias com c digos ASCII por exemplo amp t191 Qu pasa se or Qu pasa se or Cores e fontes Cores As cores s o introduzidas atrav s do elemento lt FONT gt usando o sistema RGB para cores da mesma forma que vimos para cores de documentos lt FONT COLOR rrggbb gt Texto lt FONT gt Assim um trecho de texto pode ter uma cor diferente da defini o geral de cores feita atrav s dos atributos de lt BODY gt Tamanho A formata o lt FONT SIZE tamanho da letra gt Texto lt FONT gt permite que o autor do documento altere o tamanho das letras em trechos espec ficos de texto O tamanho b sico dos textos 3 Podemos indicar tamanhos relativos a esse por exemplo lt FONT SIZE 2 gt Letra maior lt FONT g
83. e imprime uma ou mais vari veis no console Exemplo lt php cha Pas EH 1E 2 Resultado abc print uma fun o que imprime uma string no console Exemplo lt php print abo Ea Resultado abc Tipo de Dados O PHP suporta oito tipos primitivos S o quatros tipos b sicos e boolean e Integer e float n mero de ponto flutuante ou tamb m double e string Dois tipos compostos e array e object E finalmente dois tipos especiais e resource e NULL O PHP utiliza uma checagem din mica de tipos isto uma vari vel pode conter valores de diferentes tipos em diferentes momentos da execu o do script Por esse motivo n o preciso declarar o tipo de uma vari vel para implement la O interpretador PHP decidir qual o tipo daquela vari vel verificando o conte do em tempo de execu o Ainda assim permitido converter os valores de um tipo para outro utilizando o typecasting ou a fun o settype Tipo Booleano Tamb m chamado de BOOLEAN Este o tipo mais f cil Um booleano expressa um valor de verdade Ele pode ser TRUE ou FALSE Para especificar um literal booleano use as palavras chave TRUE ou FALSE Ambas s o insensitivas ao caso Isso quer dizer que tanto faz voc escrever TRUE True ou true lt php ivariavel True Vejamos agora exemplos sobre como fazer compara es com o tipo booleano php it Svariavel echo A var
84. eb LIEIS lt Er gt lt td valign top gt lt p gt E mallis p gt s td gt lt td gt lt p class conteudo gt lt input type text name email size 25 gt lt p gt lt td gt FEL KGE lt td valign Cop bgcolor COCCO lt p class conteudo gt Esportes que voc pratica lt p gt lt td gt to DOCO LOr TOCCCCO T lt p class conteudo gt lt input type checkbox name esportel value futebol gt Futebol lt br gt lt input type checkbox name esporte2 value volei checked gt V lei lt br gt lt input type checkbox name esporte3 value natacao checked gt Nata o lt br gt lt input type checkbox name esporte4 value basquete gt Basquete lt br gt lt input type checkbox name esporte5S value tenis gt T nis lt br gt lt input type checkbox name esporte6 value bocha gt Bocha lt p gt E eds SILIS LCE sca valign Cop gt lt p class conteudo gt Seu time do cora o lt p gt lt td gt xtd lt p class conteudo gt lt input type radio name time value palmeiras gt Palmeiras lt input type radio name time value nautico gt N utico lt input type radio name time value fla gt Flamengo lt input type radio name time value gremio gt Gr mio lt input type radio name time value santos gt Santos lt input type radio name time value atletico gt Atl tico lt input type radio name time value corinthians gt Corinthians lt input type radio name
85. ebem requisi es de informa o retornando um documento com os resultados correspondentes Esse documento retornado pode existir previamente ou pode ser gerado pelo script especialmente para atender quela requisi o espec fica do usu rio diz se que o documento gerado on the fly 9 Exemplos de aplica o de CGI incluem e processamento de dados submetidos atrav s de formul rios consulta a banco de dados cadastramento em listas livros de visita pesquisas de opini o e cria o de documentos personalizados on the fly e gerenciamento de contadores de acesso e processamento de mapas Tais scripts podem ser escritos em qualquer linguagem que possa ler vari veis processar dados e retornar respostas ou seja qualquer linguagem de programa o A linguagem determinada de acordo com a plataforma do servidor e da aplica o a ser implementada Vis o Geral Os scripts t m uma forma geral comum 1 leitura de dados entrados pelo usu rio e ou campos de informa o de um pacote HTTP 2 processamento dos dados armazenamento dos dados em um banco de dados realiza o de c lculos recupera o de dados etc 3 montagem de uma p gina Web ou gera o de uma imagem com os resultados produzidos Submiss o de formul rios Suponhamos um formul rio cuja marca o principal seja lt FORM ACTION cgi bin teste cgi METHOD m todo gt lt FORM gt onde ACTION Indica o URL do script que receber o
86. elimita uma tabela Um atributo b sico BORDER que Indica a apresenta o da borda lt TABLE BORDER borda gt lt TABLE gt T tulos linhas e elementos SCAPTION gt voa CAPTION define o t tulo da tabela lt TR gt lt TR gt delimita uma linha ETs In define um cabe alho para colunas ou linhas dentro de lt TR gt SID ere LD delimita um elemento ou c lula dentro de lt TR gt Uma tabela simples lt TABLE BORDER 4 gt lt CAPTION gt Primeiro exemplo lt CAPTION gt lt TR gt lt TH gt Coluna 1 lt TH gt lt TH gt Coluna 2 lt TH gt lt TR gt lt TR gt lt TD gt Ilinhal coluna Ltx TD gt lt TD gt linha 1l coluna 2x TD gt lt x lt TR gt lt TR gt lt TD gt Tinha 2 Coluna L lt TD gt lt TD gt linha 2 coluna 2 lt TD gt lt TR gt lt TABLE gt Primeiro exemplo Coluna 1 Coluna 2 linhal coluna 1 linha 1 coluna 2 linha 2 coluna 1 linha 2 coluna 2 T tulos compreendendo mais de uma coluna ou linha E poss vel englobar colunas e linhas atrav s dos atributos CoLSPAN para colunas e ROWSPAN para linhas lt TABLE BORDER 1 gt lt TR gt lt TH COLSPAN 2 gt Colunas 1 e 2 lt TH gt lt TR gt lt TR gt lt TD gt linhal coluna 1x TD gt lt TD gt Linha l1 coluna 2 lt TD gt lt IR gt STR lt TD gt Linha 2 colina L lt 7 TD gt lt TD gt Linha 2 Colana 2Z lt LD gt lt IRS lt TR gt lt TH ROWSPAN 3 gt 3 linhas lt TH gt lt TD gt uma linha lt TD gt lt TR gt lt
87. endececo o DE pet echo ot Livros ag POST a Ene Jor BELO Estilo i foreach 3 POST estilo as jestilo i echo estilo E Perceba que j fizemos uso do construtor foreach acima pois o campo estilo do formul rio m ltipla escolha logo ele considerado um array no PHP Repare ainda que o campo possui os colchetes Isso precisa ser determinado para que o PHP entenda como um Array Acessando o MySQL via PHP Para acessar bases de dados num servidor MySQL necess rio antes estabelecer uma conex o Para isso deve ser utilizado o comando mysql connect ou o mysql pconnect A diferen a entre os dois comandos que o mysql pconnect estabelece uma conex o permanente ou seja que n o encerrada ao final da execu o do script As assinaturas dos dois comandos s o semelhantes como pode ser verificado a seguir int mysql connect string host porta string login string senha int mysql pconnect string host porta string login string senha O valor de retorno um inteiro que identifica a conex o ou falso se a conex o falhar Antes de tentar estabelecer uma conex o o interpretador PHP verifica se j existe uma conex o estabelecida com o mesmo host o mesmo login e a mesma senha Se existir o Identificador desta conex o retornado Sen o uma nova conex o criada Uma conex o estabelecida com o comando mysql connect encerrada ao final da execu o do
88. eproduza o c digo no seu editor mude os valores e veja o resultado no browser Bons estudos E fa a timo proveito dos tutoriais border width border style e border color lt html gt lt head gt lt style type text css gt lt l AS border width medium border style solid border color 0000FF P border width 6px border style dashed border color FF0000 gt lt style gt lt head gt lt body gt lt h3 gt Borda m dia cont nua e azul lt h3 gt lt p gt Borda 6px tracejada e vermelha lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Borda m dia cont nua e azul Borda 6px tracejada e vermelha Nota A propriedade border color n o reconhecida pelo Internet Explorer se for usada isolada Use a propriedade border style para ser reconhecida pelo Internet Explorer Nota A propriedade border color n o reconhecida pelo Netscape Use a propriedade border para ser reconhecida pelo Netscape border style Abaixo os estilos de bordas obtidos com a declara o border style valor dotted dashed etc Borda double Borda inset Borda outset border width Estude o c digo abaixo e tire suas conclus es de como obter outros efeitos com espessuras de bordas lt html gt lt head gt lt style type text css gt P border style solid border bottom width 10px border top
89. er a contra barra tamb m ser impressa Ent o geralmente n o necess rio escapar a pr pria contra barra Vejamos exemplos abaixo 7 php echo isto uma string comam echo vVoc pode incluir novas linhas em stringa dessa maneira que estar tudo hem echo Arnold once said TI 11 be back T j 7 CCI TI CE a MIL Ll J echo Voc tem certeza em apagar CriiNt tols echo Voc tem certeza em apagar C 7 echo Isto n o ser substituido n uma nowa linha echo vVariaveis Stamb m n o Sexpandem Es Em caso de d vida consulte a tabela seguinte im Nova linha r Retorno de carro semelhante a n t Tabula o horizontal A pr pria barra O s mbolo Ny Aspa simples A Aspa dupla uma nova linha Tipo Array Array ou Vetor atualmente um mapa ordenado Um mapa um tipo que relaciona valores por chaves Um array pode ser criado com o construtor de linguagem array Ele pega um certo n mero de pares separados por v rgula chave gt valor Exemplo lt 7 php Sarr array chawe gt yalor ehave gt Pyalor2 3 gt wa alor3 echo Sarr chave echo Sarr chavez echo Sarr 3 E Observe que a chave tanto pode ser uma string chave quanto um inteiro 3 J o valor pode conter qualquer tipo suportado pelo PHP Um valor pode ainda conter outro array como segue no exemplo lt php Sacro arravichave
90. erando o ponteiro de um resultado int mysql data seek int result int numero Cada resultado possui um ponteiro que indica qual ser a pr xima linha lida com o comando mysql fetch row ou mysql fetch array Para alterar a posi o indicada por esse ponteiro deve ser utilizada a fun o mysql data seek sendo que o n mero da primeira linha de um resultado zero Sess es e Cookies N este cap tulo vamos estudas duas das funcionalidades mais utilizadas no PHP Ambas s o utilizadas para armazenar dados por um per odo e diferem no sentido de que as Sess es expiram quando o usu rio fecha o browser e os Cookies podem perdurar um tempo definido pelo programador Uma das utiliza es destas funcionalidades s o por exemplo os carrinho de compras que armazenam as compras feitas pelo usu rio Outro exemplo o de criar fun o de login rea restrita de acesso etc Vamos estudar cada uma separadamente Sess es As sess es s o forma simples de armazenar dados tempor rios Os dados s o apagados assim que o usu rio fechar o browser Mas importante que voc saiba que voc pode excluir sess es quando quiser Imagine o seguinte problema voc tem um site e quer que em algumas se es apenas usu rios que saibam uma determinada senha consigam acessar Voc pode utilizar sess es neste caso Vamos ver como O ponto de partida para o uso de sess es com sua Inicializa o fazendo uso da fun o ses
91. es usadas em pequenos controles e status bar fontes usadas na barra de status O valor inherit usado para herdar a fonte usada pelo elemento pai e tamb m deve ser declarados isolados na propriedade font lt html gt lt head gt lt style type text css gt E Da pi q font status bar ez 4 TONE inherit Do 4 font small caption gt lt style gt lt head gt lt body gt lt p class p1 gt Par grafo com fonte status bar lt p gt lt p class p2 gt Par grafo com fonte inherit lt p gt lt p class p3 gt Par grafo com fonte small caption lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Par grafo com fonte status bar Par grafo com fonte inherit Par grafo com fonte small caption Voc poder fazer uso de um excelente editor para a propriedade font e descobrir mais efeitos para complementar este tutorial nesta p gina interativa A propriedade text Os textos nos elementos HTML As propriedades para textos definem as caracter sticas os valores na regra CSS dos textos inseridos dentro dos elementos HTML As propriedades para textos s o as listadas abaixo e COIOr cor do texto e letter spacing espa amento entre letras e word spacing espa amento entre palavras e text align alinhamento do texto e text decoration decora o do texto e text indent
92. especial na primeira letra de um texto lt html gt lt head gt lt style type text css gt p Cone SaIZe ss L20E petarse l rrcer 4 fontsize S UUR lt style gt lt head gt lt body gt lt p gt Este texto destina se a demonstrar o pseudo elemento first letter bla bla bla Bild e Des ad LA ra ao A ga LE MO las pilas o u bldes colass ld OLA sul Dilase t Olas ra os lt body gt lt html gt O c digo acima produzir esse efeito Este texto destina se a demosnstrar o pseudo elemento first letter bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla O pseudo elemento first letter somente pode ser usado com elementos de bloco Propriedades aplic veis ao pseudo elemento sirst 1etter e font propriedades de letras e color propriedades de cores e background propriedades de fundo e margin propriedades de margens e padding propriedades de espa amentos e border propriedades de bordas e text decoration e vertical align somente para float none e text transform e line height e float e clear O pseudo elemento tirst 1ine O pseudo elemento first line usado para obter um efeito especial na primeira linha de um texto lt html gt lt head gt lt style type text css gt p font Saze L2pe pr
93. estaque color red CLSTILE gt lt HEAD gt Ou ent o quando a folha de estilo definida externamente lt HEAD gt lt LINK REL stylesheet HREF folha de estilo css gt lt HEAD gt Neste caso uma mesma folha de estilo pode ser usada por v rios documentos HTML que tamb m poder o ter suas pr prias folhas de estilo internas Introdu o as CSS O HTML atual E j com v rias inova es o HTML era usado para constru o de p ginas Web que no in cio limitavam se a exibir informa es contidas nos documentos A evolu o vinha atropelando tudo com uma avalanche de novos aplicativos facilidades softwares hardware etc E o HTML n o passou ao largo pelo contr rio a simples linguagem de marca o destinada a apresentar conte dos carecia de uma maior flexibilidade no sentido de manipular visualmente os conte dos Novas tags e atributos foram inventados tais como a tag font e o atributo color que permitiam alterar a apar ncia de textos Assim nasceu a estiliza o dos conte dos E a evolu o trazendo novas descobertas corre c lere neste dinamismo alucinante que estamos testemunhando at os dias de hoje Novas tags e novos atributos de estilo foram introduzidos no HTML Com isso a velha linguagem de marca o passou a exercer uma dupla fun o A fun o de estruturar o conte do atrav s da marca o e a fun o de apresent lo ou seja de dar a apar ncia final Os problemas criados Ma
94. felis Aenean pharetra orci id elit Duis non dui Suspendisse potenti Ut ac risus Etiam dignissim Quisque nec felis 20 Par grafo Sed blandit est non ante Ut imperdiet sagittis mi Sed gravida sodales nisl Ut hendrerit ipsum eu enim Duis tempus consequat mauris In hac habitasse platea dictumst Vivamus lectus justo commodo in rutrum non eleifend eget pede Sed ac lacus In tortor Alterando o espa amento entre linhas No c digo HTML mostrado acima vamos inserir uma regra CSS para line height que a propriedade CSS que controla as entrelinhas Observe abaixo o mesmo c digo com a regra definindo uma entrelinha igual a 200 Nota A entrelinha default do bronwser 100 Voc pode usar qualquer medida de comprimento v lida em CSS px cm em 1n para o valor da propriedade line height lt nemi gt lt head gt lt style type text css gt SS p line height 200 gt lt rstvLe gt lt head gt lt body gt lt p gt t s Pardgrato saborem Ipsum dolor sit amet consectetuer adipiscing elit Nulla pharetra egestas neque Duis dolor lacus volutpat ac vestabulum nec suscipit a felis Aenean pharetra orci id edit Duis non dui Suspendisse potenti Ut ac risus Etiam dignissim Quisque nec felis lt p gt RD gt 2OsParagraLtO gemas Sed blandit est non ante Ut imperdiet sagittis mi Sed gravida sodales nisl Ut hendrerit ipsum eu enim Duis tempus conse
95. gb abreviatura para r red vermelha g green verde b blue azul Assim o c digo rgb xxx yyy zzz indica uma cor obtida com a mistura de uma quantidade xxx de vermelho com yyy de verde e com zzz de azul Duas s o as maneiras de se definir a quantidade de cada uma das tr s cores Uma faixa de n mera o de O zero at 239 Em percentagem de 0 at 100 N o v lido usar em uma defini o n mero e percentagem Exemplos defini es v lidas rgb 145 230 50 rgb 20 0 70 defini o n o v lida tob 255 20 120 N o do escopo deste tutorial detalhar as misturas de cor rgb No link indicado no item anterior poss vel determinar tamb m o c digo rgb de uma cor Definir cor por palavra chave Voc pode definir uma cor usando o nome da cor Os nomes de cor v lidos s o os listados nas recomenda es CSS do W3C As Recomenda es para CSS 2 1 listam as seguintes 17 cores aqua black blue fuchsia gray green lime maroon navy olive orange purple red silver teal white e yellow maroon Figura ar ada das Yalalalalala Racomanda para CS8871 no ska do Wal hip Jina OR Assim as regras a seguir s o v lidas para definir cor p color aqua i div background color Leal Definir cor baseado no sistema operacional do usu rio As recomenda es para CSS2 1 preconizam a defini o da cor baseado nas cores adotadas pelo sistema operacional do usu rio Este tipo
96. gt o Ra hL text Lranstform nones h2 text transform capitalize h3 text transform uppercase h4 text transform lowercase gt lt style gt lt head gt lt body gt lt ni gt Texto com letras como digitadas lt h1l gt lt n2 gt Texto com primeira letra das palavras mai sculas lt h2 gt lt n3 gt Texto com todas letras mail sculas lt h3 gt lt h4 gt Texto com letras min sculas lt h4 gt lt body gt lt html gt Este o efeito da folha de estilo acima Texto com letras como digitadas Texto com primeira letra das palavras mai sculas TEXTO COM TODAS LETRAS MAI SCULAS Texto com letras min sculas Voc poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos para complementar este tutorial nesta p gina interativa A propriedade margin As margens nos elementos HTML A propriedade para margens define um valor para espessura das margens dos elementos HTML As propriedades para margens s o as listadas abaixo margin top define a margem superior margin right define a margem direita margin bottom define a margem inferior margin left define a margem esquerda margin maneira abreviada para todas as margens Valores v lidos para a propriedade margin 1 auto valor default da margem 2 length uma medida reconhecida pelas CSS px pt em cm 3 porcentagem da largura do eleme
97. head gt lt style typ text css gt e ul list style image url seta gif gt lt style gt lt head gt lt body gt lt ul gt lt li gt ten ums lt li Item dois lt 1Ii gt xsli Item tress tas lt ul gt lt body gt lt html gt A folha de estilo acima resultar nesta lista e tem um e Item dois e Item tres list style position posi o dos marcadores de lista Este exemplo demonstra como posicionar os marcadores de listas html gt lt head gt lt style type text css gt no ul inside list style position inside UI couteide LYst stvl pos1tion Cuisid gt lt style gt lt head gt lt DOQvV gt lt ul class inside gt lt li gt Este texto destina se a demonstrar o valor inside dos marcadores de listas lt li gt lt 11 gt E aqui continuamos com mais texto para fixar o valor inside dosmarcadores de listas lt li gt lt ul gt lt ul class outside gt lt li gt Este texto destina se a demonstrar o valor outside dos marcadores de listas lt li gt lt 11 gt E aqui continuamos com mais texto para fixar o valor outside dos marcadores de listas lt 1li gt lt ul gt lt body gt lt html gt A folha de estilo acima resultar nesta lista e Este texto destina se a demonstrar o valor inside dos marcadores e E aqui continuamos com mais texto para fixar o valor inside dos marcadores de
98. iavel eh verdadeira H else i echo A variavel eh falsa it Svariavel TRUE i echo A variavel eh verdadeira it iSvariavel i echo A variavel eh falsa No PHP pode se fazer a convers o de tipos Para converter explicitamente um valor para booleano utilize se dos modificadores bool ou boolean Entretanto na maioria dos casos voc n o precisa utilizar o modificador desde que qualquer valor ser convertido automaticamente se um operador fun o ou estrutura de controle requerer um argumento booleano Quando convertendo para booleano os seguintes valores s o considerados FALSE e o pr prio booleano FALSE e o inteiro O zero e o ponto flutuante 0 0 zero e uma string vazia e a string 0 e um array sem elementos e um objeto sem elementos membros e o tipo especial NULL incluindo vari veis n o definidas Qualquer outro valor considerado TRUE incluindo qualquer recurso Exemplo de convers o php ia h ia h E 2 Tipo Inteiro FF FF a Cai ibool sa 1 ibool Sa bool Fstring Tamb m chamado de INTEGER Um inteiro um n mero do conjunto Z 2 1 0 1 2 Inteiros podem ser especificados em nota o decimal base 10 hexadecimal base 16 ou octal base 8 opcionalmente precedido de sinal ou Para usar a nota o octal voc precisa preceder o n mero com um O zero Para utilizar a nota o hexadecimal preceda n mero com Ox Exempl
99. inhado com texto e list style type 1 none sem marcador 2 disc c rculo bolinha cheia 3 circle circunfer ncia bolinha vazia de or as 10 11 2 13 14 15 16 17 18 19 20 21 Os tipos de 11 a 20 s o de uso espec fico e sem suporte total pelos navegadores atuais e n o ser o tratados neste tutorial Vamos a seguir analisar cada uma delas detalhadamente atrav s de exemplos pr ticos square quadrado cheio decimal n meros 1 2 3 4 decimal leading zero lower roman romano min sculo 1 11 111 1V upper roman romano mai sculo I I II IV lower alpha letra min scula a b c d upper alpha letra mai scula A B C D lower greek lower latin upper latin hebrew armenian georgian cjk ideographic hiragana katakana hiragana iroha katakana iroha Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para o elemento lista HTML e definidas dentro de uma folha de estilos incorporada bem como um trecho do documento HTML onde se aplicam as regras A seguir mostro o efeito que a regra produz Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o c digo no seu editor mude os valores e veja o resultado no browser Bons estudos E fa a timo proveito do tutorial list style image imagem para marcadores de lista Este exemplo demonstra como definir uma imagem de marcador de listas lt html gt lt
100. l gt lt head gt lt style type text css gt e p margin bottom 2em gt lt jetyle gt lt head gt lt body gt lt p gt Uma margem inferior de 2 0em lt p gt lt body gt lt n gt Este o efeito da folha de estilo acima Uma margem inferior de 2 0em margin left amp Margem esquerda lt html gt lt head gt lt style typ t kt css gt Sp secs margin left 1035 gt lt style gt lt head gt lt body gt lt p gt Uma margem esquerda de 10 lt p gt lt body gt Crema gt Este o efeito da folha de estilo acima Uma margem esquerda de 10 marginetodas as quatro margens em uma declara o nica A propriedade da margin permitem que voc controle o espa amento em volta dos elementos HTML S o v lidos valores negativos para margem com o objetivo de sobrepor elementos Em declara o nica a ordem das margens superior direita inferior e esquerda H quatro modos de se declarar abreviadamente as margens l margin valorl as 4 margens ter o valorl1 2 margin valorl valor2 margem superior e inferior ter o valorl margem direita e esquerda ter o valor 3 margin valorl valor2 valor3 margem superior ter valorl margem direita e esquerda ter o valor2 margem inferior ter valor3 4 margin valorl valor2 valor3 valor4 margens superior direita Inferior e esquerda nesta ordem lt html gt lt head gt lt style
101. lada Estas s o as diferen as entre constantes e vari veis e Constantes n o podem ter um sinal de cifr o antes delas e Constantes s podem ser definidas utilizando a fun o define e n o por simples assimila o e Constantes podem ser definidas e acessadas de qualquer lugar sem que as regras de escopo de vari veis seja aplicadas e Constantes n o podem ser redefinidas ou eliminadas depois que elas s o criadas e Constantes s podem conter valores escalares Os tipos de dados aceitos numa constante s o Booleano Inteiro Float e String Exemplo de defini o de constante lt php define COMSTANT Hello world echo CONSTANT echo constant E Operadores m operador algo que voc alimenta com um ou mais valores ou express es no jarg o de programa o e que devolve outro valor e por isso os pr prios construtores se tormam express es Assim voc pode pensar que as fun es e os construtores que retornam valores como o print s o operadores e os outros que n o retornam nada como echo como uma outra coisa H tr s tipos de operadores Primeiramente os operadores un rios que operam em apenas um valor Por exemplo operador de nega o ou o operador de incremento No segundo grupo est o os operadores bin rios o o grupo que cont m a maioria dos operadores que o PHP suporta com uma lista completa logo abaixo O terceiro grupo do operador tern rio Ele pode ser us
102. liga es de hipertexto tamb m chamadas hypertext links ou hiperlinks ou simplesmente links Para inserir um link em um documento utilizamos a etiqueta lt A gt da seguinte forma lt A HREF arq destino gt ncora lt A gt onde arq destino o URL do documento de destino ncora o texto ou imagem que servir de liga o hipertexto do documento sendo apresentado para o documento de destino Atributos lt A gt tem v rios atributos utilizados de acordo com a a o associada ao link Os mais usados s o HREF Indica o arquivo de destino da liga o de hipertexto TARGET Indica o frame em que ser carregado o arg destino Maiores detalhes na se o sobre frames NAME Marca um Indicador isto uma regi o de um documento como destino de uma liga o Caminhos uso de links Os links podem estar indicados como caminhos relativos ou absolutos Caminho relativo O caminho relativo pode ser usado sempre que queremos fazer refer ncia a um documento armazenado no mesmo servidor do documento atual Atrav s do campo de endere o do browser vemos que este documento est localizado em um diret rio ensino material html do servidor www icmc usp br Para escrevermos um link deste documento para o documento doc2 html no diret rio ensino material html exemplos tudo que precisamos fazer escrever Veja o lt A HREF exemplos doc2 html gt exemplo de caminho relativo lt A gt Da mesma form
103. lores para as 4 margens para uma div div margin top 10px margin rignNC OPR margin bottom 0 margin 1left 5px E pode ser abreviada para div margin l0px Spx O 5px Abreviando padding As regras a seguir definem valores para os 4 paddings de um par grafo p padding bottom Opx padding topi 12px padaro Letti lp padding right 2px E pode ser abreviada para div 4 padding IL2px 20X GPX 1px Abreviando background As regras a seguir definem valores para propriedades background de uma div div packorouna coLor ditfticc background Image url fundo grf s background repeat no repeat background attachment fixed pbackgroannd posstion 20px L0px E pode ser abreviada para div 4 packgroma jtfte uri fundo gif no repeat fixed 20px 10px Abreviando sont As regras a seguir definem valores para propriedades de font em um documento body font style italic font varsantcesmali gt caps font weight bold font size 1l1lpx line height 15px font family Arial Helvetica Sans serif E pode ser abreviada para body fontsitalle smali caps bola Llpx 150x Arial H lvetica Sans serit Nota Para abreviar a propriedade font obrigat rio definir no m nimo os valores de tamanho e fam lia da font Os demais valores s o facultativos A ordem de declara o dos valores importante e deve ser assim l come ar com font style font variant e font
104. lt Eieldset lt legend gt Informe a senhas legend lt label gt Senha lt label gt lt input type password name senha size 10 gt lt fieldset gt lt form Agora vejamos o arquivo login php php session start 1f POST senha SECIECa i 4 SESSION logado LEE header Location pagina secreta phpr die y else echo Senha incorreta Entendendo o c digo primeiro feita a inicializa o da sess o fun o session start Em seguida feita a compara o se a senha digitada igual a secreta pode ser alterada em caso verdadeiro definida a vari vel de sess o logado como verdadeiro e redireciona o usu rio para a p gina secreta Caso contr rio imprime na tela senha incorreta Cookies Cookies na livre tradu o s o biscoitos Cookies s o mecanismos para armazenar e consultar informa es nos browsers dos visitantes da p gina O PHP atribui cookies utilizando a fun o setcookie que deve ser utilizada antes de qualquer impress o na p gina mesmo esquema das sess es O uso de cookies n o recomendado quando se trata de informa es sigilosas Os dados dos cookies s o armazenados no diret rio de arquivos tempor rios do visitante sendo facilmente visualizado por pessoas mal intencionadas A diferen a entre sess es e cookies que os cookies podem ser acessados mesmo depois de o usu rio ter fechado seu browser Outra que
105. lt TABLE BORDER 1 CELLPADDING 20 CELLSPACING 20 gt janeiro fevereiro mar o abril maio junho Assim damos mais uma mexida na tabela inicial O Instituto de Ci ncias Matem ticas e de Computa o ICMC USP formado pelos Departamentos de Matem tica e de Ci ncias de Computa o e Estat stica O ICMC originou se em 1953 como Departamento de Matem tica da Escola de Engenharia de S o Carlos EESC USP fundado por renomados matem ticos Peas pior ni Italianos e brasileiros Pr dio principal do ICMSC USP Departamento deAtualmente o Departamento de Matem tica oferece cursos de Licenciatura e Matem tica SMA Bacharelado em Matem tica e o Bacharelado em Matem tica Aplicada e Computa o Cient fica PepanAmICnIO deg Departamento de Computa o e Estat stica respons vel pelo Bacharelado em Ompa ac Ci ncia de Computa o e o curso noturno de Bacharelado em Inform tica Estat stica SCE l Para maiores informa es Cursos de Gradua o grad icmsc sc usp br Cursos de P s Gradua o posgrad icmsc sc usp br Como toque final retiramos a borda O Instituto de Ci ncias Matem ticas e de Computa o ICMC USP formado pelos Departamentos de Matem tica e de Ci ncias de Computa o e Estat stica O ICMC originou se em 1953 como Departamento de Matem tica da Escola de Engenharia de S o Carlos EESC USP fundado por renomados matem ticos Pr dio principal do italianos e brasileiros I
106. m tica O Departamento de Computa o e Estat stica respons vel pelo curso de Bacharelado em Ci ncia de Computa o no qual ingressam 40 alunos por ano Em n vel de p s gradua o oferece desde 1975 o programa de mestrado em Ci ncias de Computa o e Matem tica Computacional e a partir de agosto de 1995 o programa de doutorado na mesma rea Os dois atributos de moldura podem estar presentes ao mesmo tempo Vejamos primeiro o texto com a Imagem sem moldura A cultura UNIX come ou a ser apreciada por usu rios brasileiros ainda na d cada de 70 pelos contatos de pesquisadores brasileiros em cursos de aperfei oamento no exterior notadamente na Am rica do Norte O contingente era contudo pequeno e restrito a acad micos A dissemina o da cultura UNIX no mercado comercial s teve In cio com o advento da d cada de 80 Cita o de texto encontrado p gina 18 do livro UNIX Guia do Usu rio Autores Marcus C Sampaio Jacques P Sauv e J Ant o B Moura McGraw Hill 1988 Abaixo vemos a aplica o dos dois atributos atrav s da formata o lt IMG SRC icones ecarthgit ALIGN LEFT WIDTH 63 HEIGHT 68 HSPACE 20 VSPACE 20 gt A cultura UNIX come ou a ser apreciada por usu rios brasileiros ainda na d cada de 70 pelos contatos de pesquisadores brasileiros em cursos de aperfei oamento no exterior notadamente na Am rica do Norte O contingente era contudo pequeno e restrito a acad mi
107. m HTTP GET Isto n o necessariamente a mesma coisa que incluir o arquivo e compartilhar o escopo de vari vel do arquivo principal o script ser executado no servidor remoto e apenas seu resultado ser inclu do no script local 7 php tt Este exemplo assume que WWW exemplo com est configurado para interpretar arquivos php mas n o txt Al m Funciona aqui significa que as vari veis Steste e fteste 2 est o disponiveis no arquivo incluido D N o funciona arquivos txt n o s o manipulados em wwm exemplo com como PHP include http uuw exemplo com arquivo tuxtoteste letestez e t N o funciona procura por um arquivo chamado arquivo php teste letestez 2 no sistemas de arquivo local include artquivo Phprresteletester a ti Funciona include http www exemplo com arquivo php teste letestez 2 teste i1 teste E include arquivo txt Funciona include arquivo php Funciona Por serem include e require dois construtores de linguagem especiais voc precisa delimit los como um bloco de instru es quando utilizados dentro de instru es condicionais lt php ti Isto est errado e n o funcionar como desejado if Scondicao include Sarquivo else include Soutro E este est correto if Scondicao f include Sarquivo else 4 include Soutro X Tamb m poss vel executar uma instru o return dentro de um arquivo inclu
108. m o aninhamento de cabe alhos Alinhamento Os cabe alhos t m atributos de alinhamento lt H2 ALIGN CENTER gt Cabe alho centralizado lt H2 gt Cabe alho centralizado lt H3 ALIGN RIGHT gt Cabe alho alinhado direita lt H3 gt Cabe alho alinhado direita lt H4 ALIGN LEFT gt Cabe alho alinhado esquerda default lt H4 gt Cabe alho alinhado esquerda default Separadores Como vimos no primeiro exemplo as quebras de linha do texto fonte n o s o significativas na apresenta o de documentos em HTML Para organizar os textos precisamos de separadores apresentados aqui Quebra de linha Quando queremos mudar de linha usamos o elemento lt BR gt Isso s necess rio quando queremos uma quebra de linha em determinado ponto pois os browsers j quebram as linhas automaticamente para apresentar os textos Com sucessivos lt BR gt podemos inserir diversas linhas em branco nos documentos Esse elemento tem um atributo especial que ser apresentado no item sobre inser o de imagens Par grafos Para separar blocos de texto usamos o elemento lt P gt Par grafo 1 lt P gt Par grafo 2 que produz Par grafol Par grafo2 Combinando par grafos e quebras de linha temos Par grafo 1 lt br gt linha 1 do par grafo 1 lt hbr gt linha 2 do par grafo 1 lt P gt Par grafo 2 lt br gt linha 1 do par grafo 2 lt br gt linha 2 do par grafo 2 O resultado da marca o acima P
109. mata o da linguagem A maioria das etiquetas tem sua correspondente de fechamento lt etiqueta gt lt etiqueta gt Isso necess rio porque as etiquetas servem para definir a formata o de uma por o de texto e assim marcamos onde come a e termina o texto com a formata o especificada por ela Alguns elementos s o chamados vazios pois n o marcam uma regi o de texto apenas inserem alguma coisa no documento lt etiqueta gt Todos os elementos podem ter atributos lt etiqueta atributol valori atributo2 valor2 gt lt etiqueta gt HTML um recurso muito simples e acess vel para a produ o de documentos Nestes cap tulos ser poss vel aprender grande parte de seus elementos Publica o de documentos Para que uma p gina esteja permanentemente dispon vel pela Web ela precisa ter um endere o fixo alojada em um servidor Existem v rios provedores de espa o hosting gratuitos e tamb m os provedores de acesso geralmente oferecem espa o para os sites de seus assinantes Sites com fins lucrativos geralmente s o hospedados em provedores de espa o pagos Definida a hospedagem basta enviar para o provedor os arquivos de seu site via FTP ou por uma p gina de envio no pr prio provedor de espa o e suas p ginas j estar o dispon veis para visitas Na rede do ICMC Para ter sua p gina pessoal necess rio ter uma rea na rede Tendo sua rea o primeiro passo criar em se
110. n meros de 1 a 10 mas agora utilizando a estrutura While lt 2 php i 1 while i lt 10 i echo Si i Observe que o incremento feito manualmente dentro do la o Se voc esquecer de incrementar neste exemplo o script ficar em loop infinito e ser abortado pelo PHP DO WHILE O la o do while funciona de maneira bastante semelhante ao while com a simples diferen a que a express o testada ao final do bloco de comandos Isso significa que a a o feita no m nimo 1 vez O la o do while possui apenas uma sintaxe que a seguinte lt 7 php i 0 do i echo Sis i while Si lt 10 E Fun es ma fun o um peda o de codigo com um objetivo especifico encapsulado sob uma estrutura unica que recebe um conjunto de par metros e retorna um dado Uma fun o declarada uma unica vez mas pode ser utilizada diversas vezes E uma das estruturas mais b sicas para prover reusabilidade Cria o Para declarar uma fun o em PHP utiliza se o operador function seguido do nome que desejamos lhe atribuir sem espa os em branco e iniciando obrigatoriamente com uma letra Na mesma linha digitamos a lista de argumentos par metros que a fun o ir receber separados por virgula Em seguida encapsulado por chaves vem o c digo da fun o No final utiliza se a clausula return para retornar o resultado da fun o integer strig array objeto etc lt 7 php
111. n rico Um texto gen rico com algum destaque qualquer junto ap s um t tulo gen rico etc Acontece que de um documento para outro pode acontecer de esquecermos o tamanho da fonte usada no texto qual a fonte ou a cor dos t tulos de determinada subse o e a uniformidade de apresenta o das p ginas acaba ficando prejudicada Com as folhas de estilo podemos declarar estilos apropriados para se es de texto aplicando esses estilos sem nos preocuparmos com detalhes de fontes cor e tamanhos E mais se for necess rio modificar algum dia as cores de todos os t tulos ou dos destaques ao longo dos textos simplesmente alteramos a folha de estilo atualizando imediatamente a apresenta o de todos os documentos que fazem refer ncia a ela Para o exemplo acima poder amos criar a seguinte folha de estilo BODY TONGS 10pt Arial H3 color 4A D7B destaque color red E assim para ter o mesmo resultado do exemplo acima a formata o seria muito mais simples que a primeira lt h3 gt Um ELELO gen rico lt h3 gt lt p gt Um texto gen rico com algum lt span class destaque gt destaque qualquer lt span gt Junto ap s um titulo gen rico etc lt p gt A defini o da folha de estilo deve ficar dentro de lt HEAD gt da seguinte forma se a folha for definida dentro do mesmo documento em que est sendo usada lt HEAD gt SUR QE TYPE text css gt BODY TONGS 10pt Arial H3 color FAL IDTB d
112. ndo os elementos do array Novamente acessamos o conte do utilizando o nome da vari vel e uma chave ent o podemos acessar as informa es que armazenamos no array de pre os como precos P ra precos Uva e precos Ma O c digo a seguir criar o mesmo array precos Em vez de criar um array com tr s elementos essa iprecos array r ral gt 02 9 iprecos Uva 3 apasties sis E E vers o cria um array com somente um elemento e ent o acrescenta outros dois Eis outra parte ligeiramente diferente mas equivalente de c digo Nesta vers o n o criamos explicitamente um array O array automaticamente criado quando adicionamos a ele o primeiro sprecos P ra 7 precos Uva 3 precos Mac 1 elemento Arrays multidimensionais Os arrays n o t m de ser uma lista simples de chaves e valores cada localiza o no array pode armazenar outro array Dessa maneira podemos criar um array bidimensional Voc pode pensar em um array de duas dimens es como sendo uma matriz ou grade com largura e altura ou linhas e colunas Se quis ssemos armazenar mais de uma parte de dados sobre cada item da cesta poder amos utilizar um array bidimensional A figura abaixo mostra os itens da cesta representados como um array bidimensional com cada linha representando um produto individual e cada coluna representando um atributo do produto armazenado atributos Utiliz
113. ndo se de vari veis globais Para o m todo GET usado a vari vel GET e no m todo POST a vari vel _POST Existe ainda a vari vel REQUEST que associa automaticamente o m todo recebido GET ou POST Todas estas vari veis s o tratadas como arrays onde a chave o nome do campo do formul rio Assim se voc tem um campo chamado nome no PHP pode ser apontado como REQUEST nome A diferen a entre GET e POST est basicamente na capacidade do envio de dados uma vez que GET limitado cerca de 2KB de dados e POST n o possui limite Outra diferen a est na forma de envio GET envia os dados anexados ao nome do script informado utiliza se para isso o s mbolo ap s o nome do script seguido da rela o de campos e seus respectivos valores separados por amp J no m todo POST os dados s o enviados no corpo da mensagem que ser enviada no servidor Formul rios na pr tica Nesta se o veremos na pr tica um exemplo de um formul rio completo com uso dos tipos texto senha radio etc Uma observa o Importante se voc tem v rios campos com o mesmo nome e de m ltipla escolha no formul rio como o caso dos checkbox s esses campos ser o tratados como array do array global O exemplo a seguir figurativo uma pesquisa de gostos por livros e ser usado como base para voc aprender a manusear dados de um formul rio Exemplo de um formul rio HTML lt form action envia php method
114. nto pai Vamos a seguir analisar cada uma delas detalhadamente atrav s de exemplos pr ticos Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS v lidas para um elemento HTML e definidas dentro de uma folha de estilos incorporada bem como um trecho do documento HTML onde se aplicam as regras A seguir mostro o efeito que a regra produz Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o c digo no seu editor mude os valores e veja o resultado no browser Bons estudos E fa a timo proveito do tutorial Nota Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualiza o margin top A Margem superior lt html gt lt head gt lt style type text css gt O Pp margin top Zem gt lt style gt lt head gt lt body gt lt p gt Uma margem superior de 2cem lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Uma margem superior de 2cm margin rightee A margem direita lt html gt lt head gt lt style type text css gt Alee polmargan rtighes 3000x gt lt style gt lt head gt lt body gt lt p gt Uma margem direita de 300px nesta frase mais longa dentro do par grafo lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Uma margem direita de 300px nesta frase mais longa dentro do par grafo margin bottom d Margem inferior lt htm
115. o de defini es lt 4 php a a a a E 1234 123 0123 Uxid Assim como vimos no tipo Booleano o PHP tamb m permite a convers o de outros tipos para Inteiro Para converter explicitamente um valor para inteiro utilize se dos modificadores int ou Integer Entretanto na maioria dos casos voc n o precisa utilizar o modificador desde que qualquer valor ser automaticamente convertido se um operador fun o ou estrutura de controle requerer um argumento Inteiro Voc tamb m pode converter o valor de um inteiro com a fun o intval Exemplo de convers o lt php Sa TRUE Sh int ja ja FALSE ih int Sa ja 2 223E Sh iint ja Es Tipo Ponto Flutuante Tamb m chamado de FLOAT ou DOUBLE N meros de ponto flutuante podem ser especificados utilizando qualquer uma das sintaxes seguintes lt 7 php a 1 234 sh 1 2e3 o VE 10 7 gt Tipo String String s o conjunto de caracteres e pode ser definida de tr s formas diferentes com ap strofo aspas ou sintaxe heredoc A maneira mais simples para especificar uma string delimit la entre ap strofos o caracter Para especificar um ap strofo dentro da string voc precisar escap la com uma contra barra como em muitas outras linguagens Se uma contra barra precisa ocorrer antes de um ap strofo ou no final da string voc precisa duplic la Note que se voc tentar escapar qualquer outro caract
116. o do operador lt php ja true dh Sa Verdadeiro lFalso echo b 2 gt Explicando o operador funciona como um IF e ELSE mas numa mesma linha para opera es simples condicionais Neste caso se a vari vel a for verdadeira TRUE ent o a vari vel b assume a string Verdadeiro caso contr rio a vari vel b assume a string Falso Da mesma forma poder amos fazer 7 php a CEUueE if a h verdadeiro else Sh Falso H echo b A Operadores l gicos Os operadores l gicos assim como os de compara o examina 2 vari veis e retorna um resultado bin rio Falso FALSE ou Verdadeiro TRUE A tabela abaixo lista os tipos de operadores l gicos Exemplo Nome Resultado a and b E Verdadeiro TRUE se tanto a quanto b s o verdadeiros a or b OU Verdadeiro se a ou b s o verdadeiros a xor b XOR Verdadeiro se a ou b s o verdadeiros mas n o ambos a N O Verdadeiro se a n o verdadeiro a amp amp b E Verdadeiro se tanto a quanto b s o verdadeiros a II b OU Verdadeiro se a ou b s o verdadeiros A raz o para as duas variantes dos operandos and e or que eles operam com preced ncias diferentes Operadores de strings H dois operadores de string 66 99 O primeiro o operador de concatena o que retorna a concatena o dos seus argumentos direito e esquerdo O segundo
117. ode indicar o in cio da numera o da lista lt OL START 4 TYPE A gt lt LI gt um item lt LI gt outro item lt LI gt mais um item lt I OLS D um item E outro item F mais um item Listas e sub listas As listas podem ser aninhadas Por exemplo lt DL gt lt DT gt termo a ser definido lt DD gt defini o lt OL gt lt LI gt item de uma lista numerada lt LI gt item de uma lista numerada lt UL gt lt LI gt item de uma lista E S lt LI gt item de uma lista numerada lt OL gt lt DT gt termo a ser definido lt DD gt defini o lt DL gt termo a ser definido defini o 1 item de uma lista numerada 2 item de uma lista numerada o tem de uma lista 3 item de uma lista numerada termo a ser definido defini o Formata o de textos e caracteres H dois tipos de formata o em HTML l gico e f sico Os efeitos de apresenta o na tela s o os mesmos o motivo da distin o entre eles se deve id ia b sica de independ ncia entre especifica o e apresenta o Quando formatamos um trecho de texto como cabe alho de n vel 1 n o explicitamos se esse tipo de cabe alho deve ser em alguma fonte determinada em um tamanho determinado justificado esquerda ou direita ou centralizado Esses detalhes de apresenta o s o deixados para o browser o dispositivo de apresenta o do documento que pode ser configurado de acordo com o leitor usu rio final Desse modo al m de
118. opriedades declara es s o chamadas de regras ou fun es CSS e por a vai em uma diversificada combina o dos termos acima citados em uma salada que acaba por confundir iniciantes e as vezes at mesmo outros j com alguma experi ncia com folhas de estilo em cascata Com a finalidade de facilitar o entendimento desta mat ria e esclarecer a confus o que vem se formando em torno do assunto vamos rever a sintaxe e a terminologia de uma regra CSS para que quando eu escrever seletor declara o propriedade e valor n o haja d vidas sobre a por o da regra CSS a que estou me referindo e voc n o fique se perguntando onde est o os atributos CSS as tags CSS e outros tantos termos equivocados Vejamos o que diz as Recomenda es do W3C para Folhas de Estilo n vel 1 na se o intitulada Conceitos B sicos O projeto ou desenho do layout das folhas de estilos f cil preciso apenas conhecer um pouco da linguagem HTML e possuir no es b sicas dos termos usados em publica o eletr nica Como exemplo para ajustar a cor das letras de um elemento H1 para azul basta fazer HL Color blue Este exemplo mostra o que uma regra simples em CSS Uma regra composta de duas partes principais um selector H1 e uma declara o color blue Por sua vez esta declara o tamb m possui duas partes uma propriedade color e seu valor blue Embora este exemplo especifique apenas uma das v rias propriedades
119. or para uma impressora laser O valor tomado em rela o e em ao tamanho da fonte font size herdada e ex a altura da letra x xis da fonte herdada e pxX ao dispositivo midia de exibi o e a uma medida previamente definida Unidade absoluta aquela que n o esta referenciada a qualquer outra unidade e nem herdada S o unidades de medida de comprimento definidas nos sistemas de medidas pela f sica e em fim s o os conhecidos cent metros polegadas etc S o indicadas para serem usadas quando as m dias de exibi o s o perfeitamente conhecidas Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS div margin 1 5em J h4 margin 2ex pd ConE sizes Apar Classe padding 90 hr width 14pt RI margin Ipes n2 4 Tont 91263 Ammi p classe padding 0 3cm h5 claesse padding 0O 51h7 J Nota Relembro que uma regra CSS tem a seguinte sintaxe seletor propriedade valor Entendendo as unidades de medida CSS Vamos a seguir definir e analisar cada uma das unidades de medida CSS e apresentar exemplos pr ticos A unidade de medida pixel A unidade de medida de comprimento pixel relativa a resolu o do dispositivo de exibi o p ex a tela de um monitor Sem entrar em maiores considera es te ricas a mais simplista defini o de pixel que encontrei esta Pixel o menor elemento em um dispositivo de exibi o
120. ormalmente em negrito Exemplo Antes de enviar um e mail confira o campo Subject lt VAR gt Indica vari veis ou valores que o usu rio dever escrever geralmente mostrado em it lico Exemplo No campo Login escreva guest Estilos F sicos lt B gt Quando dispon vel no browser mostrado em negrito em alguns browsers pode aparecer sublinhado lt I gt It lico em alguns casos caracteres inclinados lt TT gt Tipo teletype fonte de espa amento fixo lt U gt Sublinhado deve ser usado com cuidado pois confunde se com a apresenta o de links lt STRIKE gt OU lt S gt Frase riseada lt BIG gt Fonte um pouco maior lt SMALL gt Fonte um pouco menor lt SUB gt Frase em estilo indice como em H20 lt SUP gt t Frase em estilo P Tie 2 como em Km Caracteres especiais HTML permite que caracteres especiais sejam representados por sequ ncias de escape indicadas por tr s partes um amp inicial um n mero ou cadeia de caracteres correspondente ao caracter desejado e um final Quatro caracteres ASCII lt gt e t m significados especiais em HTML e s o usados dentro de documentos seguindo a correspond ncia Entidade Caracter amp It lt amp It gt amp amp amp Outras sequ ncias de escape suportam caracteres ISO Latinl Aqui est uma tabela com os caracteres mais utilizados em Portugu s Erro Indicador n o definido Erro Indica
121. os m todos bom conhecer as vari veis de ambiente que ser o muito teis no tratamento de informa es CGI Scripts usando PHP A principal diferen a entre o uso de Perl e PHP para criar p ginas din micas que o PHP pode ser totalmente embutido em uma p gina comum de HTML Assim n o preciso fazer com que o script gere uma p gina de resposta com as formata es os comandos de PHP podem ficar embutidos de maneira bem elegante e intuitiva entre as marca es de HTML Abaixo de cada campo do formul rio foi colocado um exemplo da formata o usada para cri lo Ao fim da p gina est a formata o completa do formul rio Se voc tiver d vidas sobre essas formata es veja antes a se o sobre formul rios lt form action forml php method post gt form1 php ser o script em PHP que ir trabalhar com os dados entrados por meio deste formul rio ele Ir escrever na pr xima p gina as informa es entradas neste formul rio Nome lt input type text name nome size 35 gt E mail lt input type text name email size 25 gt Esportes queFutebol voc pratica V lei Nata o Basquete T nis Bocha lt input type checkbox name esportel value futebol gt Futebol lt br gt E type checkbox name esporteZ value volei Checked voleir Dr Seu time doPalmeiras N utico Flamengo Gr mio Santos Atl tico Corinthians Fluminense cora o Internacional Cruzeiro Botafogo Santa
122. plo em qualquer dire o O formato para declarar o valor de uma unidade de medida CSS um n mero com ou sem ponto decimal imediatamente precedido do sinal mais ou do sinal menos sendo o sinal mais o valor default e imediatamente seguido por uma unidade identificadora medida CSS v lida p ex px em deg etc A unidade identificadora opcional quando se declara um valor O zero Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida A ado o de valores negativos podem complicar a formata o do elemento e devem ser usados com cautela Se valores negativos n o forem suportados pela aplica o de usu rio eles ser o convertidos para o valor mais pr ximo suportado e isso pode tornar se desastroso para um layout Unidades de medida de comprimento CSS v lidas S o dois os tipos de unidade de medida de comprimento CSS UNIDADE RELATIVA e em e ex e px pixel e percentagem as unidades relativas s o referenciadas a outras unidades como veremos a seguir UNIDADE ABSOLUTA e pt point 1 72 in e pc pica 12 points ou 1 6 in e mm mil metro 1 10 cm e cm cent metro 1 100 m e in polegada 2 54 cm Unidade relativa aquela tomada em rela o a uma outra medida Folhas de Estilo em Cascata que usam unidades de comprimento relativas s o mais apropriadas para ajustes de uso em diferentes tipos de m dia p ex de uma tela de monit
123. plo tem as seguintes informa es lt HEAD gt lt META HTTP EQUIV content type CONTENT text html charset iso 8859 1 gt lt META HTTP EQUIV pragma CONTENT no cache gt lt TITLE gt A se o amp lt HEAD amp gt Tutorial HTML do ICMC USP lt TITLE gt lt META NAME Author CONTENT Maria Alice Soares de Castro masc ficmc usp br gt lt META NAME Generator CONTENT Namo WebEditor v5 0 gt lt META NAME Description CONTENT Manual de refer ncia para webdesigners e desenvolvedores de sites gt lt META NAME KeyWords CONTENT HTML WWW Webpublishing Internet Webdesign gt lt LINK REL stylesheet HREF folhatut css gt lt HEAD gt Alguns valores dos atributos META NAME s o inseridos automaticamente por alguns editores por exemplo Generator e Author Os campos Description KeyWords ajudam a classifica o da p gina em algumas ferramentas de busca Essas informa es n o t m qualquer efeito na apresenta o da p gina mas servem como uma explica o ou documenta o sobre as informa es contidas nela H poucos valores para META HTTP EQUIV em uso O mais comum content type que indica o conjunto de caracteres usado na p gina essa informa o ajuda o browser a exibir corretamente os caracteres especiais que estiverem presentes no texto Um exemplo de uso comum do atributo HTTP EQUIV promover a mudan a autom tica de p ginas atribuindo lhe o valor Refresh lt HEAD gt SE
124. post gt lt tieldaet gt lt legend gt Dados Pessoais lt legend gt lt label Nome lt label gt lt br gt lt input type text name nome size 50 gt lt br gt lt label gt Endere o lt label gt lt br gt lt input type texc name endereco size 30 gt lt br gt lt ffieldset gt lt Eieldset gt lt legend gt Pesquisa lt legend gt lt label gt Quantos livros voc compra por ano lt labelr lt br gt lt input type radio name livros value 0 gt Nenhumcbr gt lt input type radio name livros value 1 5 i gt De 1 a 5 br r gt lt input type radio name livros value 5 10 gt De 5 a 10sbr gt lt input type radio name livros value 10 20 gt De 10 a 20 lt br gt lt input type radio name livros value 20 gt Mais de 20 lt br gt lt label gt Qual seu estilo de livro favorito lt label gt lt hbr gt lt input type checkbox name estilo value Romance gt Romancecbr gt lt input type checkbox name estilo value lrama gt Dbramachr r gt lt input type checkbox name estilo value Suspense gt Suspense lt cbr gt lt input type checkbox name estilo value Tecnico gt T cnico lt cbr gt lt ffieldset gt lt input type submit gt lt form Exemplo do arquivo envia php que ser submetido pelo formul rio lt php echo Nome 9 FOST nome pe gt Echo Endere o ao POST t
125. quat mauris In hac habitasse platea dictumst Vivamus lectus justo commodo in rutrum non eleifend eget pede Sed ac lacus In tortor lt p gt pody lt html gt O c digo acima renderizado pelo navegador conforme mostrado abaixo Notar que a entrelinha que era default 100 agora est 200 ou seja dobrou Nota Fa a algumas experi ncias com o valor de 1ine height usando inclusive valores abaixo de 100 e tamb m outras medidas v lidas por exemplo 12px 2 3em 3cm etc e voc vai constatar que tem o controle total das entrelinhas lo Par grafo Lorem ipsum dolor sit amet consectetuer adipiscing elit Nulla pharetra egestas neque Duis dolor lacus volutpat ac vestibulum nec suscipit a felis Aenean pharetra orci id elit Duis non dui Suspendisse potenti Ut ac risus Etiam dignissim Quisque nec felis 20 Par grafo Sed blandit est non ante Ut imperdiet sagittis mi Sed gravida sodales nisl Ut hendrerit ipsum eu enim Duis tempus consequat mauris In hac habitasse platea dictumst Vivamus lectus justo commodo in rutrum non eleifend eget pede Sed ac lacus In tortor E o espa amento a dist ncia entre os par grafos Aqui tamb m o controle todo seu via CSS E quem dita as regras para este espa amento a propriedade margin Vamos acresentar mais uma regra CSS no nosso c digo Se voce n o lembra da propriedade margin leia este tutorial sobre margens lt ntml gt lt he
126. r Fones italic 1000 Verdana sans serif Se ambas as p ginas estiverem vinculadas ao documento como h um conflito no tamanho das letras para lt h2 gt prevalecer a folha interna e a letra de lt n2 gt ter o tamanho igual a 10 pt A propriedade font As fontes nos elementos HTML As propriedades para as fontes definem as caracter sticas os valores na regra CSS das letras que constituem os textos dentro dos elementos HTML As propriedades b sicas para fontes e que abordaremos neste tutorial s o as listadas abaixo e CO O cor da fonte e Tont family tipo de fonte e font size tamanho de fonte e Tont style estilo de fonte e font variant fontes mai sculas de menor altura e Tont weight quanto mais escura a fonte negrito e TONE coceira nada maneira abreviada para todas as propriedades Valores v lidos para as propriedades da fonte e color 1 c digo hexadecimal HFFFFFF 2 c digo rgb rgb 255 235 0 3 nome da cor red blue green etc e font family l nome da fam lia de fontes define se pelo p ex verdana helvetica arial etc 2 nome da fam lia gen rica define se pelo p ex serif sans serif cursive etc e font size 1 xx small 2 x small 3 small medium large 4 5 6 x large 7 xx large 8 smaller 9 larger 10 length uma medida reconhecida pelas CSS px pt em cm 1
127. r left color cor da borda esquerda e border top maneira abreviada para todas as propriedades da borda superior e border right maneira abreviada para todas as propriedades da borda direita e border bottom maneira abreviada para todas as propriedades da borda inferior e border left maneira abreviada para todas as propriedades da borda esquerda e border maneira abreviada para todas as quatro bordas Valores v lidos para as propriedades das bordas e color 1 c digo hexadecimal HFFFFFF 2 c digo rgb rgb 255 235 0 3 nome da cor red blue green etc 1 none nenhuma borda 2 hidden equivalente a none 3 dotted borda pontilhada 4 dashed borda tracejada 5 solid borda cont nua 6 double borda dupla 7 groove borda entalhada 8 ridge borda em ressalto 9 inset borda em baixo relevo 10 outset borda em alto relevo e width 1 thin borda fina 2 medium borda m dia 3 thick borda grossa 4 length uma medida reconhecida pelas CSS px pt em cm Vamos a seguir analisar algumas delas detalhadamente atrav s de exemplos pr ticos Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada bem como um trecho do documento HTML onde se aplicam as regras A seguir mostro o efeito que a regra produz Observe a regra e o efeito e para melhor fixar seu aprendizado r
128. ra Ssegunda terceira Explicando se o valor da primeira sub express o verdadeiro TRUE n o zero ent o a segunda sub express o avaliada e este o resultado da express o condicional Caso contr rio a terceira sub express o avaliada e este o valor Poderia ser escrita tamb m assim F Pp hp i BE ime ir 1 segunda z StTtercceira Outro tipo comum de express o s o as express es de compara o O PHP suporta Simbolo Significado gt Maior que gt Maior ou igual Igual l diferente lt menor que lt menor ou igual igual e do mesmo tipo diferente ou n o do mesmo tipo Estas express es s o usadas mais frequentemente dentro de instru es condicionais como em comandos if Outro bom exemplo de orienta o de express o o pr e o p s incremento e decremento Se voc quer somar 1 vari vel a pode fazer de 2 formas lt 4 php Sa a i1 at a Es Da mesma forma voc pode usar para subtra o A diferen a entre pr e p s incremento de que no pr Incremento o valor calculado antes e retornado depois No p s incremento o valor retornado e s depois calculado Ainda em se tratando de express es outro caso importante o de combinar operador atribui o Voc j sabe que se voc quer incrementar a de 1 voc s precisa escrever a ou a Mas e se voc quiser somar mais que um a ele por exemplo 3 Voc
129. ra melhor fixar seu aprendizado reproduza o c digo no seu editor mude os valores e veja o resultado no browser Bons estudos E fa a timo proveito dos tutorial Nota Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualiza o padding top O espa amento superior lt html gt lt head gt lt style type text css gt ri padding top Zem gt lt style gt lt head gt lt body gt lt p gt Um espa amento superior de 2cm lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Um espa amento superior de 2cm padding right O espa amento direito lt html gt lt head gt lt style type text css gt O p tpadding righes S00px gt lt style gt lt head gt lt body gt lt p gt Um espa amento direito de 300px nesta frase mais longa dentro do par grafo lt p gt lt body gt SrnEmL gt Este o efeito da folha de estilo acima Um espa amento a direita de 300px nesta frase mais longa dentro do par grafo padding bottomeeeO espa amento inferior lt html gt lt head gt lt style type text css gt Llas p tpedding bottom 2em j gt lt style gt lt head gt lt body gt lt p gt Um espa amento inferior de 2 0em lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Um espa amento inferior de 2 0em padding left O espa amento esquerdo lt html gt lt
130. re estar dispon vel para o arquivo inclu do daquele ponto em diante Veja os exemplos de include lt 7 php nome Leonardo apelido Leo E Ilustra o includ php lt php echo O nome fnome e seu apelido Sapelido include includ php echo O nome nome e seu apelido Sapelido Es Ilustra o ex include php Se o include ocorre dentro de uma fun o do arquivo principal ent o todo o c digo Inclu do ser executado como se ele tivesse sido definido dentro daquela fun o Da mesma forma ele seguir o escopo de vari veis da fun o lt php function testei i global Gnome include includ php echo O nome nome e seu apelido Sapelido testel echo O nome nome e o apelido Sapelido p Ilustra o ex_include_2 php Quando um arquivo inclu do o interpretador sai do modo PHP e entra no modo HTML no come o do arquivo inclu do e alterna novamente no seu fim Por isso qualquer c digo dentro do arquivo inclu do que precisa ser executado como c digo PHP tem de ser delimitado por tags lidas de abertura e fechamento Se URL fopen wrappers est o ativas no PHP normalmente na configura o padr o voc pode especificar um arquivo utilizando uma URL via HTTP em vez de um caminho local Se o servidor apontado interpreta o arquivo informado como c digo PHP vari veis podem ser passadas ao arquivo inclu do na URL de requisi o como nu
131. regras b sicas est o reunidas no conjunto de protocolos chamados TCP IP O protocolo IP Na Internet cada computador tem um n mero IP pr prio assim como cada casa tem um endere o nico Empresas que t m redes ligadas dia e noite na Internet possuem o que se chama acesso dedicado isto as conex es de sua rede t m sempre um mesmo n mero IP na Internet Quando temos acesso Internet atrav s de um provedor usamos o que se chama acesso discado e nossa conex o com a Internet em geral ganha n meros IP diferentes a cada acesso Mesmo assim quando nosso computador se conecta ao provedor o n mero IP atribu do a ele nico em toda a Internet O protocolo TCP Suponhamos que em dado computador existem v rios programas se comunicando atrav s da rede em um mesmo Instante por exemplo uma p gina da Web sendo carregada enquanto se verifica a caixa postal Como o computador sabe que a p gina da Web deve ir para o browser e os e mails para o programa que l e mails Isso poss vel porque cada programa em execu o recebe tamb m seu endere o pr prio dentro do computador no caso de programas que se comunicam pela Internet esse endere o o n mero TCP Assim continuando a compara o com endere os f sicos suponhamos que seu computador um pr dio de apartamentos com um dado n mero IP seu browser e seu programa de e mail seriam apartamentos distintos nesse pr dio cada qual com seu n mero TCP Outros pro
132. res atrav s de campos OPTION lt SELECT NAME sabor gt lt OPTION gt Abacaxi lt OPTION gt Creme lt OPTION gt Morango lt OPTION gt Chocolate lt SELECT gt Tamb m poss vel estabelecer uma escolha padr o atrav s do atributo SELECTED lt SELEC T NAME sabor gt lt OPTION gt Abacaxi lt OPTION SELECTED gt Creme lt OPTION gt Morango lt OPTION gt Chocolate ESEC Com o atributo SIZE escolhe se quantos itens da lista ser o mostrados no exemplo sIZE 4 lt SELECT NAME sabor SIZE 4 gt lt OPTION gt Abacaxi lt OPTION SELECTED gt Creme lt OPTION gt Morango lt OPTION gt Chocolate X7 SELECT gt Com o atributo MULTIPLE define se que se pode selecionar mais de um item pressionando a tecla Shift do teclado enquanto se selecionam os itens lt SELECT NAME sabor SIZE 4 MULTIPLE gt lt OPTION gt Abacaxi lt OPTION SELECTED gt Creme lt OPTION gt Morango lt OPTION gt Chocolate lt SELECT gt TEXTAREA lt TEXTAREA gt abre uma rea para entrada de texto de acordo com atributos para n mero de colunas linhas e se for o caso um valor inicial lt TEXTAREA COLS 40 ROWS 5 NAME comentario gt Deixe seu coment rio lt TEXTAREA gt CGI Scripts CGI ou Common Gateway Interface uma interface definida de maneira a possibilitar a execu o de programas gateways sob um servidor HTTP Neste contexto os gateways s o programas ou scripts tamb m chamados cgi bin que rec
133. rray mostrado na figura logo acima em nossa cesta array i P ra ra Ma o cesta de frutas utilize a seguinte linha de c digo de PHP Isso criar um array chamado cesta contendo os tr s valores dados P ra Uva e Ma Note que como echo array na realidade uma constru o da linguagem em vez de uma fun o Dependendo do conte do que voc precise no array talvez n o seja necess rio inicializ lo manualmente como no exemplo anterior Se tiver os dados de que precisa em outro array voc simplesmente pode copiar um array para outro utilizando o operador Acessando o conte do de array Para acessar o conte do de uma vari vel utilize o nome dela Se a vari vel for um array acesse o conte do utilizando o nome da vari vel e uma chave ou ndice A chave ou ndice indica quais valores armazenados acessamos O ndice colocado entre colchetes depois do nome Digite cesta 0 cesta 1 cesta 2 para utilizar o conte do do array cesta Por padr o o elemento zero o primeiro elemento do array Esse o mesmo esquema de numera o utilizado em C C Java e em v rias outras linguagens mas talvez voc precise de algum tempo para se acostumar com ele se n o conhec lo Como com outras vari veis o conte do dos elementos do array alterado utilizando o operador A icesta 0 Banana pr xima linha substituir o primeiro elemento no array P ra por
134. s esta dupla fun o do HTML se por um lado resolveu uma necessidade dos designers e projetistas por outro acabou trazendo s rios problemas aos projetos criados Os documentos Web publicados na Internet cada vez mais sofisticados e extensos estavam fugindo do controle de seus criadores Para ilustrar suponha o seguinte exemplo Seu melhor cliente telefona s 17 00h da tarde de uma sexta feira sempre ligam nesta hora para solicitar alguma coisa n o mesmo e diz o seguinte teremos uma reuni o aqui na empresa na segunda feira s 0800h com um potencial comprador e nossa Inten o fazer uma apresenta o dos nossos produtos atrav s do site que voc criou e mant m Seguindo uma sugest o do nosso departamento de marketing precisamos mudar a cor de todos os t tulos no site de verde para vermelho pois que esta a cor principal da marca do nosso comprador e com 1sso pretendemos fixar uma cumplicidade subliminar Isto bem simples de fazer n o Afinal s mudar a cor D para voc botar no ar at s 19 30h Quero dar uma olhadinha antes de encerrar o expediente OK Claro que voc concorda e responde que vai providenciar rapidinho afinal s para mudar a cor Mas s o 180 p ginas no site E os t tulos s o tags de cabe alho deste tipo lt hi gt lt ftont cColor 00FF00 gt Titulo lt s font gt hI gt Supondo uma m dia de 3 t tulos por p gina voc tem um total de 540 tags font para editar e mudar o
135. s Tools Window div dois div tres div quatro div cinco As cinco primeiras est o com a mesma cor de fundo vermelha o que nos leva a concluir que as cinco primeiras regras mostradas s o equivalentes ou seja s o cinco maneiras diferentes de definir um mesmo valor para uma cor FF0000 F00 rgb 255 0 0 rgb 100 0 0 red A sexta cor TnreeDShadow depende do equipamento do usu rio Vejamos cada uma delas detalhadamente Definir uma cor pelo seu c digo hexadecimal Esta a maneira mais conhecida de definir uma cor Conv m ressaltar que em uma regra CSS indiferente usar letras mai sculas ou min sculas na sintaxe hexadecimal de cores e tamb m que v lido abreviar a nota o para tr s d gitos Na nota o abreviada cada um dos tr s d gitos automaticamente dobrado conforme exemplos a seguir HF FF HFFFFFF FCF 9 FCCFF99 tede fccddee 49c 4499cc N o do escopo deste tutorial detalhar o c digo hexadecimal contudo ressalto que os dezesseis d gitos hexadecimais s o 0 1 2 3 4 5 6 7 8 9 A B C D E F e somente eles s o v lidos para definir uma cor podendo em geral ser usada qualquer combina o deles Assim FFDDHH n o define uma cor pois H n o v lido Existem v rias ferramentas online para determinar o c digo hexadecimal de uma cor Uma das que eu costumo usar e indico para voc s esta http www colorschemer com online html Definir uma cor pelo seu c digo rgb r
136. s dados ainda n o vamos nos preocupar com o campo METHOD Quando submetemos os dados de um formul riom o browser organiza os dados entrados pelo usu rio assegurando que as informa es chegar o em ordem e ser o compreendidas pelo script Vejamos alguns exemplos Um campo de texto simples tal como lt INPUT TYPE TEXT NAME nome gt cuja entrada tenha sido ser organizado pelo browser da seguinte forma nome Prof Achille Bassi Isto passa a assumir um formato nome valor onde nome foi definido nas etiquetas do formul rio pelo atributo name de cada campo e valor a entrada oferecida pelo usu rio Note que os espa os em branco s o substitu dos por sinais de Se o formul rio tiver mais algum campo de informa o por exemplo lt INPUT TYPE TEXT NAME email gt com uma entrada o browser estar gerando uma linha nica com todos esses dados desta forma nome Prof Achille Bassi amp email bassificmec usp br Isto os campos de informa o s o separados por Tamb m todos os acentos e s mbolos especiais s o codificados em hexadecimal para o envio dos dados Esta codifica o dos dados de um formul rio padr o Feita essa codifica o o browser envia uma requisi o para o URL Indicado em ACTION que est associado a um script Esse envio est sujeito a um m todo espec fico que definir como o script ir recuperar essas informa es para process las Antes de ver
137. s definidos na se o anterior aplicaremos atributos de largura a7 O Instituto de Ci ncias Matem ticas e de Computa o ICMC USP formado je AR gi pelos Departamentos de Matem tica e de Ci ncias de Computa o e Estat stica Bi O ICMC originou se em 1953 como Departamento de Matem tica da Escola de Engenharia de S o Carlos EESC USP fundado por renomados matem ticos o talianos e brasileiros Pr dio principal d ICMSC USP Departamento deAtualmente o Departamento de Matem tica oferece cursos de Licenciatura e Matem tica SMA Bacharelado em Matem tica e o Bacharelado em Matem tica Aplicada e Computa o Cient fica Departamento d Computa o Estat stica SCE O Departamento de Computa o e Estat stica respons vel pelo Bacharelado em Ci ncia de Computa o e o curso noturno de Bacharelado em Inform tica Atributos de espa amento Dois atributos permitem o controle de espa amento em tabelas CELLPADDING espa o entre o texto e as bordas da c lula CELLSPACING espa o entre c lulas Tomemos a mesma tabela simples da se o anterior janeiro fevereiro mar o abril maio junho Ex 1 Espa o entre o texto e as bordas lt TABLE BORDER 1 CELLPADDING 20 gt janeiro fevereiro mar o abril maio junho Ex 2 Espa o entre c lulas lt TABLE BORDER 1 CELLSPACING 20 gt janeiro fevereiro mar o abril maio junho Ex3 Espa o entre texto e bordas e espa o entre c lulas
138. s em uma regra CSS contudo as classes e ID s devem seguir a mesma grafia constante da marca o Estes s o os termos normatizados de uma regra CSS e os que usaremos Portanto n o existe atributo CSS ou tag CSS ou elemento CSS ou fun o CSS ou tantos outros equivocadamente escritos N o do escopo deste tutorial detalhar as boas pr ticas de escrita das regras em uma folha de estilos Sobre este assunto escrevi e recomendo a leitura do tutorial Dicas b sicas para projetar folhas de estilos Abreviando valores de cores hexadecimais O formato hexadecimal uma das op es sint ticas mais usadas para se escrever o valor das cores em regras CSS A regra a seguir define que os par grafos ser o na cor vermelha Hff0000 p tleolor t0000 e que poder ser abreviada para leolor r00 E v lido abreviar cores hexadecimais para 3 d gitos Valores escritos com 3 d gitos s o interpretados como se cada um dos d gitos tivesse sido sido declarado duas vezes isto genericamente abc equivalente faabbcc Exemplos c30 cc3300 999 999999 ff0 ffff00 qd61 dd6611 E f cil concluir que a abrevia o de cores hexadecimais somente poss vel para as cores constituidas por 3 pares de d gitos hexadecimais Valores para os quatro lados de um elemento n vel de bloco Um elemento n vel de bloco ou uma caixa admite estiliza o em seus quatro lados para algumas propriedades como
139. s no PHP a partir de uma data qualquer maior que 01 01 1970 lt php mktime hora minuto segundos mes dia ano gt Sua sintaxe simples Depois de obtido o timestamp voc pode utiliz lo com as fun es previamente citadas a exemplo da fun o date Veja um exemplo 7 php itimestamp mktime t0 0 O 4 1 2006 data date l time Stamnp echo data p Formul rios O formul rios s o recursos oferecidos desde o HTML que dentre outras funcionalidades tem o intuito de interagir com o usu rio Seja em forma de enquetes contato pesquisas etc M todos GET e POST Para se trabalhar com formul rios existem 2 tipos de m todos utilizados para o tr fego dos dados GET e POST O primeiro deles o m todo GET trafega os dados de forma vis vel ao usu rio na barra de endere os do navegador browser E til para fazer marca o de URLs como exemplo de sites de busca onde o usu rio deseja salvar a p gina para consulta posterior O m todo POST trafega os dados de forma oculta onde somente o navegador browser e o servidor de onde foi postado os dados tem acesso leitura destes E utilizado para tr fego de dados de pesquisas por exemplo onde o usu rio n o usar novamente a p gina para favoritar etc Esses m todos s o definidos na tag lt form gt do HTML lt form method post action arquivo php gt lt form gt No lado do PHP os dados s o tratados utiliza
140. script Para encerr la antes disso deve ser utilizado o comando mysql close que tem a seguinte assinatura int mysgl close int identificador da conex o Se o identificador n o for fornecido a ltima conex o estabelecida ser encerrada IMPORTANTE o comando mysql close n o encerra conex es estabelecidas com o comando mysql pconnect Selecionando a base de dados Depois de estabelecida a conex o preciso selecionar a base de dados a ser utilizada atrav s do comando mysql select db que segue o seguinte modelo int mysql select db string base int conexao Novamente se o identificador da conex o n o for fornecido a ltima conex o estabelecida ser utilizada Realizando consultas Para executar consultas SQL no MySQL utiliza se o comando mysql query que tem a seguinte assinatura int mysql query string query Int conexao Onde query a express o SQL a ser executada sem o ponto e v rgula no final e conexao o identificador da conex o a ser utilizada A consulta ser executada na base de dados selecionada pelo comando mysql select db bom lembrar que uma consulta n o significa apenas um comando SELECT A consulta pode conter qualquer comando SQL aceito pelo banco O valor de retorno falso se a express o SQL for incorreta e diferente de zero se for correta No caso de uma express o SELECT as linhas retornadas s o armazenadas numa mem ria de resultados e o valor
141. se desde que o nome das classes sejam separados por um espa o lt p Class corum cordoirs gt Aqui n o h erro lt p gt Ao criar uma classe voc talvez queira que ela seja aplic vel a qualquer elemento HTML Neste caso basta que se omita o nome do elemento antes da classe Por exemplo a regra CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual voc deseja atribuir cor azul CcCortres color 0000FF No exemplo a seguir tanto o cabe alho lt h2 gt como o par grafo lt p gt ter o cor azul lt h2 class cortres gt Este cabe alho azul AZ lt p class cortres gt Este par grafo azul Sp gt O seletor ID O seletor ID difere do seletor de classe por ser NICO Um seletor ID s pode ser aplicado a UM e somente UM elemento HTML dentro do documento Voc pode inventar um nome e com ele criar uma ID a qual definir as regras CSS Uma ID s pode ser aplicada a UM elemento HTML A sintaxe para o seletor ID mostrada abaixo Um nome qualquer que voc inventa precedido de tralha jogo da velha minhaID propriedade valor Nota Para o nome que voc inventa evite usar n meros e caracteres especiais Tanto quanto poss vel use s letras de a z e de A Z H restri es quanto ao uso de n meros e caracteres Minha experi ncia e conselho Use s letras Inserindo coment rios nas CSS Voc pode inserir coment rios nas CSS para explicar
142. senta4 html NAME principal gt lt FRAMESET gt Frame sem barra de rolagem lt FRAMESET COLS 20 80 gt lt FRAME SRC indice4 html SCROLLING no gt lt FRAME SRC apresenta4 html NAME principal gt lt FRAMESET gt Veja o exemplo E bom lembrar que a barra de rolagem de um frame fica sempre direita n o poss vel atualmente mudar essa caracter stica Aplica es de Frames e Cuidados Frames s o interessantes para apresentar conjuntos de p ginas com um ndice fixo para a navega o Al m disso torna se poss vel mostrar diversas p ginas e ou m dias em uma nica janela do browser Um cuidado procurar controlar bem a navega o evitando que o acionamento de links n o leve o leitor a ver seu browser criar frames dentro de frames gerando uma grande confus o veja item seguinte sobre limpar a tela Limpando a tela H basicamente dois efeitos poss veis para limpar a apresenta o de frames e isso feito com targets especiais o atributo TARGET foi apresentado no item Links com frames TARGET top limpa os frames que estiverem ativos apresentando a p gina de destino na tela inteira TARGET blank abre uma nova janela do browser para apresentar a p gina de destino Intera o A Intera o realizada de duas formas diferentes 1 atrav s de programas executados interpretados pelo browser isto do lado do cliente 2 atrav s de programas executados pelo servidor HTTP
143. seu c digo e principalmente ajud lo a relembrar de como voc estruturou e qual a finalidade de partes importantes do c digo Daqui h alguns meses a menos que voc seja um privilegiado ter esquecido a maior parte daquilo que voc levou horas para bolar O coment rio introduzido no c digo ser ignorado pelo browser Um coment rio nas CSS come a com o e termina com Veja o exemplo abaixo este m coment rios pd font size Jl px Pe BSE S Quiro comentario color 0000003 font familyo Araad Cerri Vinculando folhas de estilo a documentos Os tr s tipos de vincula o de folhas de estilo As folhas de estilo podem ser vinculadas a um documento de tr s maneiras distintas 1 Importadas ou lincadas 2 Incorporadas 3 Inline Folha de estilo externa Uma folha de estilo dita externa quando as regras CSS est o declaradas em um documento a parte do documento HTML A folha de estilo um arquivo separado do arquivo html e que tem a extens o css Uma folha de estilo externa ideal para ser aplicada a v rias p ginas Com uma folha de estilo externa voc pode mudar a apar ncia de um site inteiro mudando um arquivo apenas o arquivo da folha de estilo O arquivo css da folha de estilo externa dever ser lincado ou importado ao documento HTML dentro da tag lt head gt do documento A sintaxe geral para lincar uma folha de estilo chamada estilo css mostrada abaixo A sin
144. sion start Vale lembrar que at us la n o se pode imprimir nada na tela seja via echo print avisos ou erros de algum trecho de c digo Por estes motivos recomenda se que voc insira a fun o logo na primeira linha do seu script Sempre que for utilizar sess es voc vai precisar Inicializar esta fun o Exemplo lt php session start E Dentro da se o fazemos uso da vari vel global SESSION para definir vari veis e valores Agora voltemos ao problema inicial Precisamos restringir acesso a algumas se es Vamos fazer isso utilizando uma vari vel de sess o para saber se o usu rio passou pela tela de login e informou a senha corretamente Nas se es onde a rea ser restrita fazemos a verifica o se o usu rio logou 7 php session starti if _SESSION logado i header Location login htm die 7 gt Veja o exemplo da pagina secreta php Entendendo o c digo primeiro inicializamos a sess o com a fun o session start Em seguida fazemos a verifica o se n o existir uso da a vari vel de sess o logado ou se ela for igual a falso booleano redirecionamos para a p gina de login fun o header e finalizamos o script fun o die Caso contr rio o script prossegue e a sess o mostrada normalmente Vamos entender agora a p gina de login Primeiro vamos criar o formul rio do login htm lt form action login php method post gt
145. sobre o documento O elemento lt TITLE gt por exemplo define um t tulo que mostrado no alto da janela do browser Nesta p gina por exemplo est definido assim lt HEAD gt lt TITLE gt A se o amp lt HEAD amp gt Tutorial HTML do ICMC USP lt TITLE gt lt HEAD gt Todo documento WWW deve ter um t tulo esse t tulo referenciado em buscas pela rede dando uma identidade ao documento Para ver na pr tica a import ncia do t tulo se voc adicionar esta p gina aos seus Favoritos Bookmarks Note que o t tulo da p gina se tornou a ncora de atalho para ela Por isso sugerido que os t tulos dos documentos sejam sugestivos evitando se t tulos gen ricos como Introdu o O t tulo tamb m bastante significativo para a listagem de uma p gina nos resultados de pesquisas nos cat logos da Internet Al m do t tulo lt HEAD gt cont m outras informa es de import ncia para os rob s de pesquisa indicadas nos campos lt META gt Campos lt META gt Os campos lt META gt t m dois atributos principais e NAME indicando um nome para a informa o e HTTP EQUIV que faz uma correspond ncia com campos de cabe alho do protocolo HTTP a informa o desse campo pode ser lida pelos browsers e provocar algumas a es lt HEAD gt STLTLE gt Titulo do Documentos TITLE lt META NAME nome CONTENT valor gt lt META HTTP EQUIV nome CONTENT valor gt lt HEAD gt Este documento por exem
146. st o Importante que a op o aceitar cookies do navegador browser que pode ser desativada a qualquer momento pelo visitante Para uma transmiss o de dados segura recomend vel o uso de sess es Sintaxe b sica 20 29 2252 22729 setcookie nome_do_cookie seu_valor tempo_de_vida path dom nio conex o_segura e Nome do cookie E o nome que posteriormente se tornar a vari vel e o que o servir de refer ncia para indicar o cookie e Seu_valor E o valor que a vari vel possuir Esse valor pode ser de todos os tipos e Tempo de vida E o tempo em segundos que o cookie existir no computador do visitante Uma vez excedido esse prazo o cookie se apaga de modo 1irrecuper vel Se esse argumento ficar vazio o cookie se apagar quando o visitante fechar o browser e Path endere o da p gina que gerou o cookie autom tico e Dom nio dom nio ao qual pertence o cookie autom tico e Conex o segura Indica se o cookie dever ser transmitido somente em uma conex o segura HTTPS Depois de definida um cookie voc pode acess lo atrav s da vari vel global COOKIE nome do cookie Fontes Bibliogr ficas http www 1cmc usp br ensino material html http maujor com tutorialinsetut php Hino Nacional Ouviram do Ipiranga as margens pl cidas De um povo her ico o brado retumbante E o sol da liberdade em raios f lgidos Brilhou no c u da p tri
147. staque a uma imagem sem ser necess rio edit la qa papo E qa yT j Eo i E E na sim m Foto original Foto com borda gerada por HTML ALIGN lt IMG SRC imagem ALT descri o ALIGN alinhamento gt Existem tamb m 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 n o seja muito bom ALIGN MIDDLE Alinha o texto adjacente com o meio da imagem embora com linhas compridas o resultado n o 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 lt IMG align left SRC imagem gif alt imagem gt lt IMG align right SRC imagem gif alt imagem gt e se pode escrever vontade entre as imagens Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento Ou seja Suponhamos um texto mais ou menos curto que desejamos colocar aqui com a imagem ilustrativa mas gostar amos que este trecho j estivesse abaixo da imagem De acordo com o comprimento da primeira frase n o seria poss vel usar o alinhamento TOP
148. t Este o efeito da folha de estilo acima Letras com tamanho 14px Letras com tamanho smaller Letras com tamanho 100 font style O estilo de fonte lt html gt lt head gt lt style type text css gt Ad nt Croncestydes ILa P2 tont style normal PO ffort styvle oblique gt lt style gt lt head gt SDOdV gt lt nirEste e o gstilo Italie lt pni gt lt n2 gt Este o estilo normal lt h2 gt lt p gt Este o estilo oblique lt p gt lt body gt Ss nem Este o efeito da folha de estilo acima Este o estilo italic Este o estilo normal Este o estilo oblique font variant fontes mai sculas menores lt html gt lt head gt lt style type text css gt E ko font variant normal j 6ltont variant Ssmall gaps gt p lt style gt lt head gt lt body gt lt n3 gt Este cabe alho com letras normais lt h3 gt lt p gt Este par grafo com letras em small caps lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Este cabe alho com letras normais ESTE PAR GRAFO COM LETRAS EM SMALL CAPS font weight Peso das fontes negrito intensidade da cor lt nEm gt lt head gt lt style type text css gt S p font weight bold gt lt style gt lt head gt lt body gt lt p gt Este um par grafo em negrito lt p gt lt body gt lt html gt Este o efeito da
149. t Letra normal lt FONT SIZE 2 gt Letra menor lt FONT gt Letra maior Letra normal Letra menor Fontes Uma evolu o que permite a escolha da fonte para os textos o atributo FACE lt FONT FACE fonte da letra gt Texto lt FONT gt Por exemplo lt FONT FACE Verdana COLOR 0000AA gt Fonte Verdana azul lt FONT gt Fonte Verdana azul lt FONT FACE Arial COLOR t00AA00 gt Fonte Arial verde lt FONT gt Fonte Arial verde lt FONT FACE Courier New COLOR AA0000 gt Fonte Courier New vermelha lt FONT gt Fonte Courier New vermelha Marquee E poss vel obter o efeito de anima o de texto atrav s da formata o lt MARQUEE gt lt MARQUEE BEHAVIOR cfeito gt Texto lt MARQUEE gt Atributos de largura e dire o do efeito permitem diversas apresenta es diferentes Por exemplo o efeito s executado no Internet Explorer e em vers es recentes do Netscape e de maneiras diferentes lt MARQUEE BEHAVIOR SCROLL WIDTH 30 gt Texto lt MARQUEE gt lt MARQUEE BEHAVIOR SCROLL WIDTH 30 gt Texto lt MARQUEE gt lt MARQUEE BEHAVIOR SLIDE DIRECTION RIGHT gt Texto lt MARQUEE gt lt MARQUEE BEHAVIOR SLIDE DIRECTION LEFT gt Texto lt MARQUEE gt Liga es uso de links Com HTML poss vel fazermos liga es de uma regi o de texto ou imagem a um outro documento Nestas p ginas temos visto exemplos dessas liga es o browser destaca essas regi es e imagens do texto indicando que s o
150. tabelecimento de uma prioridade para aplica o da regra de estilo ao elemento Para determinar a prioridade s o considerados diversos fatores entre eles o tipo de folha de estilo o local f sico da folha de estilo no seu todo o local f sico da regra de estilo na folha de estilo e a especificidade da regra de estilo A prioridade para o efeito cascata em ordem crescente 1 folha de estilo padr o do navegador do usu rio 2 folha de estilo do usu rio 3 folha de estilo do desenvolvedor o estilo externo importado ou linkado o estilo incorporado definido na se o head do documento o estilo inline dentro de um elemento HTML 4 declara es do desenvolvedor com important 5 declara es do usu rio com important Assim uma declara o de estilo com important definido pelo usu rio prevalece sobre todas as demais a de mais alta prioridade Entre as folhas de estilo definidas pelo desenvolvedor do site os estilos inline dentro de um elemento HTML tem a prioridade mais elevada isto prevalecer sobre a folha de estilo definida na se o head e esta prevalecer sobre uma folha de estilo externa A prioridade mais baixa para estilos padr o do navegador Agora voc J sabe o porqu de cascata no nome Folha de estilo em cascata Consulte os diversos tutoriais deste site para saber mais sobre o efeito cascata A regra CSS A regra CSS e sua sintaxe Uma regra CSS uma declara o que segue uma
151. taxe geral para importar uma folha de estilo chamada estilo css mostrada abaixo lt head gt lt style type text css gt impor Ur bit estilorcss lt SEv Le lt head gt O browser ler as regras de estilo do arquivo estilo css e formatar o documento de acordo com elas Uma folha de estilo externa pode ser escrita em qualquer editor de texto O arquivo n o deve conter nenhuma tag HTML As folhas de estilo devem ser salvas com uma extens o css Folha de estilo incorporada ou interna Uma folha de estilo dita incorporada ou interna quando as regras CSS est o declaradas no pr prio documento HTML Uma folha de estilo incorporada ou interna ideal para ser aplicada a uma nica p gina Com uma folha de estilo incorporada ou interna voc pode mudar a apar ncia de somente um documento aquele onde a folha de estilo esta incorporada As regras de estilo v lidas para o documento s o declaradas na se o lt head gt do documento com a tag de estilo lt style gt conforme sintaxe mostrada abaixo lt head gt lt style type text css gt lt body 4 background 000000 url imagens minhaimagem gif h3 4 color FF0000 p margin left 15px padding 1 Sem gt lt style gt O browser ler agora as regras de estilo na pr pria p gina e formatar o documento de acordo com elas Nota Um browser ignora normalmente as tags desconhecidas Isto significa q
152. te a imagem de fundo lt html gt lt head gt lt style type text css gt E body background image url images css g1f s background repeat repeat y gt lt style gt lt head gt lt body gt lt body gt lt html gt Este o efeito da folha de estilo acima Repetir horizontalmente a imagem de fundo lt html gt lt head gt style type text css gt g body background image url images css gif background repeat repeat x gt lt style lt head gt lt body gt lt body gt lt html gt Este o efeito da folha de estilo acima Posicionar uma imagem de fundo lt html gt lt head gt lt style type text css gt o body background image url iImages css qLt ys background repeat no repeat backgrowund position 200p amp JOpR gt lt style gt lt head gt lt body gt lt body gt lt html gt Este o efeito da folha de estilo acima a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior Ajustar uma imagem de fundo fixa que n o rola com a tela lt html gt lt head gt lt style type text css gt O body background image url images css gif background repeat no repeat background attachment fixed gt lt style gt lt head gt lt body gt lt body gt lt html gt Este o efeito da aplica o das regras CS
153. tem o mais um item Cada item tamb m pode ter seu atributo espec fico lt UL gt lt LI TYPE DISC gt um item lt LI TYPE CIRCLE gt mais um item lt LI TYPE SQUARE gt ltimo item Eru e um item o mais um item ltimo item Listas Numeradas lt OL gt lt LI gt item de uma lista numerada lt LI gt item de uma lista numerada que pode ser t o grande quanto se queira sem que seja necess rio se preocupar com a formata o das margens de texto lt LI gt item de lista numerada XIOS 1 item de uma lista numerada 2 item de uma lista numerada que pode ser t o grande quanto se queira sem que seja necess rio se preocupar com a formata o das margens de texto 3 item de lista numerada Estas listas n o apresentam numera o em formato 1 1 1 2 etc quando compostas 1 Documentos b sicos 2 Documentos avan ados 1 formul rios 1 CGI 2 contadores 3 rel gios 2 Detalhes sobre imagens Por m atrav s do atributo TYPE HTML 3 2 pode se lidar com a numera o dos itens lt OL TYPE I gt lt LI gt Documentos b sicos lt LI gt Documentos avan ados lt OL TYPE a gt lt LI gt formul rios lt OL TYPE 1 gt lt LI gt CGI SORS lt LI gt contadores lt LI gt rel gios X70OL gt lt LI gt Detalhes sobre imagens RAOL I Documentos b sicos I Documentos avan ados a formul rios i CGI b contadores c rel gios HI Detalhes sobre imagens Ainda segundo HTML 3 2 o atributo START p
154. time value flu gt Fluminense lt input type radio name time value inter gt Internacional lt input type radio name time value cruzeiro gt Cruzeiro lt input type radio name time value botafogo gt Botafogo lt input type radio name time value santa gt Santa Cruz lt input tvyvpe radio name time value saopaulo gt S o Paulo lt input type radio name time value aea checked gt AEA lt p gt lt td gt O pcs lt tr gt UC valon l TOoOp DOCoror mCCCCCCTS lt p class conteudo gt Sabor de sorvete que prefere lt p gt lt td gt lt td bgcolor CCCCCC gt lt select value sabor name sorvete size 1 gt lt option gt Abacaxi lt option gt Creme lt option gt Morango lt option gt Chocolate lt select gt lt td gt KIGI lt LI gt lt td valign top gt lt p class conteudo gt Algo mais lt p gt lt td gt lt td gt lt textarea cols 40 rows 5 name comentario gt Escreva um coment rio lt textarea gt lt td gt LIET SCE lt td valign Cop bocolor 4CCecCeo gt lt p gt amp nbsp lt p gt lt td gt lt ta pbgc lor FCCCCCC gt lt sp elass contendo gt lt input Eyvpe submit name submit value Enviar gt lt input type reset name cancela value Apagar gt lt p gt lt a FEL lt table gt lt form gt udio e V deo O uso de udio e v deo na Internet vem ganhando muito destaque nos ltimos dois anos e bom saber como usar bem est
155. tocolos Veremos que para cada tipo de recurso dispon vel pela Internet tamb m existe um protocolo de comunica o espec fico al m do TCP IP Recursos da Internet E mail Servi o de interc mbio ass ncrono de mensagens o correio eletr nico utiliza se dos protocolos POP ou IMAP SMTP FTP Permite a transfer ncia de arquivos pelo protocolo FTP File Transfer Protocol Telnet Permite a conex o e intera o com computadores remotos simulando um terminal pelo protocolo Celntts Gopher Sistema precursor da World Wide Web utiliza o protocolo gopher para apresentar menus de navega o documentos e Imagens O que World Wide Web A World Wide Web tamb m chamada Web ou WWW termos gerais a interface gr fica da Internet Ela um sistema de informa es organizado de maneira a englobar todos os outros sistemas de informa o dispon veis na Internet Sua id ia b sica criar um mundo de informa es sem fronteiras prevendo as seguintes caracter sticas Interface consistente incorpora o de um vasto conjunto de tecnologias e tipos de documentos Jeitura universal Para 1sso implementa tr s ferramentas importantes um protocolo de transmiss o de dados HTTP um sistema de endere amento pr prio URL uma linguagem de marca o para transmitir documentos formatados atrav s da rede HTML HTTP HTTP significa HyperText Transfer Protocol Protocolo de Transfer n
156. txtst liIne 4 color 0000FF tont variant small caps lt style gt lt head gt lt body gt lt p gt Um texto qualquer dentro de um pseudo elemento first line para um efeito especial na primeira linha lt p gt lt body gt lt html gt O c digo acima produzir esse efeito Um texto qualquer dentro de um pseudo elemento first line para um efeito especial na primeira linha Notar a mudan a de cor e o tipo de letra small caps na primeira linha No exemplo acima toda a primeira linha sofre o efeito da defini o do pseudo elemento A quebra da linha depente do tamanho da janela do browser O pseudo elemento first line somente pode ser usado com elementos de bloco Propriedades aplic veis ao pseudo elemento sirst 1ine e font propriedades de letras e color propriedades de cores e background propriedades de fundo e word spacing espa amento entre palavras e letter spacing espa amento entre letras e text decoration e vertical align e text transform e line height e clear Pseudo elementos em classes CSS Pseudo elementos podem ser combinados com classes CSS lt html gt lt head gt lt style type text css gt p combinado first letter color FEFO00O font size xx large lt style gt lt head gt lt body gt lt p class combinado gt Uma frase com efeito especial combinado lt p gt lt body gt lt html gt O c digo acima produzir esse efeito Uma frase com
157. type text css gt Sb a p margin 20px 40px 80px 5px gt Su style lt head gt lt body gt lt p gt Uma margem superior de 20px uma margem direita de 40px uma margem inferior de 80px e uma margem esquerda de 5px lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Uma margem superior de 20px uma margem direita de 40px uma margem inferior de 80px e uma margem esquerda de 5px A propriedade border As bordas nos elementos HTML As propriedades para as bordas definem as caracter sticas os valores na regra CSS das quatro bordas de um elemento HTML As propriedades para as bordas s o as listadas abaixo e border width espessura da borda e border style estilo da borda e border color cor da borda e border top width espessura da borda superior e border top style estilo da borda superior e border top color cor da borda superior e border right width espessura da borda direita e border right style estilo da borda direita e border right color cor da borda direita e border bottom width espessura da borda inferior e border bottom style estilo da borda inferior e border bottom color cor da borda inferior e border left width espessura da borda esquerda e border left style estilo da borda esquerda e borde
158. u diret rio raiz um diret rio de nome WWW em letras mai sculas A partir do momento da cria o desse diret rio WWW o URL http www icmc usp br seulogin OU http www grad icmc usp br seulogin no caso de alunos de gradua o passa a ser reconhecido pelo servidor Nesse diret rio WWW deve haver um arquivo index html que ser a sua p gina principal A seguir certifique se de que sua rea e o diret rio WWW dentro dela estejam com permiss o de leitura para todos no ambiente UNIX d o comando chmod 755 www Feito 1sso se voc aluno do ICMC fa a o cadastro de sua p gina aqui Obs Estas diretivas se aplicam em particular rede do ICMC outros sistemas podem ter outras configura es espec ficas Se voc n o usu rio do ICMC visite a p gina de seu provedor de acesso Internet ou provedor de e mail webmail e procure informa es sobre hospedagem de p ginas Documento b sico e seus componentes A estrutura de um documento HTML apresenta os seguintes componentes lt HTML gt lt HEAD gt lt TITLE gt Titulo do Documento lt TITLE gt lt HEAD gt lt BODY gt texto imagem links lt BODY gt lt HTML gt As etiquetas HTML n o s o sens veis caixa Traduzindo tanto faz escrever lt HTML gt lt Html gt lt html gt SEDE M ds sis Os documentos se dividem em duas se es principais que veremos a seguir A se o lt HEAD gt lt HEAD gt cont m informa es
159. ual de um dia tr s letras JMon through Sun E Uma representa o textual de um m s tal como janeiro ou Janeiro a Dezembro Mar o 12 hour formato de hora com zeros ias E 24 hour formato de hora com zeros logazs i Minutos com zeros o OOpamass I i mai sculo Se a data est ou n o em hor rio de ver o 1 Hor rio de Ver o 0 IE ge ma representa o completa textual de um dia da semana Domingo a S bado min sculo L Se ano bissexto 1 ano bissexto 0 ano o bissexto m Representa o num rica de um m s com leading zeros 01a12 M Uma representa o textual curta de um m s tr s letras Jan a Dec n Representa o num rica de um m s sem leading zeros 1 a 12 O Diferen a ao hor rio de Greenwich GMT em horas Exemplo 0200 a RFC 2822 formatted date Exemplo Thu 21 Dec 2000 16 01 07 FOZUO S Segundos com leading zeros 00a59 Sufixo ordinal ingl s para o dia do m s 2 caracteres st nd rd ou th Funciona bem com j t N mero de dias do dado m s 29831 T Timezone setting of this machine Examples EST MDT U Seconds since the Unix Epoch January 1 1970 00 00 00 See also time a E para S bado N mero da semana do ano ISO 8601 semanas come adas na Exemplo 42 a 42nd segunda feira adicionado no PHP 4 1 0 quadrag sima segunda semana do ano Y Uma representa o completa do ano 4 d gitos Examples 1999 ou z003 E TSE Representa o do ano em dois d gitos Examples 99 ou 03 Z O
160. ue um browser velho que n o suporte estilos ignorar a tag lt style gt mas o conte do da tag ser mostrado na tela poss vel impedir que um browser velho mostre o conte do da tag escondendo o atrav s do uso da marca o de coment rio do HTML Observe a inclus o dos s mbolos lt abre coment rio gt fecha coment rio no c digo acima Folha de estilo inline Uma folha de estilo dita inline quando as regras CSS est o declaradas dentro da tag do elemento HTML Um estilo inline s se aplica a um elemento HTML Ele perde muitas das vantagens de folhas de estilo pois mistura o conte do com a apresenta o Use este m todo excepcionalmente como quando quiser aplicar um estilo a uma nica ocorr ncia de um elemento A sintaxe para aplicar estilo inline mostrada a seguir lt p stvle c olor 000000 margin 5px y Aqui um par grafo de cor preta e com 5px nas 4 margens lt p gt Folhas m ltiplas de estilo Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes entrar em a o o EFEITO CASCATA e prevalecer o os valores da folha de estilo mais espec fica Suponha uma folha de estilo externa com as seguintes propriedades para o seletor h2 n2 4 color FERFC OS text align center font astalae pe Verdana Sans serif e uma folha de estilo interna com as seguintes propriedades para o seletor n2 h2 color FEECCOOs text align cente
161. um nome e com ele criar uma classe a qual definir as regras CSS E o mais Interessante das classes que elas podem ser aplicadas a qualquer elemento HTML E mais ainda voc pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML usando classes diferentes para cada um deles A sintaxe para o seletor classe mostrada abaixo Elemento HTML mais um nome qualquer que voc inventa precedido de ponto elemento HTML minhaclasse propriedade valor Nota Para o nome que voc inventa evite usar n meros e caracteres especiais Tanto quanto poss vel use s letras de a z e de A Z H restri es quanto ao uso de n meros e caracteres Minha experi ncia e conselho Use s letras Por exemplo suponha que voc queira ter dois tipos de par grafos em seu documento um par grafo com letras na cor preta e um par grafo com letras na cor azul prCcorum 4 color 000000 Prcordore 4 color 0000F E No seu documento HTML as regras seriam aplicadas conforme abaixo lt p class corum gt este par grafo ter cor preta lt p gt lt p class cordois gt este par grafo ter cor azul lt p gt Este item foi atualizado em 2007 07 03 Em CSS 1 n o v lido atribuir mais de uma classe para um elemento HTML O exemplo abaixo est errado lt p Class fcorum class cordors gt Aqui h um erro lt p gt Nota CSS 2 mudou este conceito permitindo declarar mais de uma clas
162. weight sedo que estes tr s valores s o facultativos e podem ser escritos em qualquer ordem 2 a seguir declarar obrigatoriamente font size e opcionalmente line height font size line height 3 finalmente declarar obrigatoriamente font family Abreviando iist As regras a seguir definem valores para propriedades de listas Wal 4 list style type square List style position inside list style image url image gif E pode ser abreviada para ul list style square inside url image gif A propriedade list style type pode ser abreviada para list style Por exemplo list style type none pode ser abreviada para list style none Abreviando outline A propriedade outline pouco conhecida e empregada Serve para colocar uma margem ao redor de um elemento com a finalidade de destac lo no contexto Difere da propriedade border por n o interferir com as dimens es do box model isto n o ocupa espa o no box do elemento e em consequ ncia n o afeta o posicionamento do box e nem dos boxes adjacentes As regras a seguir definem a marca o de um destaque em linha vermelha s lida de 1px ao redor do elemento h2 n2 outline color f00 outline style solid outline width 1lpx E pode ser abreviada para zo A outline f00 solid 1px Exemplo Para este par grafo eu defini um destaque outline de 5px em linha tracejada na cor azul que ser visualizado nos Mozillas e no Opera mas n o no
163. width 0px border right width 0px border left width 0px lt style gt lt head gt lt body gt lt p gt Borda com espessura inferior de 10px lt p gt lt body gt eae gt Este o efeito da folha de estilo acima Borda com espessura inferior de 10px Nota A propriedade border bottom width n o reconhecida pelo Internet Explorer se usada isoladamente Use border style para ser reconhecida pelo Internet Explorer Definir a espessura das bordas superior esquerda e direita Proceda de modo semelhante ao mostrado acima Erro Indicador n o definido border declara o nica Esta a maneira abreviada de voc escrever uma regra para as propriedades das bordas Voc pode declarar todas as tres propriedadesdas bordas em uma regra nica A sintaxe geral esta border size style color em qualquer ordem Nota Aconselho a escolher e adotar sempre a mesma ordem lt html gt lt head gt lt style type TLexC css gt O ni P 1 border thick groove r9gb 255 0 255 lt style gt lt head gt lt body gt lt p gt Bordas em declara o nica lt p gt lt body gt lt html gt Este o efeito da folha de estilo acima Bordas em declara o nica Propriedades CSS das bordas As propriedades das bordas permitem que voc controle o estilo a cor e a espessura das bordas de um elemento HTML As propriedades s o muitas e como voc viu podem ser declaradas para cad
164. zando loops para acessar o array Como o array est indexado por uma sequ ncia de n meros podemos utilizar um loop for mais facilmente para exibir o conte do for i DO i lt 3 i echo cestal i Esse loop fornecer sa da semelhante ao c digo anterior mas exigir menos digita o do que escrever o c digo manualmente para trabalhar com cada elemento em um array grande A capacidade de utilizar um loop simples para acessar cada elemento um excelente recurso de arrays Tamb m podemos usar o loop foreach visto anteriormente especialmente projetado para usar com os arrays poder amos utiliz lo como a seguir foreach icesta as Schave gt ivalor echo Schave Svalor Por sua vez esse c digo armazena cada ndice do array em chave e cada valor em valor e os imprime Arrays Associativos No array cesta permitimos que o PHP ofere a um ndice padr o a cada item Isso significa que o primeiro item que adicionamos tornou se o item O o segundo item 1 e assim por diante O PHP tamb m suporta arrays em que podemos associar qualquer chave ou ndice que quisermos a cada valor Inicializando um array O c digo a seguir cria um array associativo com nome de frutas como chaves e pre os como valores sprecos array P ra gt 7 Uvals gt 3 Ma a gt 1 3 O s mbolo entre as chaves e os valores simplesmente um sinal de igual seguido imediatamente de um sinal de maior que Acessa

Aplicativos

Contents

Download Pdf Manuals

Related Search

Related Contents