sexta-feira, 2 de outubro de 2015

Áudio no seu site

Para adicionar música ao seu site você pode utilizar a tag de áudio do HTML5

<audio controls>
   <source src="musica1.mp3">
   <source src="musica2.mp3">
</audio>

Podemos adicionar os atributos abaixo após o controls:
  • autoplay : Faz com que o áudio reproduza automaticamente.
  • loop : Faz com que o áudio repita automaticamente.
Qualquer dúvida deixe nos comentários :)


terça-feira, 14 de julho de 2015

Sites Úteis para Desenvolvimento WEB




O site faz gradientes e texturas para plano de fundo e para as divs ele faz box-shadow e border-radius. É legal porque você vê do lado o que está acontecendo, como se fosse uma prévia do que vai aparecer no site.




O site tem vários ícones para utilização free ou paga em seu site. O legal é que você encontra nele vários ícones no mesmo padrão. Além da versão em .png você ainda pode baixar a versão .ico para usar como favicon.




Esse site mostra algumas fontes diferentes das padrões encontradas nos software de desenvolvimento. Ele gera o código CSS da font-family.


domingo, 5 de julho de 2015

Criando um Formulário Básico

Tag <form>

Serve para a criação de um formulário.

Atributos da tag <form>


<form action="malito:email@gmail.com">

Nesse exemplo os dados dos formulários serão enviados para o endereço de e-mail especificado.


<form action="salvar.php">

Nesse caso os dados do formulário são tratados por meio de um código de PHP. Há outras linguagens de programação como ASP que também processam formulários.


<form ... method="get">
<form ... method="post">

O atributo method é utilizado para especificar o método de envio do conteúdo do formulário. Pode ser do tipo "post" esse método envia o conteúdo do formulário no corpo de uma mensagem. Ou pode ser do tipo "get" o método get envia o conteúdo do formulário anexado a url especificada no atributo action.


Tag <fieldset>

Cria um campo no formulário.


Tag <legend>

Coloca uma legenda no campo do formulário. Deve ser usada depois da tag <fieldset>


Tag<label>

Serve como uma etiqueta/rotulo para aquele campo. 
<label for="nome"> Nome: </label>
 O for vai indicar a qual input ele está vinculado.


Tag <input>

Insere um campo para digitação.


Atributos da tag <input>


<input type="text"> 

É utilizado para receber nomes de usuários, endereços,..


<input type="email"> 

É utilizado para receber e-mail, dependendo do navegador ele já reconhece o texto e analisa se é um e-mail valido ou não.


<input type="radio"> 

Criar uma seleção estilo a figura abaixo.





<input type="date"> 

Cria uma seleção com um calendário abaixo.







 

 <input type="number"> 

Criar uma seleção onde você pode ir variando número.






<input type="range"> 

Cria um botão estilo volume.





<input type="submit"> 

Cria um botão que envia o formulário para o endereço descrito no action. No atributo value é onde fica o texto escrito no botão.


<input type="image"> 

Cria um botão que envia o formulário para o endereço descrito no action a partir de uma imagem do computador.


<input ... size="20"> 

Define o tamanho do campo. Usamos com type= text, email.


<input ... maxlength="20"> 

Define quantidade de caracteres. Usamos com type= text, email.


<input ... placeholder="Nome Completo"> 

Escreve um texto para auxiliar o usuário. Esse texto some quando usuário clica nele. Usamos com type= text, email,textarea.


<input ... min="0" max="20"> 

Define o número mínimo e máximo em um input do tipo number (type="number") e também no input do tipo range (type="range").


<input ... step="2"> 

Define de quanto em quanto o input do tipo range vai variar. No caso do exemplo vai de 2 em 2.


Tag <select>

Cria um botão para seleção.

<optgroup label="Região Sudeste">
        <option value="RJ">Rio de Janeiro</option>
        <option value="SP">São Paulo</option>
        <option value="MG">Minhas Gerais</option>
</optgroup>              






Tag <textarea>

Cria uma área para digitação do usuário.







Atributos <textarea>

<textarea cols="45" rows="5">
Define o número de colunas (cols) e linhas(rows)


Mais informações no link abaixo:
http://www.w3schools.com/tags/att_input_type.asp