Básico PHP: Introdução HTML

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>


</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>


</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

Básico PHP: Introdução HTML

Education