Embed Size (px)
DESCRIPTION
Aula introdutória de PHP - Revisão HTML
Citation preview
PHP 4 PHP Hypertext Preprocessor Criando aplicações WEB (Introdução)
O que é PHP Um acrônimo recursivo para PHP: Hypertext Preprocessor
Linguagem de programação (lado servidor) para Web Uso genérico -‐ interpretador php
Permite criar sites dinâmicos
Server-‐side scripts -‐ configuração do servidor web
Surgiu em 94 como um pacote de programas CGI (Ramus Ledorf )
Código embuNdo no html <html> <head> <title>Example</title> </head> <body> <?php echo "Hi, I'm a PHP script!"; ?> </body> </html>
O que faz o PHP Coleta dados de um formulário;
Cria páginas dinâmicas; Extrapola o limite do HTML
Processa dados em tempo real
Personalisa páginas Web
Manipula com BD (MySql, PostgreSql, Firebird, dBase, Oracle, Sybase, etc...); Armazena informação de forma eficiente
Ex: MySql Server controla acesso concorrente a usuários autorizados
Enviar e receber cookies
h_p://www.php.net/usage.php (estaasNcas mundiais de sites que usam do php)
Por que PHP? (e não ASP, JSP, Cold Fusion?) Futuro é do sobware livre? (talvez :-‐)
Alto rendimento – eficiência (1 server suporta milhões de hits) Integração com muitos SGBDs (controlador ODBC)
Infinidade de bibliotecas e funções disponíveis na Web Usuários do muito inteiro comparNlham
Gera imagens, pdf, envia e-‐mail, usa cookies (poucas linhas)
Vários pacotes pré configurados para facilitar a instalação h_p://en.wikipedia.org/wiki/List_of_AMP_packages
É Gratuito
Pré-‐requisitos para programação PHP Dominar HTML
Ter noções de SQL Noções de algoritmos
Noções de Servidor e Internet
Web server
Revisão HTML -‐ caracterísNcas HTML -‐ HiperText Markup Language, (Linguagem de Marcação
de Hipertexto)
Um documento HTML = página Web Página em HTML é composta de Tags (eNquetas): Dicas:
Pensar em tags como uma família: tags-‐mãe e tags-‐filhas
Sempre que abrir uma tag, feche-‐a logo em seguida (diminui chance de erro)
Use apenas caracteres minúsculos para o HTML (+ legíveis, -‐ espaço, + standard compliant)
Escreva 1 tag por linha (2 diferentes no máximo)
A página principal normalmente é nomeada como index.htm, index.html, default.htm ou default.html.
Deve conter apenas conteúdo. Formatação faz-‐se com CSS
Revisão HTML – tags básicas <h1>Título 1 – grande </h1> (h2,h3, h4 ...) <p>parágrafo</p>
<br /> Mudança de linha. <b>Texto em negrito</b> <i>Texto em Itálico</i>
<a href="hYp://www.google.com">Link para o Google</a> <img src="if.jpg" alt="Logo do IF" width="50" height="90" /> <ul>Lista não ordenada</ul>, <ol>Lista ordenada</ol>
<li>Item de uma lista – filha de ul</li>
<table>Inicia uma tabela</table> <tr>define uma linha de uma tabela</tr> <td>define um dado de uma tabela – célula</td>
<div>cria um bloco/caixa no corpo do documento</div>
Revisão HTML – exemplo página simples em HTML5 <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="UTF-8"> <!- ajusta caracteres latinos --> <title>Revisão de HTML</title> <link rel="stylesheet" type="text/css" href="estilo.css"> <!- link p/ CSS --> </head> <body> <!- início do corpo do documento (o que aparece) --> <table width="90%" border="1"> <tr> <!- uma linha da tabela --> <td colspan="2">Título da página</td> <!- uma célula da tabela --> </tr> <tr> <td width="30%">Links</td> <td>Parágrafos</td> </tr> </table> <ol> <!- uma lista ordenada --> <li>Primeiro item da lista</li> <!- um item da lista ordenada --> <li>Segundo item da lista</li> </ol> </body> </html>
Revisão HTML – exemplo formulário
<form action="http://somesite.com/prog/adduser" method="post">
<label for="firstname">Primeiro nome: </label> <input type="text" id="firstname"><br /> <label for="lastname">Último nome: </label> <input type="text" id="lastname"><br /> <label for="email">Email: </label> <input type="text" id="email"><br /> <input type="radio" name="sex" value="Male">Masculino<br /> <input type="radio" name="sex" value="Female">Feminino<br /> Comentários: <br /> <textarea name="textarea" rows="9"></textarea> <input type="submit" value="Enviar"> <input type="reset">
</form>
Revisão HTML – exercício Copie e cole o código da penúlNma página no editor Salve como index.html e abra no navegador Adicione um atulo (h1) no início da página contendo o texto:
"Revisão HTML" Faça busca na Web do logoNpo do IF e insira uma tag (abaixo
do atulo) que mostre a imagem desse logoNpo Insira o texto: "Clique para acessar a página do Campus Porto
Alegre" transformando-‐o num hiperlink para aquele site Insira uma lista não ordenada que contenha os 3 itens: “PHP”,
“MySQL” e “Apache”. Insira mais uma linha na tabela (+ 2 células): “HTML” e “PHP” Insira o formulário no final (página anterior), tente enviar e
veja o que acontece
Prof Evandro Manara Mile_o Rua Cel Vicente, 281 -‐ Centro Porto Alegre, RS -‐ 90030-‐041 www.poa.ifrs.edu.br
