HTML - Barra de navegação HTML simples

Neste artigo de HTML vamos desenvolver uma barra de navegação de uma maneira muito simples, na qual utilizaremos uma imagem para dar um pequeno efeito para fazer uma das bordas da tabela oblíqua.

A imagem 

Utiliza-se uma imagem para apresentar uma parte da célula onde se colocam os links com um lado oblíquo. A imagem tem uma parte transparente e outra parte com o fundo branco, que tem que ser o mesmo fundo da página. Colocaremos a imagem sobre uma célula da mesma cor da barra. Então, a parte branca criará o setor oblíquo e a parte transparente deixará ver a parte da célula com a cor que tenha a barra criada. Cor que se pode variar facilmente com estilos ou com o atributo bgcolor das células.

A tabela

O truque para fazer a barra se baseia em intercalar as células com os links e as células com a imagem. Será criada uma tabela com uma só fila e com tantas colunas como forem necessárias para localizar as opções. Na verdade, como se pode supor, serão criadas o dobro de células que de opções. Para cada opção, colocaremos primeiro uma célula com a imagem e logo outra com o link.

O código será algo como isto:

<table border=0 cellpadding="0" cellspacing="0">
<tr>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Opcao   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Opcao 2   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Mais opcoes   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> O que seja   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Mais coisas   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Secao enésima   </td>
</tr>
</table>

Detalhes para estar atento:

Foi utilizado uma classe de estilos CSS para definir o formato das células. Na classe se define um estilo, que inclui a cor de fundo, tamanho de letra, tipografia, etc.

Nota: Uma classe não é mais que um estilo definido, que podemos aplicar a diversos elementos do HTML. Definem-se com um código como este no cabeçalho do documento HTML: <style type="text/css"> .op{ font-size:10pt;font-family:verdana,arial;background-color:#ff8800;} </style>

Assim estamos definindo que os elementos dessa classe tenham tamanho de letra 10, fonte verdana, ou em seu padrão, arial, e fundo de cor alaranjado.

Também cabe destacar que para que o exemplo funcione corretamente é necessário colocar os atributos da tabela para que não tenha bordas nem margens, com border=0, cellspacing=0 e cellpadding=0. Por isso, para criar uma pequena margem antes do link, utilizam-se caracteres especiais  , que servem para colocar espaços em branco.

Read more »

PHP - Como fazer formulários em HTML/PHP

Para qualquer um que queira aprender alguma programação voltada para WEB(PHP, ASP, JAVA, etc) precisa saber como criar um formulário em HTML, já que é com eles que você irá coletar qualquer dado digitados pelo usuário.

Então irei explicar todos os passos, e as tags envolvidas, para se criar um fórmulario, e coletar os dados usando PHP.

 O <form></form>

A tag <form> delimita um formulário, ou seja tudo que estiver dentro dele será enviado ao clicar no botão, ela tem algumas propriedades:

<form name=”nome_do_form” method=”metodo_de_transferencia” action=”url_do_script”>

Explicando:

name: o name serve principalmente por questão de organização para vc saber o que ele faz, ele não é obrigatorio, a menos que vc tenha alguma função em javascript dai ele pode ser obrigatorio.

method: esse é o metodo que os dados serão enviados, se usam dois metodos get e post(leitura obrigatoria)

action: aqui será o nome ou a url, do arquivo que irá “pegar” os dados digitados no formulario.

O <input>

A tag <input> é um campo para entrada de dados, essa tag não precisa ser fechada(não existe </input>).

<input name=”titulo”>

Existe os seguintes atributos para ele:name: nome do input, é usado para podermos pegar os dados, posteriormente.

id: campo opcional, usado para algumas funções com javascripttype:  tipo de campo, ao qual atribuímos seis valores diferentes para gerar seis tipos diferentes de entrada de dados:

text: campo normal para digitação de textos, esse é o type padrão, caso não seja expecificado nenhum type.

<input name=”titulo” value=”texto” type=”text” />

password: campo de tipo senha, ao digitar algum valor os caracteres são escondidos por asteriscos<input name=”titulo” value=”texto” type=”password” />

Os campos do tipo text e password tem os seguintes atributos adicionais:size: comprimento da caixa de texto, o 26 representa o numero de caracteres que será visivel na telapodem ser digitados.

maxlength: numero de caracteres que poderá ser digitado.

value: Conteudo que irá aparecer no input

hidden: campo invisivel na tela, usado para passar valores de um formulario para outro.

checkbox: botão de multipla escolha,
<input name=”titulo” value=”futebol” type=”checkbox”>Item 1
<input name=”titulo” value=”volei” type=”checkbox” checked=”checked”>Item 2, Checado

Item 1Item 2, Checado

radio: botão de unica escolha, desde que todos tenham o mesmo name, só 1 deles poderá ser escolhido
<input name=”titulo” value=”item1″ type=”radio” />Item 1
<input name=”titulo” value=”item2″ type=”radio” />Item 2
<input name=”titulo” value=”item3″ type=”radio” checked=”checked” />Item 3, Checado

Item 1Item 2Item 3, Checado

Os campos do tipo chekbox e radio tem o atributo checked=”checked” que permite definir um item como selecionado.submit: botão para envio de dados, ele contem o value que será o texto a aparecer no botão
<input type=”submit” value=”texto” >

A <textarea> </textarea>A tag <textarea> também é um campo para digitar qualquer valor mas ele permite ter varias linhas. Existe os seguintes atributos para ele:

<textarea name=”post” id=”post” rows=”5″ cols=”40″>Aqui fica algum texto, se quizer</textarea>

name e id: tem as mesmas funcionalidades do input.

rows: numero de linhas que haverá

cols: numero de colunas que haverá(cada coluna é o equivalente a 1 caracter).

Esses são os principais e fundamentais itens para um fórmulario, existem outros veja os aqui. Essas tags não podem ter a sua aparencia alterada, mudada somente CSS, mas existe um jeito de alterar eles usando um script em javascript.
Criando um formulário

Agora que você já conhece para que serve cada um deles vamos, criar um formulario completo, para entender completamente o seu funcionamento.

Para usar o formulário usamos 2 arquivos o primeiro terá somente o formulário, usando as tags aqui explicadas, por isso pode ser em .html. E o segundo irá coletar os dados digitados, por isso precisa ser feito usando a linguagem de programação escolhida, no caso irei explicar com PHP, por isso é preciso executa-lo em um servidor, ou em localhost com o php instalado.

Para o exemplo não irei usar o radio e nem o checkbox pois são mais complicados para “pegar” o item selecionado(se tiver duvidas em como fazer isso é só perguntar), e a ideia desse artigo é ensinar o basico sobre como usar formularios.

Crie o arquivo com o formulário, chame-o de form.html, com o seguinte conteudo.

[code="html"]

Teste de Formulario com PHP

 

[/code]

e agora crie o arquivo que irá receber os dados, chame o de resultado.php(ou o nome que vc colocou no action do arquivo anterior), o seu conteudo será

[code="php"] $texto = $_POST["texto"];
$senha = $_POST["senha"];
$post = $_POST["post"];

echo "O texto digitado foi: ".$texto;
echo "
A senha digitada foi: ".$senha;
echo "
O post digitado foi: ".$post;
?> [/code]

Read more »