Á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 :)

Jogo da Forca no Blog do SENAI

Confiram os jogos e fotinhos dos vencedores =)

http://senaideblumenau.blogspot.com.br/2015/06/jogo-da-forca-na-informatica.html

Sites Úteis para Desenvolvimento WEB

http://www.cssmatic.com/

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.

https://www.iconfinder.com/

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.

http://www.cssfontstack.com/

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

Atividade 3 - Meu primeiro site

Brincando com Flash 2

Como pode tanta fofura assim <3

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

Brincando com Adobe Flash

Atividade 1 - Desenvolver uma Página de Currículo

Desenvolvimento Web - O Início

HTML - Hypertext Markup Language

É uma linguagem de marcação utilizada para produzir páginas na WEB. Foi criada por Tim Beners-Lee, o inventor da Web.

Os comandos em HTML são chamados de tags e eles irão dizer ao navegador como o texto, a informação e as imagens serão formatadas e exibidas. As tags HTML são identificadas pelos símbolos <> (em uma tag de abertura) e </>(em uma tag de fechamento).

A estrutura básica de um documento HTML são as linhas obrigatórias e essências para um bom funcionamento de uma página web.

<html>

        <head>

                 <title></title>

         </head>

         <body>

         </body>

</html>

Tag <h>

É utilizada para formatar um bloco de texto com um cabeçalho. A tag <h> disponibiliza seis níveis de cabeçalho que formam uma hierarquia descendente.

Tag <p> </p>

Delimita os parágrafos

Listas Não Ordenadas

<ul>

            <li> </li>

<li> </li>

</ul>

Listas Ordenadas

<ol>

         <li> </li>

         <li> </li>

</ol>

Tag <div> </div>

A tag <div> é uma forma de alinhar um bloco de texto. Utilizando essa tag todas as tags desse bloco de texto serão afetadas.

Tag <a>

O atributo da tag <a> utilizado para criar links é o HREF. Esse atributo é o responsável por determinar o destino do link

<a href=”url”>Seu texto ou imagem aqui</a>

Target

O atributo TARGET é utilizado para especificar como o documento ou a página de destino do link devem ser carregados.

                _blank : nova janela do navegador;

                _self: nova aba;

<a href=”url”  target=”blank”>Seu texto ou imagem aqui</a>

Tag <img>

Utilizamos essa tag para inserir imagens no site.

   <img src="PastaDaImagem/NomeDaImagem.TipoDoArquivo/>

Podemos utlizar o atributo alt que especifica um texto alternativo que aparecerá no lugar da imagem para os navegadores somente de texto ou para aqueles definidos para download manual de imagem. Para usuários com deficiência visual, que utilizam sintetizadores de fala com navegadores somente de texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também aparecerá em uma legenda temporária quando o ponteiro estiver sobre a imagem.

 <img src="PastaDaImagem/NomeDaImagem.TipoDoArquivo alt="TextoSobreAImagem"/>

CSS - Cascading Style Sheets

A função do CSS (Folha de Estilo em Cascata) é formatar o design do HTML. O CSS pode ser feito dentro das tags <style></style> dentro do "head" do nosso site ou em um arquivo externo. Utilizaremos um arquivo de CSS externo em nosso site. Para isso sempre precisaremos inserir o seguinte link:

<head>

    <link rel="stylesheet" href="style.css" type="text/css"/>

</head>

Formatações mais utilizadas em CSS

Código CSS		O que faz
background-attachment:	fixed;	Mantem o plano de fundo fixo
background-color:	#f59e8a;	Cor de fundo a div, sempre deve ser com código
background-image:	url(imagens/fundo.jpg);	Imagem de fundo da div
background-repeat:	no-repeat;	Não repetir imagem de fundo
background-size:	100%;	Coloca o plano de fundo em tamanho 100%
-moz-background-size:	100% 100%;
-webkit-background-size:	100% 100%;
border:	1px solid #990099;	Tamanho e cor da borda nos quatro lados
border-bottom:	1px solid #990099;	Tamanho e cor da borda embaixo da div
border-radius:	8px;	Arredonda as bordas da div
	8px 2px 4px 5px;	Arredonda as bordas da div nesse caso cada uma separadamente seguindo a seguinte ordem:
clear:	both;	Anula todo float que tenha antes
color:	#990099 ;	Cor da fonte
float:	left;	Coloca uma div ao lado da outra à esquerda
	right;	Coloca uma div ao lado da outra à direita
font-family:	"Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;	Tipo da fonte (alguns tipos podem ser encontrados no site http://cssfontstack.com/)
font-size:	22px;	Tamanho da fonte
font-weight:	bold;	Deixar o texto da div em negrito
height:	250px;	Altura da div
left:	200px;	Espaçamento a esquerda do site
margin:	0 auto;	Centraliza a div no meio do site (horizontalmente)
	10px auto;	Centraliza a div no meio do site (horizontalmente) e da uma margin de acordo com os px
margin:	10px;	Margem da div nos quatro lados
margin-left:	600px;	Margem da div na esquerda
margin-top:	10px;	Margem da div no topo
margin-right:	20px;	Margem da div na direita
opacity:	0.9;	Transparência da div, pode variar de 0 à 1;
padding:	10px 20px;	Margem interna, nessa caso em cima/embaixo e esquerda/direita
	10px;	Margem interna nos quatro lados
position:	relative;	Faz com que a div inicie no ponto 0 para x e y
text-align:	center;	Alinhamento do texto no centro
	justify;	Alinhamento do texto justificado
	right;	Alinhamento do texto no direita
text-decoration:	underline;	Sublinhar o texto
width:	1280px;	Largura da div