básico php: introdução html
DESCRIPTION
No primeiro material que aborda HTML antes de entrar no assunto PHPTRANSCRIPT
Desenvolvendo Aplicações WEB
Introdução PHP
Estrutura
Conceitos de HTML
HTML é composto por tag's, que são marcações delimitadas pelos símbolos “<” e “>”, usados para indicar uma formatação.
<html>
... página web ...
</html>
Conceitos de HTML
Um documento HTML é formado basicamente por cabeçalho e corpo.
No cabeçalho, fornecemos informações, como o nome da página, autor, palavras-chave para pesquisa, etc.
Essas informações não ficam expostas no navegador do usuário.
Conceitos de HTML
Um documento HTML é formado basicamente por cabeçalho e corpo.
No cabeçalho, fornecemos informações, como o nome da página, autor, palavras-chave para pesquisa, etc.
Essas informações não ficam expostas no navegador do usuário.
Conceitos de HTML
<html>
<head>
<title>Minha Página Web!!!</title>
</head> ...
</html>
Conceitos de HTML
O corpo da página começa com a tag <body> e termina com </body>
Conceitos de HTML
<html>
<head>
<title>Minha Página Web!!!</title>
</head>
<body>
o que escrever aqui aparece
</body>
</html>
Conceitos de HTML
A grande maioria das tag's HTML possuem atributos, que são valores passados a elas para que as mesmas assumam uma formatação diferente.
Conceitos de HTML
<html>
<head>
<title>Minha Página Web!!!</title>
</head>
<body bgcolor=‘blue’>
o que escrever aqui aparece
</body>
</html>
Principais TAGs
• <h...></h...>
• <br />
• <p>.....</p>
• <font ....>.....</font>
• <a ....>.....</a>
• <img ...../>
• <table><tr><td>....</td></tr></table>
Formulários HTML
• Formulários são estruturas usadas para que o visitante possa interagir com o site, enviando informações para o site.
• O campo pertencente ao formulário é delimitado pelas tag's <form> e </form>
Formulários HTML
• Os principais atributos são:
• action: indica o script que irá processar as informações enviadas pelo formulário;
• metido: indica a forma que será enviada essa informação
Metodo GET
• Usado para enviar pequenas quantidades de informação, visto que sua capacidade de envio é limitada.
• O método GET usa a barra de endereços do navegador para enviar informações para o servidor. Possui um limite de 256 caracteres.
Metodo GET
• http://localhost/executa.php?informação1=valor1&informação2=valor2
Método POST
• O método POST envia as informações para o servidor internamente ao protocolo HTML.
• A mensagem então pode ser criptografada;
• Não possui restrição de tamanho.
Como Fazer?
<form action=”script.php” method=”GET”>
<form action=”script.php” method=”POST”>
Campo de Texto
Nome: <input type=”text” name=”nome_do_visitante” size=”50” maxlenght=”50” value=”Digite aqui seu nome”>
Campo de Password
Senha: <input type=”password” name=”senha” size=”12” maxlenght=”12”>
Área de Texto
Comentário: <textarea name=”comentario” rows=”10” cols=”10”>comentário:</textarea>
Área de Texto
Comentário: <textarea name=”comentario” rows=”10” cols=”10”>comentário:</textarea>
ListBox
<select name=”cidade” size=”5” multiple>
<option value=”guaira”>Guaira</option> <option value=”umuarama”>Umuarama</option> <option value=”lovat”>Lovat</option> <option value=”cascavel”>Cascavel</option> <option value=”cianorte”>Cianorte</option>
</select>
ComboBox
<select name=”cidade2”>
<option value=”guaira”>Guaira</option> <option value=”umuarama”>Umuarama</option> <option value=”lovat”>Lovat</option> <option value=”cascavel”>Cascavel</option> <option value=”cianorte”>Cianorte</option>
</select>
Checkbox
Selecione uma cidade:<br> <p align= ”center”>
<input type=”checkbox” name=”pesquisa[]” value=”umuarama”>Umuarama<br>
<input type=”checkbox” name=”pesquisa[]” value=”guaira” checked>Guaira<br>
<input type=”checkbox” name=”pesquisa[]” value=”curitiba”>Curitiba<br>
</p>
Radiobutton
Enquete:<br> Que nota você daria ao nosso formulário?<br> <p align=”center”>
<input type=”radio” name=”nota” value=”5”>Otimo
<input type=”radio” name=”nota” value=”4”>Bom <input type=”radio” name=”nota” value=”3”>Regular
<input type=”radio” name=”nota” value=”2”>Ruim <input type=”radio” name=”nota” value=”1”>Péssimo
</p>
Botões Submit e Reset
• <input type=”submit” name=”botao” value=”enviar”>
• <input type=”reset” name=”limpar” value=”limpar”>
Exercício
• Monte o layout do seu site. Use tabelas para organizar o conteudo. O site deve ter um banner na parte superior, uma coluna para o conteudo, outra coluna para o menu de navegação do usuário e um rodapé contendo seu nome;
Exercício
• No espaço destinado ao conteudo, monte seu curriculum vitae. Na coluna ao lado, crie uma tabela contendo 3 linhas e uma coluna. Abaixo dela, crie um formulário de enquete e peça para que o visitante de uma nota ao seu site
Exercício
• Abaixo de seu curriculum, crie outro formulário para que o visitante possa adicionar comentários ao conteudo do site. O visitante deve informar o nome, localidade, e- mail de contato, uma nota para o conteudo e um comentário..
Referência
• PHP e Mysql do autor Leandro Correa dos Santos.
Apresentação
• Desenvolvida pelo Prof. Me. Wellington Pinto de Oliveira