introdução ao html, css e php (2).pdf
TRANSCRIPT
Sumário Introdução ao HTML .................................................................................................................................... 12
Lição 1: Vamos começar .............................................................................................................................. 12
O que é necessário? ................................................................................................................................ 12
Preciso estar online? ............................................................................................................................... 13
Lição 2a: O que é HTML? ............................................................................................................................. 13
Para que devo usar o HTML? .................................................................................................................. 13
OK, mas o que significa H-T-M-L? ........................................................................................................... 14
Lição 3a: O que são tags HTML? .................................................................................................................. 14
Você pode mostrar alguns exemplos? .................................................................................................... 14
Este é um título ......................................................................................................................................... 15
Este é um subtítulo ............................................................................................................................... 15
As tags devem ser escritas com letras maiúsculas ou minúsculas? ........................................................ 15
Onde devo colocar todas estas tags? ...................................................................................................... 15
Lição 4a: Criando seu primeiro website ...................................................................................................... 16
Na lição 1 vimos o que é necessário para construir um website: um navegador e o Notepad (ou um
editor de texto similar). Uma vez que você esta lendo esta página, provavelmente está com seu
navegador aberto. Agora abra outra janela do seu navegador de modo que você tenha duas janelas
na tela, uma para ler este tutorial e outra para visualizar o website que você vai construir. ................ 16
O que posso fazer? .................................................................................................................................. 16
Até aqui tudo bem, mas como colocar conteúdo no meu website? ...................................................... 17
Lição 5a: O que você já aprendeu? ............................................................................................................. 18
O que significa isto? ................................................................................................................................ 19
O que fazer agora? .................................................................................................................................. 19
Lição 6a: Mais tags HTML ............................................................................................................................ 20
E agora? ................................................................................................................................................... 20
Posso usar várias tags simultaneamente? .............................................................................................. 21
Mais tags! ................................................................................................................................................ 21
Uau! Isto é tudo? ..................................................................................................................................... 22
Lição 7a: Atributos ...................................................................................................................................... 22
Como é isto? ............................................................................................................................................ 22
Como a página ficou vermelha? .............................................................................................................. 23
Quais tags podem usar atributos? .......................................................................................................... 23
Então, quais são as partes que constituem uma tag? ............................................................................. 23
Lição 8a: Links .............................................................................................................................................. 24
Como são os links entre minhas próprias páginas? ................................................................................ 24
Como são os links dentro de uma mesma página? ................................................................................. 24
Exemplo 5: ........................................................................................................................................... 25
Cabeçalho 1 ................................................................................................................................................. 25
Cabeçalho 2 ................................................................................................................................................. 25
Posso criar link para mais alguma coisa? ............................................................................................ 25
Existem outros atributos que eu deva conhecer? .................................................................................. 26
Lição 9a: Imagens ........................................................................................................................................ 26
Onde consigo minhas imagens? .............................................................................................................. 27
Isto é tudo o que eu preciso saber sobre imagens? ............................................................................... 27
Existem outros atributos que eu deva conhecer? .................................................................................. 28
Lição 10a: Tabelas ....................................................................................................................................... 29
Qual a diferença entre <tr> e <td>? ........................................................................................................ 30
Existem atributos? ................................................................................................................................... 31
Mais atributos? ....................................................................................................................................... 32
O que posso inserir em tabelas? ............................................................................................................. 32
Lição 11a: Mais tabelas ............................................................................................................................... 32
O que mais existe? .................................................................................................................................. 32
Que tal rowspan? .................................................................................................................................... 34
Lição 12a: Layout (CSS) ................................................................................................................................ 34
Está parecendo que há uma grande quantidade de trabalho a executar ............................................... 35
O que mais posso fazer com CSS? ........................................................................................................... 36
CSS não é nada mais do que cores e tipos de fontes? ............................................................................ 36
Legal sim. Mas, fácil? ............................................................................................................................... 37
Lição 13a: Uploading páginas ...................................................................................................................... 37
O mundo está preparado para ver suas páginas? ................................................................................... 37
Isto é tudo que eu preciso? ..................................................................................................................... 38
Como eu faço o upload das páginas? ...................................................................................................... 38
Lição 14a: Web standards e validação ........................................................................................................ 39
Legal! Posso anunciar? ............................................................................................................................ 39
Validação? Porquê deveria eu fazer isto? ............................................................................................... 40
Lição 15a: Dicas finais .................................................................................................................................. 40
Como eu aprendo mais? ......................................................................................................................... 41
Introdução ao CSS ....................................................................................................................................... 41
Quais softwares eu precisarei? ............................................................................................................... 42
Lição 1b: O que é CSS? ................................................................................................................................ 42
Qual é a diferença entre CSS e HTML? .................................................................................................... 42
Quais são os benefícios do uso de CSS? .................................................................................................. 43
Lição 2b: Como funciona CSS? .................................................................................................................... 43
A sintaxe básica das CSS .......................................................................................................................... 43
Aplicando CSS a um documento HTML ................................................................................................... 44
Método 1: In-line (o atributo style) ..................................................................................................... 44
Método 2: Interno (a tag style) ........................................................................................................... 44
Método 3: Externo (link para uma folha de estilos)............................................................................ 44
Faça você mesmo .................................................................................................................................... 46
default.htm .......................................................................................................................................... 46
style.css ............................................................................................................................................... 46
Lição 3b: Cores e fundos ............................................................................................................................. 46
Cor do primeiro plano: a propriedade 'color' ......................................................................................... 46
A propriedade 'background-color' .......................................................................................................... 47
Images de fundo [background-image] .................................................................................................... 47
Imagem de fundo repetida [background-repeat] ................................................................................... 48
Image de fundo fixa [background-attachment] ...................................................................................... 48
Posição da imagem de fundo [background-position] ............................................................................. 49
Compilando [background] ....................................................................................................................... 50
Lição 4b: Fontes........................................................................................................................................... 51
Família de fontes [font-family] ................................................................................................................ 51
Estilo da fonte [font-style] ...................................................................................................................... 52
Fonte variante [font-variant] .................................................................................................................. 53
Peso da fonte [font-weight] .................................................................................................................... 53
Tamanho da fonte [font-size] .................................................................................................................. 53
Compilando [font] ................................................................................................................................... 54
Lição 5b: Textos ........................................................................................................................................... 55
Indentação de texto [text-indent] ........................................................................................................... 55
Alinhamento de textos [text-align] ......................................................................................................... 55
Decoração de textos [text-decoration] ................................................................................................... 56
Espaço entre letras [letter-spacing] ........................................................................................................ 56
Transformação de textos [text-transform] ............................................................................................. 57
Lição 6b: Links ............................................................................................................................................. 57
O que é pseudo-classe? ........................................................................................................................... 58
Pseudo-classe: link .............................................................................................................................. 58
Pseudo-classe: visited ......................................................................................................................... 58
Pseudo-classe: active .......................................................................................................................... 59
Pseudo-classe: hover ........................................................................................................................... 59
Exemplo 1: Efeito quando o ponteiro está sobre o link .......................................................................... 59
Exemplo 1a: Espaçamento entre as letras .......................................................................................... 59
Exemplo 1b: UPPERCASE e lowercase ................................................................................................. 59
Exemplo 2: Removendo sublinhado dos links ......................................................................................... 60
Lição 7b: Identificando e agrupando elementos (classes e id) ................................................................... 62
Agrupando elementos com uso de classe ............................................................................................... 62
Identificando um elemento com uso de id ............................................................................................. 63
Lição 8b: Agrupando elementos (span e div) .............................................................................................. 64
Agrupando com <span> .......................................................................................................................... 64
Agrupando com <div> ............................................................................................................................. 65
Lição 9b: O box model ................................................................................................................................. 65
O box model em CSS ............................................................................................................................... 66
Definindo margin de um elemento ......................................................................................................... 67
Definindo padding de um elemento ....................................................................................................... 68
Lição 11b: Bordas ........................................................................................................................................ 69
A espessura das bordas [border-width] .................................................................................................. 69
As cores das bordas [border-color] ......................................................................................................... 69
Tipos de bordas [border-style] ................................................................................................................ 69
Exemplos de definição de bordas ........................................................................................................... 70
Compilando [border] ............................................................................................................................... 71
Lição 12b: Altura e largura .......................................................................................................................... 71
Atribuindo largura [width] ...................................................................................................................... 71
Atribuindo altura [height] ....................................................................................................................... 72
Lição 13b: Flutuando elementos (floats)..................................................................................................... 72
Como isto é feito? ................................................................................................................................... 73
Outro exemplo: colunas .......................................................................................................................... 73
A propriedade clear ................................................................................................................................. 74
Lição 14b: Posicionando elementos ............................................................................................................ 75
O Princípio de Posicionamento CSS ........................................................................................................ 75
Posicionamento absoluto ........................................................................................................................ 76
Posicionamento relativo ......................................................................................................................... 77
Lição 15b: Usando z-index (Layers) ............................................................................................................. 77
Lição 16b: Web-standards e validação ........................................................................................................ 79
Validador CSS .......................................................................................................................................... 79
Introdução ao PHP ...................................................................................................................................... 79
O que é necessário? ................................................................................................................................ 80
Lição 1: O que é PHP ................................................................................................................................... 80
O que é PHP? ........................................................................................................................................... 80
Como funciona o PHP? ............................................................................................................................ 80
Lição 2c: Servidores ..................................................................................................................................... 82
Opção 1: Servidor remoto de hospedagem ............................................................................................ 82
Opção 2: Instalação de PHP no seu computador .................................................................................... 82
Opção 3: XAMPP ..................................................................................................................................... 82
Lição 2c-2: Instalação de XAMPP ................................................................................................................ 82
Download ................................................................................................................................................ 82
Instalação ................................................................................................................................................ 83
Teste ........................................................................................................................................................ 85
Problemas mais comuns ......................................................................................................................... 85
O servidor Apache não inicia ............................................................................................................... 85
Lição 3c: Sua primeira página PHP .............................................................................................................. 86
Scripts PHP .............................................................................................................................................. 86
Examplo: Hello World! ............................................................................................................................ 86
Exemplo: Agora! ...................................................................................................................................... 88
Lição 4c: Trabalhando com datas e horas ................................................................................................... 91
Funções para data e hora ........................................................................................................................ 91
A hora é: 1358202025 ............................................................................................................................. 91
Mas afinal qual a utilidade prática? ........................................................................................................ 93
Loop "while" ............................................................................................................................................ 94
Loop "for" ................................................................................................................................................ 95
Loops dentro de loops ............................................................................................................................. 96
Lição 6c: Condicionais ................................................................................................................................. 96
If... ........................................................................................................................................................... 97
if ... else ... ............................................................................................................................................... 97
if ... elseIf ... else... ................................................................................................................................... 99
switch ... case .......................................................................................................................................... 99
Lição 7c: Comentando seus scripts ........................................................................................................... 101
Por que é importante comentar os scripts?.......................................................................................... 101
Como inserir comentários? ................................................................................................................... 101
Lição 8c: Arrays ......................................................................................................................................... 102
O que é array? ....................................................................................................................................... 102
Como usar um array? ............................................................................................................................ 102
Loop por um array ................................................................................................................................. 104
Como encontrar o tamanho de um array ............................................................................................. 104
Outro exemplo ...................................................................................................................................... 104
Lição 9c: Funções ...................................................................................................................................... 105
O que é função? .................................................................................................................................... 105
Exemplo 1: Função com vários parâmetros .......................................................................................... 106
Exemplo 2: Data e hora em inglês ......................................................................................................... 106
Lição 10c: Passando variáveis no URL ....................................................................................................... 107
Como isto funciona?.............................................................................................................................. 107
Como recuperar o valor de uma variável com PHP? ............................................................................. 107
Várias variáveis no mesmo URL ............................................................................................................ 108
Lição 11: Passando variáveis com uso de formulários .............................................................................. 109
<form>: Para o elemento form destinado a marcar um formulário estão previstos, entre outros,
dois atributos de suma importância, são eles: action e method. ......................................................... 109
Formulário em uma página HTML ......................................................................................................... 109
Dados do usuário e condicionais ........................................................................................................... 110
Exemplo: Formulário de contato .......................................................................................................... 113
Lição 12c: Sessão ....................................................................................................................................... 114
Session ................................................................................................................................................... 114
Exemplo de uso de sessions .................................................................................................................. 114
Sistema de login com uso de sessão ..................................................................................................... 115
Lição 13c: Cookies ..................................................................................................................................... 116
O que é cookie? ..................................................................................................................................... 117
Como a informação é armazenada no cookie? ..................................................................................... 117
Como se recupera o valor de um cookie? ............................................................................................. 117
Quem pode ler um cookie? ................................................................................................................... 118
Exemplo de cookie ................................................................................................................................ 118
Lição 14c: Sistema de arquivos ................................................................................................................. 119
Diretórios ............................................................................................................................................... 120
Lição 15c: Ler arquivos de texto ................................................................................................................ 121
Abrir um arquivo de texto ..................................................................................................................... 121
Exemplo 1: Ler uma linha de um arquivo de texto ............................................................................... 121
Exemplo 2: Ler todas as linhas de um arquivo de texto ....................................................................... 122
Exemplo 3: Diretório de links ................................................................................................................ 122
Lição 16c: Escrever em arquivos de texto ................................................................................................. 123
Abrir um arquivo de texto para escrever .............................................................................................. 124
Exemplo 1: Escrever uma linha no arquivo de texto ............................................................................. 124
Exemplo 2: Escrever um bloco de texto em um arquivo de texto ........................................................ 125
Conexão com o Banco de Dados ........................................................................................................... 127
Lição 18c: Criando Banco de Dados e suas Tabelas .................................................................................. 128
Criar Banco de Dados e Tabelas com PHP ............................................................................................. 128
Criar Banco de Dados e Tabelas com phpMyAdmin ............................................................................. 129
Lição 19c: Inserindo dados em um Banco de Dados ................................................................................. 130
Inserir dados com SQL ........................................................................................................................... 131
Exemplo: Inserir dados de uma pessoa na Tabela ................................................................................ 131
Inserir uma entrada de usuário no Banco de Dados ............................................................................. 132
Erros mais comuns ................................................................................................................................ 132
Tipo de dado incorreto ...................................................................................................................... 133
Comandos SQL com aspas e barras ................................................................................................... 133
Lição 20c: Extraindo dados de um Banco de Dados .................................................................................. 134
Consultas SQL ........................................................................................................................................ 134
Exemplo 1: Extrair dados de uma tabela .............................................................................................. 134
Exemplo 2: Ordem de saída alfabética, cronológica ou númerica. ....................................................... 135
Extrair dados segundo uma condição ................................................................................................... 136
Exemplo 3: Catálogo de endereços ....................................................................................................... 137
Código para o arquivo list.php .......................................................................................................... 137
Código para o arquivo person.php .................................................................................................... 137
Lição 21c: Apagando dados de um Banco de Dados ................................................................................. 138
Apagando dados com SQL ..................................................................................................................... 139
Exemplo: Apagar um dado .................................................................................................................... 139
Lição 22c: Atualizando dados em um Banco de Dados ............................................................................. 139
Atualizando dados com SQL .................................................................................................................. 140
Exemplo: Atualizando campos da tabela "people" ............................................................................... 140
Alguns termos vistos ................................................................................................................................. 142
$_COOKIES (Variáveis COOKIES) ........................................................................................................... 142
$_GET (Variável GET) ............................................................................................................................. 142
$_POST (Variável POST) ........................................................................................................................ 143
Addslashes ............................................................................................................................................. 143
Array ...................................................................................................................................................... 145
closedir .................................................................................................................................................. 146
Date ....................................................................................................................................................... 147
timestamp ............................................................................................................................................. 149
echo ....................................................................................................................................................... 151
Else ........................................................................................................................................................ 152
elseif/else If ........................................................................................................................................... 153
Feof ........................................................................................................................................................ 155
Fgets ...................................................................................................................................................... 156
Fileatime ................................................................................................................................................ 157
Filemtime .............................................................................................................................................. 157
Filesize ................................................................................................................................................... 158
Fopen ..................................................................................................................................................... 159
mode .................................................................................................................................................. 159
use_include_path .............................................................................................................................. 160
context ............................................................................................................................................... 160
For ......................................................................................................................................................... 161
Foreach .................................................................................................................................................. 163
Unpacking nested arrays with list() ................................................................................................... 165
fwrite ..................................................................................................................................................... 167
Fread ..................................................................................................................................................... 168
If ............................................................................................................................................................ 170
Mail ........................................................................................................................................................ 170
Exemplo #1 Enviando email. ............................................................................................................. 172
Exemplo #3 Enviando email com um parâmetro adicional da linha de comando. ........................... 172
Mysql_close ........................................................................................................................................... 174
Exemplo #1 Exemplo mysql_close() .................................................................................................. 174
Mysql_connect ...................................................................................................................................... 174
Exemplo #1 Exemplo mysql_connect() ............................................................................................. 175
Exemplo #2 Exemplo mysql_connect() usando a a sintaxe servidor:porta ....................................... 175
Exemplo #3 Exemplo mysql_connect() usando a sintaxe ":/caminho/para/socket" ........................ 176
Mysql_fetch_array ................................................................................................................................ 176
Exemplo #1 Consulta com nomes de campos duplicados usando alias............................................ 177
Exemplo #2 mysql_fetch_array() com MYSQL_NUM ....................................................................... 177
Exemplo #3 mysql_fetch_array() com MYSQL_ASSOC ..................................................................... 177
Exemplo #4 mysql_fetch_array() com MYSQL_BOTH ....................................................................... 177
Mysql_query .......................................................................................................................................... 178
Exemplo #1 Consulta Inválida ........................................................................................................... 178
Mysql_select_db ................................................................................................................................... 179
Example #1 mysql_select_db() example ........................................................................................... 180
Opendir ................................................................................................................................................. 180
Exemplo #1 exemplo de opendir() .................................................................................................... 181
Readdir .................................................................................................................................................. 181
Exemplo #1 Listando todos os arquivos de um diretório .................................................................. 182
Set Cookies ............................................................................................................................................ 182
Exemplo #1 Exemplo de setcookie() para enviar cookies ................................................................. 183
Exemplo #2 Exemplo de setcookie() para deletar cookies ............................................................... 184
Exemplo #3 setcookie() e arrays ....................................................................................................... 184
Problemas comuns: ........................................................................................................................... 185
Swithc .................................................................................................................................................... 185
Exemplo #1 switch structure ............................................................................................................. 186
Exemplo #2 switch structure allows usage of strings ....................................................................... 186
Time ....................................................................................................................................................... 188
Exemplo #1 time() example .............................................................................................................. 188
United Nations ...................................................................................................................................... 188
User-definition fuction .......................................................................................................................... 189
Exemplo #1 Pseudo-código de demonstração de uma função ......................................................... 189
Exemplo #2 Funções definidas condicionalmente ............................................................................ 189
Exemplo #3 Funções dentro de funções ........................................................................................... 190
Exemplo #4 Funções Recursivas ........................................................................................................ 190
While ..................................................................................................................................................... 191
Links de Referência ................................................................................................................................... 191
1. $_COOKIES (Variáveis COOKIES): http://php.net/manual/pt_BR/reserved.variables.cookies.php . 192
2. $_GET (Variável GET): .................................................................................................................... 192
3. $_POST (Variável POST): ............................................................................................................... 192
4. Addslashes: .................................................................................................................................... 192
5. Array: ............................................................................................................................................. 192
6. Closedir: http://php.net/manual/pt_BR/function.closedir.php ....................................................... 192
7. Date: .............................................................................................................................................. 192
8. Echo: http://php.net/manual/pt_BR/function.echo.php ................................................................. 192
9. Else: ............................................................................................................................................... 192
10. Elseif/Else If: .............................................................................................................................. 192
11. Explode: ..................................................................................................................................... 192
12. Feof: http://php.net/manual/pt_BR/function.feof.php ............................................................... 192
13. Fgets: http://php.net/manual/pt_BR/function.fgets.php ............................................................ 192
14. Fgets: http://php.net/manual/pt_BR/function.fgets.php ............................................................ 192
15. Fileatime: http://php.net/manual/pt_BR/function.fileatime.php ............................................... 192
16. Filemtime: http://php.net/manual/pt_BR/function.filemtime.php ............................................. 192
17. Filesize: http://php.net/manual/pt_BR/function.filesize.php ...................................................... 192
18. Fopen: http://php.net/manual/pt_BR/function.fopen.php ......................................................... 192
19. Fopen: http://php.net/manual/pt_BR/function.fopen.php ......................................................... 192
20. For: ............................................................................................................................................ 192
21. Foreach: ..................................................................................................................................... 192
22. Fread: http://php.net/manual/pt_BR/function.fread.php ........................................................... 192
23. Fwrite: http://php.net/manual/pt_BR/function.fwrite.php ......................................................... 192
24. If: ............................................................................................................................................... 192
25. Instalação e Configuração (PHP): http://php.net/manual/pt_BR/install.php .............................. 192
26. Instalando Servidor PHP no Mac OSX: http://php.net/manual/pt_BR/install.macosx.php ......... 192
27. Instalando Servidor PHP no Unix: http://php.net/manual/pt_BR/install.unix.php ...................... 192
28. Instalando Servidor PHP no Windows: http://php.net/manual/pt_BR/install.windows.php ...... 192
29. Mail:........................................................................................................................................... 192
30. Manipulação de Sessão: ............................................................................................................ 192
31. Manual do PHP: http://php.net/manual/pt_BR/index.php .......................................................... 192
32. MYSQL - Criar Auto Increment (Inglês): http://dev.mysql.com/doc/refman/5.0/en/example-auto-
increment.html ......................................................................................................................................... 192
33. MYSQL - Criar Blob e Tipos de Textos (Inglês):
http://dev.mysql.com/doc/refman/5.5/en/blob.html ............................................................................. 192
34. MYSQL - Criar Char e Varchar (Inglês): http://dev.mysql.com/doc/refman/5.5/en/char.html ... 192
35. MYSQL - Criar Data-base (Inglês): http://dev.mysql.com/doc/refman/5.5/en/create-
database.html ........................................................................................................................................... 192
36. MYSQL - Criar Primary Key e Unix (Inglês): http://dev.mysql.com/doc/refman/5.5/en/constraint-
primary-key.html ....................................................................................................................................... 192
37. MYSQL - Criar Tabela (Inglês): http://dev.mysql.com/doc/refman/5.5/en/create-table.html .... 192
38. MYSQL - Criar Time (Inglês): http://dev.mysql.com/doc/refman/5.5/en/time.html ................... 192
39. MYSQL - Criar Tipos Numéricos (Inglês): http://dev.mysql.com/doc/refman/5.5/en/numeric-
types.html ................................................................................................................................................. 192
40. MYSQL - Date, Datetime e Timestamp: http://dev.mysql.com/doc/refman/5.5/en/datetime.html
192
41. Mysql_close: http://php.net/manual/pt_BR/function.mysql-close.php ...................................... 192
42. Mysql_connect: http://php.net/manual/pt_BR/function.mysql-connect.php ............................ 192
43. Mysql_fetch_array: http://php.net/manual/pt_BR/function.mysql-fetch-array.php .................. 192
44. Mysql_query: http://php.net/manual/pt_BR/function.mysql-query.php ................................... 193
45. Mysql_select_db: http://php.net/manual/en/function.mysql-select-db.php ............................. 193
46. Opendir: http://php.net/manual/pt_BR/function.opendir.php ................................................... 193
47. Readir: http://php.net/manual/pt_BR/function.readdir.php....................................................... 193
48. Set Cookies: http://php.net/manual/pt_BR/function.setcookie.php ........................................... 193
49. Swithc: ....................................................................................................................................... 193
50. Time: .......................................................................................................................................... 193
51. United Nations: http://pt-br.html.net/tutorials/php/unitednations.txt ...................................... 193
52. User-definition fuction: ............................................................................................................. 193
53. While: ........................................................................................................................................ 193
54. XAMPP para Linux: .................................................................................................................... 193
55. XAMPP para Mac OSX: .............................................................................................................. 193
56. XAMPP para Windows: http://www.apachefriends.org/en/xampp-windows.html ................ 193
Agradecimentos e Esclarecimentos .......................................................................................................... 193
Introdução ao HTML
As pessoas imaginam que é muito difícil construir um website. Isto não é
verdade! Qualquer um pode aprender como construir um website. Se você continuar lendo, estará apto a construir um website em uma hora.
Outros pensam - erroneamente - que é necessário softwares avançados e caros para construir websites. É verdade que existem muitos softwares capazes de criar um website para você. Alguns mais fechados que outros. Mas, se você pretende trilhar o caminho certo, deverá criar você mesmo o website. Felizmente, isto é simples é você já tem a sua disposição todos os softwares que presisa.
O objetivo deste tutorial é fornecer os conhecimentos básicos que permitirão construir um website de forma correta. O tutorial parte do zero e não requer qualquer conhecimento prévio de programação.
O tutorial não ensina tudo. Assim é necessário que você se empenhe, pratique e consolide os ensinamento aqui contidos. Mas, não se aborreça - aprender como construir um website é divertido e bastante satisfatório quando você trilha o caminho certo de aprendizado.
Como tirar o melhor proveito do tutotial é uma decisão sua. Nós sugerimos que você estude somente duas ou três lições por dia e pratique bastante tudo o que você aprender em cada lição.
Lição 1: Vamos começar
Nesta primeira lição apresentaremos as ferramentas necessárias à construção de um website.
O que é necessário?
É muito provável que você já tenha as ferramentas que precisa.
Você tem um "navegador". Navegador é um programa que permite visualizar e navegar por páginas na Internet. Você está lendo está página em um navegador.
Não importa qual navegador você usa. O mais comum é o Microsoft Internet Explorer. Mais existem outros, tais como, Opera e Mozilla Firefox que podem ser usados.
Você já deve ter ouvido falar ou até mesmo pode já ter usado programas tais como, Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que podem - pelo menos anunciam que podem -
criar websites para você. Por ora, esqueça estes programas! Eles não têm qualquer utilidade para você na tarefa de codificar seu website.
Você precisará de um simples editor de textos. Se você tem instalado o Windows, poderá usar o Notepad, que normalmente pode ser encontrado no menu Programs em Accessories (Programas » Acessórios) - se você não tem o Windows, use um editor de texto similar. Por exemplo, Pico (Linux) ou TextEdit (Mac).
Notepad é um editor de texto básico e simples, mas excelente para codificação, porque não interfere no que você está digitando. Com ele o controle é todo e somente seu. O problema com programas que criam o website para você, é que eles vêm com uma série de funções pré-instaladas para você escolher. Tudo deverá ser projetado para se encaixar nestas funções padrão. Assim, muitas vezes não é possível criar exatamente aquilo que você planejou. Ou - mais frustrante ainda - os programas inserem modificações no código que você cria. Usando o Notepad ou qualquer editor de textos simples você é o único responsável pelos acertos ou pelos erros do seu código. Um navegador e o Notepad (ou editor similar) são tudo o que você precisa para acompanhar este tutorial e construir seu website.
Preciso estar online?
Não. Você não precisa estar conectado à Internet - tanto para ler este tutorial como para construir seus websites.
Se você quer desconetar-se enquanto lê este tutorial, você poderá imprimir ou simplesmente desconectar-se da Internet enquanto lê a tela. Você pode construir seu website no HD do seu computador e fazer o upload para a Internet quando terminar.
Lição 2a: O que é HTML?
HTML é a "língua mãe" do seu navegador. Resumindo uma longa história, HTML foi criado em 1990, por um cientista chamado Tim
Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lançou as fundações da Internet tal como a conhecemos atualmente.
HTML é uma linguagem que possibilita apresentar informações (documentação de pesquisas científicas) na Internet. Aquilo que você vê quando abre uma página na Internet é a interpretação que seu navegador faz do HTML. Para visualizar o código HTML de uma página use o menu "View" (Ver) no topo do seu navegador e escolha a opção "Source" (Código fonte).
Para quem não conhece, o código HTML pode parecer complicado, mas este tutorial irá tornar as coisas claras para você.
Para que devo usar o HTML?
Se você quer construir websites terá que conhecer HTML. Mesmo que você use um programa para criar seu website, tal como o Dreamweaver, um conhecimento básico de HTML será necessário para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notícia é que HTML é fácil de aprender e de usar. A partir das duas próximas lições você já terá aprendido como construir seu primeiro website.
HTML é usado para construir websites. É simples!
OK, mas o que significa H-T-M-L? HTML é a abreviatura de "HyperText Mark-up Language" - e isto é tudo o que você precisa saber
por enquanto. Contudo, vamos detalhar isto. Hyper é o oposto de linear. Nos tempos antigos - quando mouse era apenas um rato caçado por
gatos - os programas de computadores rodavam linearmente: quando o programa executava uma ação tinha que esperar a próxima linha de comando para executar a próxima ação e assim por diante de linha em linha. Com HTML as coisas são diferentes - você pode ir de onde estiver para onde quiser. Exemplificando: não é necessário que você tenha visitado o site MSN.com antes de visitar o site HTML.net.
Text é texto e não há mais nada a acresentar. Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma
forma que escreve em um editor seus cabeçalhos, marcadores, negrito, etc Language significa linguagem e é exatamente o que HTML é; uma linguagem. A
linguagem HTML usa muitas palavras do inglês. Neste tutorial você aprenderá XHTML (Extensible HyperText Mark-up Language) que nada mais
é do que uma maneira mais bem estruturada de escrever HTML. Agora que você já sabe o que é HTML (e XHTML) vamos começar aplicando eles para: construir
websites.
Lição 3a: O que são tags HTML?
Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um
sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de
fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado
segundo o comando contido na tag. Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a
abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />.
HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.
Você pode mostrar alguns exemplos?
OK, a tag <b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser mostrado em negrito. (O comando "b" é uma abreviação para "bold" - negrito.)
Exemplo 1:
<b>Este texto deve ser em negrito.</b>
Vai ser apresentado no navegador, como mostrado a seguir: Este texto deve ser em negrito.
As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um cabeçalho (h vem de "heading" - cabeçalho ), sendo <h1> o cabeçalho de primeiro nível e aquele apresentado com o maior tamanho de texto, <h2> o cabeçalho de segundo nível e aquele apresentado com tamanho de texto um pouco menor e <h6> o cabeçalho de sexto nível e aquele apresentado com o menor tamanho de texto.
Exemplo 2:
<h1>Este é um título</h1>
<h2>Este é um sub título</h2>
Vai ser apresentado no navegador, como mostrado a seguir:
Este é um título
Este é um subtítulo
As tags devem ser escritas com letras maiúsculas ou minúsculas?
Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas.<COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta é usar minúsculas. Então, crie o hábito de escrever suas tags com minúsculas.
Onde devo colocar todas estas tags? Você deve escrever suas tags em um documento HTML. Um website é constituido por um ou
mais documentos HTML. Quando você navega na Web, você está abrindo diferentes documentos HTML. Se você passar para a próxima lição, em dez minutos estará construindo seu primeiro website.
Lição 4a: Criando seu primeiro website
Na lição 1 vimos o que é
necessário para construir um website: um
navegador e o Notepad (ou um editor de
texto similar). Uma vez que você esta
lendo esta página, provavelmente está
com seu navegador aberto. Agora abra
outra janela do seu navegador de modo
que você tenha duas janelas na tela, uma
para ler este tutorial e outra para
visualizar o website que você vai
construir.
Abra também o Notepad ( Iniciar » Programas » Acessórios): Agora, estamos prontos para começar!
O que posso fazer? Vamos começar com algo simples.
Que tal uma página que diga: "Hurrah! Esta é a minha primeira página web." Continue e você verá como isto é simples de fazer.
HTML é simples e lógico. O navegador lê HTML de modo idêntico ao que você lê um texto qualquer, de cima para baixo e da esquerda para a
direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a aparecer.
A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag <html> (nenhuma novidade nisto). Então, antes de mais nada digite "<html>" na primeira linha do documento, no Notepad.
Como sabemos das lições anteriores, <html> é uma tag de abertura e deve ser fechada com a tag de fechamento quando você acabar de digitar seu documento HTML. Para termos certeza que não iremos esquecer de fechar a tag HTML, faça isso agora mesmo, digitando "</html>" localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas <html> e </html>.
A próxima coisa que o documento precisa é um "head" (cabeça), que fornece informações sobre o documento e um "body" (corpo), que abriga o conteúdo do documento. Como HTML não seria nada se não fosse lógico, a "cabeça" (<head> e </head>) fica em cima do "corpo" (<body> e </body>).
Seu documento agora está como mostrado abaixo:
<html>
<head>
</head>
<body>
</body>
</html>
Notar como estruturamos o código em linhas diferentes (usar a tecla Enter para pular para
próxima linha) e também a endentação (recuos) do código (usar a tecla Tab para endentar). A princípio não faz qualquer diferença a maneira como você estrutura (linhas e recuos na digitação) seu documento HTML. Mas um código bem estruturado é mais fácil de ler e entender, é altamente recomendado que você adote uma estrutura clara e nítida para seu HTML, usando linhas e endentação (recuos), como mostrado no exemplo acima.
Se o seu documento está como o mostrado acima, você construiu sua primeira página web - uma página particularmente chata e provavelmente nada parecido com o que você sonhou em fazer quando começou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que você fez será um template base para seus futuros documentos HTML.
Até aqui tudo bem, mas como colocar conteúdo no meu website? Como você já aprendeu, seu documento HTML é composto de duas partes: um head e um
body. Na seção head você escreve informações sobre a página e na seção body você coloca as informações que constituem a página.
Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção"head". A tag para acresentar um título é <title>:
<title>Minha primeira página web</title>
Notar que o título não aparece na página propriamente dita. Tudo que você quer que apareça
na página é conteúdo e deverá ser colocado entre as tags "body". Conforme combinamos, queremos uma página dizendo, "Hurrah! Esta é a minha primeira
página web." Este é o texto que queremos comunicar e ele deverá ser colocado na seção body. Então digite na seção body o seguinte:
<p>Hurrah! Esta é a minha primeira página web.</p>
A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o
texto é - um texto parágrafo. Seu documento HTML agora está como mostrado a seguir:
<html>
<head>
<title>Minha primeira página web</title>
</head>
<body>
<p>Hurrah! Esta é a minha primeira página web.</p>
</body>
</html>
Pronto! Você acaba de construir seu primeiro website!
Agora basta que você salve seu trabalho no HD e depois visualize no navegador:
No Notepad vá ao menu "Arquivo" no topo da janela e escolha a opção "Salvar como...".
Escolha "Todos os arquivos" no box "Salvar como tipo". Isto é muito importante - caso você não faça isto, o arquivo será salvo como texto e não como documento HTML.
Salve seu documento com o nome "page1.htm" (a extensão ".htm" indica que se trata de um documento HTML. A
extensão ".html" dá o mesmo resultado. Eu sempre uso ".htm", mas você pode escolher a que você preferir .htm ou .html). Você pode salvar o documento onde você quiser no seu HD - esteja certo de salvar em um lugar que depois você possa achar com facilidade.
Agora vá ao seu navegador: No menu existente no topo do navegador vá em "Arquivo" e escolha a opção "Abrir" (CTRL+O). Clique em "Procurar" no box que aparece.
Localize o seu documento HTML e clique em "Abrir".
Você deverá ver no seu navegador: "Hurrah! Esta é a minha primeira página web." Parabéns!
Se você quer que o mundo todo veja sua página, vá direto para a Lição 14 e aprenda como fazer upload da sua página para a Internet. Se não, tenha paciência e continue lendo. A brincadeira apenas começou.
Lição 5a: O que você já aprendeu?
Comece sempre com o template básico que construímos na lição anterior:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Coloque sempre o título do seu documento na seção head: <title>Título da sua página</title>. Ver na figura abaixo como o título aparece no topo superior esquerdo do navegador:
O título é muito importante porque é usado pelos mecanismos de busca (tais como o Google) para indexar seu website como mostrado a seguir para o site CSS para Web Design:
Na seção body você escreve o conteúdo da sua página. Você conhece algumas das mais importantes tags:
<p>É usado para parágraos.</p>
<b>Torna o texto negrito.</b>
<h1>Cabeçalho</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>
Lembre-se, o único caminho para aprender HTML é por ensaio e erro. Mas, não se preocupe, você não destruirá seu computador e nem a Internet. Então, faça seus experimentos e testes - esta é a melhor maneira de ganhar experiência.
O que significa isto? Ninguém se tornará um bom criador de websites aprendendo os exemplos contidos neste
tutorial. O que você aprenderá neste tutorial é simplesmente o básico para criação - para se tornar um bom desenvolvedor você deverá descobrir caminhos por si mesmo em maneiras criativas.
Então mãos à obra. Comece suas experiências com tudo que você aprendeu até agora.
O que fazer agora?
Tente criar algumas páginas. Por exemplo, construa uma página com um título, um cabeçalho, algum texto, um subtítulo e mais algum texto. Não há nada contra fazer uma consulta no tutorial para construir as páginas, ou seja, a "cola" é permitida. Porém, mais a frente, tente criar sem consultar - "cola" não permitida.
Lição 6a: Mais tags HTML
E aí? Você construiu algumas páginas como sugerimos na lição anterior? Não? Sim? Bem, a seguir um exemplo:
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>Um cabeçalho</h1>
<p>texto, texto texto, texto</p>
<h2>Subtítulo</h2>
<p>texto, texto texto, texto</p>
</body>
</html>
E agora? Agora vamos aprender mais sete tags. Você já sabe que pode obter negrito com a tag <b>, agora saiba que pode obter itálico - letras
inclinadas - com a tag <i>. Já percebeu não é?, "i" vem de "italic".
Exemplo 1: <i>Este texto deve ser itálico.</i>
Será renderizado no navegador assim:
Este texto deve ser itálico.
De modo similar você pode fazer seu texto com letra menores usando a tag <small>:
Exemplo 2: <small>Este texto deve ser com letras em tamanho small.</small>
Será renderizado no navegador assim:
Este texto deve ser com letras em tamanho small.
Posso usar várias tags simultaneamente? Sim você pode usar quantas tags queira desde que as aninhe convenientemente. Veja como
fazer isto no exemplo abaixo: Exemplo 3:
Para escrever um texto em negrito e itálico faça como mostrado a seguir:
<b><i>Texto em negrito e itálico.</i></b>
E não assim:
<b><i>Texto em negrito e itálico.</b></i>
Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a última tag de fechamento </b>, e o alinhamento está certo. Isto evita confusão para quem escreve o código e para o navegador que lê o código.
Mais tags! Como foi dito na Lição 4 existem tags que são abertas e fechadas em única tag. Estas tags são
comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a tag <br /> que serve para criar uma quebra de linha:
Exemplo 4: Um texto<br /> e mais texto em nova linha
Será renderizado no navegador assim: Um texto
e mais texto em nova linha
Notar que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final: <br />. A princípio podemos escrever também <br></br> (sem conteúdo), mas para que complicar?
Outra tag de comando é <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ): Exemplo 5: <hr />
Será renderizado no navegador assim:
Exemplo 6:
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
Será renderizado no navegador assim: Um item de lista Outro item de lista
Exemplo 7:
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>
Será renderizado no navegador assim: 1. Primeiro item da lista 2. Segundo item da lista
Uau! Isto é tudo? Sim, por enquanto isto é tudo. Aconselhamos, novamente, a fazer seus próprios experimentos,
construindo algumas páginas usando as sete tags ensinadas nesta lição: <i>Itálico</i>
<small>Texto tamanho small</small>
<br /> Pula linha
<hr /> Linha Horizontal
<blockquote>Indentação</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>
<li>Item de lista</li>
Lição 7a: Atributos
Como você deve estar lembrado, uma tag é um comando para o navegador (por exemplo, <br /> é um comando para mudar de linha). Em algumas tags você pode ser mais específico, acresentando na tag, informações adicionais de comando. Isto é feito através dos atributos.
Exemplo 1:
<h2 style="background-color:#ff0000;">Eu adoro HTML</h2>
Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são
declaradas as informações do atributo. As informações quando mais de uma, devem ser separadas por ponto e vírgula, tudo conforme mostrado no exemplo acima. Adiante voltaremos a este assunto.
Como é isto?
Existem vários atributos. O primeiro que você aprenderá é o atributo style. Com o atributo style você pode adicionar estilização e layout ao seu website. Por exemplo, uma cor de fundo:
Exemplo 2:
<html>
<head>
</head>
<body style="background-color:#ff0000;">
</body>
</html>
O código acima renderiza uma página com cor de fundo vermelha - vá em frente! experimente
você mesmo, construa uma página vermelha. A seguir explicaremos como funcionam as cores. Notar que algumas tags e atributos usam nomes do idioma inglês dos E.U.A. É muito importante
que você use os nomes exatamente como mostrados neste tutorial - se você mudar uma letra que seja, o navegador não irá entender seu código. É importante também que você não se esqueça de fechar as aspas nas informações do atributo.
Como a página ficou vermelha? No exemplo acima nós usamos o código "#ff0000" para fazer a página na cor vermelha. Eate é o
código para a cor vermelha no sistema chamado de números hexadecimal (HEX). Cada cor é representada por um número hexadecimal. A seguir alguns exemplos:
Branco: #ffffff Preto: #000000 Vermelho: #ff0000 Azul: #0000ff Verde: #00ff00 Amarelo: #ffff00
Um código hexadecimal para cores é formado por um sinal # seguido de seis dígitos e/ou letras.
Existe mais de 1000 códigos HEX e não é fácil decorar o código para todas as cores. Para facilitar as coisas nós desenvolvemos uma carta com as 216 cores mais usadas na web: Carta das 216 cores seguras para a Web.
Para algumas cores, você pode usar o nome das cores em inglês (white, black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo).
Exemplo 3: <body style="background-color: red;">
Chega de cores. Voltemos aos atributos.
Quais tags podem usar atributos? Atributos podem ser aplicados à maioria das tags. Você normalmente usará atributos com mais freqüência em algumas tags, tais como a
tag body e raramente usará em outras, como por exemplo, a tag br que é um comando para pular de linha e não precisa de nenhuma informação adicional.
Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são empregados em tags específicas enquanto outros servem para várias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vários tipos.
Isto pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que tudo é fácil e lógico, bem como vai verificar as inúmeras possibilidades que os atributos oferecem.
Este tutorial apresentou a você, os atributos.
Então, quais são as partes que constituem uma tag? A constituição básica de uma tag é denominada elemento (por exemplo p em <p>). Assim, uma
tag é constituida de um elemento (por exemplo<p>), ou por um elemento e um ou mais atributos (por exemplo <p style="background-color:#ff0000;">). Simples!
Lição 8a: Links
Nesta lição você aprenderá como construir links entre páginas. Para construir um link você usa o que tem usado até agora para codificar HTML: uma tag. Uma
simples e pequenina tag com um elemento e um atributo é suficiente para você construir links para onde quiser. A seguir um exemplo de link para o site HTML.net:
Exemplo 1: <a href="http://www.html.net/">Aqui um link para HTML.net</a>
Será renderizado no navegador assim: Aqui um link para HTML.net
O elemento a refere-se a "anchor" - âncora . O atribuito href é abreviação para "hypertext reference" - referência a hypertexto - e especifica o destino do link - que normalmente é um endereço na Internet ou um arquivo.
No exemplo acima o atributo href tem o valor "http://www.html.net", que é o endereço completo do site HTML.net e é chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluído nas URLs. A frase "Aqui um link para HTML.net" é o texto mostrado no navegador como link. Lembre-se de fechar a tag com um </a>.
Como são os links entre minhas próprias páginas?
Se você quer construir links entre páginas de um mesmo website você não precisa escrever o endereço completo de cada página (URL). Por exemplo, se você tem duas páginas (vamos chamá-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretório você constrói um link de uma para a outra usando somente o nome do arquivo no link. Nestas condições, um link da página1.htm para a pagina2.htm é como mostrado abaixo:
Exemplo 2: <a href="page2.htm">Aqui um link para a pagina 2</a>
Se a pagina2 for colocada em um subdiretório (chamado de "subdiretorio"), o link é como mostrado abaixo:
Exemplo 3: <a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>
Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 é como mostrado a seguir:
Exemplo 4: <a href="../pagina1.htm">Aqui um link para a pagina 1</a>
"../" aponta para o diretório a um nível acima do arquivo onde foi feito o link. Seguindo “o
mesmo princípio você pode apontar para dois (ou mais) níveis acima, escrevendo “../../". Como alternativa você pode usar sempre o endereço completo do arquivo (URL).
Como são os links dentro de uma mesma página? Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de
conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo id e o símbolo "#".
Use o atributo id para marcar o elemento que é o destino do link. Por exemplo: <h1 id="heading1">Cabeçalho 1</h1>
Você agora pode criar um link que leve àquele elemento usando o símbolo "#" no atributo do
link. O símbolo "#" informa ao navegador para ficar na mesmo página que está. O símbolo "#" deve ser seguido pelo valor atribuído a id para onde o link vai. Por exemplo: <a href="#heading1">Link para o cabeçalho 1</a>
Tudo fica claro com um exemplo:
Exemplo 5: <html>
<head>
</head>
<body>
<p><a href="#heading1">Link para cabeçalho 1</a></p>
<p><a href="#heading2">Link para cabeçalho 2</a></p>
<h1 id="heading1">Cabeçalho 1</h1>
<p>Texto texto texto texto</p>
<h1 id="heading2">Cabeçalho 2</h1>
<p>Texto texto texto texto</p>
</body>
</html>
Será renderizado no navegador assim (clique nos dois links): Link para cabeçalho 1 Link para cabeçalho 2
Cabeçalho 1
Texto texto texto texto
Cabeçalho 2
Texto texto texto texto
(Nota: O nome de um atributo ID deve começar com uma letra)
Posso criar link para mais alguma coisa?
Você pode criar link para um endereço de e-mail. Isto é feito de modo semelhante aos links para documentos.
Exemplo 6: <a href="mailto:[email protected]">Enviar e-mail para nobody em HTML.net</a>
Será renderizado no navegador assim:
Enviar e-mail para nobody em HTML.net
A única diferença é que no lugar do endereço do documento você escreve mailto: seguido pelo endereço de e-mail. Quando o link é clicado o programa de e-mail padrão do usuário é aberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de e-mail instalado na sua máquina. Faça uma experiência com este tipo de link clicando no exemplo acima.
Existem outros atributos que eu deva conhecer?
Par criar links você sempre usa o atributo href. Adicionalmente você pode usar um title (título) para seu link:
Exemplo 7: <a href="http://www.html.net/" title="Visite HTML.net e aprenda
HTML">HTML.net</a>
Será renderizado no navegador assim: HTML.net O atributo title é usado para fornecer uma breve descrição do link. Se você - sem clicar no link -
colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o site HTML.net e aprenda HTML".
Lição 9a: Imagens
O que você acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua página?
Talvez, mas é muito fácil de fazer. Tudo o que você precisa é da nossa já conhecida tag:
Exemplo 1:
<img src="tim.jpg" alt="Tim Berners-Lee" />
Será renderizado no navegador assim:
O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).
Notar que a tag imagem é do tipo comando isolado, isto é, uma só tag de abertuta e fechamento. Semelhante a tag <br /> que não precisa de um texto inserido nela. "tim.jpg" é o nome do arquivo da imagem que você quer inserir na página. ".jpg" é a extensão do tipo de imagem. Tal como a extensão ".htm" para arquivos de
documentos HTML, ".jpg" informa ao navegador que o arquivo é uma imagem. São três os tipos de imagens que você pode inserir na sua página:
GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Em geral imagens GIF são melhores para gráficos e desenhos e imagens JPEG são melhores para
fotografia. Existem duas razões para isto: primeiro, imagens GIF são constituidas por 256 cores, e imagens JPEG por milhões de cores, segundo, imagens GIF são melhores otimizadas para imagens simples ao passo que imagens JPEG são melhores otimizadas para imagens complexas. Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é carregada no navegador. Como você deve saber por experiência própria, páginas desnecessariamente "pesadas" para carregar são frustantes para o usuário.
Tradicionalmente os formatos GIF e JPEG têm sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). O formato PNG é em vários aspectos melhor que os formatos JPEG e GIF: milhões de cores e efetiva compressão.
Onde consigo minhas imagens? Para criar suas próprias imagens você precisa de um programa de edição de
imagens. Um programa de edição de imagens é a ferramenta essencial para criação de websites com grande impacto visual.
Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema operacional. Assim, você deve considerar a aquisição do Paint Shop Pro, do PhotoShop ou do Macromedia Fireworks, que são os três melhores editores de imagens atualmente existentes no mercado.
Contudo, como já dissemos, não há necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, você poderá fazer o download de um exelente editor de imagens chamado Irfan View que é freeware, isto é, não custa nada.
Ou você pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para não violar direitos autorais de terceiros. A seguir mostro como fazer o download de uma imagem existente na Internet:
1. Clique com o botão direito do mouse na imagem da Internet. 2. No menu que aparece escolha a opção "Salvar imagem como...". 3. Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".
Faça isto com a imagem abaixo e salve no seu computador no mesmo local onde está localizado seus documentos HTML. (Notar que deverá ser salvo o arquivo com formato PNG: logo.png):
Agora você pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que você criou neste tutorial.
Isto é tudo o que eu preciso saber sobre imagens? Existem mais algumas coisinhas que você precisa saber.
Primeiro você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites:
Exemplo 2: <img src="images/logo.png">
Exemplo 3:
<img src="http://www.html.net/logo.png">
Segundo, imagens podem ser links:
Exemplo 4: <a href="http://www.html.net">
<img src="logo.png"></a>
Será renderizado no navegador assim: (clique na imagem):
Existem outros atributos que eu deva conhecer? Você sempre terá que usar o atributo src, que diz ao navegador onde a imagem está localizada.
Além dele existem alguns outros atributos que podem ser bastante úteis quando você insere imagens em uma página.
O atributo alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. Isto é particularmente importante para usuários com restrições visuais ou quando a imagem é carregada muito lentamente. Em conseqüência, sempre use o atributo alt:
Exemplo 5:
<img src="logo.gif" alt="logotipo do HTML.net">
Alguns navegadores mostram uma caixa pop-up com o conteúdo do atributo alt quando o
usuário passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt é a de fornecer uma alternativa textual para imagem. O atributo alt não deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passarão uma mensagem que não descreve a imagem para os usuários com restrições visuais.
O atributo title pode ser usado para fornecer uma curta descrição da imagem:
Exemplo 6: <img src="logo.gif" title="Aprenda HTML no site HTML.net">
Será renderizado no navegador assim:
Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecerá uma caixa pop-up com o texto "Aprenda HTML no site HTML.net" .
Dois outros atributos importantes são width e height:
Exemplo 7: <img src="logo.png" width="141" height="32">
Será renderizado no navegador assim:
Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel. Pixel é a unidade de medida usada para medir a resolução da tela. (As resoluções de tela mais comuns são de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é uma inidade de medida relativa que depende da resolução da tela. Usuários com grande resolução de tela terão 25 pixels em 1 centímetro de tela enquanto aqueles com baixa resolução de tela terão os mesmos 25 pixels em 1,5 cm de tela.
Se não forem definidos os valores para width eheight, a imagem será inserida com seu tamanho real. Com width e height você pode alterar o tamanho da imagem:
Exemplo 8:
<img src="logo.gif" width="32" height="32">
Será renderizado no navegador assim:
Contudo, o tempo de descarga da imagem será sempre aquele requerido como se ela tivesse suas dimensões reais, mesmo que você diminua seu tamanho com uso destes atributos. Assim, você não deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se você precisa diminuir a imagem diminua suas dimensões reais em um editor de imagem para tornar suas páginas mais leves e mais rápidas.
Dito isto, acrescentamos que é sempre uma boa idéia definir os atributos width e height para imagens, pois assim fazendo o navegador reservará o espaço para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedência (antes de descarregar as imagens) como será o layout da página.
Por enquanto isto é tudo sobre o Tim Berners-Lee e sobre imagens.
Lição 10a: Tabelas Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser
apresentada em linhas e colunas, de forma lógica. Criar tabelas em HTML pode parecer complicado, mas se você ficar frio e acompanhar passo a
passo a explicação, verá que tudo é evidente - tal como acontece com tudo no HTML.
Exemplo 1:
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
Será renderizado no navegador assim:
Célula 1 Célula 2
Célula 3 Célula 4
Qual a diferença entre <tr> e <td>? Como você deve ter visto no exemplo acima, este foi o código HTML mais complicado que
escrevemos até agora. Vamos analisar isto por partes e explicar as diferentes tags: 3 tags básicas são usadas para inserir tabelas: <table> começa e termina uma tabela. Evidente. <tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela.
Também evidente. <td> significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da
tabela. Tudo simples e evidente. Eis o acontece no Exemplo 1: a tabela começa com <table>, segue-se uma <tr>, que indica o início
de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e <td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. A nova linha também contém duas células. A tabela termina com </table>.
Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células:
Célula 1 Célula 2
Célula 3 Célula 4
Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna. No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número
ilimitado de linhas e colunas.
Exemplo 2: <table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
<td>Célula 6</td>
<td>Célula 7</td>
<td>Célula 8</td>
</tr>
<tr>
<td>Célula 9</td>
<td>Célula 10</td>
<td>Célula 11</td>
<td>Célula 12</td>
</tr>
</table>
Será renderizado no navegador assim:
Célula 1 Célula 2 Célula 3 Célula 4
Célula 5 Célula 6 Célula 7 Célula 8
Célula 9 Célula 10 Célula 11 Célula 12
Existem atributos? Claro! Existem atributos. Por exemplo, o atributo border que é usado para definir a espessura de
uma borda em volta da tabela:
Exemplo 3:
<table border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
Será renderizado no navegador assim:
Célula 1 Célula 2
Célula 3 Célula 4
A espessura da borda é especificada em pixels (Ver lição 9) Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela
- ou alternativamente em percentagem da tela:
Exemplo 4: <table border="1" width="30%">
Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela.
Tente você mesmo.
Mais atributos? Existe uma grande quantidade de atributos para tabelas. A seguir mais dois: align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula.
Por exemplo, left, center ou right (à esquerda, no centro ou à direita). valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou
bottom (em cima, no meio ou em baixo).
Exemplo 5: <td align="right" valign="top">Célula 1</td>
O que posso inserir em tabelas? Teoricamente você pode inserir qualquer coisa em uma tabela: texto, links e imagens... MAS,
tabelas destinam-se a apresentar dados tabulares (isto é, dados que por sua natureza devam ser apresentados em linhas e colunas) então se abstenha de colocar coisas dentro de tabela simplesmente porque você deseja que elas estejam próximas umas às outras.
Nos primórdios da Internet - isto é, há poucos anos atrás - tabelas eram usadas como ferramenta para construir layout. Se você quer controlar a apresentação de textos e imagens, existe uma maneira bem mais racional (dica: CSS). Adiante veremos isto.
Agora, coloque em prática tudo que você aprendeu e crie várias tabelas de diferentes tamanhos, usando diferentes atributos e conteúdos. Isto irá ocupar você por horas.
Lição 11a: Mais tabelas
O título "Mais tabelas" pode sugerir uma lição enfadonha. Mas, veja as coisas pelo lado positivo, depois que você se tornar um mestre em tabelas nada mais do HTML poderá desafiá-lo.
O que mais existe? Os dois atributos colspan e rowspan são usados para criar tabelas singulares. Colspan é a abreviação para "column span". colspan é usada na tag <td> para indicar quantas
colunas estarão contidas em uma célula.
Exemplo 1: <table border="1">
<tr>
<td colspan="3">Célula 1</td>
</tr>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
Será renderizado no navegador assim:
Célula 1
Célula 2 Célula 3 Célula 4
Definindo colspan em "3", a célula na primeira linha conterá três colunas. Se você
definir colspan em "2", a célula conterá duas colunas e assim será necessário inserir mais uma célula na primeira linha para que tenhamos na primeira linha as colunas em acordo com as da segunda linha.
Exemplo 2:
<table border="1">
<tr>
<td colspan="2">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
<td>Célula 5</td>
</tr>
</table>
Será renderizado no navegador assim:
Célula 1 Célula 2
Célula 3 Célula 4 Célula 5
Que tal rowspan?
Como você já deve ter concluido, rowspan especifica quantas linhas estarão contidas em uma célula:
Exemplo 3:
<table border="1">
<tr>
<td rowspan="3">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
</tr>
<tr>
<td>Célula 4</td>
</tr>
</table>
Será renderizado no navegador assim:
Célula 1
Célula 2
Célula 3
Célula 4
No exemplo acima rowspan é definido em "3" na Célula 1. Isto especifica que uma célula deve
conter 3 linhas. Célula 1 e Célula 2 estão na mesma linha, enquanto Célula 3 e Célula 4 formam duas linhas independentes.
Confuso? Bem, isto na verdade não é descomplicado e você pode se perder. Assim, é sempre uma boa ideia, desenhar a tabela em uma folha de papel antes de começar a codificação HTML.
Não está confuso? Então vá em frente e crie algumas tabela com uso de colspan e rowspan.
Lição 12a: Layout (CSS)
Não seria ótimo se você pudesse dar à sua página o layout que ela merece? Para o layout da sua página use Cascading Style Sheets (CSS) - Folhas de Estilo em
Cascata. Nesta lição você terá uma breve introdução àsCSS. Depois você poderá aprender CSS desde o início no Introdução ao CSS. Assim, considere esta lição apenas um aperitivo.
CSS é a melhor metade do HTML. Codificando, não há melhor parceria: HTML é responsável pelo trabalho pesado (a estrutura), enquanto CSS dá o toque de elegância (layout).
Como mostrado na Lição 7, CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo:
Exemplo 1:
<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a
20px</p>
<p style="font-family:courier;">Este parágrafo em fonte Courier</p>
<p style="font-size:20px; font-family:courier">Este parágrafo em fonte
Courier e tamanho 20px</p>
Será renderizado no navegador assim:
Este parágrafo em tamanho de fonte igual a 20px
Este parágrafo em fonte Courier
Este parágrafo em fonte Courier e tamanho 20px
No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade font-family) e o tamanho da fonte (com a propriedade font-size). Notar que no último parágrafo do exemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e vírgula.
Está parecendo que há uma grande quantidade de trabalho a executar Uma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de
um arquivo central. Em lugar de se usar o atributo style em cada tag, você pode dizer ao navegador como deve ser o layout de todos os textos em uma página:
Exemplo 2: <html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<body>
<h1>Minha primeira página CSS</h1>
<h2>Bem vindo à minha primeira página CSS</h2>
<p>Aqui você verá como funciona CSS</p>
</body>
</html>
Ver exemplo
No exemplo acima inserimos as CSS na seção head do documento, assim ela se aplica à página inteira . Para fazer isto use a tag <style type="text/css"> que informa ao navegador que você está digitando CSS.
No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8.
Uma outra opção é a de digitar as CSS em um documento separado. Com as CSS em um documento separado você pode gerenciar o layout de muitas páginas ao mesmo tempo. Muito inteligente, pois você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas ou milhares de páginas. Nós não nos aprofundaremos em CSS agora, mas você pode aprender tudo, no futuro, em nosso tutorial CSS.
O que mais posso fazer com CSS?
CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, você pode adicionar cores e fundos. A seguir alguns exemplos para você praticar:
<p style="color:green;">Texto verde</p>
<h1 style="background-color: blue;">Cabeçalho com fundo azul</h1>
<body style="background-image: url('http://www.html.net/logo.png');">
Tente inserir estes códigos em algumas das suas páginas - experimente as duas formas de inserir, tanto
como mostrado acima como colocando as CSS na seção head do documento.
CSS não é nada mais do que cores e tipos de fontes? Além de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configuração e a
apresentação da página (margens, flutuações, alinhamentos, larguras, alturas, etc.) Controlando os diferentes elementos com CSS você será capaz de criar layouts elegantes e precisos.
Exemplo 3: <p style="padding:25px;border:1px solid red;">Eu amo CSS</p>
Será renderizado no navegador assim:
Eu amo CSS
Com a propriedade float um elemento poderá "flutuar" à esquerda ou à direita. O exemplo seguinte ilustra este princípio:
Exemplo 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
Será renderizado no navegador assim:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat...
No exemplo mostrado, um elemento (a imagem) flutua à esquerda e o outro elemento (o texto)
preenche o espaço deixado à direita. Com a propriedade position, você pode posicionar um elemento em qualquer lugar da página,
com precisão:
Exemplo 5:
<img src="bill.jpg" alt="Bill Gates"
style="position:absolute;bottom:50px;right:10px;" />
Ver exemplo
No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda direita do navegador. Você pode colocar em qualquer lugar na página. Tente você mesmo. Fácil e legal, eh?
Legal sim. Mas, fácil? Você não aprende CSS em 10 minutos. E como foi dito acima, nesta lição você teve apenas uma
breve introdução às CSS. No futuro aprenda mais no nosso Tutorial CSS. Por enquanto concentre-se no HTML, e passe para a próxima lição onde você aprenderá como
publicar seu website na Internet para que o mundo todo o veja!
Lição 13a: Uploading páginas
Até agora somente você conseguiu visualizar suas páginas. Chegou a hora de mostrá-las para o mundo todo.
O mundo está preparado para ver suas páginas? O mundo está preparado sim - você, em breve, estará também. Para publicar seu trabalho na
Internet, você precisa somente de espaço em um servidor e um programa FTP gratuito. Se você costuma acessar a Internet já deve ter visto que existem vários serviços gratutitos de
hospedagem de sites. Seu endereço no servidor será alguma coisa parecida com http://home.servidor.com/~nomedousuario. Você tem que ativar o serviço. Informe-se como fazer isto na documentação fornecida pelo serviço de hospedagem.
Outra opção é obter um espaço gratuito de um servidor na Internet. Isto é igual a registrar uma conta de e-mail (como por exemplo, obter um endereço de e-mail do hotmail) você pode registrar-se gratuitamente para obter um espaço em um servidor na Internet. Existem várias companhias que oferecem este serviço gratuito - entre elas a 000webhost.com (clique em "Order" e escolha membro gratuito - ou faça uma busca no Google para encontrar um serviço gratuito com registro em português) - isto é um processo bem rápido.
Para acessar o servidor você precisa conhecer o "Nome do seu servidor" (Por exemplo, ftp.htmlnet.site50.net) e ter um nome de usuário e senha.
Isto é tudo que eu preciso? Para acessar o servidor e publicar as páginas você precisa de um programa FTP. Você não deve
ter um programa destes ainda, mas existem vários deles na Internet para download e são gratuitos. Existem muitos programas FTP. Um dos melhores é o FileZilla, e é gratuito . Você pode obter o
FileZilla em filezilla.sourceforge.net.
Como eu faço o upload das páginas? Abaixo fornecemos um exemplo de como fazer isto usando o servidor 000webhost.com e o
programa FileZilla. Este procedimento é mais ou menos igual para qualquer programa FTP. Conecte-se à Internet e abra o programa FTP. Insira "Host Name" ("ftp.htmlnet.site50.net" no
"Address"), nome do usuário (em "User") e senha (em "Password") clique "Connect". Você agora tem acesso ao servidor. Em um lado da janela do programa você verá os diretórios e arquivos do seu computador ("Local Site"), e no outro o do servidor ("Remote Site"):
Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira para o servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora o mundo todo poderá ver seu site! (Por exemplo, no endereço http://htmlnet.site50.netpagina1.htm).
Dê a uma das páginas o nome de "index.htm" (ou "index.html") e ela será automaticamente a página de entrada no site, ou seja, basta digitar http://htmlnet.site50.net (sem qualquer nome de arquivo) e abrirá http://htmlnet.site50.net/index.htm.
Para mais adiante será uma boa idéia comprar um domínio (espaço no servidor) só para você (www.seu-nome.com) e assim ter um nome do site bem mais curto e fácil de guardar que aqueles fornecidos por um serviço gratuito da Internet. Você pode encontrar na Internet várias firmas que vendem domínio. Faça uma busca do Google.
Lição 14a: Web standards e validação
Nesta lição você aprenderá mais alguns conceitos teóricos do HTML. HTML pode ser escrito de várias maneiras. O navegador está apto a ler HTML escrito de várias
maneiras. Podemos dizer que HTML tem muitos dialetos. Esta é a razão porque alguns websites são apresentados de formas diversas em diferentes navegadores.
Desde o aparecimento da Internet tem sido feitas várias tentativas para se normatizar o HTML notadamente através do World Wide Web Consortium (W3C) fundado por Tim Berners-Lee (yep! o grande sujeito que inventou o HTML). Mas, este tem sido um árduo e longo caminho.
No passado - quando você tinha que comprar um navegador - Netscape dominava o mercado de navegadores. Àquela época as normas para o HTML estavam nas suas versões 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape não teria - e não teve - que se preocupar muito com normas. Pelo contrário, a Netscape inventava seus próprios elementos de marcação que não funcionavam em outros navegadores.
Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento, resolveu competir com a Netscape e lançou seu navegador próprio. A primeira versão do navegador da Microsoft, o Internet Explorer, não era melhor do que o Netscape no suporte às normas do HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente (isto sempre agrada a todos) e o Internet Explorer em pouco tempo tornou-se o navegador mais usado e mais popular.
A partir das versões 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior suporte às normas HTML do W3C. A Netscape não se movimentou para atualizar seu navegador e continuou a colocar no mercado a velha e desatualizada versão 4.
O que vem a seguir é história. Nos dias atuais as normas HTML estão na sua versão 4.01 e no XHTML. Hoje em dia é o Internet Explorer que detém quase 90% do mercado. O Internet Explorer ainda tem seus elementos próprios, mas oferece suporte para as normas HTML do W3C. Os navegadores Mozilla, Opera e Netscape também suportam as normas.
Então, quando você codifica HTML de acordo com as normas do W3C, você está construindo um website para ser visualizado em todos os navegadores - não só agora, mas também no futuro. E felizmente, tudo o que você aprendeu neste tutorial está de acordo com a mais nova versão do HTML, que é o XHTML.
Legal! Posso anunciar?
Devido a existência de diferentes tipos de HTML, você precisa informar ao navegador qual é o "dialeto" do HTML e no seu caso você aprendeu XHTML. Para informar ao navegador, você usa o Document Type Definition. O Document Type Definition deve ser escrito sempre no topo do documento:
Exemplo 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Título</title>
</head>
<body>
<p>texto texto</p>
</body>
</html>
Além do Document Type Definition (escrito na primeira linha no exemplo acima), que informa
ao navegador que você está codificando XHTML, você precisa ainda adicionar informação extra na tag html, usando os atributos xmlns e lang.
XMLNS é abreviação de "XML-Name-Space" e deve ter sempre o valor: http://www.w3.org/1999/xhtml.
Isto é tudo o que você precisa saber. Se você tem o hábito ou gosta de se aprofundar e conhecer coisas complicadas poderá ler mais sobre namespaces no site do W3C.
No atributo lang você específica em que língua (aqui trata-se de linguagem humana) o documento é escrito. As abreviaturas para as línguas existentes no mundo todo, estão nas ISO 639 standard . No exemplo acima a língua definida no atributo é o português do Brasil ("pt-br").
Uma DTD informará ao navegador como deve ser lido e renderizado o HTML. Use o exemplo mostrado, como um template para todos os seus futuros documentos HTML.
O DTD é importaante ainda, para a validação da página.
Validação? Porquê deveria eu fazer isto? Insira o DTD nas suas páginas e poderá verificar erros no seu HTML, usando o validador
gratuito do W3C. Para testar o validador faça o seguinte: crie uma página e publique na Internet. A seguir entre em validator.w3.org e lá digite o endereço (a URL) da sua página, depois clique no botão validar. Se seu HTML estiver correto, vai aparecer uma mensagem de congratulações. Se não, será apresentada uma lista de erros, informando o quê está errado e onde. Cometa alguns erros propositais no seu código para verificar o que acontece.
O validador não é útil somente no encontro de erros. Alguns navegadores tentam interpretar os erros cometidos pelos desenvolvedores e consertar o código mostrando a página corretamente. Em navegadores assim você nunca encontrará erros no próprio navegador. Já outros navegadores não aceitam o erro e apresentam a página arruinada ou mesmo nem apresentam. O validador então ajuda você a encontrar erros que você não tenha nem idéia de que existiam
Sempre valide suas páginas, para ter certeza que elas serão mostradas corretamente em todos os navegadores.
Lição 15a: Dicas finais
Congratulações, você chegou na última lição. Você aprendeu um bocado de coisas e já está em condições de construir seu website. No
entanto o que você aprendeu é o básico e ainda há muita coisa a ser aperfeiçoada. Podemos dizer que você construiu uma base sólida para continuar e se aprofundar no assunto.
Nesta última lição, daremos umas dicas finais:
Para começar, aconselhamos a escrever seus documentos HTML de forma ordenada e estruturada. Assim fazendo você estará não só mostrando aos outros que possui uma base sólida de conhecimento mas também estará facilitando a leitura, interpretação e manutenção do código.
Siga as normas e valide seu código. Mas, não faça disto uma fonte de stress. Escreva um XHTML claro, use o DTD e valide suas páginas novalidator.w3c.org.
Coloque conteúdos nas suas páginas. Lembre-se que HTML é apenas a ferramenta que possibilita apresentar informação na Internet, assim é necessário que haja a informação a ser apresentada ou seja, o conteúdo. Páginas lindas e bem desenhadas são ótimas, mas as pessoas buscam informação na Internet.
Evite encher suas páginas com imagens pesadas e outros "balangandans" que você encontra na Internet. Isto faz com suas páginas demorem a carregar e é frustante para o usuário. Páginas que demoram mais de 20 segundos para carregar podem perder até 50% dos seus visitantes.
Lembre-se de cadastrar seu site nos sites de busca, de modo a que outras pessoas, além da sua família, possam encontrá-las e visitá-las. Na página de entrada dos sites para cadastro em mecanismos de busca você encontrará um link para adicionar seu site (O mais importante é oGoogle mas, existem outros tais como, DMOZ, Yahoo, AltaVista, AlltheWeb e Lycos).
Neste tutorial você aprendeu a usar o Notepad, que é um simples e fácil editor de textos, contudo talvez você agora possa pensar em usar um editor mais sofisticado com mais possibilidades e ferramentas. Você encontra uma listagem e sumário de diferentes editores em Download.com.
Como eu aprendo mais? Antes de qualquer coisa é muito importante que você continue a trabalhar e experimentar com tudo
que você aprendeu neste tutorial. Quando encontrar algum site que contenha uma coisa que você ache interessante, estude o código do site. No seu navegador vá ao menu "View" - "Ver" e escolha "Source" - "Código Fonte" para ver o código do site.
Procure na Internet por artigos e tutoriais HTML. Existem muitos
sites com ótimos conteúdos sobre HTML.
Leia e faça perguntas nos Fóruns. Lá você encontra experts com os quais aprenderá muito
E para terminar - assim que você se achar pronto - continue e aprenda CSS no nosso Tutorial CSS. Só nos resta desejar a você que passe horas agradáveis ao lado do seu novo amigo, o HTML. Vejo você na Internet :-)
Introdução ao CSS
Folhas de estilos em cascata — Cascading Style Sheets (CSS) — é uma ferramenta fantástica para construção do layout dos seus websites. Permite que você projete websites com uma técnica completamente diferente da convencional e possibilita uma considerável redução de tempo de trabalho. Conhecer CSS é uma necessidade para qualquer um envolvido com o projeto web.
Este tutorial iniciará você nas CSS em algumas poucas horas. É fácil de entender e ensinará a você todas as técnicas sofisticadas.
Aprender CSS é divertido. À medida em que você for progredindo no tututorial não esqueça de dedicar algum tempo para fazer seus experimentos com o que for aprendendo em cada lição.
Para usar CSS é necessário um conhecimento básico de HTML. Se você não está familiarizado com HTML, consulte nosso tutorialHTML antes de começar com CSS.
Quais softwares eu precisarei? Por favor, evite usar softwares tais como FrontPage, DreamWeaver ou Word para acompanhar este
tutorial. Softwares avançados não facilitarão seu aprendizado de CSS. Ao contrário, eles colocarão limites para você e atrasarão seu aprendizado.
Tudo o que você precisa é de um simples e gratuito editor de texto. Por exemplo, Microsoft Windows vem com um programa chamado Notepad. Normalmente este
programa está no diretório Accessories no menu Start => Programs. Alternativamente você pode usar um editor de texto similar, tal como, Pico para Linux ou Simple Text para Macintosh.
Um editor de texto simples é o ideal para o aprendizado de HTML e de CSS porque eles não afetam e nem modificam o código que você digita. Assim os acertos e erros de codificação devem-se exclusivamente a você — não ao software que você utiliza.
Você pode usar qualquer navegador parta acompanhar este tutorial. Nós aconselhamos que você mantenha seu navegador sempre atualizado e utilize a última versão disponível.
Um navegador e um editor de textos simples são tudo o que você precisa. Vamos começar!
Lição 1b: O que é CSS? Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você
saberá o que é e para que serve CSS. CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata CSS é uma linguagem para estilos que define o layout de documentos HTML. Por
exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e você verá!
HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais.
Depois de estudar algumas poucas lições deste tutorial, você estará em condições de projetar uma folha de estilos, usando CSS para dar um grande visual ao seu website.
Qual é a diferença entre CSS e HTML? HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. OK, isto soa um tanto técnico e confuso. Mas, por favor, continue lendo. Tudo fará sentido em breve. Em tempos passados quando a Madonna era virgem e um sujeito chamado Tim Berners Lee inventou
a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto é um cabeçalho” ou "isto é um parágrafo" usando tags HTML tais como <h1> e <p>.
À medida que a Web ganhava popularidade, os designers começavam a sentir a necessidade de encontrar meios de construir layout para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tagsHTML tais como, por exemplo a tag <font> que se diferenciava das tags originais do HTML pelo fato de destinar-se à layout — e não à estrutura.
Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura como, por exemplo, a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites.
CSS foi inventada para solucionar esta situação, colocando à disposição dos web-designers meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo a separação dos estilos de apresentação da marcação dos conteúdos torna a manutenção dos sites bem mais fácil.
Quais são os benefícios do uso de CSS? CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem:
Controle do layout de vários documentos a partir de uma simples folha de estilos; Maior precisão no controle do layout; Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento. Na próxima lição veremos com maiores detalhes como funciona CSS e como começar seu estudo.
Lição 2b: Como funciona CSS? Nesta lição você aprenderá a desenvolver sua primeira folha de estilos. Você verá o básico sobre o
modelo CSS e que código é necessário para usar CSS em um documento HTML. Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML.
Assim, se você está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que usaremos. Vamos dar uma olhada em um exemplo concreto.
A sintaxe básica das CSS Suponha que desejamos uma cor de fundo vermelha para a página web: Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado será obtido assim:
body {background-color: #FF0000;}
Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima
serve também para demonstrar o fundamento do modelo CSS:
Mas, onde colocar o código CSS? É isto que veremos a seguir.
Aplicando CSS a um documento HTML
Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão exemplificados a seguir. Recomendamos que você foque no terceiro método, ou seja o método externo.
Método 1: In-line (o atributo style)
Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir:
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Método 2: Interno (a tag style)
Outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado a seguir:
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Método 3: Externo (link para uma folha de estilos) O método recomendado é o de lincar para uma folha de estilos externa. Usaremos este método
nos exemplos deste tutorial. Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com
qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido. Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e está localizada no diretório style. Tal situação está mostrada a seguir:
O "truque" é criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link é criado em uma simples linha de código HTMLcomo mostrado a seguir:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Notar que o caminho para a folha de estilos é indicado no atributo href. Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as
tags <head> e </head>. Conforme mostrado abaixo:
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css"
/>
</head>
<body>
...
Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do
layout do documento HTML. A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML.
Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-se a cor em uma folha de estilos central.
Vamos praticar o que aprendemos.
Faça você mesmo
Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos — um arquivo HTML e um arquivo CSS — com os seguintes conteúdos:
default.htm <html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>
style.css body {
background-color: #FF0000;
}
Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão
apropriada (".css" e ".htm") Abra default.htm no seu navegador e veja uma página com o fundo vermelho. Parabéns! Você
construiu sua primeira folha de estilos!
Lição 3b: Cores e fundos
Nesta lição você aprenderá como aplicar cores de primeiro plano e cores de fundo no seu website. Abordaremos ainda os métodos avançados de controle e posicionamento de imagens de fundo. Serão explicadas as seguintes propriedades CSS:
color background-color background-image background-repeat background-attachment background-position background
Cor do primeiro plano: a propriedade 'color' A propriedade color define a cor do primeiro plano de um elemento. Considere, por exemplo, que desejamos que todos os cabeçalhos de primeiro nível no
documento sejam na cor vermelha. O elemento HTML que marca tais cabeçalhos é o elemento <h1>. O código a seguir define todos os <h1> na cor vermelha.
h1 {
color: #ff0000;
}
Ver exemplo
As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima (#ff0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb (rgb(255,0,0)).
A propriedade 'background-color'
A propriedade background-color define a cor do fundo de um elemento.
O elemento <body> contém todo o conteúdo de um documento HTML. Assim, para mudar a cor de fundo da página, devemos aplicar a propriedade background-color ao elemento <body>.
Você pode aplicar cores de fundo para outros elementos, inclusive para cabeçalhos e textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos <body> e <h1>. body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Ver exemplo
Notar que foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vírgula.
Images de fundo [background-image]
A propriedade CSS background-image é usada para definir uma imagem de fundo.
Usaremos a imagem de uma borboleta para exemplificar a aplicação de imagens de fundo. Você pode fazer o download da imagem mostrada abaixo e usá-la nos seus experimentos (clique com o botão direito do mouse sobre a imagem e escolha "salvar imagem como") ou você poderá usar uma outra imagem qualquer ao seu gosto.
Para inserir uma imagem de fundo na página basta
aplicar a propriedade background-image ao
elemento <body> e especificar o caminho para onde está gravada a imagem.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Ver exemplo
NB: Notar como foi especificado o caminho para a imagem usando url("butterfly.gif"). Isto significa que a imagem está localizada no mesmo diretório da folha de estilos. Pode ser escolhido um outro diretório para gravar as imagens e o caminho seria url("../images/butterfly.gif") ou até mesmo hospedá-la na Internet: url("http://www.html.net/butterfly.gif").
Imagem de fundo repetida [background-repeat]
No exemplo anterior você observou que a imagem da borboleta repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetição da imagem de fundo.
A tabela a seguir mostra os quatro diferentes valores para background-repeat.
Value Description Example Background-repeat: repeat-x A imagem se repete na horizontal Ver exemplo
background-repeat: repeat-y A imagem se repete na vertical Ver exemplo
background-repeat: repeat A imagem se repete na tanto na horizontal como na vertical
Ver exemplo
background-repeat: no-
repeat A imagem não se repete Ver exemplo
Por exemplo, o código mostrado a seguir é para que a imagem não se repita na tela:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Ver exemplo
Image de fundo fixa [background-attachment] A propriedade background-attachment define se a imagem será fixa ou se irá rolar juntamente
com o elemento que a contém. Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao contrário da
imagem que não é fixa e rola acompanhando o conteúdo da tela. A tabela a seguir mostra os quatro diferentes valores para background-attachment. Veja os
exemplos para constatar a diferença entre imagem fixa e imegem que rola.
Value Description Example Background-attachment: scroll A imagem rola com a página Ver exemplo
Background-attachment: fixed A imagem é fixa Ver exemplo
Por exemplo, o código abaixo fixa a imagem na tela.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Ver exemplo
Posição da imagem de fundo [background-position] Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela. A
propriedade background-position permite alterar este posicionamento padrão e colocar a imagem em qualquer lugar na tela.
Existem várias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador.
As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:
Na tabela a seguir são mostrados alguns exemplos.
Value Description Example
background-position:
2cm 2cm A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página
Ver exemplo
background-position:
50% 25% A imagem é centrada na horizontal e a um quarto (25%) para baixo na página
Ver exemplo
background-position:
top right A imagem é posicionada no canto superior direito da página
Ver exemplo
No exemplo de código a seguir a imagem é posicionada no canto inferior direito da página:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Ver exemplo
Compilando [background] A propriedade background é uma abreviação para todas as propriedades listadas anteriormente. Com background você declara várias propriedades de modo abreviado, economizando digitação e
alguns bites, além de tornar a folha de estilo mais fácil de se ler e entender. Por exemplo, observe as cinco linhas a seguir:
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Usando background você consegue o mesmo resultado, abreviando como mostrado abaixo:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
A declaração abreviada deve seguir a seguinte ordem:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Se uma das propriedades não for declarada ela assume automaticamente o seu valor default. Por exemplo, a propriedade background-attachment ebackground-position não foram declaradas no código mostrado a seguir:
background: #FFCC66 url("butterfly.gif") no-repeat;
As duas propriedades não declaradas assumirão o valor default que como você já sabe são: a imagem rola na tela e será posicionada no canto superior esquerdo (que são os valores default para as propriedades não declaradas).
Lição 4b: Fontes
Nesta lição estudaremos as fontes e como aplicá-las usando CSS. Veremos como criar situações para que determinada fonte seja visualizada pelo usuário mesmo não estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS:
font-family font-style font-variant font-weight font-size font
Família de fontes [font-family] A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para
apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.
Existem dois tipos de nomes para definir fontes: nomes para famílias de fontes e nomes para famílias genéricas. Os dois são explicados a seguir:
nome para famílias de fontes
Exemplos para este tipo (normalmente conhecidas como "font") são "Arial", "Times New
Roman" ou "Tahoma".
nome para famílias genéricas
Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um exemplo
são as fontes sans-serif que englobam a coleção de fontes que "não têm pé".
A diferença está mostrada na figura a seguir:
Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas
alternativas para ela. É recomendável encerrar a listagem das fontes com uma fonte genérica. Assim fazendo, em último caso a página será renderizada com fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis na máquina do usuário.
A seguir mostramos um exemplo de listagem de fontes:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Ver exemplo
Cabeçalhos <h1> serão renderizados com fonte "Arial". Se o usuário não tiver a font Arial instalada, será usada a fonte "Verdana". Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família sans-serif.
Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.
Estilo da fonte [font-style]
A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Ver exemplo
Fonte variante [font-variant]
A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos. Confundiu? Dê uma olhada nos exemplos a seguir:
Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Ver exemplo
Peso da fonte [font-weight]
A propriedade font-weight define quão negrito ou "pesada" deve ser renderizada a fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Ver exemplo
Tamanho da fonte [font-size] On tamanho da fonte é definido pela propriedade font-size. Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o
tamanho da fonte. Neste tutorial nós usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir: h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Ver exemplo
Existe uma diferença fundamental entre as quatro unidades adotadas no exemplo acima. As unidades 'px' e 'pt' são absolutas, enquanto '%' e 'em' permitem ao usuário ajustar o tamanho das fontes ao seu gosto e necessidade. Muitos usuários têm restrições, como por exemplo, pessoas idosas, pessoas com visão limitada ou as que usam um monitor de baixa qualidade. Para fazer seu site acessível a todos, você deverá usar unidades como '%' ou 'em'.
Abaixo uma figura mostrando como ajustar o tamanho das fontes nos navegadores Mozilla Firefox e Internet Explorer. Tente você mesmo este ajuste — uma excelente funcionalidade do navegador, não é mesmo?
Compilando [font] Usar font é uma abreviação que permite definir várias propriedades em uma só. Veja a seguir quatro linhas de código usadas para definir propriedades de fonte para um
parágrafo <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usar a abreviação simplifica o código como mostrado abaixo:
p {
font: italic bold 30px arial, sans-serif;
}
A ordem dos valores para font é a mostrada a seguir :
font-style | font-variant | font-weight | font-size | font-family
Lição 5b: Textos
Formatar e estilizar textos são um item chave para qualquer web designer. Nesta lição você será apresentado às interessantes oportunidades que as CSSproporcionam para adicionar layout aos textos. Serão discutidadas as propriedades listadas abaixo:
text-indent text-align text-decoration letter-spacing text-transform
Indentação de texto [text-indent]
A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os textos marcados com <p>:
p {
text-indent: 30px;
}
Ver exemplo
Alinhamento de textos [text-align]
A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centred). E temos ainda o
valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.
No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. E, os textos normais em parágrafos são justificados:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Ver exemplo
Decoração de textos [text-decoration] A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Você
pode por rexemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Ver exemplo
Espaço entre letras [letter-spacing]
O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo <p> e de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser usado.
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Ver exemplo
Transformação de textos [text-transform] A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você pode
escolher capitalize, uppercase ou lowercaseindependentemente de como o texto foi escrito no código HTML.
Como exemplo, tomamos a palavra "cabeçalho" que pode ser apresentada ao usuário como "CABEÇALHO" ou "Cabeçalho". São quatro os valores possíveis para text-transform:
Capitalize - Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se
para "John Doe".
Uppercase - Converte todas as letras para maiúscula. Por exemplo: "john doe" transforma-se
para"JOHN DOE".
Lowercase - Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se
para"john doe".
None - Sem trasformações - o texto é apresentado como foi escrito no código HTML.
Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o
elemento <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras maiúsculas.
Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os textos no código foram escritos com todas as letras em minúsculas.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Ver exemplo
Lição 6b: Links
Você pode aplicar aos links tudo que aprendeu nas lições anteriores (i.e. mudar cores, fontes, sublinhados, etc). A novidade aqui é que você pode definir as propriedades de maneira diferenciada de acordo com o estado do link ou seja visitado, não visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos você usará as chamadas pseudo-classes.
O que é pseudo-classe? Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao
definir uma propriedade de estilo para uma tag HTML. Vamos ver um exemplo. Como você já sabe, links são marcados no HTML com tags <a>.
Podemos então usar a como um seletor CSS: a {
color: blue;
}
Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado. Você usará
pseudo-classes para estilizar links visitados e não visitados.
a:link {
color: blue;
}
a:visited {
color: red;
}
Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados
respectivamente. Links ativos são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele.
A seguir explicaremos com mais detalhes e exemplificação, as quatro pseudo-classes.
Pseudo-classe: link A pseudo-classe :link é usada para links não visitados.
No exemplo a seguir links não vistados serão na cor verde. a:link {
color: green;
}
Ver exemplo
Pseudo-classe: visited
A pseudo-clases :visited é usada para links visitados. No exemplo a seguir links visitados serão na cor amarela:
a:visited {
color: yellow;
}
Ver exemplo
Pseudo-classe: active A pseudo-classe :active é usada para links ativos.
No exemplo a seguir links ativos terão seu fundo na cor vermelha:
a:active {
background-color: red;
}
Ver exemplo
Pseudo-classe: hover A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link.
Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre ele, o código CSS para estes efeitos é o mostrado a seguir: a:hover {
color: orange;
font-style: italic;
}
Ver exemplo
Exemplo 1: Efeito quando o ponteiro está sobre o link É comum a criação de efeitos diferentes quando o ponteiro está sobre o link. Veremos a seguir
alguns exemplos extras de estilização da pseudo-classe:hover.
Exemplo 1a: Espaçamento entre as letras Como você deve estar lembrado da Lição 5, o espaçamento entre as letras de um texto pode ser
controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Ver exemplo
Exemplo 1b: UPPERCASE e lowercase
Na Lição 5 vimos a propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Isto pode ser usado para estilizar links:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Ver exemplo
Os exemplos mostrados dão uma idéia das inúmeras possibilidades de combinação de diferentes propriedades. Você pode criar seus próprios efeitos — faça uma tentativa!
Exemplo 2: Removendo sublinhado dos links Uma pergunta comum: Como remover o sublinhado dos links? Você deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto
poderá reduzir significativamente a usabilidade do website. As pessoas estão acostumadas com links na cor azul e sublinhados e sabem que ali há um texto a ser clicado. Até minha mãe sabe disto! Se você muda a cor e retira o sublinhado dos links, poderá confundir seus visitantes e em consequência não retirar o máximo dos conteúdos do seu website.
Feita esta ressalva, é muito fácil retirar o sublinhado dos links. Conforme explicado na Lição 5, a propriedade text-decoration pode ser usada para definir se o texto é ou não sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration.
a {
text-decoration:none;
}
Alternativamente, você pode definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Ver exemplo
Lição 7b: Identificando e agrupando elementos (classes e id)
Em alguns casos você deseja aplicar estilos a um elemento ou grupo de elementos em particular. Nesta lição veremos como usar class e id para estilizar elementos.
Como definir uma cor para um determinado cabeçalho, diferente da cor usada para os demais cabeçalhos do website? Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente? Estas são algumas das questões que iremos responder nesta lição.
Agrupando elementos com uso de classe Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produção de
vinho branco e de vinho tinto. O código HTML conforme mostrado abaixo:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Ver exemplo
Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na página permaneçam na cor azul.
Para conseguir isto, dividimos os links em duas categorias. Isto é feito atribuindo uma classe para cada link, usando o atributo class.
Vamos especificar esta classe no exemplo a seguir:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Agora podemos definir propriedades específicas para links pertencentes as classes whitewine e redwine, respectivamente.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Ver exemplo
Como mostrado no exemplo acima, pode-se definir propriedades para estilização dos elementos pertencentes a uma determinada classe usando um.nomedaclasse na folha de estilos do documento.
Identificando um elemento com uso de id Além de agrupar elementos podemos querer atribuir identificação a um único elemento. Isto é
feito usando o atributo id. O que há de especial no atributo id é que não poderá existir dois ou mais elementos com o
mesmo id, ou seja, em um documento apenas um e somente um elemento poderá ter uma determinada id. Cada id é único. Para casos em que haja necessidade de mais de um elemento com a mesma identificação usamos o atributo class. A seguir um exemplo de possível uso de id: <h1>Capítulo 1</h1>
...
<h2>Capítulo 1.1</h2>
...
<h2>Capítulo 1.2</h2>
...
<h1>Capítulo 2</h1>
...
<h2>Capítulo 2.1</h2>
...
<h3>Capítulo 2.1.2</h3>
...
O exemplo acima simula os cabeçalhos de um documento estruturado em capítulos e
parágrafos. É comum atribuir uma id para cada capítulo como mostrado a seguir: <h1 id="c1">Capítulo 1</h1>
...
<h2 id="c1-1">Capítulo 1.1</h2>
...
<h2 id="c1-2">Capítulo 1.2</h2>
...
<h1 id="c2">Capítulo 2</h1>
...
<h2 id="c2-1">CCapítulo 2.1</h2>
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...
Vamos supor que o cabeçalho do capítulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme mostrado na folha de estilo a seguir:
#c1-2 {
color: red;
}
Ver exemplo
Como mostrado no exemplo acima, podemos definir propriedades para um elemento específico usando um seletor #id na folha de estilos para o documento.
Lição 8b: Agrupando elementos (span e div)
Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id.
Nesta lição veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importância para as CSS.
Agrupando com <span> Agrupando com<div>
Agrupando com <span>
O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento. Um exemplo deste uso é mostrado na citação abaixo de autoria de Benjamin Franklin: <p>Dormir cedo e acordar cedo faz o homem
saudável, rico e sábio.</p>
Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados por Mr. Franklin pelo fato de não se passar o dia dormindo. Para isto marcamos os benefícios com <span>. A cada span atribuímos uma class, e estilizamos na folha de estilos:
<p>Dormir cedo e acordar cedo faz o homem
<span class="benefit">saudável</span>,
<span class="benefit">rico</span>
e <span class="benefit">sábio</span>.</p>
A folha de estilos: span.benefit {
color:red;
}
Ver exemplo
É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve estar
lembrado, deverá usar uma única id para cada um os três elementos <span>, conforme foi explicado na lição anterior.
Agrupando com <div> Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo
anterior, <div> é usado para agrupar um ou mais elementos nível de bloco. Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira.
Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiações políticas: <div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
E na folha de estilos, podemos agrupar a estilização da mesma maneira como fizemos no
exemplo acima: #democrats {
background:blue;
}
#republicans {
background:red;
}
Ver exemplo
Nos exemplos mostrados acima usamos somente <div> e <span> para simples estilizações, tais como cores de textos e de fundos. Contudos estes dois elementos possibilitam estilizações bem mais avançadas como veremos adiante nas lições deste tutorial.
Lição 9b: O box model
O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento. Abaixo apresentamos um diagrama representando a estrutura de construção do box model:
O box model em CSS
A ilustração acima é teórica. Vamos explicá-la na prática tomando como base um cabeçalho e um texto. O HTML para nosso exemplo (o texto foi retirado da Declaração Universal dos Direitos Humanos e está no original em inglês) é o mostrado abaixo:
<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:
O exemplo contém dois elementos: <h1> e <p>. O box model para os dois elementos é mostrado a seguir:
Embora possa parecer um pouco complicado, a ilustração mostra como cada um dos elementos é contido em um box (uma caixa). Boxes que podem ser ajustados e controlados via CSS.
Lição 10: Margin e padding
Na lição anterior vimos o box model. Nesta lição veremos como controlar a apresentação de um elemento definindo as propriedades margin e padding.
Definindo margin de um elemento Definindo padding de um elemento
Definindo margin de um
elemento
Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos (ou às bordas do documento). Ver o diagrama mostrado na lição 9.
Vamos começar com um exemplo mostrando como definir margins para o documento, ou seja, para o elemento <body>. A ilustração a seguir mostra como serão as margens da página.
As CSS são mostradas abaixo:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Ou, adotando uma sintaxe mais elegante:
body {
margin: 100px 40px 10px 70px;
}
Ver exemplo
As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos então, por exemplo, definir margens para todos os parágrafos <p>:
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
Ver exemplo
Definindo padding de um elemento Padding pode também ser entendido como "enchimento". Isto faz sentido, porque padding não
é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento. Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida:
h1 {
background: yellow;
}
h2 {
background: orange;
}
Ver exemplo
Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles: h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Ver exemplo
Lição 11b: Bordas
Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre duas coisas. CSSproporciona infinitas possibilidades de uso de bordas na página.
border-width border-color border-style Exemplos de definição de bordas border
A espessura das bordas [border-width]
A espessura das bordas é definida pela propriedade border-width, que pode assumir os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas espessuras de bordas:
As cores das bordas [border-color]
A propriedade border-color define as cores para as bordas. Os valores são expressos em código ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow" .
Tipos de bordas [border-style] Existem vários tipos de bordas disponíveis para escolha. A seguir apresentamos 8 tipos
diferentes de bordas e como elas são renderizadas Internet Explorer 5.5. Todos os exemplos são mostrados na cor "gold" e com espessura "thick", mas você pode usar qualquer cor e espessura ao seu gosto. Os valores none ou hidden podem ser usados quando não se deseja a existência de bordas.
Exemplos de definição de bordas As três propriedades explicadas acima podem ser definidas juntas para cada elemento e
resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>, <ul> e <p>. O resultado pode não ser uma obra prima, mas, ilustra bem algumas das inúmeras possibilidades de estilização de bordas: h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
Ver exemplo
É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir: h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Ver exemplo
Compilando [border] Assim como para muitas outras propriedades, você pode usar uma declaração abreviada para
bordas. Vamos a um exemplo: p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
Pode ser abreviada assim: p {
border: 1px solid blue;
}
Lição 12b: Altura e largura
Até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos com que trabalhamos. Nesta lição veremos como é fácil atribuir uma altura e uma largura para um elemento.
width height
Atribuindo largura [width]
A propriedade width destina-se a definir a largura de um elemento. O exemplo a seguir constrói um box dentro do qual podemos digitar um texto:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Ver exemplo
Atribuindo altura [height] No exemplo acima a altura será determinada pelo conteúdo inserido no box. Você pode definir a
altura de um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a 500px: div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Ver exemplo
Lição 13b: Flutuando elementos (floats)
Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container) (ver Lição 9 para descrição do Box Model). A figura a seguir ilustra o princípio de float:
Se desejarmos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta flutuarmos a imagem:
Como isto é feito? O HTML para o exemplo acima é mostrado a seguir:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Para conseguir o efeito mostrado, basta definir uma largura para o box que o contém e declarar
para ele float: left; #picture {
float:left;
width: 100px;
}
Ver exemplo
Outro exemplo: colunas Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as
colunas no código HTML usando <div>como mostrado a seguir: <div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left; para cada uma das colunas: #column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
Ver exemplo
Float pode ser declarado left, right ou none.
A propriedade clear A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos
elementos floats no documento. Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates.
A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for, por exemplo, definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código. <div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Para evitar que o texto se posicione no espaço livre deixado pela foto do Bill Gates basta adicionar a seguinte regra CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Ver exemplo
Lição 14b: Posicionando elementos
Com posicionamento CSS podemos colocar um elemento em uma posição exata na página. Combinado com floats (ver lição anterior), o posicionamento abre muitas possibilidades para criação de layouts precisos e avançados.
Nesta lição veremos os seguintes itens:
O Princípio de Posicionamento CSS Posicionamento Absoluto Posicionamento Relativo
O Princípio de Posicionamento CSS
Considere a janela do navegador como um sistema de coordenadas:
O princípio de posicionamento CSS estabelece que você possa posicionar um elemento em
qualquer lugar na tela usando um sistema de coordenadas. Vamos supor que queremos posicionar um cabeçalho. Usando o box model (ver Lição 9) o
cabeçalho pode ser estilizado para ser apresentado como mostrado abaixo:
Se quisermos o cabeçalho posicionado a 100px do topo do documento e a 200px à esquerda, podemos usar o seguinte CSS: h1 {
position:absolute;
top: 100px;
left: 200px;
}
O resultado é mostrado a seguir:
Como você pode ver, posicionar com CSS é uma técnica precisa para colocar elementos. É muito
mais fácil do que usar tabelas, imagens transparentes e tudo mais.
Posicionamento absoluto Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa
que não deixa nenhum espaço vazio após ser posicionado. Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left,right, top, e bottom para definir as coordenadas e posicionar o elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página: #box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
Ver exemplo
Posicionamento relativo Para posicionar um elemento de forma relativa a propriedade position deve ser definida
para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado.
O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado. Como exemplo de posicionamento relativo vai tentar posicionar três imagens relativamente as suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais no documento: #dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
Ver exemplo
Lição 15b: Usando z-index (Layers)
CSS usa o espaço tridimensional - altura, largura e profundidade. Nas lições anteriores vimos as duas primeiras dimensões. Nesta lição aprenderemos como colocar elementos em layers (camadas). Resumindo, camadas significam como os elementos se sobrepõem uns aos outros. Para fazer isto definimos para cada elemento um número índice (z-index). O comportamento é que elementos com número índice maiores se sobrepõem àqueles com menor número.
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma delas tivesse um z-index:
No caso mostrado, os números índice estão em uma sequência direta (de 1-5), contudo o
mesmo resultado poderia ser obtido com uso de 5 diferentes números, não em sequência. O que conta é a cronologia dos números (a ordem). O código para a ilustração das cartas é mostrado a seguir: #ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
Ver exemplo
O método é simples, mas as possibilidades são muitas. Você pode colocar imagens sobre textos,
texto sobre texto, etc. Layers podem ser usados em muitas situações. Tente, por exemplo, usar z-index para criar efeitos em cabeçalhos no lugar de usar imagens. Por um lado é mais rápido carregar texto na página e por outro,
texto é mais amigável aos dispositivos de indexação.
Lição 16b: Web-standards e validação
W3C é a sigla para World Wide Web Consortium, uma organização independente que gerencia as normas para codificação na Internet (isto é, HTML,CSS, XML e outros). Microsoft, Fundação Mozilla e muitas outras organizações são membros do W3C e formam um consenso sobre o futuro desenvolvimento de normas.
Se você tem alguma experiência com web design, provavelmente sabe que há uma grande diferença na maneira como diferentes navegadores renderizam uma página. É frustrante e requer um consumo de muito tempo, criar uma página que possa ser visualizada consistentemente no Mozilla, Internet Explorer, Opera e no restante dos navegadores existentes.
A ideia da normatização é criar um consenso e encontrar um denominador comum para uso de tecnologias para a Web. Isto significa que seguindo as normas, um desenvolvedor terá a certeza de que sua criação será tratada de maneira apropriada em diferentes plataformas. Assim, nós recomendamos que você se beneficie do trabalho desenvolvido pelo W3C e valide sua CSS para estar em conformidade com as normas.
Validador CSS
Para facilitar a verificação aos preceitos das normas CSS, o W3C desenvolveu um validador que faz uma verificação da folha de estilos e retorna um relatório com os eventuais erros e avisos caso sua CSS não valide.
Para facilitar a validação da sua folha de estilos você poderá submetê-la ao validador aqui mesmo nesta página. Na caixa de texto abaixo, substitua a URL existente pela URL da sua folha de estilos e clique no botão para validar. Você será informado pelo site do W3C se há erros na sua folha de estilos.
http://w w w .ht
Validar folha de estilos
Se o validador não encontrar erros; será mostrada uma imagem como a abaixo, que você poderá usar na sua página para anunciar que está usando um código válido:
O validador pode também ser encontrado neste link: http://jigsaw.w3.org/css-validator/
Introdução ao PHP
PHP possibilita a você inserir funcionalidades avançadas no seu site. A finalidade deste tutorial é fazer uma introdução clara e precisa do PHP. Iniciaremos do zero,
mas é necessário que você possua um bom conhecimento da linguagem HTML. Caso você não conheça HTML recomendamos começar com a leitura do nosso Tutorial HTML.
PHP pode ser usado em vários contextos. - fóruns de discussão, enquetes, lojas on-line, pontes SMS, listas de discussão, etc. A única limitação para o uso do PHP é a sua imaginação. Não é difícil aprender PHP, mas esteja ciente de que PHP é mais sofisticado e exige mais do que o aprendizado da HTML. Assim, lembre-se que a paciência no processo de aprendizado é uma virtude.
Obviamente este tutorial não vai lhe ensinar tudo sobre PHP. Será necessário seu engajamento efetivo e realização de experimentos com os códigos mostrados. Se você necessitar de ajuda durante o processo de aprendizado recomendamos usar nossos fóruns. Lá você encontrará pessoas especializadas prontas para dar dicas, sugestões e conselhos.
O que é necessário? Supõe-se que você tem acesso a um editor de texto é sabe como usá-lo.
Você precisa ter acesso a um computador ou a um servidor capaz de processar PHP. Ao contrário do que ocorre com a HTML e as CSS, para PHP não faz a menor diferença o navegador que o usuário está usando, mas o importante é o tipo de servidor na qual sua página está hospedada. Isto porque PHP é uma tecnologia processada no lado do servidor.
Nas lições seguintes você aprenderá como o PHP funciona e como configurar seu computador para processar PHP. Em seguida você aprenderá sobre funções e métodos do PHP. Ao término deste tutorial você estará em condições de desenvolver scripts PHP e em consequência poderá usar as ilimitadas funcionalidades da linguagem para adicionar interatividade às suas páginas web.
Lição 1: O que é PHP
Quando se começa o estudo de PHP as primeiras perguntas são: O que é PHP? Como ele funciona? Nesta lição daremos a resposta a estas duas perguntas. É essencial que você conheça as
respostas antes de começar a desenvolver com PHP. O exato conhecimento do que é e de como funciona o PHP servirá de base para acelerar de forma significativa o seu processo de aprendizado.
O que é PHP?
Inicialmente PHP foi um acrônimo para Personal Home Pages, mas posteriormente assumiu o significado de PHP: Hypertext Preprocessor.
PHP foi criado por Rasmus Lerdorf nascido na Groelândia - Dinamarca e posteriormente começou a ser desenvolvido como código livre. PHP não é um Padrão Web - é uma tecnologia de código aberto. PHP não é uma linguagem de programação no sentido estrito da palavra, mas sim uma tecnologia que permite a inserção de scripts nos seus documentos.
A descrição sumária do que seja uma página PHP é que se trata de um arquivo gravado com a extensão .php contendo tags HTML e scripts que são executados em um servidor web.
Como funciona o PHP?
A melhor maneira de explicar como o PHP funciona é comparando-o com a HTML. Suponha que você digite o endereço de um documento HTML (por exemplo: http://www.meusite.com/page.htm) na barra de endereços do navegador. Esta ação desencadeia a requisição de uma página HTML. A requisição é ilustrada conforme a figura a seguir:
Como você pode observar o servidor simplesmente envia uma página HTML ao cliente. Suponha
agora que você digita http://www.meusite.com/page.php - requisitando uma página PHP - o servidor inicia seu trabalho de processamento:
O servidor lê cuidadosamente o arquivo PHP procurando por tarefas a serem por ele
executadas. Somente depois de executar eventuais tarefas o resultado é enviado ao cliente. É importante ressaltar que o cliente recebe e vê somente o resultado do trabalho do servidor e não as instruções para executar o trabalho.
Se você clicar a funcionalidade do navegador para inspecionar o código fonte de uma página PHP você não verá código PHP - verá somente as tags HTML e seus conteúdos. Assim, não é possível visualizar os scripts PHP inseridos em uma página inspecionando o código fonte da página. Você terá que aprender PHP de outras maneiras, por exemplo: lendo nosso tutorial.
Neste tutorial você aprenderá como escrever comandos para serem executados pelo servidor! Então, a primeira coisa que você precisa é... um servidor! Mas, não se apavore - você não
precisará comprar um novo computador. Você precisa simplesmente instalar um software no seu computador que fará com que ele funcione como um servidor. Outra opção é ter um site hospedado em um servidor que suporte PHP. Neste caso você precisa estar on-line enquanto codifica.
Lição 2c: Servidores
PHP é uma tecnologia que funciona no lado do servidor. Então, você precisa de um servidor para processar PHP. Você não desembolsará um tostão para dispor de um servidor e existem várias opções para obter um.
Esta lição mostra três opções para você dispor de um servidor. Nela faremos uma breve introdução às três opções (escolha a opção que melhor atenda às suas necessidades). Depois que o seu servidor estiver instalado e funcionando poderemos passar para a lição 3 na qual você criará sua primeira página PHP.
Opção 1: Servidor remoto de hospedagem
A primeira escolha é hospedar seu site em um servidor de hospedagem que suporte PHP. Teste para verificar se o servidor suporta PHP Se você ainda não dispõe de um servidor remoto pode criar uma conta
gratuita 000webhost.com que suporta PHP.
Opção 2: Instalação de PHP no seu computador
Não existe uma receita de bolo para instalar PHP em um computador. Esta opção é recomendada para usuários com experiência, mas usuário comum não está impedido de escolhê-la. Basta seguir as instruções para download e instalação (em inglês) contidas nos links a seguir:
Guia de instalação no Windows Guia de instalação no Mac Guia de instalação no Linux
Opção 3: XAMPP XAMPP é um programa que habilita PHP no computador sem necessidade de instalação complicada
pelo usuário. É indicado para usuários comuns. Aprenda como instalar XAMPP
Lição 2c-2: Instalação de XAMPP
Download Faça o download de XAMPP em um dos links a seguir (instruções em inglês):
Download e instalação de XAMPP em Windows Download e instalação de XAMPP em Mac Download e instalação de XAMPP em Linux
Instalação
Para instalar basta seguir as instruções de instalação que aparecem na tela durante o processo de instalação. Observe a seguir os screenshots tomados para a instalação em Windows.
1. Escolha fazer download do "Installer" no site do XAMPP:
2. Execute o arquivo e escolha C:\xampp como local de instalação:
3. Você não precisa fazer nenhuma escolha em "Service Sections":
4. Clique "Finish" assim que o processo de instalação terminar:
Depois que XAMPP tiver sido instalado você pode iniciar o servidor e deverá salvar seus futuros documentos PHP em c:\xampp\htdocs no seu computador. O acesso aos arquivos em um navegador se fará no endereço http://localhost.
Teste
Para verificar se o XAMPP está funcionando corretamente siga os passos a seguir:
1. Abra XAMPP no Painel de Controle 2. Inicie o servidor Apache e o MySql:
3. Crie um arquivo no Notepad (ou em um editor de texto qualquer) e grave-o com o nome
test.php (notar que a extensão deve ser ".php" e não ".htm"). 4. Escreva o seguinte código no arquivo: <?php echo "Hello World!"; ?> 5. Grave o arquivo em "c:\xampp\htdocs". 6. Abra o arquivo no navegador digitando o seguinte endereço: http://localhost/test.php.
Se aparecer no navegador "Hello World!" a instalação foi bem sucedida e você está pronto para
executar PHP no seu computador. Caso contrário, visite o site do XAMPP para obter informações a
respeito ou vá ao fórum de suporte e relate o problema.
Problemas mais comuns
O servidor Apache não inicia
Se o servidor Apache não inicia é provável que outra aplicação esteja usando a porta 80. Na maioria dos casos o Skype ou o Microsoft IIS.
Se você usa Skype: inicie o Skype, selecione Tools > Options > Connections e desmarque o uso da porta 80 como porta alternativa. Feche e reinicie o Skype.
Se você tem instalado o IIS: Consulte este link e desative o Internet Information Server (IIS). Se isto não resolver procure pelo programa que está usando a porta 80:
1. Abra o prompt de comando (Start > Run > cmd). 2. Digite: netstat -aon 3. Você verá uma lista de endereços de IP, número de portas e IDs de processos (PID). 4. Procure a linha contendo: 127.0.0.1:80 é anote o ID de processo. 5. Abra o gerenciador de tarefas (Start > Run > taskmgr). 6. Vá para a aba Process, clique View > Select Columns... 7. Marque PID (Process Identifier) 8. Procure o processo que tem o mesmo ID de processo que você anotou anteriormente em
netstat e feche o programa.
Lição 3c: Sua primeira página PHP
Nas lições 1 e 2 aprendemos o que é PHP e instalamos um servidor ou vamos usar um servidor remoto para seguir nossas lições. Assim, estamos em condições de criar nossa primeira página PHP. Seguiremos um caminho simples e fácil, contudo ao chegar ao final da lição você entenderá muito mais de PHP e saberá o que pode fazer com ele.
Basicamente um arquivo PHP é um arquivo de texto com a extensão .php consistindo de: Texto Tags HTML Scripts PHP
Você já sabe o que são textos e tags HTML. Então vamos examinar os scripts PHP.
Scripts PHP
O Grupo de documentação do PHP detalha e desenvolve a documentação para o PHP. Neste nosso tutorial nós, frequentemente, faremos referência e apontaremos para links naquela documentação. O objetivo é que você consulte e se familiarize com a documentação e fique em condições de encontrar respostas para suas dúvidas na documentação. PHP envolve tantas funcionalidades que é impossível aprender tudo em um tutorial. Em compensação PHP não é difícil. Ao contrário, PHP é uma linguagem parecida com o inglês.
Vamos começar com sua primeira página.
Examplo: Hello World!
Comece gerando um documento HTML e grave-o na raiz do site com o nome page.php. Se você usa XAMPP, (ver Lição 2), o caminho no seu computador é: "c:\xampp\htdocs\page.php" (ali seu computador é um servidor).
O código HTML deve ser como mostrado a seguir: <html>
<head>
<title>Minha primeira página PHP</title>
</head>
<body>
</body>
</html>
Na lição 1 ensinamos que PHP destina-se a escrever comandos para o servidor.. Vamos escrever
um comando para o servidor. Primeiramente devemos dizer ao servidor onde PHP começa e onde termina. Para isso usamos
as tags <?php e ?> respectivamente, para marcar o início e o fim do código a ser executado pelo servidor (na maioria dos servidores é suficiente escrever <? para tag de início, contudo <?php á a maneira mais correta e recomendada de se escrever a tag de início do PHP).
Acrescente o seguinte código na sua marcação HTML: <html>
<head>
<title>Minha primeira página PHP</title>
</head>
<body>
<?php
echo "<h1>Hello World!</h1>";
?>
</body>
</html>
Se você abrir o documento em um navegador deverá ver algo parecido com o seguinte:
Observe o que acontece quando você examina o código fonte do documento (selecione "view
source"):
O código PHP sumiu! Como foi dito na lição 1, apenas o servidor "vê" o código PHP - o cliente (no caso o navegador) "vê" somente o resultado!
Vamos examinar o que acontece. Pedimos ao servidor para escrever <h1> Hello World!</h1>. Em linguagem técnica podemos dizer que usamos a função echo para instruir o servidor a escrever uma string para o cliente. O ponto e vírgula termina o comando. Não se apavore! Tentaremos manter o uso de linguagem técnica a um mínimo possível.
Este primeiro exemplo, sem dúvida, não é nada empolgante. Espere um pouco! Daqui para frente as coisas se tornarão cada vez mais empolgantes. Vejamos outro exemplo.
Exemplo: Agora!
Vamos fazer o servidor escrever mais. Podemos, por exemplo, pedir ao servidor para escrever a data e hora atual:
<html>
<head>
<title>Minha primeira página PHP</title>
</head>
<body>
<?php
echo date("r");
?>
</body>
</html>
O resultado em um navegador é algo como mostrado a seguir:
E o código HTML correspondente é:
Está ficando empolgante. Certo? Fizemos o servidor mostrar a data e hora na página renderizada. Notar que se você recarregar a
página uma nova data e hora serão mostrados. O servidor escreve a data e hora toda vez que a página é enviada ao cliente.
É importante notar que o código HTML renderizado contém apenas a data - não é mostrado o script PHP. Assim, não importa o navegador que o usuário está usando o resultado é sempre o mesmo. Atualmente, todas as funcionalidades que são executadas no lado do servidor sempre funcionam em todos os navegadores!
Chamamos a atenção novamente para o ponto e vírgula no final de uma linha de código PHP. Este ponto e vírgula são obrigatórios ao final de um comando. Se você esquecer o script não funcionará.
No exemplo nós usamos date, que é uma função destinada a retornar a data e hora atuais no servidor. Vamos ampliar o exemplo escrevendo uma string e uma function - separadas por um "." (ponto) - observe a seguir:
<html>
<head>
<title>Minha primeira página PHP</title>
</head>
<body>
<?php
echo "<p>O grupo data/hora atual é: " . date("r") . "</p>";
?>
</body>
</html>
O resultado em um navegador é algo como mostrado a seguir:
E o código HTML correspondente é:
Na próxima lição estudaremos com detalhes a função date e os diferentes formatos do grupo data/hora.
Lição 4c: Trabalhando com datas e horas
Nesta lição você aprenderá as diferentes maneiras de trabalhar com datas e horas usando o PHP. Começaremos mostrando exemplos bem simples com a finalidade de mostrar o que PHP é capaz de fazer. Nesta lição estudaremos com detalhes a função date do PHP.
Funções para data e hora
PHP nos fornece uma série de funções relacionadas a data e hora. Nesta lição veremos a mais importante destas funções; a função date.
Usando-se os diferentes parâmetros previstos para a função date ela retornará o grupo data/hora em diferentes formatos. Os parâmetros mais usuais são: date("y"): Retorna o ano atual - para o dia de hoje o valor retornado é: 13
date("m"): Retorna o mês atual - para o dia de hoje o valor retornado é: 01
date("F"): Retorna o nome do mês atual - para o dia de hoje o valor retornado é: January
date("d"): Retorna o dia do mês atual - para o dia de hoje o valor retornado é: 14
date("l"): Retorna o nome do dia da semana atual - para o dia de hoje o valor retornado é: Monday
date("w"): Retorna o número correspondente ao dia da semana atual - para o dia de hoje o valor
retornado é: 1
date("H"): Retorna a hora atual - para o dia de hoje o valor retornado é: 23
date("i"): Retorna o minuto atual - para o dia de hoje o valor retornado é: 20
date("s"): Retorna o segundo atual - para o dia de hoje o valor retornado é: 25
O exemplo a seguir ilustra o uso da função date
<html>
<head>
<title>Grupo data/hora</title>
</head>
<body>
<?php
echo "<p>Hoje é " . date("l") . "</p>";
?>
</body>
</html>
Ver o resultado do exemplo
A hora é: 1358202025
Ops... Aqui parece coisa para nerds. A função time() retorna a hora atual em número de segundos contados desde 1 de janeiro de
1970 às 12:00 PM, GMT.
<html>
<head>
<title>Grupo data/hora</title>
</head>
<body>
<?php
echo "<p>São decorridos exatamente " . time() . " segundos desde 1 de
janeiro de 1970, 12:00 PM, GMT </ p> ";
?>
</body>
</html>
Ver o resultado do exemplo
A representação da hora em segundos, contados desde 1 de janeiro de 1970 às 12:00 PM, GMT
é chamada "timestamp" (UNIX timestamp) que é uma representação muito útil quando se trabalha com datas/horas passadas e futuras.
Por padrão, a função date usa o timestamp atual (isto é, o valor corrente de time()). Mas, usando um parâmetro você pode especificar o retorno da função em um diferente time stamp e assim trabalhar com datas passadas e futuras. No exemplo a seguir nós definimos o timestamp para 0 segundos a partir de 1 de janeiro de 1970 às 12:00 PM, GMT. Fazendo assim podemos verificar qual foi o dia da semana de 1 de janeiro de 1970. <html>
<head>
<title>Grupo data/hora</title>
</head>
<body>
<?php
echo "<p>O dia da semana em 1 de janeiro de 1970 foi " . date("l",0)
. "</p>";
?>
</body>
</html>
Ver o resultado do exemplo
A menos que você seja um gênio da matemática é muito complicado calcular o número de
segundos passados desde de 1 de janeiro de 1970 para uma determinada data. Felizmente existe uma função chamada mktime que realiza o cálculo.
A sintaxe para a função mktime é (hora, minuto, segundo, mês, dia, ano). O exemplo a seguir faz a conversão para a data da chegada do homem à lua (21 de julho de 1969 às 02:56): <html>
<head>
<title>Grupo data/hora</title>
</head>
<body>
<?php
echo mktime (2,56,0,7,21,1969);
?>
</body>
</html>
Ver o resultado do exemplo
Notar que o retorno foi um número negativo. Isto indica que a data é anterior a 1 de janeiro de 1970. Agora já podemos no valer do que até aqui aprendemos e usar a função date para saber qual
foi o dia da semana em que ocorreu o evento histórico da chegada do homem à lua.
<html>
<head>
<title>Grupo data/hora</title>
</head>
<body>
<?php
echo date("l", mktime(2,56,0,7,21,1969));
?>
</body>
</html>
Ver o resultado do exemplo
Mas afinal qual a utilidade prática?
Até agora tudo parece muito teórico. Afinal de que maneira posso usar uma do tipo time() de uma forma prática? Ao aprender algo novo é importante saber se você poderá usar o que aprendeu em uma página web.
Considere que o que você aprende neste tutorial é a construção de blocos de códigos - o que você pode fazer com eles depende somente da sua criatividade e está limitado apenas pela sua imaginação! Eu ousaria afirmar que você já aprendeu muito mais do que está pensando. Por exemplo: você acha que é capaz de criar um background para uma página que mude a cada dia da semana e funcione em todos os navegadores? Claro que você é capaz! Observe o exemplo a seguir: <html>
<head>
<title>Grupo data/hora</title>
</head>
<body background="background_<?php echo date("w"); ?>.png">
</body>
</html>
Ver o resultado do exemplo
O exemplo mostrado, que usa uma imagem de fundo dinâmica, requer que você construa
apenas sete imagens e as nomeie como background_1.png, background_2.png, background_3.png, etc.
Se o usuário entra no seu site na terça feira a imagem de fundo será background_2.png e no dia seguinte será background_3.png. Fácil e simples!
Na próxima lição estudaremos os blocos de código destinados a construção de loops e aqueles destinados a repetição de código. PHP é legal. Você não acha?
Lição 5c: Loops
Na linguagem PHP existem diferentes estruturas de controle destinadas a gerenciar a execução de scripts. Nesta lição nós estudaremos os loops. Loops são usados para executar repetidamente uma parte de um script em um determinado número de vezes ou até que seja encontrada uma determinada condição.
Loop "while" A sintaxe para um loop while é conforme mostrada a seguir:
while (condição) {
Comandos PHP de execução
}
Esta sintaxe pode ser traduzida para linguagem corrente como: execute comandos
PHP enquanto (while) a condição for satisfeita. Vejamos um exemplo bem simples:
<html>
<head>
<title>Loops</title>
</head>
<body>
<?php
$x = 1;
while ($x <= 50) {
echo "<p>Este texto se repete 50 vezes</p>";
$x = $x + 1;
}
?>
</body>
</html>
Ver o resultado do exemplo
No exemplo mostrado usamos uma variável denominada "$x". Como você pode notar, nomes
de variáveis em PHP sempre começam com o caractere "$". No início é fácil esquecer esta sintaxe, contudo é absolutamente necessário o símbolo "$" para iniciar o nome de variáveis, pois do contrário o script não funciona.
Além disto, o restante do script é auto-explicável. No começo a variável $x recebe o valor 1. A seguir o loop pede para o servidor executar o comando de escrever um texto enquanto a variável for menor do que 50. A cada execução a variável é incrementada de 1 unidade.
Loop "for"
Outra maneira de executar um loop é com uso de for conforme mostrado a seguir: for (Inicialização; Condição; passo) {
Comandos PHP de execução
}
Os comandos PHP de execução se repetem com a 'Inicialização' + 'passo' enquanto a 'Condição é
satisfeita'. Se isso não faz sentido para você o exemplo a seguir esclarece melhor: <html>
<head>
<title>Loops</title>
</head>
<body>
<?php
for ($x=0; $x<=50; $x=$x+5) {
echo '<p>A variável $x agora tem o valor igual a ' . $x . '</p>';
}
?>
</body>
</html>
Ver o resultado do exemplo
No exemplo mostrado $x é incrementado de 5 unidades em cada loop. O loop continua sua
execução enquanto $x for menor ou igual a 50. Notar que o valor de $x é usado como parte do texto a ser escrito pelo script.
Observe outro exemplo: <html>
<head>
<title>Loops</title>
</head>
<body>
<?php
for ($x=1; $x<=6; $x=$x+1) {
echo "<h" . $x . "> Cabeçalho nível</h" . $x . ">";
}
?>
</body>
</html>
Ver o resultado do exemplo
Você entendeu? Começamos definindo o valor de $x igual a 1. A seguir em cada loop
escrevemos um cabeçalho nível $x (h1, h2, h3, etc.) até $x alcançar o valor seis.
Loops dentro de loops
A princípio não existe limite para a quantidade de loops a usar. Você pode facilmente aninhar loops e criar muitas repetições. Mas, cuidado! A execução de PHP torna-se lenta quando desenvolvemos scripts extensos e complicados. Por exemplo: observe a seguir o script com três loops capaz de escrever 16 milhões de cores! Com a finalidade de não tornar a página de carregamento muito lento nós reduzimos drasticamente o número de repetições para passos de 30 limitando o número de cores escritas para 512. <html>
<head>
<title>Loops </title>
</head>
<body>
<?php
for ($intRed=0; $intRed<=255; $intRed=$intRed+30) {
for ($intGreen=0; $intGreen<=255; $intGreen=$intGreen+30) {
for ($intBlue=0; $intBlue<=255; $intBlue=$intBlue+30) {
$StrColor = "rgb(" . $intRed . "," . $intGreen . "," .
$intBlue . ")";
echo "<span style='color:" . $StrColor . "'>" . $StrColor .
"</span>";
}
}
}
?>
</body>
</html>
Ver o resultado do exemplo
No exemplo mostrado cada uma das três cores primárias (red, green e blue) pode ter um valor
entre 0 e 255. Qualquer combinação de três valores resulta em uma cor do tipo RGB (255,255,255). O código da cor é escrito em um elemento <span> que por sua vez é estilizado com a respectiva cor. Loops tornam-se mais interessantes é prático depois que você aprende mais algumas funcionalidades
do PHP. Assim que você entender o princípio de funcionamento do loop passe para a lição seguinte na
qual estudaremos as condicionais.
Lição 6c: Condicionais
Condicionais são usadas para executar um bloco de script sempre que determinada condição seja satisfeita. Por exemplo: uma condição pode estabelecer que uma data seja posterior a 1 de janeiro de 2012 ou que uma variável seja maior do que 7.
If...
A primeira condicional que estudaremos é o if cuja sintaxe é mostrada a seguir:
if (condition) {
Comandos PHP
}
Mais uma vez a sintaxe se parece com a linguagem corrente: If (Se) se a condição é satisfeita,
execute alguma coisa. Vejamos um exemplo simples: <html>
<head>
<title>Loops </title>
</head>
<body>
<?php
$x = 2;
if ($x > 1) {
echo "<p>A variável $x é maior que 1 </p>";
}
?>
</body>
</html>
if ... else ... Vejamos agora a condicional else cuja sintaxe é mostrada a seguir:
if (condição) {
comandos PHP
}
else {
Comandos PHP
}
Mais uma vez a sintaxe se parece com a linguagem corrente: if (se) a condição é satisfeita,
execute alguma coisa else (se não) execute outra coisa. Na Lição 4 mostramos como encontrar o número representativo do mês. No exemplo a seguir
usaremos este número em uma condicional if elsepara encontrar em qual das estações do ano estamos: <html>
<head>
<title>Condicionais</title>
</head>
<body>
<?php
if (date ("m") == 3) {
echo "<p>Estamos no outono!</p> ";
}
else {
echo "<p>Eu não sei em que estação estamos!</p> ";
}
?>
</body>
</html>
Ver o resultado do exemplo
Notar que se trata de uma condicional não muito inteligente - ela só funciona para o Mês de
Março! Contudo, existem várias maneiras de aperfeiçoar a condicional tornando-a mais precisa. Observe a seguir alguns operadores de comparação que podemos usar na condicional mostrada:
== Igual < Menor que > Maior que <= Menor ou igual a >= Maior ou igual a != Diferente Existem também operadores lógicos:
&& e || ou ! não
Operadores se destinam a criar condicionais mais precisas e com seu uso podemos melhorar o
exemplo mostrado anteriormente fazendo com que o retorno do script seja a estação primavera em todos os meses que ela ocorre e não somente em março: <html>
<head>
<title>Condicionais</title>
</head>
<body>
<?php
if (date("m") >= 3 && date("m") <= 5) {
echo "<p> Estamos no outono!</p> ";
}
else {
echo "<p> A estação atual é primavera, verão ou inverno!</p> ";
}
?>
</body>
</html>
Vamos examinar estas novas condicionais:
date("m") >= 3 && date("m") <= 5
Pode ser traduzida como:
Se o número que representa o mês for maior ou igual a 3 e menor ou
igual a 5
Legal não é? Operadores são largamente usados em diferentes blocos de script do PHP.
Contudo nosso exemplo só funciona para os meses de março, abril e maio, Os demais meses não são contemplados pela condicional. Assim, vamos aperfeiçoá-lo mais:
if ... elseIf ... else...
Usando elseif podemos expandir a condicional e fazer com que nosso script funcione para todos os meses do ano: <html>
<head>
<title>Condicionais</title>
</head>
<body>
<?php
if (date("m") >= 3 && date("m") <= 5) {
echo "<p>Estamos no outono!</p>";
}
elseif (date("m") >= 6 && date("m") <= 8) {
echo "<p>Estamos no inverno!</p>";
}
elseif (date("m") >= 9 && date("m") <= 11) {
echo "<p>Estamos na primavera!</p>";
}
else {
echo "<p>Estamos no verão!</p>";
}
?>
</body>
</html>
Ver o resultado do exemplo
Escrever condicionais é uma questão de lógica e método. O exemplo mostrado é bem
esclarecedor, porém o uso de condicionais pode tornar-se bem mais complexo. switch ... case
Outra maneira de se escrever condicionais é com uso do método switch: switch (expressão) {
case 1:
comandos PHP
break;
case 2:
comandos PHP
break;
default:
comandos PHP
break;
}
Este método toma por base uma expressão e a seguir relaciona uma série de "respostas" ou
"valores" e respectivos comandos PHP. A maneira mais fácil de entender esta condicional é observando um exemplo.
Na lição 4 nós vimos que a função date("w") retorna um número representando dia da semana. Vamos mostrar um exemplo para escrever o nome do dia da semana em lugar do número que o representa: <html>
<head>
<title>Condicionais</title>
</head>
<body>
<?php
switch(date("w")) {
case 1:
echo "Hoje é segunda-feira";
break;
case 2:
echo "Hoje é terça-feira";
break;
case 3:
echo "Hoje é quarta-feira";
break;
case 4:
echo "Hoje é quinta-feira";
break;
case 5:
echo "Hoje é sexta-feira";
break;
case 6:
echo "Hoje é sábado";
break;
default:
echo "Hoje é domingo";
break;
}
?>
</body>
</html>
Ver o resultado do exemplo
Em geral switch é uma boa alternativa para a condicional if else. Qual delas usar em
uma determinada situação depende somente de você. Use aquela que você considera mais fácil e lhe pareça mais lógica. Criar scripts lógicos e claros pode se constituir em um grande desafio para o desenvolvedor.
Na próxima lição mostraremos como inserir comentários em seus scripts com a finalidade de facilitar o entendimento de como eles funcionam. Um script bem comentado oferece a você ou a outra pessoa dicas que serão valiosas por ocasião de mudanças ou manutenção futura.
Lição 7c: Comentando seus scripts
Como você já deve ter concluído, um script PHP pode se tornar bastante confuso de entender. Nesta lição falaremos sobre comentários, sua importância e a maneira correta de inserí-los nos seus scripts.
Por que é importante comentar os scripts?
Quando codificamos, estamos escrevendo comandos para um servidor/computador usando uma linguagem estritamente formal que pode não refletir claramente o que você estava pensando quando criou o script.
Ora, isso pode criar dificuldades para terceiros (ou mesmo para você) quando se tratar de entender como o script foi estruturado e como consequência tornar extremamente árdua a tarefa de identificação e correção de erros.
Comentários são usados para se escrever pequenos textos explanatórios no script. O servidor ignora qualquer comentário no script e eles não afetam ou interferem com a funcionalidade do script.
No mundo dos negócios é comum as Companhias exigirem que os scripts e programas sejam comentados, pois é considerado um alto risco aceitar um sistema no qual a identificação e correção de erros se torna uma tarefa difícil pela falta de comentários.
Como inserir comentários?
É fácil inserir um comentário. Você simplesmente começa um texto de comentário escrevendo duas barras: "//".
Observe um exemplo mostrado na lição 5 no qual inserimos comentários: <html>
<head>
<title>Loops</title>
</head>
<body>
<?php
// Escreve código de cores usando três loops
// Vermelho pode estar entre 0 e 255
for ($intRed=0; $intRed<=255; $intRed=$intRed+30) {
// Verde pode estar entre 0 e 255
for ($intGreen=0; $ intGreen<=255; $intGreen=$intGreen+30) {
// Azul pode estar entre 0 e 255
for ($ intBlue=0; $intBlue<=255; $intBlue=$intBlue+30) {
// O código de cores tem o formato rgb(vermelho,verde,azul)
$strColor = "rgb(" . $intRed . "," . $intGreen . "," .
$intBlue . ")"
// Aqui escrevemos o código da cor
echo "<span style='color:" . $strColor . "'> " . $strColor .
" </span>";
// Fecha os loops
}
}
}
?>
Para clareza do exemplo incluímos muitos comentários extras mostrando inequivocamente que
os comentários auxiliam, e muito, a tarefa de debugar o script. Então! Não se esqueça de comentar seus scripts.
Lição 8c: Arrays
Nesta lição veremos o que array, como usá-los e o que podemos fazer com eles. Entender arrays pode ser um pouco difícil no início. Mas, não desanime, vamos tentar... Nós iremos tornar o processo de aprendizado o mais fácil possível.
O que é array?
Array é uma coleção (ou conjunto) de elementos indexados na qual cada um dos elementos tem um número identificador único. Parece confuso? Creia, não é tão complicado. Imagine uma lista de palavras separadas por vírgula como a mostrada a seguir: maçãs, peras, bananas, laranjas, limões
Agora imagine dividir a lista tomando como separador cada vírgula. Em seguite atribua a cada
divisão um número identificador único:
O que você acabou de ver é um array. Podemos dar um nome para o array como, por exemplo,
"frutas". A idéa é que possamos acessar o array usando um número identificador e com ele consultar o valor correspondente usando uma sintaxe como mostrada a seguir: frutas(0) = maças frutas(1) = peras frutas(2) = bananas frutas(3) = laranjas frutas(4) = limões
Esta é a ideia por trás de arrays. Vamos ver um exemplo prático.
Como usar um array?
Continuaremos com o array de frutas. Passo a passo mostraremos como fazer para a lista funcionar como um array. Primeiro vamos criar uma variável para conter a lista como mostrado a seguir: <?php
$listadefrutas = "maçãs, peras, bananas, laranjas, limões";
?>
A seguir vamos usar a função explode para dividir a lista pelas vírgulas: <?php
$listadefrutas = "maçãs, peras, bananas, laranjas, limões";
$arrFrutas = explode(",", $listadefrutas);
?>
Viva! "$arrFrutas" agora é um array!
Observe que chamamos a função explode com dois argumentos: 1. a lista a ser dividida 2. e o delimitador - isto é, o caractere usado para separar os itens da lista (no caso do exemplo a
vírgula) colocado entre aspas ",".
Usamos a vírgula como delimitador, mas podemos usar qualquer caractere e até mesmo uma palavra.
Vamos comentar o script e colocá-lo em uma página PHP: <html>
<head>
<title>Array</title>
</head>
<body>
<?php
// Lista separada por vírgula
$listadefrutas = "maçãs, peras, bananas, laranjas, limões";
// Cria um array seprando os itens da lista (tendo a vírgula como
delimitador)
$arrFrutas = explode(",", $listadefrutas);
// Escreve os valores do array
echo "<p>Lista de frutas:</p>";
echo "<ul>";
echo "<li>" . $arrFrutas[0] . "</li>";
echo "<li>" . $arrFrutas[1] . "</li>";
echo "<li>" . $arrFrutas[2] . "</li>";
echo "<li>" . $arrFrutas[3] . "</li>";
echo "<li>" . $arrFrutas[4] . "</li>";
echo "</ul>";
?>
</body>
</html>
Ver o resultado do exemplo
Este exemplo é muito simples e na verdade não há vantagem alguma em usar um array para
realizar este tipo de tarefa. Mas, um momento... arrays podem ser usadas de maneira muito mais vantajosa.
Loop por um array
Na Lição 5 estudamos loops. A seguir veremos como realizar um loop por um array. Quando você conhece o número de itens de um array não encontra problemas para definir um loop por ele. Você começa em 0 e desenvolve o loop até atingir o número de itens do array. No exemplo das frutas um loop pelo array seria como mostrado a seguir: <html>
<head>
<title>Array</title>
</head>
<body>
<?php
// Lista separada por vírgula
$listadefrutas = "maçãs, peras, bananas, laranjas, limões";
// Cria um array seprando os itens da lista (tendo a vírgula como
delimitador)
$arrFrutas = explode (",", $listadefrutas);
echo "<p>Lista de frutas:</p>";
echo "<ul>";
// Loop pelo array $arrFrutas
for ($x=0; $x<=4; $x++) {
echo "<li>" . $arrFrutas[$x] . "</li>";
}
echo "</ul>";
?>
</body>
</html>
Ver o resultado do exemplo
Como você pode notar a variável $x (que cresce de 0 a 4 no loop) foi usada para chamar o array.
Como encontrar o tamanho de um array
Mas, o que acontecerá se outra fruta for adicionada à lista? Nosso array passará a ter mais um item cujo número identificador será 5. Já deu para ver o problema? Precisamos alterar o loop para que ele funcione de 0 a 5, caso contrário não serão incluídos todos os elementos do array. Não seria maravilhoso se pudéssemos saber automaticamente quantos itens um array tem?
É isso exatamente o que faremos a seguir com uso da função foreach. Agora podemos criar um loop que funciona em todo array independentemente do número de itens nele contido: <?php
foreach ($arrFrutas as $x) {
echo $x;
}
?>
Este loop funciona independentemente do número de itens contido no array.
Outro exemplo
A seguir mostramos um exemplo, usando array, para escrever os nomes dos meses:
<html>
<head>
<title>Array</title>
</head>
<body>
<?php
// Cria um array dos meses.
// Cria um array com os meses. Notar a vírgula antes do mês de
janeiro. Isto é necessário //porque não existe mês representado pelo número
$arrMes =
array("","Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto
","Setembro","Outubro","Novembro","Dezembro");
// Chama o array com o número do mês - escreve no navegador do usuário
echo $arrMes[date("n")];
?>
</body>
</html>
Ver o resultado do exemplo
Notar que usamos a função array e não explode para criar o array. Ok. Isto é tudo sobre arrays! Na próxima lição veremos como escrever nossas próprias funções.
Lição 9c: Funções
Nas lições anteriores você aprendeu a usar funções, tais como, date() e array(). Nesta lição você aprenderá a criar suas próprias funções usando a funcionalidade do PHP chamada function. O que é função?
Uma função se destina a processar inputs (entradas) e retornar um output (saída). Isto pode ser
muito útil se, por exemplo, você tiver que processar uma grande quantidade de dados ou se tiver que realizar cálculos ou rotinas que devam ser executadas muitas vezes.
A sintaxe geral para uma função é mostrada a seguir: Nome da função(lista de parâmetros) {
Comandos PHP
}
O exemplo a seguir esclarece a sintaxe para uma função bem simples destinada a adicionar 1
unidade a um número: function AddOne($x) {
$x = $x + 1;
echo $x;
}
O nome escolhido para nossa função foi AddOne e deve ser chamada com um parâmetro que é o numero a somar - por exemplo: 34.... echo AddOne(34);
... o retorno da função será (pasmem!) 35.
No exemplo mostrado processou-se um número, contudo as funções podem processar textos, datas e qualquer outro tipo de dado. Você pode, até mesmo, criar funções para serem chamadas por parâmetros. Nesta lição estudaremos diferentes tipos de funções.
Exemplo 1: Função com vários parâmetros
Como dito anteriomente é possível criar funções com vários parâmetros. No exemplo a seguir criaremos uma função que é chamada com 3 números como parâmetros e retorna a soma deles: <html>
<head>
<title>Funções</title>
</head>
<body>
<?php
function AddAll($number1,$number2,$number3) {
$plus = $number1 + $number2 + $number3;
return $plus;
}
echo "123 + 654 + 9 é igual a " . AddAll(123,654,9);
?>
</body>
</html>
Ver o resultado do exemplo
Ok. Isto foi bastante simples! Mas, o objetivo foi apenas mostrar que uma função pode ser
chamada com vários parâmetros.
Exemplo 2: Data e hora em inglês
Vamos criar uma função um pouquinho mais complexa. Uma função a ser chamada com date() e time() e retornar a data e hora no formato:Wednesday, 15 February, 2012, 10:00:00 AM <html>
<head>
<title>Funções</title>
</head>
<body>
<?php
function EnglishDateTime($date) {
// Array com o nome em portuguêss dos dias e semanas
$arrDay = array("segunda-feira","terça-feira","quarta-
feira","quinta-feira","sexta-feira","sábado","domingo");
// Array with the English names of the months
$arrMonth =
array("","janeiro","fevereiro","março","abril","maio","junho","julho","agosto
","setembro","outubro","novembro","dezembro");
// Montar a data
$EnglishDateTime = $arrDay[(date("w",$date))] . ", " .
date("d",$date);
$EnglishDateTime = $EnglishDateTime . " " .
$arrMonth[date("n",$date)] . " " . date("Y",$date);
$EnglishDateTime = $EnglishDateTime . ", " . date("H",$date) . ":"
. date("i",$date);
return $EnglishDateTime;
}
// Função de teste
echo EnglishDateTime(time());
?>
</body>
</html>
Ver o resultado do exemplo
Notar que a definição de '$arrMonth' e '$EnglishDateTime' constam de diversas linhas do script.
Fizemos assim para que usuários com baixa resolução de tela tenham uma melhor visão do exemplo. Isto não tem nenhum efeito no funcionamento do código.
A função mostrada funciona em qualquer servidor independentemente do idioma. Isto significa que você pode usar esta função no seu site mesmo que ele esteja hospedado em um servidor na França e você quiser mostrar suas datas no formato inglês.
Por ora ficaremos por aqui sem nos aprofundar mais, pois agora você já sabe alguma coisa sobre como as funções trabalham.
Lição 10c: Passando variáveis no URL
Quando se trabalha com PHP é comum a necessidade de se passar variáveis de uma página para outra. Nesta lição veremos como passar variáveis em um URL.
Como isto funciona?
Talvez você já tenha visto e ficado intrigado com URLs no formato parecido com o mostrado a seguir: http://html.net/page.php?id=1254
O que significa aquele sinal de interrogação depois do nome da página? A resposta é: os caracteres depois do sinal de interrogação são uma HTTP query string. Uma
HTTP query string contém variáveis e seus valores. No exemplo mostrado a HTTP query string contém uma variável chamada "id", e seu respectivo valor igual a "1254".
Observe outro exemplo: http://html.net/page.php?name=Joe
Aqui você tem uma variável ("name") com o valor ("Joe"). Como recuperar o valor de uma variável com PHP?
Suponha uma página PHP chamada people.php. Suponha, também, que você "chame" esta página usando o seguinte URL: people.php?name=Joe
A sintaxe PHP para recuperar o valor da variável 'name' passada no URL é mostrada a seguir: $_GET["name"]
Use $_GET para recuperar o valor de uma variável. Vejamos outro exemplo:
<html>
<head>
<title>Query string</title>
</head>
<body>
<?php
// Extrai o valor da variável name
echo "<h1>Olá " . $_GET["name"] . "</h1>";
?>
</body>
</html>
Ver o resultado do exemplo (observe o URL)
Ao abrir a página que demonstra este exemplo faça a seguinte experiência: substitua na barra
de endereços do navegador o nome "Joe" pelo seu nome e recarregue a página! Legal, não é?
Várias variáveis no mesmo URL
Você não está limitado a passar uma só variável no URL. Para passar mais de uma variável use o sinal & ( e comercial) para separar as variáveis, como mostrado a seguir: people.php?name=Joe&age=24
Este URL contém duas variáveis: name (nome) e age (idade). Tal como foi explicado
anteriormente para recuperar as duas variáveis a sintaxe é mostrada a seguir: $ _GET["name"]
$ _GET["age"]
Vamos usar mais uma variável no nosso exemplo: <html>
<head>
<title>Query string </title>
</head>
<body>
<?php
// Extrai o valor da variável name
echo "<h1>Olá " . $ _GET["name"] . "</h1>";
// Extrai o valor da variável age
echo "<h1>Você tem ". $ _GET["age"] . " anos de idade</h1>";
?>
</body>
</html>
Ver o resultado do exemplo (keep an eye on the URL)
Bem, agora você já sabe como passar variáveis em um URL. Na próxima lição veremos mais um método de passagem de variáveis: o método usando formulários.
Lição 11: Passando variáveis com uso de formulários
Sites interativos se baseiam em entrada de dados pelos usuários. Uma das formas mais comuns de coletar dados e com uso de formulários
Nesta lição estudaremos como construir formulários e processar seus dados no servidor.
<form>: Para o elemento form destinado a marcar um formulário estão previstos, entre outros,
dois atributos de suma importância, são eles: action e method.
Action: Destina-se a definir o URL para o qual os dados do formulário serão enviados para
processamento. Neste URL encontra-se o arquivo com o script de processamento dos dados.
Method: Este atributo admite os valores "post" e "get" que são dois métodos deferentes de
passagem de dados. Por enquanto você não precisa saber as diferenças entre estes métodos,
basta saber que com "get" os dados são passados pelo URL e com post "post" são enviados em
forma de um bloco de dados via um mecanismo denominado STDIN. Na lição anterior
estudamos como recuperar dados passados no URL com uso de $_GET. Nesta lição veremos
como recuperar dados passados com uso do método "post".
Formulário em uma página HTML
A página contendo o formulário não precisa, necessariamente, ser uma página PHP. Não precisa nem mesmo estar no mesmo site que recebe seus dados para processamento.
O nosso primeiro exemplo mostra uma página contendo um formulário bem simples contendo apenas um campo de entrada de dados: <html>
<head>
<title>Formulário</title>
</head>
<body>
<h1>Informe seu nome</h1>
<form method="post" action="handler.php">
<input type="text" name="username">
<input type="submit">
</form>
</body>
</html>
A renderização no navegador é conforme mostrada a seguir:
Agora vem a parte divertida: receber e manipular dados com PHP Para requisitar dados enviados por um formulário usamos $_POST:
$_POST["fieldname"];
Retorna o valor de um campo do formulário. Vejamos um exemplo. Crie uma página contendo o formulário mostrado anteriormente. Crie outra página chamada
"handler.php" (notar que este nome é o mesmo daquele constante como valor do atributo action da tag <form> no nosso formulário).
O arquivo "handler.php" é como mostrado a seguir: <html>
<head>
<title>Formulário</title>
</head>
<body>
<?php
echo "<h1>Olá " . $_POST["username"] . "</h1>";
?>
</body>
</html>
Ver o resultado do exemplo
Dados do usuário e condicionais
No exemplo a seguir manipularemos os dados do usuário com condicionais. Nosso formulário será com mostrado a seguir: <html>
<head>
<title>Formulário</title>
</head>
<body>
<form method="post" action="handler.php">
<p>Qual é o seu nome:</p>
<input type="text" name="username"></p>
<p>Qual é a sua cor favorita:
<input type="radio" name="favoritecolor" value="r" /> Vermelha
<input type="radio" name="favoritecolor" value="g" /> Verde
<input type="radio" name="favoritecolor" value="b" /> Azul </p>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
A renderização no navegador é conforme mostrada a seguir:
A seguir mostraremos um script que usa o dado relativo a preferência de cor do usuário para mudar a cor do fundo da página conforme sua preferência. Faremos isso criando uma condicional (ver Lição 6) que usa a cor escolhida pelo usuário no formulário. <?php
$strHeading = "<h1>Olá " . $_POST["username"] . "</h1>";
switch ($_POST["favoritecolor"]) {
case "r":
$strBackgroundColor = "rgb(255,0,0)";
break;
case "g";
$strBackgroundColor = "rgb(0,255,0)";
break;
case "b":
$strBackgroundColor = "rgb(0,0,255)";
break;
default:
$strBackgroundColor = "rgb(255,255,255)";
break;
}
?>
<html>
<head>
<title>Formulário</title>
</head>
<body style="background: <? echo $strBackgroundColor; ?>;">
<? echo $strHeading; ?>
</body>
</html>
O fundo será branco se o usuário não escolher uma cor. Isto é feito com o uso da
declaração default que define a ação a tomar se nenhuma das condições for satisfeita. Mas, o que acontece se o usuário não fornece seu nome? O resultado será somente "Hello".
Vamos usar mais uma condicional para resolver esta questão. <?php
$strUsername = $_POST["username"];
If ($strUsername != "") {
$strHeading = "<h1>Olá " . $_POST["username"] . "</h1>";
}
else {
$strHeading = "<h1>Olá visitante!</h1> ";
}
switch ($_POST["favorite color"]) {
case "r":
$strBackgroundColor = "rgb(255,0,0)";
break;
case "g";
$strBackgroundColor = "rgb(0,255,0)";
break;
case "b":
$strBackgroundColor = "rgb(0,0,255)";
break;
default:
$strBackgroundColor = "rgb(255,255,255)";
break;
}
?>
<html>
<head>
<title>Formulário</title>
</head>
<body style="background: <? echo $strBackgroundColor; ?>;">
<? echo $strHeading; ?>
</body>
</html>
Ver o resultado do exemplo.
No exemplo anterior usamos uma condicional para validar o dado entrado pelo usuário. Neste caso particular, se o usuário não fornecer seu nome, não haverá grande prejuízo. Contudo em scripts mais avançados é essencial que se considere a possibilidade do usuário não entrar o dado solicitado ou
mesmo entrar um dado do tipo totalmente diferente daquele que imaginamos quando criamos o formulário.
Exemplo: Formulário de contato
Com os conhecimentos que você já adquiriu sobre PHP você já está em condições de criar um formulário de contato usando a função mail, que tem a seguinte sintaxe: mail(to, subject, message);
Começamos com nosso formulário: <html>
<head>
<title>Formulário de contato</title>
</head>
<body>
<h1>Formulário de contato</h1>
<form method="post" action="handler.php">
<p>Assunto:<br /><input type="text" name="subject" /></p>
<p>Menssagem:<br /><textarea name="message"></textarea></p>
<input type="submit">
</form>
</body>
</html>
A seguir temos o script PHP para processar os dados: <html>
<head>
<title>Functions</title>
</head>
<body>
<?php
// Enviar para (use seu endereço de e-mail)
$strEmail = "[email protected]";
// Coleta dados do usuário
$strSubject = $_POST["subject"];
$strMessage = $_POST["message"];
mail($strEmail,$strSubject,$strMessage);
echo "E-mail enviado.";
?>
</body>
</html>
Convém notar que o exemplo só funcionará se você tiver acesso a um serviço de e-mail. Por padrão este não é o caso em XAMPP e na maioria dos serviços de hospedagem gratuitos. Alguns serviços de hospedagem requerem que você inclua um header "from" conforme mostrado a seguir: mail("[email protected]", "Teste", "Isto é um teste de email", "From:
Lição 12c: Sessão
Quando você visita um site você realiza uma série de ações. Navega de uma página a outra. Talvez você preencha um formulário ou compre um produto.
Como desenvolvedor essas informações são de grande valia para criação de um site de sucesso. Suponha que você necessita criar um site no qual algumas páginas serão de acesso restrito requerendo login e senha. Para que a proteção ao acesso seja efetiva as páginas restritas devem possuir mecanismos capazes de detectar se o usuário está logado. Em outras palavras, quando o usuário requisita uma nova página do site é preciso "lembrar" o que ele fez anteriormente.
É exatamente para isto que as sessões se prestam - como usar a funcionalidade sessions do PHP para armazenar e recuperar informações sobre um usuário em visita ao site.
Session As session do PHP permitem gerenciar informações colhidas durante uma sessão (estada no
site) do usuário. Você pode escrever aplicações inteligentes com uso de armazenagem e recuperação de informações sobre o usuário.
Uma sessão pode começar de diferentes maneiras. Não iremos nos ater a detalhes técnicos e focaremos no caso em que uma sessão começa com o armazenamento de um valor. Uma sessão ends/dies (termina/morre) se o usuário não requisitar nenhuma página após decorridos um determinado tempo (por padrão 20 minutos). Obviamente, no seu script, você pode terminar uma sessão a qualquer momento.
Suponha que 50 pessoas estão visitando o site ao mesmo tempo, por exemplo, em um site de vendas. As informações sobre quais itens cada uma delas incluiu na sua cesta de compras são um bom exemplo de armazenamento com uso de session. Para identificar cada um dos usuário o servidor usa um ID único armazenado em um cookie. Cookie é um pequeno arquivo de texto armazenado no computador do usuário (saiba mais sobre cookies na Lição 13). Assim, sessions requerem suporte a cookies no navegador do usuário.
Exemplo de uso de sessions
Quando você requisitou esta página eu armazenei a hora em uma session. Eu fiz isto para mostrar a você como funciona uma sessão.
Eu criei um item de nome "StartTime" e armazenei ele usando o seguinte trecho de script PHP: <?php
session_start();
$_SESSION["StartTime"] = date("r");
?>
Desta forma uma sessão foi iniciada. Como foi dito anteriormente um ID é criado pelo servidor
para cada sessão. A sua sessão tem o seguinte ID: 4d4739fbcbdaa713f766c1e7328a0f2f A qualquer momento eu posso chamar "StartTime" da sessão escrevendo o seguinte:
<?php
session_start();
echo $_SESSION["StartTime"];
?>
Isto vai me mostrar que a página foi por você requisitada em Mon, 14 Jan 2013 23:30:53 +0100 (de acordo com o relógio do meu servidor).
O mais interessante é que esta informação permanece armazenada e disponível em session até mesmo depois que você sai desta página. A informação permanece até que a sessão termine. por padrão, uma sessão permanece ativa até que o usuário feche o navegador. Nesta ocasião ela termina. Se você quiser terminar uma sessão antes disto a sintaxe é como mostrada a seguir: <?php
session_destroy();
?>
Vamos examinar outro exemplo de aplicação para sessão: uso de senha.
Sistema de login com uso de sessão
No exemplo a seguir iremos criar um sistema simples de login. Usaremos muitos dos conceitos que aprendemos até aqui.
Precisamos de um formulário para coletar login e senha do usuário. Observe a seguir: <html>
<head>
<title>Login</title>
</head>
<body>
<form method="post" action="login.php">
<p>Usuário: <input type="text" name="username" /></p>
<p>Senha: <input type="text" name="password" /></p>
<p><input type="submit" value="Login" /></p>
</form>
</body>
</html>
A seguir criamos um arquivo denominado: login.php. Neste arquivo o script verifica se o login e senha fornecidos no formulário estão corretos. Se
estiverem, iniciamos uma sessão informando que o usuário está logado com um login e senha correta. <html>
<head>
<title>Login</title>
</head>
<body>
<?php
// Verifica se usuário e senha conferem
if ($_POST["username"] == "php" && $_POST["password"] == "php") {
// Se usuário e senha conferir definimos session para YES
session_start();
$_SESSION["Login"] = "YES";
echo "<h1>Você está logado</h1>";
echo "<p><a href='document.php'>Link para o arquivo
restrito</a><p/>";
}
else {
// Se usuário e senha conferir definimos session para NO
session_start();
$_SESSION["Login"] = "NO";
echo "<h1>Você NÃO está logdo</h1>";
echo "<p><a href='document.php'>Link para o arquivo
restrito</a><p/>";
}
?>
</body>
</html>
Nas páginas de acesso restrito precisamos verificar se o usuário que as requisitou está logado corretamente. Se não estiver ele é enviado para a página de login. Observe como é feito o script de proteção das páginas: <?php
// Iniciar Session PHP
session_start();
// Se o usuário não estiver logado manda ele para o formulário de
login
if ($_SESSION["Login"] != "YES") {
header("Location: form.php");
}
?>
<html>
<head>
<title>Login</title>
</head>
<body>
<h1>Este é um documento de acesso restrito</h1>
<p>Acesso permitido somente para usuários logados.</p>
</body>
</html>
Click aqui para testar o sistema de login
Agora você já conhece o objeto Session do PHP. Na próxima lição nós continuaremos nesta área
estudando os cookies.
Lição 13c: Cookies
Quais são as informações sobre seus visitantes, como elas são coletadas por um site e que uso o site faz das informações são questões que podem intrigar o usuário. Cookies são normalmente citados quando se quer exemplificar uma forma de coletar informações e de invasão de privacidade. Mas, afinal
devemos nos preocupar com isso? Tire suas próprias conclusões. Ao terminar esta lição você saberá o que pode ser feito com cookies.
O que é cookie?
Cookie é um pequeno arquivo de texto no qual um site pode armazenar informações. Cookies são gravados no disco rígido do usuário e não no servidor.
A maioria dos cookies expira (se auto apagam) depois de transcorrido um determinado tempo de pode variar de 1 minuto a vários anos. Contudo o usuário pode identificar e apagar cookies do seu computador a qualquer momento.
A maioria dos navegadores tais como, Microsoft Internet Explorer, Mozilla Firefox e Google Chrome, podem ser configurados de modo que o usuário seja previamente avisado da gravação de cookie e dar-lhe a opção de aceitar ou não a gravação. Mas, por que simplesmente não permitir a gravação de cookies? Bem, isto é possível, contudo muitos sites não funcionarão sem uso dos cookies. Isto porque eles dependem de cookies para melhorar a usabilidade e viabilizar a funcionalidade do site.
Como a informação é armazenada no cookie?
É fácil configurar ou modificar um cookie com uso da função PHP setcookie. No exemplo a seguir criaremos um cookie e a ele daremos um valor. Primeiro devemos escolher um nome para o cookie. No nosso exemplo escolhemos o nome "HTMLTest". A seguir definimos um valor para o cookie como mostrado a seguir: <?php
// Configura o cookie
setcookie("HTMLTest", "Este é um cookie para teste");
?>
Por padrão, um cookie expira quando o navegador é fechado, mas isto pode ser facilmente
alterado adicionando-se um parâmetro a mais na função definindo o tempo de vida do cookie: <?php
// Configura o cookie
setcookie("Name", "C. Wing, time()+3600);
setcookie("Interests", "plane spotting", time()+3600);
?>
"Time()+3600" define que o cookie expira em 3600 segundos (60 minutos) a partir de agora. No exemplo mostrado armazenamos informações sobre o nome do usuário e seus interesses.
Estas informações podem ser úteis, por exemplo, para direcionar o usuário para uma seção específica do site.
Como se recupera o valor de um cookie?
Para recuperar o valor de um cookie usamos $_COOKIE. Por exemplo; para recuperar o valor do cookie mostrado no exemplo anterior a sintaxe é conforme mostrada a seguir: <?php
// Recupera o vlor do cookie
$strName = $_COOKIE["Name"];
strInterest = $_COOKIE["Interest"];
// Escreve no cliente
echo "<p>" . strName . "</p>"
echo "<p>Você é interessado em: . " strInterest . "</p>"
?>
Quem pode ler um cookie?
Por padrão, um cookie pode ser lido por documentos de até segundo nível hospedados no mesmo domínio (por exemplo: html.net) no qual ele foi criado. Contudo, com uso dos parâmetros domain e path você pode restringir mais este comportamento usando a sintaxe mostrada a seguir: setcookie(name, value, expiration time, path, domain);
Vejamos um exemplo: <?php
// Configurando o cookie: nome, valor, tempo da vida, caminho, domínio
setcookie("Name", "C. Wing", time()+60*60*24*365, "/tutorials/php/",
"www.html.net");
?>
No exemplo mostrado criamos um cookie chamado "Name" com o valor "C. Wing." O cookie
expira em 1 ano (60 segundos * 60 minutos * 24 horas * 365 dias) e pode ser lido apenas por arquivos no diretório "/tutorials/php/" no (sub-)domínio "www.html.net".
Exemplo de cookie
Vamos gravar um cookie no seu computador e observar o que acontece. O código mostrado a seguir cria o cookie: <?php
// Criar cookie
setcookie("HTMLTest", "Este é um cookie para teste!", time()+60*60*24,
"/tutorials/php/", "www.html.net");
// Escreve a informação no cliente
echo $_COOKIE ["HTMLTest"];
?>
Ver o resultado do exemplo
O cookie foi gravado no seu disco rígido. O cookie e gravado em um local do disco rígido que varia com o sistema operacional usado pelo usuário. Uma vez que você consiga localizá-lo o seu formato parecido com o seguinte:
Como você pode ver um cookie é um arquivo de texto que pode ser aberto no Notepad, por
exemplo. O conteúdo do cookie que acabamos de criar se parece com o seguinte: HTMLTest TEXT=Este+é+um+cookie+para+teste%21
www.html.net/tutorials/php 0 80973619229399148 4216577264 29399141 *
Não iremos nos aprofundar mais em cookies, contudo note que o usuário detém o controle
sobre a gravação de cookies no seu computador. Nesta lição estudamos os cookies e suas finalidades. É sabido que alguns sites usam cookies com
propósitos exclusos. Mas, na maioria dos casos cookies são usados para tornar a interação com o site mais amigável ou para individualizar o uso do site.
Pode ser uma boa ideia usar cookies no seu site, mas neste caso é de boa prática informar o usuário sobre seu uso. Você pode passar esta informação na política de privacidade do site ou durante o processo de registro do usuário no site.
Lição 14c: Sistema de arquivos
Usando PHP você pode acessar o sistema de arquivos no servidor. Esta funcionalidade permite que você manipule diretório e arquivos de texto com scripts PHP.
Você pode usar PHP para ler um arquivo de texto ou mesmo nele escrever. Ou ainda, você pode inspecionar quais são os arquivos existentes em um determinado diretório no servidor. As possibilidades são muitas e o PHP pode facilitar bastante o seu trabalho.
Nesta lição estudaremos como usar PHP para trabalhar com arquivos e diretórios. O objetivo é fornecer uma visão geral deste assunto. Nas lições que se seguem aprofundaremos o assunto. Nós não cobriremos todas as funcionalidades. Se você precisar de mais informações consulte a documentação do PHP.
filemtime: Retorna a hora em que o conteúdo de um arquivo foi editado pela última vez (no formato
UNIX timestamp - ver lição 4)).
fileatime: Retorna a hora em que o conteúdo de um arquivo foi acessado (aberto) pela última vez
(no formato UNIX timestamp - ver lição 4)).
filesize: Retorna o tamanho do arquivo em bytes.
Vamos verificar as três propriedades descritas para o arquivo que você está lendo agora: "/tutorials/php/lesson14.php" <html>
<head>
<title>Sistema de arquivos</title>
</head>
<body>
<?php
// Pesquisar e escrever propriedades
echo "<h1>Arquivo: lesson14.php</h1>";
echo "<p>Editado pela última vez em: " . date("r",
filemtime("lesson14.php"));
echo "<p>Aberto pela última vez em: " . date("r",
fileatime("lesson14.php"));
echo "<p>Tamanho do arquivo: " . filesize("lesson14.php") . " bytes";
?>
</body>
</html>
Ver o resultado do exemplo
Diretórios
PHP permite que se trabalhe com diretórios do servidor. Nós não aprofundaremos o assunto, apenas mostraremos um exemplo. Para maiores informações consulte a documentação do PHP.
opendir: Abre um diretório.
readdir: Retorna o nome do próximo arquivo do diretório aberto (com uso de opendir)
closedir: Fecha um diretório.
O exemplo a seguir mostra os arquivos contidos no diretório "tutorials/php/".
<html>
<head>
<title>Objeto Sistema de Arquivos</title>
</head>
<body>
<?php
// Abre o diretório
$folder = opendir("../../tutorials/php/");
// Loop pelos arquivos do diretório
while (($entry = readdir($folder)) != "") {
echo $entry . "<br />";
}
// Fecha o diretório
$folder = closedir($folder);
?>
</body>
</html>
Ver o resultado do exemplo
No exemplo mostrado, começamos abrindo o diretório "../../tutorials/php/". A seguir um loop é criado para escrever o nome do próximo arquivo, até atingir o último. Chegando ao fim o diretório é fechado.
Nas próximas lições estudaremos como ler e escrever em um arquivo de texto.
Lição 15c: Ler arquivos de texto
Na lição anterior estudamos como acessar o sistema e arquivos do servidor. Nesta lição aplicaremos o conhecimento adquirido para fazer a leitura de um arquivo de texto no servidor.
Arquivos de texto é uma maneira poderosa de armazenar vários tipos de dados. Eles não são tão flexíveis quanto um Banco de Dados, mas têm a vantagem de não requerer muita memória. Além disso, por ser em formato de texto puro funcionam na grande maioria dos sistemas.
Abrir um arquivo de texto
Usamos a função fopen para abrir um arquivo de texto. A sintaxe é mostrada a seguir: fopen(filename, mode)
filename: Nome do arquivo a abrir.
Mode: Define o modo, que pode ser: "r" (reading - ler), "w" (writing - escrever) ou "a"
(appending - adicionar). Nesta lição nós usaremos o modo de leitura "r". Nas próximas lições
estudaremos como escrever e adicionar texto em um arquivo de texto.
Nos exemplos a seguir usaremos um arquivo de texto denominado unitednations.txt. trata-se de
uma lista dos Programas e Fundações das Nações Unidas e seus respectivos domínios. Você fazer o download do arquivo ou criar seu próprio arquivo para testar os exemplos com ele.
Vamos começar abrindo o arquivo unitednations.txt: <?php
// Abrir o arquivo de texto
$f = fopen("unitednations.txt", "r");
// Fechar o arquivo de texto
fclose($f);
?>
Exemplo 1: Ler uma linha de um arquivo de texto
Usamos a função fgets para ler uma linha do arquivo. Este método lê até o primeiro "break" de linha no arquivo (não inclui a linha do "break"). <html>
<head>
<title>Ler um arquivo de texto</title>
</head>
<body>
<?php
$f = fopen("unitednations.txt", "r");
// Lê uma linha e escreve no cliente
echo fgets($f);
fclose($f);
?>
</body>
</html>
Ver o resultado do exemplo
Exemplo 2: Ler todas as linhas de um arquivo de texto <html>
<head>
<title>Ler um arquivo de texto</title>
</head>
<body>
<?php
$f = fopen("unitednations.txt", "r");
// Lê cada uma das linhas do arquivo
while(!feof($f)) {
echo fgets($f) . "<br />";
}
fclose($f);
?>
</body>
</html>
Ver o resultado do exemplo
No exemplo anterior percorremos as linhas com uso de um loop e usamos a função feof (for end-of-file) para verificar se chegamos ao fim do arquivo. Se não ("!" - ver lição 6), ta linha é escrita. Em lugar de construir um loop poderíamos ter obtido o mesmo resultado com uso da função fread. Se você trabalhar com arquivos extensos leve em consideração que a função fread usa mais recursos que a função fgets. Para arquivos pequenos, praticamente, não faz diferença usar uma ou outra.
Exemplo 3: Diretório de links
Conforme vimos no início desta lição, arquivos de texto podem ser excelentes para armazenagem de dados. Isto pode ser demonstrado no exemplo a seguir no qual criamos um diretório de links a partir dos conteúdos do arquivo de texto unitednations.txt.
O arquivo contém o nome do Programa ou Fundação seguindo-se uma vírgula e depois o domínio. É fácil de concluir que se quiséssemos poderíamos armazenar mais informações nesta lista separada por vírgula.
Para recuperar a informação em cada linha usaremos um array. Ver Lição 8 para mais informações sobre arrays. <html>
<head>
<title>Ler um arquivo de texto</title>
</head>
<body>
<?php
$f = fopen("unitednations.txt", "r");
// Lê cada uma das linhas do arquivo
while (!feof($f)) {
// Criar um array com o separador vírgula
$arrM = explode(",",fgets($f));
// escreve links (dados vem do array)
echo "<li><a href='http://" . $arrM[1] . "'>" . $arrM[0].
"</a></li>";
}
fclose($f);
?>
</body>
</html>
Ver o resultado do exemplo
Legal não é? A princípio você pode expandir o arquivo de texto para conter mais linhas ou
mesmo incluir outras informações como, por exemplo, um endereço. Na próxima lição veremos como escrever em um arquivo de texto.
Lição 16c: Escrever em arquivos de texto
Na lição anterior aprendemos a ler um arquivo de texto com PHP. Nesta lição veremos como escrever em um arquivo de texto com PHP.
Os dois métodos são bem semelhantes, mas existe uma diferença importante: Você tem que ter permissão para escrever no arquivo. Isto significa que o arquivo tem que estar localizado em um diretório ao qual você tenha permissão de acesso para escrever.
Se você está trabalhando localmente em seu computador, poderá você mesmo configurar as permissões: dê um clique com o botão direito do mouse na pasta do diretório e escolha "Properties". Na maioria dos servidores de hospedagem existe por padrão um diretório com permissão de escrita. Em geral tais diretórios são nomeados como "cgi-bin", "log", "databases" oo algo similar. Se o seu servidor de hospedagem permitir você também poderá configurar permissões. Geralmente basta que, no seu cliente FTP, você clique com o botão do mouse na pasta e escolha "properties" ou "permissions" ou algo similar. Na figura a seguir mostramos como configurar permissões no FileZilla.
Se precisar de mais informações leia a documentação de suporte do seu servidor de
hospedagem. Convém notar que é arquivo de texto no qual se pretende escrever que deve estar localizado no diretório com permissão de escrita e não o arquivo PHP.
Abrir um arquivo de texto para escrever
Tal como fizemos para ler um arquivo de texto usaremos a função fopen para escrever, mas agora configurada para o modo "w" (writing - escrever) ou "a" (appending - adicionar).
A diferença entre os modos writing e appending é a posição do 'cursor' para escrever - se no começo ou no fim do arquivo respectivamente.
Nos exemplos desta lição usaremos um arquivo vazio denominado textfile.txt, mas se você preferir pode usar seu próprio arquivo.
Vamos começar abrindo o arquivo de texto: <?php
// Abre o arquivo de texto
$f = fopen("textfile.txt", "w");
// Fecha o arquivo de texto
fclose($f);
?>
Exemplo 1: Escrever uma linha no arquivo de texto
Para escrever uma linha usamos a função fwrite como mostrado a seguir: <html>
<head>
<title>Escrever em um arquivo de texto</title>
</head>
<body>
<?php
// Abre o arquivo de texto
$f = fopen("textfile.txt", "w");
// Escreve no arquivo de texto
fwrite($f, "PHP is fun!");
// Fecha o arquivo de texto
fclose($f);
// Abre o arquivo e lê a linha
$f = fopen("textfile.txt", "r");
echo fgets($f);
fclose($f);
?>
</body>
</html>
Ver o resultado do exemplo
Uma vez aberto o arquivo no modo writing a nova linha é escrita na parte superior do arquivo é
sobrescreve a primeira linha do arquivo. Se abrirmos o arquivo no modo appending a nova linha é escrita na parte inferior do arquivo acrescentando mais uma linha no arquivo.
Exemplo 2: Escrever um bloco de texto em um arquivo de texto
É possível escrever um bloco de texto inteiro em vez de uma só linha como mostrado a seguir: <html>
<head>
<title>Escrever em um arquivo de texto</title>
</head>
<body>
<?php
// Abre o arquivo de texto
$f = fopen("textfile.txt", "w");
// Escreve um texto
fwrite($f, $_POST["textblock"]);
// Fecha o arquivo de texto
fclose($f);
// Abre o arquivo e lê a linha
$f = fopen("textfile.txt", "r");
// Lê o texto
echo fgets($f);
fclose($f);
?>
</body>
</html>
Ver o resultado do exemplo
Lição 17: Banco de Dados
Um Banco de Dados é um conjunto de informações / dados organizados de uma maneira a
facilitar as tarefas de extração, manutenção e atualização dos dados. Banco de Dados possibilitam a criação de sites dinâmicos com grande quantidade de informações. Por exemplo:os dados sobre todos os membros do site HTML.net bem como todos os posts dos forums do site estão guardados em um Banco de Dados.
Um Banco de dados, em geral é constituído de uma ou mais tabelas. Se você já trabalhou com planilhas ou mesmo com banco de dados, você deve estar familiarizado com tabelas, suas colunas e linhas:
Existem vários tipos de Banco de Dados: MySQL, MS Access, MS SQL Server, Oracle SQL Server e
muitos outros. No nosso tutorial usaremos o Banco de Dados MySQL. MySQL é o tipo de Banco de Dados mais indicado e natural para se usar com PHP. Para acompanhar esta e as próximas lições você precisa ter acesso a um Banco de Dados:
Se você tem um site PHP hospedado remotamente é quase certo que MySQL esteja disponível no servidor. Informe-se com o suporte do seu servidor de hospedagem.
Se você instalou PHP no seu computador e quiser instalar MySQL faça o download de um a versão gratuita (MySQL Community Edition) no site do MySQL.
Se você está usando XAMPP (ver Liçaõ 2) MySQL já foi instalado e está pronto para ser usado. Certifique-se, no Painel de Controle, que MySQL está sendo executado:
A seguir, nesta lição, veremos como conectar a um Banco de Dados e nas lições seguintes
aprenderemos a criar um Banco de Dados e dele extrair e atualizar dados.
Conexão com o Banco de Dados
Primeiro você precisa ter acesso ao servidor no qual está instalado o Banco de Dados. O acesso é feito com uso da função mysql_connect que admite a seguinte sintaxe: mysql_connect(servidor, usuário, senha)
Simples e direto: O parâmetro (servidor) indica o local onde se encontra o Banco de Dados, usuário e senha indicam o nome do usuário e a senha de acesso ao Banco de Dados.
Se você possui um site, leia a documentação de suporte do seu servidor para saber o local do servidor MySQL. Nome de usuário e senha em geral é o mesmo que você usa para acessr o site via FTP. Se não for contate o suporte para seu servidor.
Exemplo de conexão MySQL para um site em servidor remoto: mysql_connect("mysql.myhost.com", "user001", "sesame") or
die(mysql_error());
Exemplo de conexão MySQL com servidor local XAMPP (configuração padrão):
mysql_connect("localhost", "root", "") or die (mysql_error());
Notar nos exemplos a inclusão de or die(mysql_error()) que, resumo, destina-se a interromper o
script e retornar uma mensagem de erro caso não seja possível estabelecer a conexão. É assim que se faz a conexão com o servidor MySQL. Agora você já está em condições de criar Banco de Dados, extrair e inserir dados. É exatamente isso que aprenderemos nas próximas lições.
Ah sim! Não se esqueça que é de boa prática encerrar a conexão tão logo você tenha terminado de usar o Banco de Dados. Para isso use a função mysql_close.
Lição 18c: Criando Banco de Dados e suas Tabelas
Na lição anterior aprendemos como se conectar com um Banco de Dados. O próximo passo é aprender como criar Banco de Dados e Tabelas.
Veremos duas maneiras de se criar Bancos de Dados e Tabelas. Primeiro com uso de PHP e depois de uma maneira mais amigável usando a ferramenta PhpMyAdmin que existe por padrão na maioria dos servidores remotos e também no XAMPP.
Se você tem um servidor remoto com PHP e MySQL e já criou um Banco de Dados pule esta parte da lição e vá para criação de Tabelas. Para mais informações consulte o suporte do seu servidor.
Criar Banco de Dados e Tabelas com PHP
A função mysql_query é usada para enviar umna consulta (query) para o Banco de Dados MySQL. Consultas são escritas n linguagemStructured Query Language (SQL) (ou Linguagem estruturada de consulta). SQL é a linguagem mais usada para consultas a um Banco de Dados - não só para MySQL - e é lógica e muito fácil de aprender. Nesta e na próxima lição você aprenderá a sinbtaxe para realizar as mais usadas consultas SQL.
Para criar um Banco de Dados a query SQL usada é CREATE DATABASE que admite a seguinte sintaxe: CREATE DATABASE nome do Banco
Bem lógico não é!? Vamos criar um script PHP: mysql_connect("mysql.myhost.com", "user", "sesame") or
die(mysql_error());
mysql_query("CREATE DATABASE mydatabase") or die(mysql_error());
mysql_close();
Primeiro a conexão com o Banco de Dados. A seguir criamos o Banco de Dados denominado
"mydatabase". Finalmente encerramos a conexão. Até aqui tudo bem... Mas as tarefas se complicam um pouco quando se trata de criar Tabelas
com PHP. Para isso usamos a query SQL CREATE TABLE com a seguinte sintaxe: CREATE TABLE nome da Tabela
(
nome_coluna1 DATA_TYPE,
nome_coluna3 DATA_TYPE,
nome_coluna4 DATA_TYPE,
...
)
Nome da Tabela e nome_coluna são, sem dúvida, o nome da Tabela e da coluna respectivamente. DATA_TYPE é usado para especificar o tipo de dado a ser inserido na coluna. Os tipos de dados mais usados são:
INT: Para números inteiros
DECIMAL: Pra números decimais
CHAR: Textos com menos de 255 caracteres
TEXT: Para texto com menos de 65.535 caracteres
LONGTEXT: Para texto com menos 4.294.967.295 caracteres
Date: Para datas no formato YYYY-MM-DD
Time: Para hora no formto HH:MM:SS
DATETIME: Para data/hora no formato YYYY-MM-DD HH:MM:SS
Lógico e fácil. Vejamos um exemplo:
mysql_connect("mysql.myhost.com", "user", "sesame") or
die(mysql_error());
mysql_select_db("people") or die(mysql_error());
mysql_query("CREATE TABLE MyTable (
id INT AUTO_INCREMENT,
FirstName CHAR,
LastName CHAR,
Phone INT,
BirthDate DATE
PRIMARY KEY(id)
)") Or die(mysql_error());
mysql_close ();
Começamos com a conexão com o servidor MySQL. A seguir usamos a função
mysql_select_db para selecionar o Banco de Dados denominado "people". Depois criamos a Tabela denominada "persons" contendo 5 colunas.
Notar que para a coluna "id" usamos INT para especificar que a coluna conterá números inteiros e a seguir usamos AUTO_INCREMENT para definir que os números serão incrementados automaticamente, garantindo que cada linha da coluna tenha um ID único (exclusivo, ou seja, que não se repete).
Finalmente usamos PRIMARY KEY para definir a coluna "id" como chave primária. A chave primária é o identificador exclusivo da cada registro (linha) da Tabela. Este identificador será de grande utilidade para manipulação dos registros.
Criar Banco de Dados e Tabelas com phpMyAdmin
Pode ser bastante útil
criar Banco de Dados e Tabelas com PHP. Porém, em geral, será bem mais fácil usar phpMyAdmin (ou qualquer outra ferramenta administrativa para MySQL) que existe por padrão na maioria dos servidores remotos e em XAMPP. As figuras mostradas a seguir esclarecem como criar Banco de Dados e Tabelas no phpMyAdmin.
Comece fazendo login no phpMyAdmin. Em geral o endereço é o mesmo do servidor MySQL (por exemplo: "http://mysql.myhost.com") bem como o nome de usuário e senha. No XAMPP o endereço é: http://localhost/phpmyadmin/.
Uma vez logado, digite um nome para o Banco de Dados e clique o botão "Create":
Em alguns servidores remotos já existe um Banco de Dados padrão e não é permitida a criação de outros Banco de Dados. Se este for o seu caso, use o Banco de Dados padrão. Para criar uma Tabela clique na aba "Databases" e escolha o Banco de Dados na qual a Tabela será criada:
Procure a caixa denominada "Create new table in database" e nela digite o nome
da Tabela e o número de colunas. Clique o botão "Go":
A seguir define o nome das colunas, o tipo de dado em cada uma delas, etc. tal como
mostramos anteriormente.
Notar que usamos "id" como PRIMARY KEY e AUTO_INCREMENT (A_I). Assim, criamos nosso Banco de Dados e sua Tabela. Nas próximas lições aprenderemos como
inserir, extrair e apagar dados de um Banco de Dados.
Lição 19c: Inserindo dados em um Banco de Dados
Nesta lição veremos como inserir dados em um Banco de Dados com uso de scripts PHP.
Inserir dados com SQL Para inserir dados em um Banco de Dados com SQL a sintaxe é idêntica a usada para criar Banco
de Dados. A sintaxe é mostrada a seguir: INSERT INTO nome_da_Tabela(coluna1, coluna2, ...) VALUES(valor1,
valor2, ...)
Notar que podemos manipular dados em várias colunas ao mesmo tempo usando uma lista
separada por vírgula no comando SQL. Mas, é óbvio, podemos manipular uma coluna somente. Colunas que não constam do comando SQL permanecem vazias.
Exemplo: Inserir dados de uma pessoa na Tabela
Neste exemplo usaremos o Banco de Dados criado na Lição 18. Vamos inserir os dados de uma pessoa. Seja a pessoa Gus Goose cujo telefone é 99887766 e nasceu em 1964-04-20
O comando SQL para inserção é conforme mostrado a seguir: $strSQL = "INSERT INTO people(FirstName,LastName,Phone,BirthDate)
VALUES('Gus','Goose','99887766 ','1964-04-20')";
mysql_query($strSQL) or die(mysql_error());
Notar que um comando SQL pode tornar-se extenso dificultando seu entendimento. Para
esclarecer melhor e facilitar o entendimento existe uma sintaxe alternativa conforme mostrada a seguir: strSQL = "INSERT INTO people(";
strSQL = strSQL . "FirstName, ";
strSQL = strSQL . "LastName, "
strSQL = strSQL . "Phone, ";
strSQL = strSQL . "birth) ";
strSQL = strSQL . "VALUES (";
strSQL = strSQL . "'Gus', ";
strSQL = strSQL . "'Goose', ";
strSQL = strSQL . "'99887766', ";
strSQL = strSQL . "'1964-04-20')";
mysql_query($strSQL) or die(mysql_error());
Segundo esta sintaxe, dividimos o comando em parte e usamos uma variável - no nosso
caso $strSQL - para concatenar as partes em um comando único. Na prática não importa a sintaxe que você usa. Dependendo do seu projeto escolha aquela que
for mais conveniente para o claro entendimento dos comandos SQL. Tente executar o seguinte código para inserir Gus Goose no Banco de Dados:
<html>
<head>
<title>Inserindo dados em um Banco de Dados</title>
</head>
<body>
<?php
// Conexão com o Banco de Dados
mysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Seleciona o Banco de Dados
mysql_select_db("mydatabase") or die(mysql_error());
// Comando SQL
$strSQL = "INSERT INTO people(";
$strSQL = $strSQL . "FirstName, ";
$strSQL = $strSQL . "LastName, ";
$strSQL = $strSQL . "Phone, ";
$strSQL = $strSQL . "BirthDate) ";
$strSQL = $strSQL . "VALUES(";
$strSQL = $strSQL . "'Gus', ";
$strSQL = $strSQL . "'Goose', ";
$strSQL = $strSQL . "'99887766', ";
$strSQL = $strSQL . "'1964-04-20')";
// Comando SQL executado
mysql_query($strSQL) or die (mysql_error());
// Encerra conexão
mysql_close();
?>
<h1>Banco de Dados atualizado!</h1>
</body>
</html>
Inserir uma entrada de usuário no Banco de Dados
Em certos casos há necessidade de inserir uma entrada de usuário no Banco de Dados. Como você já deve ter concluído isto será feito com uso de um formulário como descrito
na Lição 11 - pois podemos inserir o valor passado pelo formulário em um comando SQL. Suponha o formulário conforme mostrado a seguir: <form action="insert.php" method="post">
<input type="text" name="FirstName" />
<input type="submit" value="Save" />
</form>
O formulário será enviado para insert.php no qual, conforme mostrado na lição 11, extrairemos o valor entrado no formulário pelo usuário. Para este nosso exemplo o comando SQL é conforme mostrado a seguir: strSQL = "INSERT INTO people(FirstName) values('" .
$_POST["FirstName"] . "')"
De maneira semelhante é possível extrair dados de cookies, sessions, query strings, etc.
Erros mais comuns
No início, você provavelmente será brindado com uma bateria de mensagens de erros quando tentar atualizar dados em um Banco de Dados. Não há lugar para o menor erro que seja, quando trabalhamos com Banco de Dados. O simples esquecimento ou má colocação de uma vírgula põe tudo a perder e lá vem uma mensagem de erro. Observe a seguir os erros mais comuns cometidos quando se está iniciando.
Tipo de dado incorreto
É importante manter consistência de tipo de dado na coluna. Cada coluna deve conter um determinado tipo de dado. A figura a seguir mostra os tipos de dados para a Tabela "people" do nosso exemplo.
Se você tentar inserir textos ou números em um mesmo campo que admite somente textos, vai
ocorrer erro. Ou bem texto ou bem número. É importante definir o tipo de dados da forma mais precisa possível.
Observe, a seguir, uma lista dos tipos de dados:
Tipo de dado Definição Tamanho
CHR Texto ou combinação de texto e número. Pode-se também ser empregado para números não usados em cálculos (por exemplo: número de telefone).
Até 255 caracteres - ou o comprimento definido em "Length"
TEXT Textos longos ou combinação de textos e números. Até 65.535 caracteres.
INT Dados numéricos para cálculos matemáticos. 4 bytes.
DATE Datas no formato YYYY-MM-DD 3 bytes.
TIME Horas no formato hh:mm:ss 3 bytes.
DATETIME Data/hora no formato YYYY-MM-DD hh:mm:ss 8 bytes.
Comandos SQL com aspas e barras
Se, em um comando SQL, você tentar inserir texto contendo aspas simples ('), aspas duplas (") ou barra invertida (\), o registro não será inserido. A solução é usar barra invertida (\) antes destes caracteres nos comandos SQL.
Isto pode ser feito com uso da função addslashes como mostrado a seguir: <?php
$strText = "Seu nome é O'Reilly?";
$strText = addslashes($strText);
?>
Então, usando esta função todo caractere ('), (") e (\) será acrescido automaticamente de uma
barra invertida (\) no seu início. Esta barra extra é necessária apenas para possibilitar a inserção do dado no Banco de Dados. É importante ressaltar que o PHP realiza por padrão o addslashes em todos os dados obtidos via $_GET, $_POST e $_COOKIE. Assim, não há necessidade de usar addslashes em strings que já tenham sido "escapadas" (com barra invertida).
Na próxima lição estudaremos como extrair dados de um Banco de Dados. Mas, antes de seguir tente inserir mis pessoas no Banco de Dados (tal como mostramos no exemplo para a pessoa Gus Goose).
Lição 20c: Extraindo dados de um Banco de Dados
Chegou a hora de extrairmos dados de um Extraindo dados de um Banco de Dados. Esta é, sem duvida, uma das mais importantes lições deste tutorial. Uma vez que você tenha entendido esta lição você saberá por que um site baseado em Banco de Dados pode tornar-se tão poderoso e sua visão de desenvolvedor certamente vai se expandir-se drasticamente.
Consultas SQL
Para extrair dados de um Banco de Dados usamos queries (consultas) SQL. Um exemplo de query é: "extraia todos os dados da tabela 'people' ordenados alfabeticamente" ou "extraia os nomes contidos na tabela 'people'".
Repetimos: Structured Query Language (SQL) é usada para estabelecer comunicação com o Banco de Dados. Observe o exemplo a seguir:
Extrair todos os dados da tabela 'people'
O comando SQL é assim: SELECT * FROM people
A sintaxe é auto explicativa. Leia e conclua sobre os comandos mostrados a seguir.
Exemplo 1: Extrair dados de uma tabela
Este exemplo usa o Banco de Dados e Tabela mostrados na Lições 19 e na Lição 18. Portanto,
leia aquelas lições antes de prosseguir. O exemplo mostra como extrair dadis da tabela "people" com uso de consulta SQL.
SQL query retorna o resultado em forma de uma série de registros. Estes registros são armazenados em um conjunto de registros denominadorecordset. Um recordset pode ser definido como uma esécie de tabela na memória do servidor contendo linhas de dados (registros) no qual cada registro é subdividido em campos individuais (ou colunas).
Um recordset pode ser comparado a uma tabela na qual cada registro pode ser comparado a uma linha de tabela. Usando PHP podemos percorrer um recordset com um loop usando a função mysql_fetch_array que retorna um array de linhas.
O código a seguir mostra o uso de mysql_fetch_array para construir um loop pelo recordset: <html>
<head>
<title>Extraindo dados de um Banco de Dados</title>
</head>
<body>
<?php
// Conexão com o Banco de Dados
mysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Seleciona o Banco de Dados
mysql_select_db("mydatabase") or die(mysql_error());
//query SQL
$strSQL = "SELECT * FROM people";
// Executa a query (o recordset $rs contém o resultado da query)
$rs = mysql_query($strSQL);
// Loop pelo recordset $rs
// Cada linha vai para um array ($row) usando mysql_fetch_array
while($row = mysql_fetch_array($rs)) {
// Escreve o valor da coluna FirstName (que está no array $row)
echo $row['FirstName'] . "<br />";
}
// Encerra a conexão
mysql_close();
?>
</body>
</html>
Ver o resultado do exemplo
Notar que para cada registro extraimos o conteúdo da coluna "FirstName" com
$row['FirstName']. De modo semelhante podemos extrair o conteúdo da coluna "Phone" bcom $row['Phone'], por exemplo.
A ordem de saída dos recordset é a mesma que ele ocupa na tabela do Banco de Dados. No exemplo a seguir veremos como controlar a ordem de saída dos recordset.
Exemplo 2: Ordem de saída alfabética, cronológica ou númerica.
Não raro é interessante colocar a saída dos registros em uma ordem alfabética, cronológica ou númerica. Isto é fácil de fazer com SQL no qual a sintaxe Order By ColumnName é usada para realizar o ordenamento.
Observe o comando SQL do exemplo anterior: strSQL = "SELECT * FROM people"
Os registros podem, por exemplo, serem ordenados em ordem alfabética pelo primeiro nome
das pessoas, como mostrado a seguir: strSQL = "SELECT * FROM people ORDER BY FirstName"
Ou cronologicamente pela data de aniversário: strSQL = "SELECT * FROM people ORDER BY BirthDate"
A ordenação pode ser alterada de ascending (ordem ascendente) para descending (ordem descendente) com uso de DESC: strSQL = "SELECT * FROM people ORDER BY BirthDate DESC"
No exemplo a seguir as pessoas são ordenadas por idade: <html>
<head>
<title>Extraindo dados de um Banco de Dados</title>
</head>
<body>
<?php
// Conecta com o Banco de Dados
mysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Seleciona o Banco de Dados
mysql_select_db("mydatabase") or die(mysql_error());
// query SQL
$strSQL = "SELECT * FROM people ORDER BY BirthDate DESC";
// Executa a query (o recordset $rs contém o resultado da query)
$rs = mysql_query($strSQL);
// Loop pelo recordset $rs
while($row = mysql_fetch_array($rs)) {
// Escreve o valor da coluna FirstName e BirthDate
echo $row['FirstName'] . " " . $row['BirthDate'] . "<br />";
}
// Encerra a conexão
mysql_close();
?>
</body>
</html>
Ver o resultado do exemplo
Como exercício construa a query SQL para ordenação pelo primeiro nome, último nome,
número de telefone.
Extrair dados segundo uma condição
Até aqui nossas consultas SQL extraíram todas as linhas de uma tabela. Mas, é comum a necessidade de extração de certas linhas da tabela que atendam a uma determinada condição como, por exemplo, a linha contendo um determinado telefone ou nome.
Suponha que se deseje extrair informações sobre a pessoa cujo telefone é "66554433". Isto se faz conforme mostrado a seguir: strSQL = "SELECT * FROM people WHERE Phone = '66554433 '"
Existem seis operadores relacionais na linguagem SQL:
= Igual < Menor que > Maior que <= Menos que / igual > = Maior que/igual != Diferente
Há também, na linguagem, alguns operadores lógicos:
AND (E) OR (OU) NOT (NÃO)
Ver Lição 6 para mais informações sobre operadores lógicos. No exemplo a seguir usaremos condicionais para criar um catálogo de endereços.
Exemplo 3: Catálogo de endereços
Neste exemplo usaremos muitos dos conceitos que você já aprendeu neste tutorial. Construiremos uma lista de nomes de pessoas extraídos do Banco de Dados na qual cada nome é um link cujo destino é um documento com maiores informações sobre a pessoa.
Vamos precisar de dois arquivos - list.php e person.php - com o seguinte código:
Código para o arquivo list.php <html>
<head>
<title>Extraindo dados de um Banco de Dados</title>
</head>
<body>
<ul>
<?php
// Conectar com o Banco de Dados
mysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Selecionar o Banco de Dados
mysql_select_db("mydatabase") or die(mysql_error());
// query SQL
$strSQL = "SELECT * FROM people ORDER BY FirstName DESC";
// Executar a query (o recordset $rs contém o resultado da query)
$rs = mysql_query($strSQL);
// Loop pelo recordset $rs
while($row = mysql_fetch_array($rs)) {
// Nome da pessoa
$strName = $row['FirstName'] . " " . $row['LastName'];
// Cria link para o arquivo person.php com um valor de id no URL
$strLink = "<a href = 'person.php?id = " . $row['id'] . "'>" .
$strNavn . "</a>";
// Lista de links
echo "<li>" . $strLink . "</li>";
}
// Encerra conexão
mysql_close();
?>
</ul>
</body>
</html>
Código para o arquivo person.php <html>
<head>
<title>Extraindo dados de um Banco de Dados</title>
</head>
<body>
<dl>
<?php
// Conectar com o Banco de Dados
mysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Selecionar o Banco de Dados
mysql_select_db("mydatabase") or die(mysql_error());
// Extrair dados de acordo com o id passado no URL
$strSQL = "SELECT * FROM people WHERE id=" . $_GET["id"];
$rs = mysql_query($strSQL);
// Loop pelo recordset $rs
while($row = mysql_fetch_array($rs)) {
// Escreve dados da pessoa
echo "<dt>Nome:</dt><dd>" . $row["FirstName"] . " " .
$row["LastName"] . "</dd>";
echo "<dt>Telefone:</dt><dd>" . $row["Phone"] . "</dd>";
echo "<dt>Data de nascimento:</dt><dd>" . $row["BirthDate"] .
"</dd>";
}
// Encerra conexão
mysql_close();
?>
</dl>
<p><a href="list.php">Voltar à lista de nomes</a></p>
</body>
</html>
Ver exemplo
O catálogo de endereços é bem simples, mas bem demonstra o potencial de desenvolvimento
com PHP e Banco de Dados. Imagine um Banco de Dados com 10.000 produtos e respectivas informações devidamente cadastradas. Fazendo algumas simples adaptações nos arquivos do exemplo mostrado você poderá montar, com facilidade, um catálogo de produtos com mais de 10.000 páginas usando apenas um Banco de Dados e dois arquivos PHP.
Bem-vindo ao maravilhoso mundo dos sites extensíveis, fáceis de construir e manutenir! Depois que você aprende a trabalhar com Banco de Dados suas soluções web nunca mais serão as mesmas.
Lição 21c: Apagando dados de um Banco de Dados
Nas duas lições anteriores você aprendeu a inserir e extrair dados de um Banco de Dados. Nesta lição estudaremos como apagar dados de Um Banco de Dados, tarefa que é bem mais simples do que inserir dados.
Apagando dados com SQL
A sintaxe SQL para apagar dados é: DELETE FROM TableName WHERE condition
Exemplo: Apagar um dado
Para apagar um dado você pode usar o campo identificador único (AutoNumber) da tabela correspondente. Na tabela do nosso Banco de Dados é a coluna denominada id. Usar o identificador único garante que apenas uma linha de dados será apagada. No exemplo a seguir apagamos a linha com o identificador cujo valor é 24: <html>
<head>
<title>Apaga dado em um Banco de Dados</title>
</head>
<body>
<?php
// Conectar com o Banco de Dados
mysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Selecionar o Banco de Dados
mysql_select_db("mydatabase") or die(mysql_error());
// SQL para apagar registro
$strSQL = "DELETE FROM people WHERE id = 24";
mysql_query($strSQL);
// Fechar conexão com Banco de Dados
mysql_close();
?>
<h1>Registro apagado!</h1>
</body>
</html>
Lembre-se que não existe uma pasta "Lixeira" quando se trabalha com PHP e Banco de Dados.
Se você apagar um dado não terá como recuperá-lo posteriormente.
Lição 22c: Atualizando dados em um Banco de Dados
Em lições anteriores você aprendeu a inserir, requisitar e apagar dados de um Banco de Dados. Nesta lição estudaremos como atualizar os dados de um Banco de Dados, ou seja, editar os valores dos campos de uma tabela do Banco de Dados.
Atualizando dados com SQL A sintaxe SQL para atualizar dados em um campo de uma tabela é mostrada as seguir:
UPDATE TableName SET TableColumn='value' WHERE condition
É possível atualizar vários campos ds tabela de uma só vez como mostrado a seguir: UPDATE TableName SET TableColumn1='value1', TableColumn2='value2'
WHERE condition
Com os conhecimentos adquiridos nas lições 19, 20 e 21 ficou bem mais fácil entender como funciona a sintaxe mostrada. Vejamos um exemplo.
Exemplo: Atualizando campos da tabela "people"
O código a seguir faz a atualização do campo "FirstName" (primeiro nome) de Donald Duck's para D. e altera o campo "Phone" (número do telefone) para 44444444. As outras informações (last name (último nome) e birthdate (data de aniversário)) não serão alteradas. Você pode tentar alterar os dados das outras pessoas escrevendo seus próprios comandos SQL. <html>
<head>
<title>Update data in database</title>
</head>
<body>
<?php
// Conecta com o Banco de Dados
mysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Seleciona o com o Banco de Dados
mysql_select_db("mydatabase") or die(mysql_error());
// Constrói a consulta SQL
$strSQL = "Update people set ";
$strSQL = $strSQL . "FirstName= 'D.', ";
$strSQL = $strSQL . "Phone= '44444444' ";
$strSQL = $strSQL . "Where id = 22";
// Executa a consulta
mysql_query($strSQL);
// Encerra a conexão
mysql_close();
?>
<h1>O Banco de Dados foi atualizado!</h1>
</body>
</html>
Este exemplo completa as lições sobre Banco de Dados. Você aprendeu a usar PHP para inserir,
requisitar, apagar e atualizar dados em um Banco de Dados. Assim, você está habilitado a criar soluções web dinâmica e avançadas nas quais o usuário será capaz de manutenir e atualizar dados em um Banco de Dados, usando formulários.
Se você quiser visitar uma aplicação sofisticada demonstrando o que pode ser feito com PHP e Banco de Dados torne-se nosso parceiro. É gratuito e tomará apenas 1 minuto do seu tempo para a
realização do seu registro. Você poderá entre outras coisas gerenciar seu perfil usando formulários. Talvez você até colha algumas ideias para empregar no seu site.
Aqui terminamos nosso tutorial. PHP nos fornece muitas funcionalidades para adicionar interatividade em um site. O único limite é a sua imaginação. Divirta-se!
Alguns termos vistos
Segue uma descrição breve sobre os termos vistos no capítulo PHP. Nesse capítulo apresentaremos uma breve descrição dos mesmo e possíveis exemplo. Para uma
descrição mais aprofundada será necessário visitar os sites dos respectivos links apresentado no capítulo Links de Referência, ou uma leitura mais aprofundada sobre os mesmos (através de livros ou outros sites).
Algumas partes desse capítulo estão em inglês, isso foi feito para que não houvesse erro de tradução, uma vez que tais trechos não estão devidamente traduzidos no site de origem. Por esse motivo, foi preferido mantê-los dessa forma, evitando conflitos em um assunto já carregado do desafios como a programação (no modo geral).
$_COOKIES (Variáveis COOKIES) $HTTP_COOKIE_VARS [obsoleta] $_COOKIE -- $HTTP_COOKIE_VARS [obsoleta] — HTTP Cookies
Um array associativo de variáveis passadas para o atual script via HTTP Cookies. $HTTP_COOKIE_VARS contém a mesma informação inicial, mas não é uma superglobal.
(Note que $HTTP_COOKIE_VARS e $_COOKIE são variáveis diferentes e que o PHP manuseia-as diferentemente) Exemplo #1 Exemplo da $_COOKIE
<?php echo 'Hello ' . htmlspecialchars($_COOKIE["name"]) . '!'; ?>
Assumindo que o "nome" do cookie tenha sido definido antes O exemplo acima irá imprimir algo similar à:
Hello Hannes!
Nota: Esta é uma 'superglobal', ou global automática, variável. Isto simplismente significa que ela está disponível em todos os escopos pelo script. Não há necessidade de fazer global $variable; para acessá-la dentro de uma função ou método.
$_GET (Variável GET) $_GET $HTTP_GET_VARS [obsoleta] $_GET -- $HTTP_GET_VARS [obsoleta] — HTTP GET variáveis
Um array associativo de variáveis passadas para o script atual via o método
HTTP GET. $HTTP_GET_VARS contém a mesma informação inicial, mas não é uma superglobal. (Note que $HTTP_GET_VARS e $_GET são variáveis diferentes e que o PHP manuseia-as diferentemente). Exemplo #1 Exemplo da $_GET
<?php
echo 'Hello ' . htmlspecialchars($_GET["name"]) . '!';
?>
Assumindo que o usuário entrou por http://example.com/?name=Hannes
O exemplo acima irá imprimir algo similar à:
Hello Hannes!
Nota:Esta é uma 'superglobal', ou global automática, variável. Isto simplismente significa que ela está disponível em todos os escopos pelo script. Não há necessidade de fazer global $variable; para acessá-la dentro de uma função ou método.
$_POST (Variável POST)
$_POST $HTTP_POST_VARS [deprecated] $_POST -- $HTTP_POST_VARS [deprecated] — HTTP POST variables
Um array associativo de variáveis passados para o script atual via método HTTP
POST. $HTTP_POST_VARS contém a mesma informação inicial, mas não é uma superglobal. (Note que $HTTP_POST_VARS e $_POST são variáveis diferentes e que o PHP manuseia-as diferentemente).
Exemplo #1 Exemplo da $_POST
<?php
echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
?>
Assumindo que o usuário tenha postado name=Hannes O exemplo acima irá imprimir algo similar à: Hello Hannes!
Nota:Esta é uma 'superglobal', ou global automática, variável. Isto simplismente significa que ela está disponível em todos os escopos pelo script. Não há necessidade de fazer global $variable; para acessá-la dentro de uma função ou método.
Addslashes (PHP 4, PHP 5)
Addslashes — Adiciona barras invertidas a uma string
string addslashes ( string $str )
Retorna uma string com barras invertidas antes de caracteres que precisam ser escapados para serem escapados em query a banco de dados, etc. Estes caracteres são aspas simples ('), aspas duplas ("), barra invertida (\) e NUL (o byte NULL).
Um exemplo do uso de addslashes() é quando você esta entrando com dados em um banco de dados. Por exemplo, para inserir o nome O'reilly em um banco de dados, você vai precisar escapa-lo. A maior parte dos banco de dados faz isto com \ o que nos
leva a O\'reilly. Isto é apenas para colocar os dados no banco de dados, a \ não será inserida. Tendo a diretiva do PHP magic_quotes_sybase em on fará com que ' seja escapada com outra '.
A diretiva do PHP magic_quotes_gpc é on por padrão, e ela essencialmente executa addslashes() para todos dados de GET, POST e COOKIE. Não use addslashes() em strings que já foram escapadas com magic_quotes_gpc já que você
acabara escapando duas vezes. A funçãoget_magic_quotes_gpc() pode dar uma mão para conferir isto.
Parâmetros: A string a ser adicionado escape. Valor Retornado: Retorna a string com escapes.
Exemplo #1 Exemplo da addslashes()
<?php
$str = "Seu nome é O'reilly?";
// Mostra: Seu nome é O\'reilly?
echo addslashes($str);
?>
Array (PHP 4, PHP 5)
Cria um array. Leia a seção sobre o tipo array para mais informação sobre o que é um array.
Parâmetros: A sintaxe "index => values", separados por vírgulas, definem índice e valores respectivamente. O índice por de ser do tipo string ou numérico. Quando o índice é omitido, um índice numérico inteiro é automaticamente gerado, começando do 0. Se o índice é um inteiro, o próximo índice a ser gerado será igual ao maior índice inteiro + 1. Note que quando dois índices idênticos são definidos, o último sobrescreve o primeiro. O exemplo a seguir demonstra como criar um array com duas dimensões, como especificar chaves em arrays associativos, e como definir índices numéricos em arrays normais. Tem uma vírgula após a última entrada definida da matriz, mesmo sendo incomum, é uma sintaxe válida. Valor Retornado: Retorna um array dos parâmetros. Os parâmetros podem ser dados com um índice com o operador =>. Leia a seção sobre o tipo array para mais informação sobre o que ele é. Exemplo #1 Exemplo de array()
<?php
$frutas = array (
"frutas" => array("a"=>"laranja", "b"=>"banana", "c"=>"maçã"),
"numeros" => array(1, 2, 3, 4, 5, 6),
"buracos" => array("primeiro", 5 => "segundo", "terceiro")
);
?>
Exemplo #2 Indexação automática com array()
<?php
$array = array(1, 1, 1, 1, 1, 8 => 1, 4 => 1, 19, 3 => 13);
print_r($array);
?>
O exemplo acima irá imprimir:
Array ( [0] => 1 [1] => 1 [2] => 1 [3] => 13
[4] => 1 [8] => 1 [9] => 19 )
Note que o índice 3 é definido duas vezes, e retêm seu último valor 13. O índice 4 é definido depois do índice 8, e o índice gerado depois dele foi 9, uma vez que o maior índice era 8. Esse exemplo cria um array com o índices a partir do 1. Exemplo #3 Array com índices a partir do 1 com array()
<?php
$firstquarter = array(1 => 'Janeiro', 'Fevereiro', 'Março');
print_r($firstquarter);
?>
O exemplo acima irá imprimir:
Array ( [1] => Janeiro [2] => Fevereiro [3] => Março )
Como no Perl, você pode acessar o valor de um array dentro de aspas. Entretanto, você terá que
colocar a sua array dentro de conchetes. Exemplo #4 Acessando uma matriz dentro de conchetes
<?php
$foo = array('bar' => 'baz');
echo "Hello {$foo['bar']}!"; // Hello baz!
?>
Nota: array() é um construtor da linguagem usado para representar arrays literais, e não um função normal.
closedir (PHP 4, PHP 5)
closedir — Fecha o manipulador do diretório void closedir ( resource $dir_handle )
Fecha o stream do diretório indicado por dir_handle. O stream deve ter sido previamente aberto por opendir(). Parâmetros: dir_handle O manipulador de diretório resource aberto com opendir(). Exemplo #1 Exemplo da closedir() <?php
$dir = "/etc/php5/";
// Open a known directory, read directory into variable and then close
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
$directory = readdir($dh);
closedir($dh);
}
}
?>
Date (PHP 4, PHP 5)
Date — Formata a data e a hora local String date ( string $format [, int $timestamp ] ) Retorna uma string de acordo com a string format dada usando o inteiro timestamp dado ou a hora atual local se nenhum timestamp é dado. Em outras palavras, timestamp é opcional e o padrão para o valor de time().
Parâmetros: format A string de formato da data a ser mostrada. Veja as opções de formatação abaixo.
Os seguintes caracteres são reconhecidos na string do parâmetro format Caractere de format
Descrição Exemplo de valores retornados
Day --- ---
d Dia do mês, 2 digitos com preenchimento de zero
01 até 31
D Uma representação textual de um dia, três letras
Mon até Sun
j Dia do mês sem preenchimento de zero 1 até 31
l ('L' minúsculo) A representação textual completa do dia da semana
Sunday até Saturday
N Representação numérica ISO-8601 do dia da semana (adicionado no PHP 5.1.0)
1 (para Segunda) até 7(para Domingo)
S Sufixo ordinal inglês para o dia do mês, 2 caracteres
st, nd, rd ou th. Funciona bem com j
w Representação numérica do dia da semana 0 (para domingo) até 6(para sábado)
z O dia do ano (começando do 0) 0 through 365
Semana --- ---
W Número do ano da semana ISO-8601, semanas começam na Segunda (adicionado no PHP 4.1.0)
Exemplo: 42 (the 42nd week in the year)
Mês --- ---
F Um representação completa de um mês, como January ou March
January atéDecember
m Representação numérica de um mês, com leading zeros
01 a 12
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
t Número de dias de um dado mês 28 through 31
Year --- ---
L Se está em um ano bissexto 1 se está em ano bissexto, 0 caso
contrário.
o Número do ano ISO-8601. Este tem o mesmo valor como Y, exceto que se o número da semana ISO (W) pertence ao anterior ou próximo ano, o ano é usado ao invés. (adicionado no PHP 5.1.0)
Exemplos: 1999 ou2003
Y Uma representação de ano completa, 4 dígitos
Exemplos: 1999 ou2003
y Uma representação do ano com dois dígitos
Exemplos: 99 ou 03
Tempo --- ---
a Antes/Depois de meio-dia em minúsculo am or pm
A Antes/Depois de meio-dia em maiúsculo AM or PM
B Swatch Internet time 000 até 999
g Formato 12-horas de uma hora sem preenchimento de zero
1 até 12
G Formato 24-horas de uma hora sem preenchimento de zero
0 até 23
h Formato 12-horas de uma hora com zero preenchendo à esquerda
01 até 12
H Formato 24-horas de uma hora com zero preenchendo à esquerda
00 até 23
i Minutos com zero preenchendo à esquerda 00 até 59
s Segundos, com zero preenchendo à esquerda
00 até 59
u Milisegundos (adicionado no PHP 5.2.2) Exemplo: 54321
Timezone --- ---
e Identificador de Timezone (adicionado no PHP 5.1.0)
Exemplos: UTC, GMT,Atlantic/Azores
I (capital i) Se a data está ou não no horário de verão 1 se horário de verão,0 caso contrário.
O Diferença para Greenwich time (GMT) em horas
Exemplo: +0200
P Diferença para Greenwich time (GMT) com dois pontos entre horas e minutos (adicionado no PHP 5.1.3)
Exemplo: +02:00
T Abreviação de Timezone Exemplos: EST, MDT...
Z Timezone offset in seconds. The offset for timezones west of UTC is always negative, and for those east of UTC is always positive.
-43200 até 50400
Full Date/Time --- ---
c ISO 8601 date (adicionado no PHP 5) 2004-02-12T15:19:21+00:00
r » RFC 2822 formatted date Exemplo: Thu, 21 Dec 2000 16:01:07 +0200
U Segundos desde a Época Unix (January 1 1970 00:00:00 GMT)
Veja também time()
Caracteres não reconhecidos no formato de serão impressos como são. O formato Z será
sempre retornado 0 quando usar gmdate(). Nota: Desde que esta função aceita somente integer timestamps o caractere de formato u é somente útil quando usando a funçãodate_format() com um timestamp baseado pelo usuário criado com date_create().
timestamp
O parâmetro opcional timestamp é um integer Unix timestamp cujo padrão é a hora local se timestamp não for dado. Em outras palavras, o padrão é o valor de time().
Valor Retornado: Retorna um string da data formatada. Se um valor não numérico é usado para timestamp, FALSE é retornado e um erro de nível E_WARNING é emitido.
Erros: Toda a chamada a uma função de data/hora irá gerar um se a zona da hora não for valida, e/ou uma mensagem E_STRICT ou E_WARNING se estiver usando a definição do sistema ou a variável de ambiente TZ. Veja também date_default_timezone_set()
Changelog
Versão Descrição 5.1.0 O intervalo válido de um timestamp é tipicamente de Sex, 13 Dez 1901 20:45:54
GMT to Ter, 19 Jan 2038 03:14:07 GMT. (Estas são as datas que correspondem ao valor mínimo e máximo para um inteiro com sinal de 32-bit). Contudo, antes do PHP 5.1.0 este intervalo foi limitado de 01-01-1970 para 19-01-2038 em alguns sistemas (e.g. Windows).
5.1.0 Agora emite E_STRICT e E_NOTICE em erros da zona de horário.
5.1.1 Há constantes útils do padrão de formato de data/hora que podem ser usados para especificar o parâmetro format.
Exemplo #1 Exemplos da date()
<?php
// Modifica a zona de tempo a ser utilizada. Disnovível desde o PHP 5.1
date_default_timezone_set('UTC');
// Exibe alguma coisa como: Monday
echo date("l");
// Exibe alguma coisa como: Monday 8th of August 2005 03:12:46 PM
echo date('l jS \of F Y h:i:s A');
// Exibe: July 1, 2000 is on a Saturday
echo "July 1, 2000 is on a " . date("l", mktime(0, 0, 0, 7, 1, 2000));
/* utiliza as constantes do parâmetro de formato */
// Exibe alguma coisa como: Mon, 15 Aug 2005 15:12:46 UTC
echo date(DATE_RFC822);
// Exibe alguma coisa como: 2000-07-01T00:00:00+00:00
echo date(DATE_ATOM, mktime(0, 0, 0, 7, 1, 2000));
?>
Você pode prevenir um caracter conhecido no formato de string de um existente escapando-o com
uma barra invertida antes dele. Se o caracter com a barra invertida já é uma sequência especial, você pode precisar também escapar a barra invertida.
Exemplo #2 Caracteres de escape em date()
<?php
// exibe algo como: Wednesday the 15th
echo date("l \\t\h\e jS");
?>
É possível utilizar date() e mktime() juntos para encontrar datas no futuro ou no passado.
Exemplo #3 Exemplo da date() e mktime()
<?php
$tomorrow = mktime (0, 0, 0, date("m") , date("d")+1, date("Y"));
$lastmonth = mktime (0, 0, 0, date("m")-1, date("d"), date("Y"));
$nextyear = mktime (0, 0, 0, date("m"), date("d"), date("Y")+1);
?>
Nota: Esta pode ser mais confiável do que simplesmente adicionar ou subtrair o número de segundos em um dia ou mês para um timestamp devido ao horário de verão. Alguns exemplos de formatação de date(). Note que você poderia escapar qualquer outro caracter, como algum que atualmente tenha um significado especial produzirá resultados indesejáveis, e outros caracteres poderiam assumir significados em futuras versões do PHP. Quando usar escape, certifique o uso de aspas simples para evitar caracteres como \n próprio para novas linhas.
Exemplo #4 Formatação de date()
<?php
// Assumindo que hoje é: March 10th, 2001, 5:16:18 pm
$today = date("F j, Y, g:i a"); // March 10, 2001, 5:16 pm
$today = date("m.d.y"); // 03.10.01
$today = date("j, n, Y"); // 10, 3, 2001
$today = date("Ymd"); // 20010310
$today = date('h-i-s, j-m-y, it is w Day z '); // 05-16-17, 10-03-
01, 1631 1618 6 Fripm01
$today = date('\i\t \i\s \t\h\e jS \d\a\y.'); // It is the 10th day.
$today = date("D M j G:i:s T Y"); // Sat Mar 10 15:16:08 MST 2001
$today = date('H:m:s \m \i\s\ \m\o\n\t\h'); // 17:03:17 m is month
$today = date("H:i:s"); // 17:16:17
?>
Para formatar datas em outras línguas, você usaria as funções setlocale() e strftime() ao
invés de date(). Nota: Para gerar um timestamp de uma string da representação da data, você pode usar strtotime(). Adicionalmente, alguns banco de dados tem funções para converter os formatos de data para timestamps (como a função » UNIX_TIMESTAMP do MySQL). Dica: Timestamp do início da requisição está disponível na $_SERVER['REQUEST_TIME'] desde o PHP 5.1.
echo (PHP 4, PHP 5)
Echo — Exibe uma ou mais strings void echo ( string $arg1 [, string $... ] )
Exibe todos os parâmetros. Echo não é uma função atualmente (construtor da linguagem) então não é obrigatório usar
parênteses. echo (diferente de outro construtor da linguagem) não se comporta como uma função, então ele nem sempre é usado no contexto de uma função. Sendo assim, se você quer passar mais de um
parâmetro para echo, os parâmetros não precisam estar entre parênteses.
echo também tem um sintaxe curta, onde você pode imediatamente abrir a tag com o sinal de igual. Esta
sintaxe curta funciona habilitando a definição da configuração short_open_tag.
I have <?=$foo?> foo.
Parâmetros: arg1 O parâmetro a exibir. ... Valor Retornado: Não há valor retornado.
Exemplo #1 echo exemplos <?php
echo "Hello World";
echo "This spans
multiple lines. The newlines will be
output as well";
echo "This spans\nmultiple lines. The newlines will be\noutput as well.";
echo "Escaping characters is done \"Like this\".";
// You can use variables inside of an echo statement
$foo = "foobar";
$bar = "barbaz";
echo "foo is $foo"; // foo is foobar
// You can also use arrays
$baz = array("value" => "foo");
echo "this is {$baz['value']} !"; // this is foo !
// Using single quotes will print the variable name, not the value
echo 'foo is $foo'; // foo is $foo
// If you are not using any other characters, you can just echo variables
echo $foo; // foobar
echo $foo,$bar; // foobarbarbaz
// Some people prefer passing multiple parameters to echo over concatenation.
echo 'This ', 'string ', 'was ', 'made ', 'with multiple parameters.', chr(10);
echo 'This ' . 'string ' . 'was ' . 'made ' . 'with concatenation.' . "\n";
echo <<<END
This uses the "here document" syntax to output
multiple lines with $variable interpolation. Note
that the here document terminator must appear on a
line with just a semicolon. no extra whitespace!
END;
// Because echo does not behave like a function, the following code is invalid.
($some_var) ? echo 'true' : echo 'false';
// However, the following examples will work:
($some_var) ? print 'true' : print 'false'; // print is also a construct, but
// it behaves like a function, so
// it may be used in this context.
echo $some_var ? 'true': 'false'; // changing the statement around
?>
Nota: Este é um construtor de linguagem e não uma função, por isso não é possível chamá-lo através de funções variáveis Veja Também print - Mostra uma string printf() - Mostra uma string formatada flush() - Descarrega o buffer de saída
Else (PHP 4, PHP 5)
Often you'd want to execute a statement if a certain condition is met, and a different statement if the condition is not met. This is what else is for. elseextends an if statement to execute a statement in case the expression in the if statement evaluates to FALSE. For example, the following code would display a is greater than b if $a is greater than $b, and a is NOT greater than
b otherwise: <?php
if ($a > $b) {
echo "a is greater than b";
} else {
echo "a is NOT greater than b";
}
?>
The else statement is only executed if the if expression evaluated to FALSE, and if there were any elseif expressions - only if they evaluated to FALSE as well (see elseif).
elseif/else If (PHP 4, PHP 5) elseif, as its name suggests, is a combination of if and else. Like else, it extends an if statement to execute a different statement in case the original ifexpression evaluates to FALSE. However, unlike else, it will execute that alternative expression only if the elseif conditional expression evaluates to TRUE. For example, the following code would display a is bigger than b, a equal to
b or a is smaller than b: <?php
if ($a > $b) {
echo "a is bigger than b";
} elseif ($a == $b) {
echo "a is equal to b";
} else {
echo "a is smaller than b";
}
?>
There may be several elseifs within the same if statement. The first elseif expression (if
any) that evaluates to TRUE would be executed. In PHP, you can also write 'else if' (in two words) and the behavior would be identical to the one of 'elseif' (in a single word). The syntactic meaning is slightly different (if you're familiar with C, this is the same behavior) but the bottom line is that both would result in exactly the same behavior.
The elseif statement is only executed if the preceding if expression and any preceding elseif expressions evaluated to FALSE, and the current elseif expression evaluated to TRUE. Nota: Note that elseif and else if will only be considered exactly the same when using curly brackets as in the above example. When using a colon to define your if/elseif conditions, you must not separate else if into two words, or PHP will fail with a parse error. <?php
/* Incorrect Method: */
if($a > $b):
echo $a." is greater than ".$b;
else if($a == $b): // Will not compile.
echo "The above line causes a parse error.";
endif;
/* Correct Method: */
if($a > $b):
echo $a." is greater than ".$b;
elseif($a == $b): // Note the combination of the words.
echo $a." equals ".$b;
else:
echo $a." is neither greater than or equal to ".$b;
endif;
?>
Explode
(PHP 4, PHP 5) explode — Divide uma string em strings
Valor Retornado: array explode ( string $delimiter , string $string [, int $limit ] ) Retorna uma matriz de strings, cada uma como substring de string formada pela divisão dela a partir do delimiter.
Parâmetros
delimiter- O delimitador.
String - A string de entrada.
Limit - Se limit é definido, o array retornado irá conter o máximo de elementos igual a limit com o último elemento contendo o resto da string.
Se o parâmetro limit é negativo, todos componentes exceto o último -limit são retornados.
Ainda que implode() pode por razões históricas aceitar seus parâmetros em uma das duas ordens, explode() não pode. Você deve assegurar que o argumento delimiter vem antes do argumento string.
Se delimiter é uma string vazia (""), explode() irá retornar FALSE. Se delimiter contém um valor que não contém em string, então explode() irá retornar um array contendo string. Changelog
Versão Descrição 5.1.0 Suporte a limit negativo foi
adicionado 4.0.1 O parâmetro limit foi adicionado
Exemplo #1 explode() exemplos
<?php
// Example 1
$pizza = "piece1 piece2 piece3 piece4 piece5 piece6";
$pieces = explode(" ", $pizza);
echo $pieces[0]; // piece1
echo $pieces[1]; // piece2
// Example 2
$data = "foo:*:1023:1000::/home/foo:/bin/sh";
list($user, $pass, $uid, $gid, $gecos, $home, $shell) = explode(":", $data);
echo $user; // foo
echo $pass; // *
?>
Exemplo #2 Exemplos de parâmetro limit <?php
$str = 'one|two|three|four';
// positive limit
print_r(explode('|', $str, 2));
// negative limit (since PHP 5.1)
print_r(explode('|', $str, -1));
?>
O exemplo acima irá imprimir:
Array ( [0] => one [1] => two|three|four ) Array ( [0] => one [1] => two [2] => three )
Nota: Esta função é binary-safe.
Feof (PHP 4, PHP 5) feof — Testa pelo fim-de-arquivo (eof) em um ponteiro de arquivo bool feof ( resource $handle ) Testa pelo fim-do-arquivo em um ponteiro de arquivo.
Parâmetros – handle:The file pointer must be valid, and must point to a file successfully opened by fopen() or fsockopen() (and not yet closed by fclose()).
Valor Retornado: Retorna TRUE se o ponteiro estiver no fim do arquivo (eof) ou um erro ocorrer (incluindo um limite de tempo de socket). Caso contrário retorna FALSE. Aviso: Se uma conexão aberta por fsockopen() não foi fechada pelo servidor, feof() irá esperar até que seja atingido o limite de tempo para retornar TRUE. O limite de tempo padrão é 60 segundos. Você pode usar stream_set_timeout() para mudar este valor. Aviso: Se o ponteiro de arquivo passado não for valido você pode ter um loop infinito, porque EOF irá falhar em retornar TRUE. Exemplo #1 Exemplo de feof() com um ponteiro de arquivo inválido
<?php
// se o arquivo não pode ser lido ou nao existe a função fopen retorna FALSE
$file = @fopen("no_such_file", "r");
// FALSE a partir do fopen irá causar um warning(aviso) e resultar em um loop infinit
o aqui
while (!feof($file)) {
}
fclose($file);
?>
Fgets
fgets
(PHP 4, PHP 5) fgets — Lê uma linha de um ponteiro de arquivo String fgets (resource $handle [, int $length ] ) Retorna uma linha do ponteiro do arquivo.
Parâmetros
Handle- The file pointer must be valid, and must point to a file successfully opened by fopen() or fsockopen() (and not yet closed by fclose()).
Length- A leitura termina quando length - 1 bytes tenham sido lidos, em uma quebra de linha (que é incluída no retorno), ou no final do arquivo (EOF), o que acontecer primeiro. Se nenhum comprimento for especificado, a leitura do stream continuará até chegar ao final da linha.
Nota: Até o PHP 4.3.0, era assumido 1024 como o comprimento da linha, quando omitido. Se a maioria das linhas no arquivo for maior que 8KB, é mais eficiente para seu script especificar o comprimento máximo de linha.
Valor Retornado: Retorna uma string de até length - 1 bytes lida do arquivo apontado por handle. Se um erro ocorrer, retorna FALSE. Changelog
Versão Descrição 4.3.0 fgets() passou a ser segura para binários 4.2.0 O parâmetro length tornou-se opcional Exemplo #1 Lendo um arquivo linha por linha <?php
$handle = @fopen("/tmp/arquivodeentrada.txt", "r");
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
echo $buffer;
}
fclose($handle);
}
?>
Nota: Se PHP não está apropriadamente reconhecendo o final de linha quando lendo arquivos ou criando por um computador Macintosh, habilitando a
opção auto_detect_line_endings em tempo de execução pode ajudar a resolver o problema.
Nota²:Pessoas acostumadas à semântica do fgets em 'C' devem notar a diferença em como o fim do arquivo (EOF) é retornado.
Fileatime (PHP 4, PHP 5) fileatime — Obtém o último horário de acesso do arquivo int fileatime ( string $nomedoarquivo ) Obtém o último horário de acesso de um dado arquivo.
Parâmetros – filename:caminho para o arquivo.
Valor Retornado: Retorna o tempo que o arquivo foi acessado pela última vez, ou FALSE em caso de erro. O tempo é retornado como um timestamp Unix. Exemplo #1 Exemplo de fileatime() <?php
// Exibe algo como: arquivo.txt teve o ultimo acesso em: December 29 2002 22:16:23.
$filename = 'arquivo.txt';
if (file_exists($filename)) {
echo "$filename teve o ultimo acesso em: " . date ("F d Y H:i:s.", fileatime($fil
ename));
}
?>
Nota:O atime de um arquivo é modificado sempre que blocos de dados de um arquivo são lidos. Isto pode ser performance custosa quando uma aplicação regularmente acessa um grande número de arquivos ou diretórios. Alguns sistemas de arquivos Unix podem ser montados com atualização de atime desabilitada para aumentar a peformance de cada aplicação; USENET news spools é um exemplo comum. Nestes sistemas de arquivos esta função é inútil.
Nota²: Os resultados desta função são cacheados. Veja clearstatcache() para mais detalhes.
Dica: A partir do PHP 5.0.0, esta função também pode ser utilizada com alguns wrappers URL. Veja Supported Protocols and Wrappers para uma lista de quais wrappers são suportados pela família de funções stat().
Filemtime (PHP 4, PHP 5) filemtime — Obtém o tempo de modificação do arquivo int filemtime ( string $nomedoarquivo ) Esta função retorna o tempo quando o bloco de informação de um arquivo foi inicialmente escrito, isto é, o tempo quando o conteúdo do arquivo foi modificado. Parâmetros – filenam: Caminho para o arquivo.
Valor Retornado: Retorna o tempo da última modificação do arquivo, ou FALSE em caso de um erro. O tempo é retornado como um Unix timestamp, que é apropriado para função date(). Exemplo #1 Exemplo da filemtime() <?php
// exibe algo como: arquivo.txt foi modificado em December 29 2002 22:16:23.
$filename = 'arquivo.txt';
if (file_exists($filename)) {
echo "$filename foi modificado em " . date ("F d Y H:i:s.", filemtime($filename))
;
}
?>
Nota: Os resultados desta função são cacheados. Veja clearstatcache() para mais detalhes.
Dica: A partir do PHP 5.0.0, esta função também pode ser utilizada com alguns wrappers URL. Veja Supported Protocols and Wrappers para uma lista de quais wrappers são suportados pela família de funções stat().
Filesize (PHP 4, PHP 5) filesize — Lê o tamanho do arquivo int filesize ( string $filename ) Obtém o tamanho do dado arquivo. Parâmetros – filenam: Caminho para o arquivo. Valor Retornado: Retorna o tamanho do arquivo em bytes, ou FALSE (e gera um erro de nível E_WARNING) no caso de um erro. Nota: Como o tipo inteiro do PHP é sinalizado e muitas plataformas utilizam inteiros de 32 bits, filesize() pode retornar resultados inesperados para arquivos que sejam maiores que 2 Gb. Para arquivos entre 2 Gb e 4 Gb você pode resolver esse problema utilizando sprintf("%u", filesize($file)). Exemplo #1 Exemplo de filesize() <?php
// Exibe algo como: arquivo.txt: 1024 bytes
$filename = 'arquivo.txt';
echo $filename . ': ' . filesize($filename) . ' bytes';
?>
Nota: Os resultados desta função são cacheados. Veja clearstatcache() para mais detalhes.
Dica: A partir do PHP 5.0.0, esta função também pode ser utilizada com alguns wrappers URL. Veja Supported Protocols and Wrappers para uma lista de quais wrappers são suportados pela família de funções stat().
Fopen (PHP 4, PHP 5) fopen — Abre um arquivo ou URL resource fopen ( string $filename , string $mode [, bool $use_include_path [, resource $con
text ]] ) fopen() conecta um recurso nomeado, especificado por filename, a um stream.
Parâmetros – filename: Se filename estiver na forma de "scheme://...", é assumido que seja uma URL, e o PHP buscará por um manipulador de protocolo (também conhecido como wrapper) para aquele scheme. Se nenhum wrapper para aquele protocolo estiver registrado, o PHP emitirá um aviso para ajudá-lo a rastrear potenciais problemas no seu script, e então continuará presumindo que filename especifica um nome de arquivo. Se o PHP decidiu que filename se refere a um arquivo local, então ele tentará abrir um stream para aquele arquivo. O arquivo precisa ser acessível pelo PHP, então você precisa assegurar que as permissões de acesso do arquivo permitem este acesso. Se você tiver ativado safe mode ou open_basedir, outras restrições podem se aplicar. Se o PHP decidiu que filename se refere a um protocolo registrado e esse protocolo estiver registrado como um protocolo de rede, o PHP irá verificar para ter certeza que allow_url_fopen está ativado. Se estiver desligado, o PHP emitirá um alerta e a chamada ao fopen irá falhar. Nota: A lista de protocolos suportados pode ser encontrada em Supported Protocols and Wrappers. Alguns protocolos (também mencionados como wrappers) suportam context e/ou opções do php.ini. Recorra à página específica do protocolo em uso para uma lista das opções que podem ser definidas. (ex.: o valor php.ini user_agent utilizado pelo wrapper http). Na plataforma Windows, tenha cuidado de escapar qualquer barra invertida usada no caminho do arquivo, ou use barras normais.
<?php $handle = fopen("c:\\data\\info.txt", "r"); ?>
mode
O parâmetro mode especifica o tipo de acesso que você precisa ao stream. Pode ser um dos seguintes:
Lista dos possíveis modos de fopen() utilizando mode mode Descrição 'r' Abre somente para leitura; coloca o ponteiro do arquivo no começo do arquivo. 'r+' Abre para leitura e escrita; coloca o ponteiro do arquivo no começo do arquivo. 'w' Abre somente para escrita; coloca o ponteiro do arquivo no começo do arquivo e reduz o
comprimento do arquivo para zero. Se o arquivo não existir, tenta criá-lo. 'w+' Abre para leitura e escrita; coloca o ponteiro do arquivo no começo do arquivo e reduz o
comprimento do arquivo para zero. Se o arquivo não existir, tenta criá-lo. 'a' Abre somente para escrita; coloca o ponteiro do arquivo no final do arquivo. Se o arquivo não
existir, tenta criá-lo. 'a+' Abre para leitura e escrita; coloca o ponteiro do arquivo no final do arquivo. Se o arquivo não
existir, tenta criá-lo.
'x' Cria e abre o arquivo somente para escrita; coloca o ponteiro no começo do arquivo. Se o arquivo já existir, a chamada a fopen()falhará, retornando FALSE e gerando um erro de nível E_WARNING. Se o arquivo não existir, tenta criá-lo. Isto é equivalente a especificar as flags O_EXCL|O_CREAT para a chamada de sistema open(2).
'x+' Cria e abre o arquivo para leitura e escrita; coloca o ponteiro no começo do arquivo. Se o arquivo já existir, a chamada a fopen()falhará, retornando FALSE e gerando um erro de nível E_WARNING. Se o arquivo não existir, tenta criá-lo. Isto é equivalente a especificar as flags O_EXCL|O_CREAT para a chamada de sistema open(2).
Nota: Famílias de sistemas operacionais diferentes têm convenções de delimitação de linhas diferentes. Quando você escreve um arquivo texto e quer inserir uma quebra de linha, você precisa utilizar o(s) caractere(s) de fim de linha adequado(s) ao seu sistema operacional. Sistemas baseados no Unix utilizam \n como caractere de final de linha, sistemas baseados no Windows utilizam \r\n e sistemas baseados no Macintosh utilizam \r.
Se escrever caracteres de fim de linha inadequados em seus arquivos, eles deverão "parecer engraçados" quando você os abrir em outras aplicações.
O Windows oferece uma flag de tradução do modo texto ('t') que traduz, transparentemente, \n para \r\n quando trabalhando no arquivo. Em contraste, você também pode utilizar 'b' para forçar o modo binário, que não irá traduzir o arquivo. Para usar essas flags, informe ou 'b' ou 't' como o último caractere no parâmetro mode.
O modo de tradução padrão depende da SAPI e da versão do PHP que você estiver usando, então você é encorajado a sempre utilizar a flag apropriada por razões de portabilidade. Você deve usar o modo 't' se estiver trabalhando em arquivos texto simples e utilizar \npara delimitar as linhas em seu script, de forma que você pode esperar que eles sejam lidos em outras aplicações como o Notepad. Você deve usar 'b' em todos os outros casos.
Se você não especificar a flag 'b' quando trabalhar com arquivos binários, você pode passar por problemas estranhos com seus dados, incluindo arquivos de imagens danificados e problemas estranhos com os caracteres \r\n. Nota²: Para portabilidade, é fortemente recomendado que você sempre utilize a flag 'b' quando abrir arquivos com fopen(). Nota³: Novamente para portabilidade, também é fortemente recomendado que você reescreva códigos que utilizem ou confiem no modo 't', de forma que passem a utilizar os fins de linha corretos e o modo 'b'.
use_include_path O terceiro parâmetro opcional use_include_path pode ser definido para '1' ou TRUE se você
quiser buscar o arquivo também no include_path.
context O suporte ao contexto foi adicionado no PHP 5.0.0. Para uma descrição de contextos,
veja Streams.
Valor Retornado: Retorna um recurso de ponteiro de arquivo em caso de sucesso, ou FALSE em caso de erro. Erros: Se a abertura falhar, um erro nível E_WARNING é gerado. Você pode utilizar @ para suprimir esse alerta.
Changelog
Versão Descrição
4.3.2 A partir do PHP 4.3.2, o modo padrão é definido para binário em todas as plataformas que distinguem entre modo texto e binário. Se você estiver tendo problemas com seus scripts depois de uma atualização, tente acrescentar a flag 't' como um paliativo até que você tenha tornado seus scripts portáveis como mencionado acima.
4.3.2 As opções 'x' e 'x+' foram adicionadas
Exemplo #1 Exemplos de fopen() <?php
$handle = fopen("/home/rasmus/file.txt", "r");
$handle = fopen("/home/rasmus/file.gif", "wb");
$handle = fopen("http://www.example.com/", "r");
$handle = fopen("ftp://user:[email protected]/somefile.txt", "w");
?>
Aviso Quando usando SSL, o Microsoft IIS irá violar o protocolo fechando a conexão sem enviar uma : notificação close_notify. O PHP acusará isso como sendo "SSL: Fatal Protocol Error" quando tentar ler os dados. Para prevenir isso, o valor de error_reportingdeve ser reduzido para um nível que não inclui avisos. para o nível que não emita warnings. O PHP 4.3.7 e seguintes conseguem detectar servidores IIS defeituosos quando você abre um stream utilizando o wrapper https:// e suprimirá os avisos. Se você está usando fsockopen() para criar um socket ssl://, a responsabilidade de detectar e suprimir esse aviso passa para você.
Nota: Quando o safe-mode está ativo, o PHP verifica se o diretório no qual o script está em operação tem o mesmo UID (proprietário) do script que está sendo executado. Se você está tendo problemas com a leitura e gravação para arquivos e você está usando a versão de módulo de servidor do PHP, lembre-se de que os arquivos e diretórios que você está usando precisam ser acessíveis ao processo do servidor HTTP.
For (PHP 4, PHP 5) for loops are the most complex loops in PHP. They behave like their C counterparts. The syntax of a for loop is: for (expr1; expr2; expr3) statement
The first expression (expr1) is evaluated (executed) once unconditionally at the beginning of the
loop. In the beginning of each iteration, expr2 is evaluated. If it evaluates to TRUE, the loop continues
and the nested statement(s) are executed. If it evaluates toFALSE, the execution of the loop ends. At the end of each iteration, expr3 is evaluated (executed). Each of the expressions can be empty or contain multiple expressions separated by commas.
In expr2, all expressions separated by a comma are evaluated but the result is taken from the last part. expr2 being empty means the loop should be run indefinitely (PHP implicitly considers it as TRUE, like C). This may not be as useless as you might think, since often you'd want to end the loop using a conditional break statement instead of using the for truth expression.
Consider the following examples. All of them display the numbers 1 through 10: <?php
/* example 1 */
for ($i = 1; $i <= 10; $i++) {
echo $i;
}
/* example 2 */
for ($i = 1; ; $i++) {
if ($i > 10) {
break;
}
echo $i;
}
/* example 3 */
$i = 1;
for (; ; ) {
if ($i > 10) {
break;
}
echo $i;
$i++;
}
/* example 4 */
for ($i = 1, $j = 0; $i <= 10; $j += $i, print $i, $i++);
?>
Of course, the first example appears to be the nicest one (or perhaps the fourth), but you may
find that being able to use empty expressions in for loops comes in handy in many occasions. PHP also supports the alternate "colon syntax" for for loops. for (expr1; expr2; expr3): statement ... endfor;
It's a common thing to many users to iterate through arrays like in the example below.
<?php
/*
* This is an array with some data we want to modify
* when running through the for loop.
*/
$people = array(
array('name' => 'Kalle', 'salt' => 856412),
array('name' => 'Pierre', 'salt' => 215863)
);
for($i = 0; $i < count($people); ++$i) {
$people[$i]['salt'] = mt_rand(000000, 999999);
}
?>
The above code can be slow, because the array size is fetched on every iteration. Since the size
never changes, the loop be easily optimized by using an intermediate variable to store the size instead of repeatedly calling count(): <?php
$people = array(
array('name' => 'Kalle', 'salt' => 856412),
array('name' => 'Pierre', 'salt' => 215863)
);
for($i = 0, $size = count($people); $i < $size; ++$i) {
$people[$i]['salt'] = mt_rand(000000, 999999);
}
?>
Foreach (PHP 4, PHP 5)
The foreach construct provides an easy way to iterate over arrays. foreach works only on arrays
and objects, and will issue an error when you try to use it on a variable with a different data type or an uninitialized variable. There are two syntaxes:
foreach (array_expression as $value)
statement
foreach (array_expression as $key => $value)
statement
The first form loops over the array given by array_expression. On each iteration, the value of the current element is assigned to $value and the internal array pointer is advanced by one (so on the next iteration, you'll be looking at the next element).
The second form will additionally assign the current element's key to the $key variable on each iteration.
It is possible to customize object iteration. Nota: When foreach first starts executing, the internal array pointer is automatically reset to the first element of the array. This means that you do not need to call reset() before a foreach loop. As foreach relies on the internal array pointer changing it within the loop may lead to unexpected behavior.
In order to be able to directly modify array elements within the loop precede $value with &. In that case the value will be assigned by reference. <?php
$arr = array(1, 2, 3, 4);
foreach ($arr as &$value) {
$value = $value * 2;
}
// $arr is now array(2, 4, 6, 8)
unset($value); // break the reference with the last element
?>
Referencing $value is only possible if the iterated array can be referenced (i.e. if it is a variable). The following code won't work: <?php
foreach (array(1, 2, 3, 4) as &$value) {
$value = $value * 2;
}
?>
Aviso: Reference of a $value and the last array element remain even after the foreach loop. It is recommended to destroy it by unset().
Nota: foreach does not support the ability to suppress error messages using '@'. You may have noticed that the following are functionally identical: <?php
$arr = array("one", "two", "three");
reset($arr);
while (list(, $value) = each($arr)) {
echo "Value: $value<br />\n";
}
foreach ($arr as $value) {
echo "Value: $value<br />\n";
}
?>
The following are also functionally identical: <?php
$arr = array("one", "two", "three");
reset($arr);
while (list($key, $value) = each($arr)) {
echo "Key: $key; Value: $value<br />\n";
}
foreach ($arr as $key => $value) {
echo "Key: $key; Value: $value<br />\n";
}
?>
Some more examples to demonstrate usage: <?php
/* foreach example 1: value only */
$a = array(1, 2, 3, 17);
foreach ($a as $v) {
echo "Current value of \$a: $v.\n";
}
/* foreach example 2: value (with its manual access notation printed for illustration
) */
$a = array(1, 2, 3, 17);
$i = 0; /* for illustrative purposes only */
foreach ($a as $v) {
echo "\$a[$i] => $v.\n";
$i++;
}
/* foreach example 3: key and value */
$a = array(
"one" => 1,
"two" => 2,
"three" => 3,
"seventeen" => 17
);
foreach ($a as $k => $v) {
echo "\$a[$k] => $v.\n";
}
/* foreach example 4: multi-dimensional arrays */
$a = array();
$a[0][0] = "a";
$a[0][1] = "b";
$a[1][0] = "y";
$a[1][1] = "z";
foreach ($a as $v1) {
foreach ($v1 as $v2) {
echo "$v2\n";
}
}
/* foreach example 5: dynamic arrays */
foreach (array(1, 2, 3, 4, 5) as $v) {
echo "$v\n";
}
?>
Unpacking nested arrays with list() (PHP 5 >= 5.5.0)
PHP 5.5 added the ability to iterate over an array of arrays and unpack the nested array into loop variables by providing a list() as the value.
For example: <?php
$array = [
[1, 2],
[3, 4],
];
foreach ($array as list($a, $b)) {
// $a contains the first element of the nested array,
// and $b contains the second element.
echo "A: $a; B: $b\n";
}
?>
O exemplo acima irá imprimir:
A: 1; B: 2
A: 3; B: 4
You can provide fewer elements in the list() than there are in the nested array, in which case the leftover array values will be ignored: <?php
$array = [
[1, 2],
[3, 4],
];
foreach ($array as list($a)) {
// Note that there is no $b here.
echo "$a\n";
}
?>
O exemplo acima irá imprimir:
1
3
A notice will be generated if there aren't enough array elements to fill the list(): <?php
$array = [
[1, 2],
[3, 4],
];
foreach ($array as list($a, $b, $c)) {
echo "A: $a; B: $b; C: $c\n";
}
?>
O exemplo acima irá imprimir:
Notice: Undefined offset: 2 in example.php on line 7
A: 1; B: 2; C:
Notice: Undefined offset: 2 in example.php on line 7
A: 3; B: 4; C:
fwrite (PHP 4, PHP 5) fwrite — Escrita binary-safe em arquivos int fwrite ( resource $handle , string $string [, int $length ] ) fwrite() escreve o conteúdo da string para o stream de arquivo apontado por handle. Parâmetros
Handle: A file system pointer resource that is typically created using fopen().
String: A string a ser escrita.
Length: Se o argumento comprimento for dado, a escrita irá parar depois que comprimento bytes tenham sido escritos ou o final da string seja alcançado, o que vier primeiro.
Observe que se o argumento comprimento for dado, a opção de configuração magic_quotes_runtime será ignorada e nenhuma barra será removida da string.
Valor Retornado: fwrite() retorna o número de bytes escritos, ou FALSE em caso de erro. Nota: Em sistemas que diferenciam entre arquivos binários e texto (por exemplo Windows) o arquivo tem que ser aberto com 'b' incluído no parâmetro 'mode' na fopen(). Nota²: Se o handle foi aberto com fopen() em modo de adição, escritas com fwrite() são atômicas (a não ser que o tamanho da string exceda o tamanho de bloco do sistema de arquivos, em algumas plataformas, e contanto que o arquivo esteja em um sistema de arquivos local). Sendo assim, não há necessidade de bloquear um recurso com flock() antes de chamar fwrite(); todos os dados serão escritos sem interrupção. Nota³: Se escrevendo duas vezes para o ponteiro do arquivo, então a informação será adicionado ao final do contéudo do arquivo, significando que o exemplo abaixo não funcionaria como esperado: <?php
$fp = fopen('data.txt', 'w');
fwrite($fp, '1');
fwrite($fp, '23');
fclose($fp);
// o conteúdo de 'data.txt' agora é 123 e não 23!
?>
Exemplo #1 Um simples exemplo de fwrite() <?php
$filename = 'teste.txt';
$conteudo = "Acrescentar isso ao arquivo\n";
// Primeiro vamos ter certeza de que o arquivo existe e pode ser alterado
if (is_writable($filename)) {
// Em nosso exemplo, nós vamos abrir o arquivo $filename
// em modo de adição. O ponteiro do arquivo estará no final
// do arquivo, e é pra lá que $conteudo irá quando o
// escrevermos com fwrite().
if (!$handle = fopen($filename, 'a')) {
echo "Não foi possível abrir o arquivo ($filename)";
exit;
}
// Escreve $conteudo no nosso arquivo aberto.
if (fwrite($handle, $conteudo) === FALSE) {
echo "Não foi possível escrever no arquivo ($filename)";
exit;
}
echo "Sucesso: Escrito ($conteudo) no arquivo ($filename)";
fclose($handle);
} else {
echo "O arquivo $filename não pode ser alterado";
}
?>
Fread
(PHP 4, PHP 5) fread — Leitura binary-safe de arquivo string fread ( resource $handle , int $length ) fread() lê até length bytes do ponteiro de arquivo informado em handle. A leitura é interrompida quando uma das seguintes condições são satisfeitas: length bytes foram lidos EOF (end of file - final do arquivo) é alcançado um pacote tornou-se disponível (para network streams) 8192 bytes foram lidos (depois de abrir um stream)
Parâmetros
Handl: A file system pointer resource that is typically created using fopen().
Lengt: Até length número de bytes lidos. Valor Retornado: Retorna a string lida ou FALSE em caso de erro. Exemplo #1 Um simples exemplo de fread() <?php // lê o conteúdo do arquivo para uma string $filename = "/usr/local/qualquer.txt"; $handle = fopen ($filename, "r"); $conteudo = fread ($handle, filesize ($filename)); fclose ($handle); ?>
Exemplo #2 Exemplo de fread() binário
Aviso Em sistemas que diferenciam entre arquivos binários e texto (por exemplo Windows) o arquivo tem que ser aberto com 'b' incluído no parâmetro 'mode' na fopen(). <?php $filename = "c:\\files\\figura.gif"; $handle = fopen ($filename, "rb"); $conteudo = fread ($handle, filesize ($filename)); fclose ($handle); ?>
Exemplo #3 Exemplos de fread() remoto
Aviso Ao ler de qualquer coisa que não seja um arquivo local comum, tal como de streams retornados ao ler arquivos remotos, ou de popen() e fsockopen(), a leitura irá parar depois que um pacote esteja disponível. Isto significa que você deve juntar os dados em blocos como demonstrado nos exemplos abaixo. <?php // Para o PHP 5 e superior $handle = fopen("http://www.example.com/", "rb"); $contents = stream_get_contents($handle); fclose($handle); ?> <?php $handle = fopen("http://www.example.com/", "rb"); $contents = ''; while (!feof($handle)) { $contents .= fread($handle, 8192); } fclose($handle); ?>
Nota: Se você quer apenas pegar o conteúdo de um arquivo para uma string, utilize file_get_contents() que tem uma performance ainda melhor que o código acima.
If (PHP 4, PHP 5) The if construct is one of the most important features of many languages, PHP included. It allows for conditional execution of code fragments. PHP features anif structure that is similar to that of C:
if (expr)
statement
As described in the section about expressions, expression is evaluated to its Boolean value. If expression evaluates to TRUE, PHP will execute statement, and if it evaluates to FALSE - it'll ignore it. More information about what values evaluate to FALSE can be found in the 'Converting to
boolean' section. The following example would display a is bigger than b if $a is bigger than $b:
<?php
if ($a > $b)
echo "a is bigger than b";
?>
Often you'd want to have more than one statement to be executed conditionally. Of course, there's no need to wrap each statement with an if clause. Instead, you can group several statements into a statement group. For example, this code would display a is bigger than b if $a is bigger than $b, and would then assign the value of $a into $b: <?php
if ($a > $b) {
echo "a is bigger than b";
$b = $a;
}
?>
If statements can be nested infinitely within other if statements, which provides you with complete flexibility for conditional execution of the various parts of your program.
(PHP 4, PHP 5) mail — Envia email bool mail ( string $to , string $subject , string $message [, string $additional_headers [, string $additional_parameters ]] ) Envia um email.
Parâmetros
T: Receptor, ou receptores do email. O formato desta string precisa estar de acordo com » RFC 2822. Alguns exemplos:
[email protected], [email protected]
User <[email protected]>
User <[email protected]>, Another User <[email protected]>
Subjec: Assunto do email a ser enviado.
Cuidado: Não deve conter caractere de nova linha, ou o email pode não ser enviado corretamente.
Messag: Mensagem a ser enviada. Cada linha deve ser separada com um LF (\n). Linhas não deve ser maiores que 70 caracteres.
Cuidado: (Somente Windows) Quando PHP está usando o servidor SMTP diretamente, e uma parada total é encontrada no início de uma linha, ela é removida. Para se defender disto, substitua estas ocorrência com dois pontos seguindos.
<?php $text = str_replace("\n.", "\n..", $text); ?>
additional_headers (opcional): String a ser inserida no final do cabeçalho do email. Esta é normalmente usada para adicionar cabeçalhos extras (From, Cc, e Bcc). Múltiplos
cabeçalhos extra devem ser separados com um CRLF (\r\n). Nota: Quando enviando email, o email precisa conter um cabeçalho From. Este pode ser definido com o parâmetro additional_headers, ou um padrão pode ser definido no php.ini. Um deslize fará com que resulte em uma mensagem de erro similar a Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing. O cabeçalho From define também Return-Path em Windows. Nota²: Se mensagens não são recebiedas, tente usar somente um LF (\n). Alguns Unix mail transfer agents de má qualidade modificam LF por CRLF automaticamente (que leva a duplicação de CR se CRLF é usado). Este deve ser um último recurso, como não está de acordo com» RFC 2822. additional_parameters (opcional):O parâmetro additional_parameters pode ser usado para passar um parâmetro adicional para o programa configurado para usa quando enviando email usando a configuração sendmail_path. Por exemplo, isto pode ser usado para definir o endereço do envelope remetente quando usando sendmail com a opção do sendmail -f.
Você pode precisar adicionar o usuário que seu servidor web executa como para sua configuração de sendmail para evitar que um cabeçalho 'X-Warning' seja adicionado à mensagem quando você define o envelope remetente (-f) usando este método. Para usuários de sendmail, este arquivo é /etc/mail/trusted-users.
Valor Retornado: Retorna TRUE se o email foi aceito com sucesso pelo entregado, FALSE caso contrário.
É importante notar que somente pelo o email ser aceito pelo entregado, não significa que o email alcancará o destino esperado.
Changelog Versão Descrição
4.3.0 (Somente Windows)
Todos os cabeçalhos (como From, Cc, Bcc e Date) são suportados, e não são case-sensitive. (Como cabeçalhos customizados não são interpretados pela MTA, são analisados pelo PHP, PHP < 4.3 suportava somente o elemento de cabeçalho Cc e era case-sensitive).
4.2.3 O parâmetro additional_parameters é desabilitado em safe_mode e a função mail() emitirá uma mensagem de aviso e retornaráFALSE quando usada.
4.0.5 O parâmetro additional_parameters foi adicionado.
Exemplo #1 Enviando email.
Usando mail() para enviar um simples email: <?php // The message $message = "Line 1\nLine 2\nLine 3"; // In case any of our lines are larger than 70 characters, we should use wordwrap() $message = wordwrap($message, 70); // Send mail('[email protected]', 'My Subject', $message); ?> Exemplo #2 Enviando email com cabeçalhos extra. A adição de cabeçalhos básicos, dizendo a MUA os endereços From e Reply-To: <?php $to = '[email protected]'; $subject = 'the subject'; $message = 'hello'; $headers = 'From: [email protected]' . "\r\n" . 'Reply-To: [email protected]' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); mail($to, $subject, $message, $headers); ?>
Exemplo #3 Enviando email com um parâmetro adicional da linha de comando.
O parâmetro additional_parameters pode ser usado para passar um parâmetro adicional para o programa configurado para usar quando enviar email usando a definição de configuração sendmail_path. <?php mail('[email protected]', 'the subject', 'the message', null, '[email protected]'); ?> Exemplo #4 Enviando email HTML É também possível enviar email HTML com mail(). <?php // multiple recipients $to = '[email protected]' . ', '; // note the comma $to .= '[email protected]'; // subject $subject = 'Birthday Reminders for August'; // message $message = ' <html> <head> <title>Birthday Reminders for August</title> </head> <body> <p>Here are the birthdays upcoming in August!</p> <table> <tr>
<th>Person</th><th>Day</th><th>Month</th><th>Year</th> </tr> <tr> <td>Joe</td><td>3rd</td><td>August</td><td>1970</td> </tr> <tr> <td>Sally</td><td>17th</td><td>August</td><td>1973</td> </tr> </table> </body> </html> '; /* Atenção se você pretende inserir numa variável uma mensagem html mais complexa do que essa sem precisar escapar os carateres necessários pode ser feito o uso da sintaxe heredoc, consulte tipos-string-sintaxe-heredoc */ // To send HTML mail, the Content-type header must be set $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; // Additional headers $headers .= 'To: Mary <[email protected]>, Kelly <[email protected]>' . "\r\n"; $headers .= 'From: Birthday Reminder <[email protected]>' . "\r\n"; $headers .= 'Cc: [email protected]' . "\r\n"; $headers .= 'Bcc: [email protected]' . "\r\n"; // Mail it mail($to, $subject, $message, $headers); ?>
Nota: Se a intenção é enviar email HTML ou outro formato complexo, é recomendado usar o pacote PEAR » PEAR::Mail_Mime. Nota²: A implentação do Windows de mail() difere bastante da implentação Unix. Primeiro, ele não usa um binary local para compor mensagens mas apenas opera com sockets diretos o que significa que uma MTA é necessária monitorando um socket de rede (que pode ser ou o localhost ou uma máquina remota).
Segundo, cabeçalhos customizados como From:, Cc:, Bcc: e Date: not são interpretados pela MTA, mas são analiados pelo PHP.
Assim como, o parâmetro to não deve ser um endereço na forma de "Algo <[email protected]>". O comando de email poderia não analisar isso adequadamente enquanto se comunica com o MTA. Nota³: Email com anexos e tipos especiais de conteúdo (e.g. HTML) podem ser enviado usando esta função. Isto é melhorado com MIME-encoding - para mais informação, veja este » artigo da Zend ou as classes » PEAR Mime. Nota4: Vale a pena notar que a função mail() não é apropriada para grande volume de email em um loop. Esta função abre e fecha um socket SMTP para cada email, que não é muito eficiente. Para enviar uma grande quantidade de email, veja os pacotes » PEAR::Mail, e » PEAR::Mail_Queue. Nota5: O seguintes RFCs podem ser úteis: » RFC 1896, » RFC 2045, » RFC 2046, » RFC 2047, » RFC 2048, » RFC 2049, e » RFC 2822.
Mysql_close (PHP 4, PHP 5) mysql_close — Fecha a conexão MySQL bool mysql_close ([ resource $link_identifier ] ) mysql_close() fecha a conexão não persistente ao servidor MySQL que esta associado ao identificador de conexão dado. Se link_identifier não for especificado, a ultima conexão aberta é usada. Usar mysql_close() não é normalmente necessário, já que as conexões não persistentes são automaticamente fechadas ao final da execução do script. Veja também liberando recursos. Parâmetros - link_identifier: The MySQL connection. If the link identifier is not specified, the last link opened by mysql_connect() is assumed. If no such link is found, it will try to create one as if mysql_connect() was called with no arguments. If no connection is found or established, an E_WARNING level error is generated. Valor Retornado: Retorna TRUE em caso de sucesso ou FALSE em caso de falha.
Exemplo #1 Exemplo mysql_close()
<?php $link = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$link) { die('Não foi possível conectar: ' . mysql_error()); } echo 'Conexão bem sucedida'; mysql_close($link); ?> O exemplo acima irá imprimir: Conexão bem sucedida
Nota: mysql_close() não irá fechar conexões persistentes criadas por mysql_pconnect().
Mysql_connect (PHP 4, PHP 5) mysql_connect — Abre uma conexão com um servidor MySQL resource mysql_connect ([ string $server [, string $username [, string $password [, bool $
new_link [, int $client_flags ]]]]] ) Abre ou reutiliza uma conexão com um servidor MySQL.
Parâmetros
Serve:O servidor MySQL. Também pode incluir um número de porta, exemplo "servidor:porta" ou um caminho para um socket local, exemplo ":/caminho/para/socket" para o servidor local(localhost).
Se a diretiva do PHP mysql.default_host não estiver definida(padrão), então o valor padrão é 'localhost:3306'
Username: O nome de usuário. O valor padrão é o nome do usuário que é o proprietário do processo do servidor.
Password: A senha. O valor padrão é uma senha vazia.
new_link: Se uma segunda chamada é feita a mysql_connect() com os mesmos argumentos, não é estabelecida uma nova conexão, mas ao invés, o identificador da conexão que já esta aberta é retornado. O parâmetro new_link modifica este funcionamento e faz mysql_connect()sempre abrir uma nova conexão, mesmo que mysql_connect() seja chamado antes com os mesmos parâmetros.
client_flags: O parâmetro client_flags pode ser uma combinação das seguintes constantes: MYSQL_CLIENT_SSL, MYSQL_CLIENT_COMPRESS,MYSQL_CLIENT_IGNORE_SPACE ou MYSQL_CLIENT_INTERACTIVE. Leia a seção sobre Constante do cliente MySQL para maiores informações.
Valor Retornado: Retorna um identificador de conexão MySQL em caso de sucesso, ou FALSE em caso de falha.
Changelog
Versão Descrição
4.3.0 Adicionado o parâmetro client_flags.
4.2.0 Adicionado o parâmetro new_link.
3.0.10 Adicionado o suporte para ":/caminho/para/socket" com server.
3.0.0 Adicionado o suporte para ":porta" com server.
Exemplo #1 Exemplo mysql_connect()
<?php $link = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$link) { die('Não foi possível conectar: ' . mysql_error()); } echo 'Conexão bem sucedida'; mysql_close($link); ?>
Exemplo #2 Exemplo mysql_connect() usando a a sintaxe servidor:porta
<?php // nós conectamos com example.com na porta 3307 $link = mysql_connect('example.com:3307', 'mysql_user', 'mysql_password'); if (!$link) { die('Não foi possível conectar: ' . mysql_error()); } echo 'Conexão bem sucedida'; mysql_close($link); // nós conectamos com localhost na porta 3307 $link = mysql_connect('127.0.0.1:3307', 'mysql_user', 'mysql_password'); if (!$link) { die('Não foi possível conectar: ' . mysql_error()); } echo 'Conexão bem sucedida'; mysql_close($link); ?>
Exemplo #3 Exemplo mysql_connect() usando a sintaxe ":/caminho/para/socket"
<?php // nós conectamos com localhost e socket exemplo /tmp/mysql.sock //variação 1: omitindo localhost $link = mysql_connect('/tmp/mysql', 'mysql_user', 'mysql_password'); if (!$link) { die('Não foi possível conectar: ' . mysql_error()); } echo 'Conexão bem sucedida'; mysql_close($link); // variant 2: with localhost $link = mysql_connect('localhost:/tmp/mysql.sock', 'mysql_user', 'mysql_password'); if (!$link) { die('Não foi possível conectar: ' . mysql_error()); } echo 'Conexão bem sucedida'; mysql_close($link); ?>
Nota: Em qualquer lugar que você especificar "localhost" ou "localhost:porta" como servidor, a biblioteca de cliente do MySQL irá sobrescrever isso e tentar conectar com um socket local (named pipe no Windows). Se você quiser usar TCP/IP, use "127.0.0.1" ao invés de "localhost". Se a biblioteca de cliente do MySQL tentar conectar com o socket local errado, você deverá definir o caminho correto como na sua configuração do PHP e deixar o campo servidor em branco. Nota²: A conexão com o servidor será fechada assim que a execução do script terminar, a menos que tenha sido fechada anteriormente usando-se explicitamente mysql_close(). Nota³: Você pode suprimir a mensagem de erro em caso de falha adicionando ante do nome da função @.
Mysql_fetch_array (PHP 4, PHP 5) mysql_fetch_array — Obtém uma linha como uma matriz associativa, uma matriz
numérica, ou ambas array mysql_fetch_array ( resource $result [, int $result_type ] ) Retorna uma matriz que corresponde a linha obtida e move o ponteiro interno dos dados adiante.
Parâmetros
Resul: The result resource that is being evaluated. This result comes from a call to mysql_query().
result_type: O tipo de array que deve ser obtida. é uma constante e pode ter os seguintes valores: MYSQL_ASSOC, MYSQL_NUM, e o valor padrão deMYSQL_BOTH.
Valor Retornado
Retorna uma array que corresponde a linha obtida, ou FALSE se não houver mais linhas. O tipo da array retornada depende de como result_type esta definido. Usando MYSQL_BOTH (padrão), você
terá um array com ambos os índices, numérico e associativo. Usando MYSQL_ASSOC, você tem apenas os índices associativos (como mysql_fetch_assoc() funciona), usando MYSQL_NUM, você tem apenas os índices numéricos (como mysql_fetch_row()funciona).
Se duas ou mais colunas do resultado tiverem os mesmos nomes de campos, a ultima coluna terá precedencia. Para acessar a(s) outra(s) coluna(s) com o mesmo nome, você deverá usar o índice numérico da coluna ou fazer um alias para a coluna. Para colunas com alias, você não pode acessar os conteúdos com o nome original da coluna.
Exemplo #1 Consulta com nomes de campos duplicados usando alias
SELECT table1.field AS foo, table2.field AS bar FROM table1, table2
Exemplo #2 mysql_fetch_array() com MYSQL_NUM
<?php mysql_connect("localhost", "mysql_user", "mysql_password") or die("Não foi possível conectar: " . mysql_error()); mysql_select_db("mydb"); $result = mysql_query("SELECT id, name FROM mytable"); while ($row = mysql_fetch_array($result, MYSQL_NUM)) { printf("ID: %s Name: %s", $row[0], $row[1]); } mysql_free_result($result); ?>
Exemplo #3 mysql_fetch_array() com MYSQL_ASSOC
<?php mysql_connect("localhost", "mysql_user", "mysql_password") or die("Não foi possível conectar: " . mysql_error()); mysql_select_db("mydb"); $result = mysql_query("SELECT id, name FROM mytable"); while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { printf("ID: %s Name: %s", $row["id"], $row["name"]); } mysql_free_result($result); ?>
Exemplo #4 mysql_fetch_array() com MYSQL_BOTH
<?php mysql_connect("localhost", "mysql_user", "mysql_password") or die("Não foi possível conectar: " . mysql_error()); mysql_select_db("mydb"); $result = mysql_query("SELECT id, name FROM mytable"); while ($row = mysql_fetch_array($result, MYSQL_BOTH)) { printf ("ID: %s Name: %s", $row[0], $row["name"]); }
mysql_free_result($result); ?>
Nota - Performance: Uma coisa importante para notar que usar mysql_fetch_array() não é significativamente mais lento do que usar mysql_fetch_row(), enquanto provê um valor agregado significante. Nota²: Nomes de campos nesta função diferenciam maiúsculos e minusculas. Nota³: Esta função assimila campos NULL para o NULL do PHP.
Mysql_query (PHP 4, PHP 5)
mysql_query — Envia uma consulta MySQL
resource mysql_query ( string $query [, resource $link_identifier ] )
mysql_query() envia uma consulta (para o banco de dados atualmente ativo no servidor associado
ao link_identifier especificado).
Parâmetros
Quer:A consulta SQL. A consulta não deve terminar com um ponto e vírgula.
link_identifier: The MySQL connection. If the link identifier is not specified, the last link
opened by mysql_connect() is assumed. If no such link is found, it will try to create one as
if mysql_connect() was called with no arguments. If no connection is found or established,
an E_WARNING level error is generated.
Valor Retornado
Para comandos SELECT, SHOW, DESCRIBE ou EXPLAIN, mysql_query() retorna
um resource em caso de sucesso, ou FALSE em caso de falha.
Para outros tipos de consultas SQL, UPDATE, DELETE, DROP, etc, mysql_query() retorna TRUE em caso
de sucesso ou FALSE em caso de erro.
O recurso de resultado retornado pode ser passado para mysql_fetch_array(), e outras funções para manipular tabelas de resultados, para acessar os dados retornados.
Use mysql_num_rows() para obter quantas linhas foram retornadas para um comando SELECT
ou mysql_affected_rows() para obter quantas linhas foram afetadas por um comando DELETE, INSERT, REPLACE, ou UPDATE.
mysql_query() irá também falhar e retornar FALSE se o usuário não tiver permissões para acessar a tabela(s) referenciadas pela consulta.
Exemplo #1 Consulta Inválida
A seguinte consulta é sintaticamente inválida, assim mysql_query() falha e retorna FALSE.
<?php $result = mysql_query('SELECT * WHERE 1=1'); if (!$result) {
die('Invalid query: ' . mysql_error()); } ?>
Exemplo #2 Consulta válida
A seguinte consulta é válida, assim mysql_query() retorna um resource.
<?php // This could be supplied by a user, for example $firstname = 'fred'; $lastname = 'fox'; // Formulate Query // This is the best way to perform a SQL query // For more examples, see mysql_real_escape_string() $query = sprintf("SELECT firstname, lastname, address, age FROM friends WHERE firstname='%s' AND lastname='%s'", mysql_real_escape_string($firstname), mysql_real_escape_string($lastname)); // Perform Query $result = mysql_query($query); // Check result // This shows the actual query sent to MySQL, and the error. Useful for debugging. if (!$result) { $message = 'Invalid query: ' . mysql_error() . "\n"; $message .= 'Whole query: ' . $query; die($message); } // Use result // Attempting to print $result won't allow access to information in the resource // One of the mysql result functions must be used // See also mysql_result(), mysql_fetch_array(), mysql_fetch_row(), etc. while ($row = mysql_fetch_assoc($result)) { echo $row['firstname']; echo $row['lastname']; echo $row['address']; echo $row['age']; } // Free the resources associated with the result set // This is done automatically at the end of the script mysql_free_result($result); ?>
Mysql_select_db (PHP 4, PHP 5)
mysql_select_db — Select a MySQL database
Warning: This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead,
the MySQLi or PDO_MySQL extension should be used. See also MySQL: choosing an API guide
and related FAQ for more information. Alternatives to this function include:
mysqli_select_db() PDO::__construct() (part of dsn) Report a bug
bool mysql_select_db ( string $database_name [, resource $link_identifier = NULL ] ) Sets the current active database on the server that's associated with the specified link identifier. Every
subsequent call to mysql_query() will be made on the active database.
Parameters
database_name: The name of the database that is to be selected.
link_identifier: The MySQL connection. If the link identifier is not specified, the last link opened by mysql_connect() is assumed. If no such link is found, it will try to create one as if mysql_connect() was called with no arguments. If no connection is found or established, an E_WARNING level error is generated.
Valores Retornados: retorna TRUE quando bem sucedido ou FALSE quando falha.
Example #1 mysql_select_db() example
<?php $link = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$link) { die('Not connected : ' . mysql_error()); } // make foo the current db $db_selected = mysql_select_db('foo', $link); if (!$db_selected) { die ('Can\'t use foo : ' . mysql_error()); } ?>
Note: For backward compatibility, the following deprecated alias may be used: mysql_selectdb()
Opendir
(PHP 4, PHP 5)
opendir — Abre um manipulador de diretório
resource opendir ( string $path [, resource $context ] )
Abre um manipulador de diretório para ser usado em chamadas subsequentes
a closedir(), readdir(), e rewinddir().
Parâmetros
Path: O caminho do diretório a ser aberto
Contexto: Para descrição do parâmetro context, consulte a seção sobre streams do manual.
Valor Retornado: Retorna um manipulador de diretório resource em sucesso, ou FALSE em falha.
Se path não é um diretório válido ou se o diretório não pode ser aberto devi a restrições de permissões ou
ainda por erro no sistema de arquivos,opendir() retorna FALSE e gera um erro PHP de
nível E_WARNING. Você pode suprimir a exibição da mensagem de erro de opendir() acrecentando
um '@' na frente do nome da função.
Changelog
Versão Descrição 5.0.0 path suporta ftp:// URL wrapper. 4.3.0 path pode também ser uma URL que suporte listagem de diretório, contudo somente
o file:// URL wrapper suporta isto no PHP 4
Exemplo #1 exemplo de opendir()
<?php $dir = "/etc/php5/"; // Abre um diretorio conhecido, e faz a leitura de seu conteudo if (is_dir($dir)) { if ($dh = opendir($dir)) { while (($file = readdir($dh)) !== false) { echo "filename: $file : filetype: " . filetype($dir . $file) . "\n"; } closedir($dh); } } ?> O exemplo acima irá imprimir algo similar à: filename: . : filetype: dir filename: .. : filetype: dir filename: apache : filetype: dir filename: cgi : filetype: dir filename: cli : filetype: dir
Readdir (PHP 4, PHP 5)
readdir — Lê os campos do manipulador do diretório
string readdir ( resource $dir_handle )
Retorna o nome de arquivo do próximo arquivo do diretório. Os nomes de arquivos são retornados na ordem informada pelo sistema de arquivos.
Parâmetros - dir_handle: O manipulador de diretório resource previamente aberto com opendir().
Valor Retornado: Retorna o nome do arquivo em sucesso, ou FALSE em falha.
Aviso Esta função pode retornar o booleano FALSE, mas também pode retornar um valor não-booleano que pode
ser avaliado comoFALSE, como 0 ou "". Leia a seção em Booleanos para maiores informações. Utilize
o operador === para testar o valor retornado por esta função.
Exemplo #1 Listando todos os arquivos de um diretório
Verifique cuidadosamente o estilo de checagem dos valores retornados por readdir() nos exemplos abaixo. Nós explicitamente testamos se o valor retornado é idêntico a (igual e do mesmo tipo que FALSE --- veja Operadores de Comparação para maiores detalhes). De outra forma, qualquer entrada de diretório que seja avaliada para FALSE irá parar o loop (por exemplo, um diretório nomeado "0"). <?php // Note que !== não existia antes do PHP 4.0.0-RC2 if ($handle = opendir('/path/to/files')) { echo "Manipulador de diretório: $handle\n"; echo "Arquivos:\n"; /* Esta é a forma correta de varrer o diretório */ while (false !== ($file = readdir($handle))) { echo "$file\n"; } /* Esta é a forma INCORRETA de varrer o diretório */ while ($file = readdir($handle)) { echo "$file\n"; } closedir($handle); } ?>
Exemplo #2 Listar todos os arquivos no diretório atual e retirar . e .. <?php if ($handle = opendir('.')) { while (false !== ($file = readdir($handle))) { if ($file != "." && $file != "..") { echo "$file\n"; } } closedir($handle); } ?>
Set Cookies (PHP 4, PHP 5) setcookie — Envia um cookie bool setcookie ( string $name [, string $value [, int $expire =
0 [, string $path [, string $domain [, bool $secure = false [, bool $httponly = false]]]]]] ) A função setcookie() define um cookie para ser enviado juntamente com o resto dos
cabeçalhos HTTP. Como outros cabeçalhos (headers), os cookies devem ser enviados antes de qualquer saída do seu script (isso é uma restrição do protocolo). O que quer dizer que você deve colocar chamadas a essa função antes de qualquer saída, incluindo as tags <html> e <head> e também espaços em branco.
Uma vez que o cookie foi setado, ele pode ser acessado na próxima página através dos arrays $_COOKIE e $HTTP_COOKIE_VARS. Note que assuperglobais como $_COOKIE estão disponíveis a partir do PHP 4.1.0. Os valores dos cookies também existem na variável $_REQUEST.
Parâmetros
Todos os argumentos, exceto o name, são opcionais. Você pode também colocar como argumento uma string vazia ("") para pular o argumento. Como o argumento expire é um inteiro, ele não pode ser escapado com uma string vazia, por isso utilize um zero (0) no lugar. Veja a » RFC 6265 para ver como cada parâmetro de setcookie() funciona.
Name: O nome do cookie.
Value: O valor do cookie. Esse valor é guardado no computador do cliente; não guarde informação sensível. Supondo que o name seja'nomedocookie', o valor pode ser lido través de $_COOKIE['nomedocookie']
Expire: O tempo para o cookie expirar. Esse valor é uma timestamp Unix, portanto é o número de segundos desde a época (epoch). Em outras palavras, você provavelmente irá utilizar isso com a função time() mais o número de segundos que você quer que ele expire. Ou você pode utilizar a função mktime(). time()+60*60*24*30 irá configurar o cookie para expirar em 30 dias. Se configurado para 0, ou omitido, o cookie irá expirar ao fim da sessao (quando o navegador fechar).
Nota: Você pode ver que o parâmetro expire recebe uma timestamp Unix, ao contrário do formato de data Wdy, DD-Mon-YYYY HH:MM:SS GMT, isso se dá porque o PHP faz essa conversão internamente.
Path: O caminho no servidor aonde o cookie estará disponível. Se configurado para '/', o cookie estará dosponível para todo o domain. Se configurado para o diretório '/foo/', o cookie estará disponível apenas dentro do diretório /foo/ e todos os subdiretórios como /foo/bardo domain. O valor padrão é o diretório atual onde o cookie está sendo configurado.
Domain: O domínio para qual o cookie estará disponível. Configurando o domínio para 'www.example.com' fará com que o cookie esteja disponível no subdomínio www e nos subdomínios superiores. Cookies disponíveis para um domínio inferior, como 'example.com' estarão disponíveis para subdomínios superiores, como 'www.example.com'. Browsers antigos ainda implementam a » RFC 2109 e podem requerer um . no início para funcionar com todos os subdomínios.
Secure: Indica que o cookie só podera ser transimitido sob uma conexão segura HTTPS do cliente. Quando configurado para TRUE, o cookie será enviado somente se uma conexão segura existir. No lado do servidor, fica por conta do programador enviar esse tipo de cookie somente sob uma conexão segura (ex respeitando $_SERVER["HTTPS"]).
Httponly: Quando for TRUE o cookie será acessível somente sob o protocolo HTTP. Isso significa que o cookie não será acessível por linguagens de script, como JavaScript. É dito que essa configuração pode ajudar a reduzir ou identificar roubos de identidade através de ataques do tipo XSS (entretanto ela não é suportada por todos os browsers), mas essa informação é constantemente discutida. Foi adicionada no PHP 5.2.0. TRUE ou FALSE
Se existe saída antes da chamada dessa função, setcookie() irá falhar e retornará FALSE. Se
a função setcookie() for executada com sucesso, ela retornará TRUE. Isso não indica que o usuário aceitou o cookie.
Alguns exemplos para seguir de como enviar cookies:
Exemplo #1 Exemplo de setcookie() para enviar cookies
<?php $value = 'alguma coisa de algum lugar';
setcookie("CookieTeste", $value); setcookie("CookieTeste", $value, time()+3600); /* expira em 1 hora */ setcookie("CookieTeste", $value, time()+3600, "/~rasmus/", ".example.com", 1); ?>
Note que a porção do valor do cookie será automaticamente codificada com urlencode quando
você enviar o cookie, e quando ele for recebido, será automaticamente decodificado e atribuido a uma variável com o mesmo nome do cookie. Se você não quer que isso aconteça, você pode utilizar no lugar a função setrawcookie() se você estiver utilizando o PHP 5. Para ver o conteúdo do nosso cookie de teste em um script, simplesmente utilize um dos exemplos abaixo: <?php // Mostra um cookie individual echo $_COOKIE["CookieTeste"]; echo $HTTP_COOKIE_VARS["CookieTeste"]; // Outra maneira de depurar(debug)/testar é vendo todos os cookies print_r($_COOKIE); ?>
Exemplo #2 Exemplo de setcookie() para deletar cookies
Quando estiver deletando um cookie, tenha certeza de que a data de expiração dele está no passado, para acionar o mecanismo de remoção do seu navegador. O exemplo a seguir mostra como deletar os cookies enviados no exemplo anterior: <?php // Configura a data de expiração para uma hora atrás setcookie ("CookieTeste", "", time() - 3600); setcookie ("CookieTeste", "", time() - 3600, "/~rasmus/", ".example.com", 1); ?>
Exemplo #3 setcookie() e arrays
Você pode também enviar cookies de array, utilizando a notação de array no nome dele. Isso tem o efeito de enviar tantos cookies quantos elementos houverem no array, mas quando o cookie for recebido todos os valores serão colocados em um array com o nome do cookie: <?php // envia os cookies setcookie("cookie[tres]", "cookietres"); setcookie("cookie[dois]", "cookiedois); setcookie("cookie[um]", "cookieum"); // Depois que a página recarregar, mostra eles if (isset($_COOKIE['cookie'])) { foreach ($_COOKIE['cookie'] as $nome => $valor) { echo "$nome : $valor <br />\n"; } } ?> O exemplo acima irá imprimir: tres : cookietres dois : cookiedois um : cookieum
Changelog
Versão Descrição 5.2.0 O parâmetro httponly foi adicionado. Nota: Você pode utilizar o output buffering para enviar saída antes de chamar essa função, com o custo de toda sua saída ser guardada em buffer até que você a envie. Você pode fazer isso chamando ob_start() e ob_end_flush() em seu script, ou configurando a diretiva output_buffering no seuphp.ini ou arquivos de configuração do servidor. Nota²: Se a diretiva register_globals estiver configurada como on então os valores dos cookies serão colocadas em variáveis. Em nossos exemplos acima, a variável $CookieTeste irá existir. É recomendado o uso de $_COOKIE.
Problemas comuns:
Os cookies não estarão disponíveis até o próximo carregamento da página a qual o cookie deverá estar visível. Para testar se um cookie foi enviado com sucesso, verifique o cookie no próximo carregamento da página antes que ele expire. O tempo para expirar é configurado via o parâmetro expira. Uma maneira boa de depurar a existência dos cookies é chamando a função print_r($_COOKIE);.
Os cookies devem ser deletados com os mesmos parâmetros com os quais foram configurados. Se o argumento valor for uma string vazia, ou FALSE, e todos os outros argumentos forem iguais a chamada anterior de setcookie, então o cookie com o nome especificado será deletado do cliente remoto. Internamente isso é feito colocando o valor do cookie para 'deleted' e a data de expiração para um ano no passado.
Quando você configurar um cookie com o valor FALSE será tentando deletar o cookie. Portanto evite utilizar valores booleanos. No lugar, utilize 0para FALSE e 1 for TRUE. Nomes de cookies podem ser configurados como arrays e estarão disponíves para seus scripts PHP como arrays mas cookies separados serão guardados no sistema do usuário. Considere utilizar explode() para enviar um cookie com nomes e valores múltiplos. Não é recomendado o uso da função serialize() para esse propósito, pois ele pode resultar em furos de segurança. Várias chamadas para a função setcookie() são feitas na ordem em que são chamadas. Swithc
(PHP 4, PHP 5)
The switch statement is similar to a series of IF statements on the same expression. In many occasions, you may want to compare the same variable (or expression) with many different values, and execute a different piece of code depending on which value it equals to. This is exactly what the switch statement is for. Nota: Note that unlike some other languages, the continue statement applies to switch and acts similar to break. If you have a switch inside a loop and wish to continue to the next iteration of the outer loop, use continue 2. Nota²: Note that switch/case does loose comparision.
The following two examples are two different ways to write the same thing, one using a series of if and elseif statements, and the other using the switchstatement:
Exemplo #1 switch structure
<?php if ($i == 0) { echo "i equals 0"; } elseif ($i == 1) { echo "i equals 1"; } elseif ($i == 2) { echo "i equals 2"; } switch ($i) { case 0: echo "i equals 0"; break; case 1: echo "i equals 1"; break; case 2: echo "i equals 2"; break; } ?>
Exemplo #2 switch structure allows usage of strings
<?php switch ($i) { case "apple": echo "i is apple"; break; case "bar": echo "i is bar"; break; case "cake": echo "i is cake"; break; } ?>
It is important to understand how the switch statement is executed in order to avoid mistakes. The switch statement executes line by line (actually, statement by statement). In the beginning, no code is executed. Only when a case statement is found with a value that matches the value of the switchexpression does PHP begin to execute the statements. PHP continues to execute the statements until the end of the switch block, or the first time it sees abreak statement. If you don't write a break statement at the end of a case's statement list, PHP will go on executing the statements of the following case. For example: <?php switch ($i) { case 0: echo "i equals 0"; case 1: echo "i equals 1"; case 2: echo "i equals 2"; } ?>
Here, if $i is equal to 0, PHP would execute all of the echo statements! If $i is equal to 1, PHP would execute the last two echo statements. You would get the expected behavior ('i equals 2' would be displayed) only if $i is equal to 2. Thus, it is important not to forget break statements (even though you may want to avoid supplying them on purpose under certain circumstances).
In a switch statement, the condition is evaluated only once and the result is compared to each case statement. In an elseif statement, the condition is evaluated again. If your condition is more complicated than a simple compare and/or is in a tight loop, a switch may be faster.
The statement list for a case can also be empty, which simply passes control into the statement list for the next case. <?php switch ($i) { case 0: case 1: case 2: echo "i is less than 3 but not negative"; break; case 3: echo "i is 3"; } ?>
A special case is the default case. This case matches anything that wasn't matched by the other cases. For example: <?php switch ($i) { case 0: echo "i equals 0"; break; case 1: echo "i equals 1"; break; case 2: echo "i equals 2"; break; default: echo "i is not equal to 0, 1 or 2"; } ?>
The case expression may be any expression that evaluates to a simple type, that is, integer or floating-point numbers and strings. Arrays or objects cannot be used here unless they are dereferenced to a simple type.
The alternative syntax for control structures is supported with switches. For more information, see Alternative syntax for control structures.
<?php switch ($i): case 0: echo "i equals 0"; break; case 1: echo "i equals 1"; break; case 2: echo "i equals 2"; break; default:
echo "i is not equal to 0, 1 or 2"; endswitch; ?>
It's possible to use a semicolon instead of a colon after a case like:
<?php switch($beer) { case 'tuborg'; case 'carlsberg'; case 'heineken'; echo 'Good choice'; break; default; echo 'Please make a new selection...'; break; } ?>
Time
(PHP 4, PHP 5) time — Retorna o timestamp Unix atual int time ( void ) Retorna a hora atual medida no número de segundos desde a Era Unix (January 1 1970 00:00:00 GMT).
Exemplo #1 time() example
<?php $nextWeek = time() + (7 * 24 * 60 * 60); // 7 days; 24 hours; 60 mins; 60secs echo 'Now: '. date('Y-m-d') ."\n"; echo 'Next Week: '. date('Y-m-d', $nextWeek) ."\n"; // or using strtotime(): echo 'Next Week: '. date('Y-m-d', strtotime('+1 week')) ."\n"; ?> O exemplo acima irá imprimir algo similar à: Now: 2005-03-30 Next Week: 2005-04-06 Next Week: 2005-04-06
Dica: Timestamp do início da requisição está disponível na $_SERVER['REQUEST_TIME'] desde o PHP 5.1.
United Nations
United Nations High Commissioner for Refugees - www.unhcr.org United Nations Children's Fund - www.unicef.org United Nations Conference on Trade and Development - www.unctad.org United Nations Development Programme - www.undp.org United Nations Capital Development Fund - www.uncdf.org United Nations Volunteers - www.unv.org United Nations Office on Drugs and Crime - www.unodc.org United Nations Environment Programme - www.unep.org
United Nations Human Settlements Programme - www.unhabitat.org United Nations Population Fund - www.unfpa.org United Nations Relief and Works Agency for Palestine Refugees in the Near East - www.unrwa.org United Nations World Food Programme - www.wfp.org
User-definition fuction
Uma função pode ser definida usando a seguinte sintaxe:
Exemplo #1 Pseudo-código de demonstração de uma função
<?php
function foo ($arg_1, $arg_2, /* ..., */ $arg_n)
{
echo "Exemplo de função.\n";
return $valor_retornado;
}
?>
Qualquer código PHP válido pode aparecer dentro de uma função, mesmo outras funções e definições de classes.
Nomes de funções seguem as mesmas regras que outros rótulo no PHP. Um nome de função válido começa com uma letra ou um sublinhado, seguido, seguido por qualquer número de letras, números ou sublinhado. Com uma expressão regular, seria expressado com: [a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*.
Dica: Veja também o Guia de nomenclatura em espaço de usuário. As funções não precisam ser criadas antes de serem referenciadas, exceto quando uma função é condicionalmente definida como mostrado nos dois exemplos abaixo. Quando uma função é definida condicionalmente como nos dois exemplos abaixo, sua definição precisa ser processada antes de ser chamada.
Exemplo #2 Funções definidas condicionalmente
<?php
$makefoo = true;
/* Nos nao podemos chamar foo() daqui
porque ela ainda não existe,
mas nos podemos chamar bar() */
bar();
if ($makefoo) {
function foo ()
{
echo "Eu não existo até que o programa passe por aqui.\n";
}
}
/* Agora nos podemos chamar foo()
porque $makefoo foi avaliado como true */
if ($makefoo) foo();
function bar()
{
echo "Eu existo imediatamente desde o programa começar.\n";
}
?>
Exemplo #3 Funções dentro de funções
<?php
function foo()
{
function bar()
{
echo "Eu não existo até foo() ser chamada.\n";
}
}
/* Nós não podemos chamar bar() ainda
porque ela ainda não foi definida. */
foo();
/* Agora nós podemos chamar bar(),
porque o processamento de foo()
tornou a primeira acessivel */
bar();
?>
Todas as funções e classes no PHP tem escopo global - elas podem ser chamadas fora de uma função mesmo que tenham sido definidas dentro e vice-versa.
O PHP não suporta sobrecarga de funções, e também não é possível cancelar ou alterar a definição de funções previamente declaradas. Nota: Nomes de funções são insensíveis ao caso, mas é melhor chamar as funções da mesma forma que ela aparecem nas declarações. Ambos número variável de argumentos e argumentos padrões são suportados em funções. veja também as referencias das funções func_num_args(),func_get_arg() e func_get_args() para mais informações.
É possível chamar funções recursivas no PHP. Entretanto evite o uso de funções/métodos recursivos com mais de 100-200 níveis de recursão já que isso pode estourar a pilha e causar o encerramento do script atual.
Exemplo #4 Funções Recursivas
<?php
function recursion($a)
{
if ($a < 20) {
echo "$a\n";
recursion($a + 1);
}
}
?>
While
PHP 4, PHP 5) while loops are the simplest type of loop in PHP. They behave just like their C counterparts. The basic form of a while statement is:
while (expr) statement
The meaning of a while statement is simple. It tells PHP to execute the nested statement(s)
repeatedly, as long as the while expression evaluates to TRUE. The value of the expression is checked each time at the beginning of the loop, so even if this value changes during the execution of the nested statement(s), execution will not stop until the end of the iteration (each time PHP runs the statements in the loop is one iteration). Sometimes, if the while expression evaluates to FALSE from the very beginning, the nested statement(s) won't even be run once.
Like with the if statement, you can group multiple statements within the same while loop by surrounding a group of statements with curly braces, or by using the alternate syntax:
while (expr): statement ... endwhile;
The following examples are identical, and both print the numbers 1 through 10: <?php /* example 1 */ $i = 1; while ($i <= 10) { echo $i++; /* the printed value would be $i before the increment (post-increment) */ } /* example 2 */ $i = 1; while ($i <= 10): echo $i; $i++; endwhile; ?>
Links de Referência
Abaixo a lista de recursos e artigos dos principais termos encontrados nesse documento. Não foi possível juntar todos esses recursos nesse mesmo documento por conta do gradativo aumento de páginas - o que não parece nem um pouco atraente para aqueles que estão aprendendo. Além disso, coloca-los na forma de links incita o leitor à pesquisar cada vez mais sobre os mesmos termos e os demais assuntos acerca do HTML, CSS, PHP e ASP.
1. $_COOKIES (Variáveis COOKIES): http://php.net/manual/pt_BR/reserved.variables.cookies.php 2. $_GET (Variável GET): http://php.net/manual/pt_BR/reserved.variables.get.php
3. $_POST (Variável POST): http://php.net/manual/pt_BR/reserved.variables.post.php
4. Addslashes: http://php.net/manual/pt_BR/function.addslashes.php
5. Array: http://php.net/manual/pt_BR/function.array.php
6. Closedir: http://php.net/manual/pt_BR/function.closedir.php 7. Date: http://php.net/manual/pt_BR/function.date.php
8. Echo: http://php.net/manual/pt_BR/function.echo.php 9. Else: http://php.net/manual/pt_BR/control-structures.else.php
10. Elseif/Else If: http://php.net/manual/pt_BR/control-structures.elseif.php
11. Explode: http://php.net/manual/pt_BR/function.explode.php
12. Feof: http://php.net/manual/pt_BR/function.feof.php 13. Fgets: http://php.net/manual/pt_BR/function.fgets.php 14. Fgets: http://php.net/manual/pt_BR/function.fgets.php 15. Fileatime: http://php.net/manual/pt_BR/function.fileatime.php 16. Filemtime: http://php.net/manual/pt_BR/function.filemtime.php 17. Filesize: http://php.net/manual/pt_BR/function.filesize.php 18. Fopen: http://php.net/manual/pt_BR/function.fopen.php 19. Fopen: http://php.net/manual/pt_BR/function.fopen.php 20. For: http://php.net/manual/pt_BR/control-structures.for.php
21. Foreach: http://php.net/manual/pt_BR/control-structures.foreach.php
22. Fread: http://php.net/manual/pt_BR/function.fread.php 23. Fwrite: http://php.net/manual/pt_BR/function.fwrite.php 24. If: http://php.net/manual/pt_BR/control-structures.if.php
25. Instalação e Configuração (PHP): http://php.net/manual/pt_BR/install.php 26. Instalando Servidor PHP no Mac OSX: http://php.net/manual/pt_BR/install.macosx.php 27. Instalando Servidor PHP no Unix: http://php.net/manual/pt_BR/install.unix.php 28. Instalando Servidor PHP no Windows: http://php.net/manual/pt_BR/install.windows.php 29. Mail: http://php.net/manual/pt_BR/function.mail.php
30. Manipulação de Sessão: http://php.net/manual/pt_BR/book.session.php
31. Manual do PHP: http://php.net/manual/pt_BR/index.php 32. MYSQL - Criar Auto Increment (Inglês): http://dev.mysql.com/doc/refman/5.0/en/example-
auto-increment.html 33. MYSQL - Criar Blob e Tipos de Textos (Inglês):
http://dev.mysql.com/doc/refman/5.5/en/blob.html 34. MYSQL - Criar Char e Varchar (Inglês): http://dev.mysql.com/doc/refman/5.5/en/char.html 35. MYSQL - Criar Data-base (Inglês): http://dev.mysql.com/doc/refman/5.5/en/create-
database.html 36. MYSQL - Criar Primary Key e Unix (Inglês):
http://dev.mysql.com/doc/refman/5.5/en/constraint-primary-key.html 37. MYSQL - Criar Tabela (Inglês): http://dev.mysql.com/doc/refman/5.5/en/create-table.html 38. MYSQL - Criar Time (Inglês): http://dev.mysql.com/doc/refman/5.5/en/time.html 39. MYSQL - Criar Tipos Numéricos (Inglês): http://dev.mysql.com/doc/refman/5.5/en/numeric-
types.html 40. MYSQL - Date, Datetime e Timestamp:
http://dev.mysql.com/doc/refman/5.5/en/datetime.html 41. Mysql_close: http://php.net/manual/pt_BR/function.mysql-close.php 42. Mysql_connect: http://php.net/manual/pt_BR/function.mysql-connect.php 43. Mysql_fetch_array: http://php.net/manual/pt_BR/function.mysql-fetch-array.php
44. Mysql_query: http://php.net/manual/pt_BR/function.mysql-query.php 45. Mysql_select_db: http://php.net/manual/en/function.mysql-select-db.php 46. Opendir: http://php.net/manual/pt_BR/function.opendir.php 47. Readir: http://php.net/manual/pt_BR/function.readdir.php 48. Set Cookies: http://php.net/manual/pt_BR/function.setcookie.php 49. Swithc: http://php.net/manual/pt_BR/control-structures.switch.php
50. Time: http://php.net/manual/pt_BR/function.time.php
51. United Nations: http://pt-br.html.net/tutorials/php/unitednations.txt 52. User-definition fuction: http://php.net/manual/en/functions.user-defined.php
53. While: http://php.net/manual/pt_BR/control-structures.while.php
54. XAMPP para Linux: http://www.apachefriends.org/en/xampp-linux.html
55. XAMPP para Mac OSX: http://www.apachefriends.org/en/xampp-macosx.html
56. XAMPP para Windows: http://www.apachefriends.org/en/xampp-windows.html
Agradecimentos e Esclarecimentos
Esse arquivo é a união de vários tutoriais publicados no site HTML.net. Os administradores desse site reunirão então todos as lições descritas aqui, e mais algumas que
podem ser vistos no mesmo site, porém mudando o idioma padrão para inglês. Infelizmente muitos desses tutoriais não foram traduzidos, mas isso não chega à ser um problema, afinal de contas, a maioria dos que decidem ser programador acaba por aprender esse idioma.
Uma grande fatia do trecho referente ao PHP foi elaborado pelo pessoal do site PHP.net e assim como po sessoal do HTML.net, não possui todo o seu conteúdo traduzido para o português, sendo necessário um esforço um pouco maior para entender essa parte.
Vale lembrar que o intuito desse arquivo não é roubar ou violar os direitos autoriais desses sites, eles somente foi elaborado de uma maneira à facilitar o aprendizado e possibilitar até mesmo a impressão do conteúdo presente nesses. Obrigado!