Aulas ministradas por: Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva PET COMPUTAÇÃO
Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1 e 2)
HTML Hyper Text Markup Language Um arquivo html pode ser criado a partir de qualquer editor de texto simples, e sua extensão deve ser .htm ou .html Sintaxe básica: Um documento html é basicamente formado a partir de tags (etiquetas), que são comandos de formatação da linguagem. Essas tags indicam para o Navegador Web como mostrar a página. <tag>...</tag> Todos os elementos podem conter atributos: <Tag atributo1=valor1 atributo2=valor2>...</tag> Exemplo: <font color=“#00AA00”> texto </font>
Estrutura mínima de uma página HTML: <head> <title> Título da página </title> </head> <body> Conteúdo da página </body> </html>
Atributos para a tag body: <body bgcolor=“#rrggbb” text=“#rrggbb” link=“#rrggbb” alink= “#rrggbb” vlink=“#rrggbb” background=“URL”> BGCOLOR – Cor de Fundo (padrão: cinza ou branco) TEXT – Cor dos textos da página (padrão: preto) LINK – Cor dos links (padrão: azul) ALINK – Cor dos links quando acionados (padrão: vermelho) VLINK – Cor dos links depois de visitados (padrão: azul escuro ou roxo)
Tags básicas: <html> <body> <h1> a <h6> Define a formatação de um texto <font> Define comentário <!--> Define uma linha horizontal <hr> Insere uma quebra de linha <br> Define parágrafo <p> Define cabeçalho 1 ao 6 <h1> a <h6> Define o corpo do documento <body> Define um documento HTML <html>
Exemplos: <p align=“center”> parágrafo centralizado <br> quebra de linha </p> <hr width=30% align=“right” noshade> <font face=“arial” color=“#00AA00”> fonte arial verde </font> <!-- comentários!!! -->
Imagens em HTML <img src=“imagem.gif” alt=“Logotipo” width=“144” height=“50” align=“center”> Logotipo height width src : endereço da imagem alt : Texto que será exibido se a imagem não for encontrada no endereço especificado align : alinhamento da imagem na página
Tabelas As tags <table>...</table> delimitam uma tabela. A tabela é dividido em linhas (com a tag <tr>) Cada linha é dividido em células (com a tag <td>) Colspan : Junção de células de uma mesma linha Rowspan : Junção de células de uma mesma coluna <td> <td> <td> <td> <td> <td> <tr> <td rowpan=“2”> <tr> <tr> <td colspan=“2”> <td colspan=“2”> <td colspan=“2”>
<table width="500" border="2"> <tr> Exemplo: <table width="500" border="2"> <tr> <td>ola</td> <td rowspan="2">ola</td> </tr> <td colspan="2"> ola </td> </table>
Formulário Atributos <form> O formulário é um modelo que permite ao usuário entrar com um conjunto de dados. A partir disso é que poderemos trabalhar com scripts, para poder manipular esses dados. Um formulário é definido pelas tags <form>...</form> Podem conter qualquer formatação – parágrafos, listas, tabelas, imagens – exceto outros formulários. Atributos <form> ACTION: URL para a qual o conteúdo do formulário será enviado. METHOD: método de envio usado. GET POST <form action=“teste.php” method=“POST”>
Input <input> é a tag mais usada em formulários Os atributos mais usados são: Type: tipo de entrada Name: associa um nome para ser usado como variável em scripts <form> Login: <input type=“text” name=“login”> Senha: <input type=“password” name=“senha”> </form>
Outros atributos para <input> TYPE: TEXT: permite a entrada de um texto qualquer (padrão para o input). PASSWORD: também permite a entrada de um texto qualquer, porém este será escondido por asteriscos. BUTTON: Insere um botão. RESET: Insere o botão que restaura as informações iniciais do formulário. SUBMIT: Insere o botão que envia do formulário Outros atributos para <input> SIZE: Tamanho do campo. MAXLENGTH: Número máximo de caracteres aceito no campo de dados (text e password). VALUE: Valor inicial para o campo.
Outros Componentes do Formulário TEXTAREA: cria uma área para entrada de texto. ROWS: Número de linhas da área do TEXTAREA. COLS: Número de colunas da área do TEXTAREA. <TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA> SELECT OPTION: As opções de seleção disponíveis. Ex: Teste1, Teste2.
Outros Componentes do Formulário CHECKBOX: cria uma checkbox. <INPUT TYPE="checkbox" NAME="OPCAO“ VALUE="op2" CHECKED> opcao2 RADIO: cria um grupo de radiobuttons. <INPUT TYPE="radio" NAME="OPCAO" VALUE="op1" CHECKED> opção1