Aula 21/09 IFrames

Hoje a aula será sobre iframes.

No começo pode parecer um pouco confuso mas logo você verá como eles são legais e podem ser bem aproveitados em alguns sites.

IFrames são quadros que podemos colocar em nossa página da internet, este quadro tem a capacidade de carregar um conteúdo de outro site ou página dentro dele.

Vou mostrar um exemplo com algumas imagens:
Construí uma página simples com o texto "E aqui abaixo você tem o UOL rodando dentro da minha página".
Veja o exemplo:

Bem, agora vou mostrar o que acontece quando colocamos um IFrame dentro da página e programamos ele para acessar a página do UOL. Veja:

Bacana né, vamos ver como isso fica em códigos.

IFrame
Para criar um IFrame basta usar a tag <iframe> fazendo uso de três propriedades básicas:
src: o local aonde você indica que nome de página ou site irá abrir.
width: a largura (dimensão) do seu iframe dentro da página.
height: a altura do seu iframe dentro da página.

Exemplo:
<iframe src="http://facebook.com" width="400" height="250"></iframe>

Simples não?
Então vamos ao que interessa:

Primeiro, veja como ficou o código da página simples, sem o IFrame:

Agora, note quando adicionamos o comando do iframe na página que faz aparecer uma página dentro da outra.

Fantástico né?

Bons exercícios e até mais.

Aula 14/09 Javascript

Esta aula ensinará como adicionar alguns códigos e comandos especiais a sua página na internet, permitindo criar alguns efeitos dinâmicos e interessantes.
Para tal, utilizaremos uma linguagem de programação, no caso, o javascript.

Mas o que é JavaScript?
JavaScript é uma linguagem de script padronizada pela Ecma international nas especificações ECMA-262 e ISO/IEC 16262 e é atualmente a principal linguagem para programação client-side em navegadores web. Foi concebida para ser uma linguagem script com orientação a objetos baseada em protótipos, tipagem fraca e dinâmica e funções de primeira classe. Possui suporte à programação funcional e apresenta recursos como fechamentos e funções de alta ordem comumente indisponíveis em linguagens populares como Java e C++.

O que dá pra fazer com JavaScript?
Em uma página web, podemos apresentar mensagens, solicitar informações, fazer perguntas, validar formulários e movimentar elementos da página de forma dinâmica!

Como inserir um script na página?
É simples, basta utilizar a tag script para dar início e fim ao seu javascript. Veja:
< script >
    // Aqui dentro vai a programação em javascript
</ script >

Alguns comandos básicos
Agora vamos aprender a incrementar nossa página com alguns comandos básicos.

Mensagem
Podemos dar uma mensagem de boas vindas ao entrar na página que tal?

<script>
    // Mensagem de boas vindas
    alert("Bem vindo ao meu site! Aproveite.");
</ script >


Pergunta
Também é possível solicitar a resposta à uma pergunta, veja como:

< script >
    // Faz uma pergunta para responder OK ou Cancela.
    var respondeu = confirm("Este site está em desenvolvimento, ok?");
</ script >


Interpretando a pergunta
Dá para usar a resposta da pergunta para alguma coisa, que tal?
Para isso precisamos de verificar se o internauta respondeu a pergunta, ou seja, inserir uma condição ao nosso código, SE ele respondeu, nós damos uma mensagem, SE NÃO, não fazemos nada.

< script >
    // Faz uma pergunta para responder OK ou Cancela.
    var respondeu = confirm("Este site está em desenvolvimento, ok?");
    // Se respondeu
    if (respondeu) {
       // Responde ao internauta
       alert("Muito bem, obrigado por concordar.");
    }
</ script >


Solicitando informações para o internauta
Também podemos solicitar que o internauta nos informe qualquer coisa, por exemplo, vamos solicitar a sua idade. Veja como:

< script >
    // Solicita a idade do internauta
    var idade = confirm("Digite a sua idade por favor:");
    // Confirma a idade do internauta
    alert("Ok, você informou que sua idade é " + idade);
</ script >

Aula 14/09 Revisão Tags HTML

Abaixo uma pequena revisão das Tags HTML estudadas até o momento no curso e algumas mais:

- Início e Fim documento HTML
<html> e </html>

- Cabeçalho da página
<head> e </head>

- Título da página (dentro do cabeçalho)
<title> e </title>

- Corpo da página
<body> e </body>

- Títulos de documento
<h1> e <h1> (Sendo de 1 à 6).

- Parágrafo de texto
<p> e </p>


- Quebra de linha no texto
<br />

- Texto em negrito
<b> e </b>

- Texto em itálico
<i> e </i>

- Texto em sublinhado
<u> e </u>

- Alterando a fonte (letra) do texto
<font face="nome da fonte" size="tamanho da fonte" color="cor da fonte"> e </font>
Ex: <font face="arial" size="3" color="blue">Texto azul</font>

- Inserindo uma imagem na página
<img src="caminho imagem" width="largura" height="altura">
Ex: <img src="foto.jpg" width="100" height="100">

- Criando uma tabela
<table border=1> e </table>

- Inserindo uma linha na tabela
<tr> e </tr>

- Inserindo uma coluna (célula) na tabela
<td> e </td>

- Criando um link para outra página
<a href="endereço da página"> e </a>

- Inserindo um bloco javascript (programação) na página
<script> e </script>


- Inserindo uma linha divisória na página
<hr />

Aula 31/08 Formulários

Hoje o conteúdo da aula será sobre formulários e seus elementos.

Mas o que são formulários?
Em um site, formulários são aqueles espaços aonde algumas informações são solicitadas para preenchimento do internauta, por exemplo: um espaço aonde há um campo de texto para informar o seu email para receber novidades, é um formulário. Ou então, aquelas páginas de contato solicitando seu nome, telefone, e uma mensagem, estas informações constituem um formulário.

Um exemplo de um formulário de contato em uma página

Para criar um formulário em uma página nós utilizamos a tag FORM. É muito simples, veja:
<form>
Tudo aqui dentro é meu formulário
</form>

Dentro de um formulário nós podemos inserir diversos tipos de campos, podemos solicitar uma informação textual, ou então uma opção, ou uma lista de opções, etc.
Vamos conhecer abaixo alguns tipos de informações para formulários.

Campo de Texto
Para solicitar que o internauta informe um texto, nós usamos a tag INPUT com a propriedade type = "text". Veja a seguir:
<form>
Nome: <input type="text" name="nome" size="60" />
</form>

Lista de opções
Outra ferramenta igualmente útil é a possibilidade de criar uma lista de opções para a escolha do internauta, para tal utilizamos a tag SELECT, informando cada opção com a tag OPTION. Segue:
<form>
Escolha um estado: 
<select>
<option>SP</option>
<option>RJ</option>
<option>ES</option>
</select>
</form>

Campo de confirmação
Quando você quiser solicitar uma informação cuja resposta é apenas "sim" ou "não", como por exemplo "Você é casado?", a melhor opção é um INPUT com o type = "checkbox". Veja:
<form>
<input type="checkbox" checked="false" /> Concordo com o conteúdo da aula.
</form>

Botão de envio
Botões de envio também são criados pela tag INPUT, com type = "submit", é bem simples, veja:
<form>
<input type="submit" value="Enviar dados" />
</form>

Outros botões
Demais botões podem ser criados com a tag BUTTON, a diferença erá explicada nas próximas aulas.
<form>
<button>Limpar</button> <button>Sair</button>
</form>

Fácil? Só decorar qual tipo é mais apropriado para qual necessidade e praticar bastante!
Nas próximas aulas aprenderemos a interagir com o formulário via javascript e PHP.

Aula 24/08 Hiperlinks

Olá,

Neste post será ensinado a como inserir links na sua página, seja para uma outra página de seu próprio site, seja para um outro site diferente.

Links são nada mais do que um vínculo, que com o clique do mouse faz com que a outra página abra no seu navegador.
A tag que cria links é a tag <a>, mas não é só isso, é necessário informar o endereço do link na propriedade "href",
Veja o exemplo abaixo:

<p>
  Link para <a href="http://www.google.com">Google</a>
</p>

O exemplo citado cria um link que abre o site do google, o link se chama no caso "Google". Se você copiar este exemplo e executá-lo em seu site verá o seguinte resultado:

Link para Google

Clique para conferir!

É bem fácil né? Se fosse para apontar o link para uma página de seu site, não precisaria do endereço completo, apenas do nome do arquivo, exemplo:


<p>
  Link para <a href="outrapagina.php">Outra página</a>
</p>


Ok? Agora é só praticar e começar a criar menus e outras conexões em seu site.

Aula 24/08 Tabelas

Olá,
Neste tópico o conteúdo da aula será como criar e apresentar uma tabela de dados em seu site.

Mas o que é tabela?
Se você já fez curso de excel vai estar familiarizado com o termo, tabela é uma grade de informações dispostas em linhas e colunas. Por exemplo: podemos ter uma tabela de alunos que informe o nome e a idade dos alunos.

Exemplo de uma tabela, atenção para a disposição das linhas e colunas:

Legal né? Para criar uma tabela como esta é necessário um pouco de atenção com as Tags necessárias, basicamente são três tags principais:
TABLE: Cria e termina a tabela, é usada no início e no fim da tabela apenas.
TR: Cria e encerra uma linha, é usada toda vez que uma nova linha é inserida na tabela.
TD: Cria e encerra uma célula (coluna), é usada toda vez que uma nova informação é inserida na tabela.

Para entender melhor:

Na prática:

  <table border="1" cellpadding="5" cellspacing="1">
    <tr>
      <td><b>Marca</b></td><td><b>Modelo</b></td><td><b>Valor</b></td>
    </tr>
    <tr>
      <td>Gibson</td><td>Les Paul</td><td>R$ 6.852,32</td>
    </tr>
    <tr>
      <td>Ibanez</td><td>J. Custom</td><td>R$ 2.653,32</td>
    </tr>
    <tr>
      <td>Fender</td><td>Stratocaster</td><td>R$ 4.999,99</td>
    </tr>
    <tr>
      <td>Yamaha</td><td>RGx</td><td>R$ 2.300,02</td>
    </tr>
  </table>


Legal? Vejam que na tag TABLE adicionei as propriedades border, cellpadding e cellspacing.
Elas representam respectivamente:
border: a largura da borda
cellpadding: a margem do texto em relação a borda
cellspacing: o espaço entre as bordas.

Agora é só praticar bastante!

Aula 17/08 Imagens

Agora que já sabemos como preparar nossa página, dando cor e imagem para o fundo e formatando os textos de maneira bem eficiente, vamos aprender a inserir imagens em meio ao nosso texto, dando um conteúdo mais vivo e vibrante ao site.

A tag IMG
A tag responsável pelas imagens é a tag img, é uma tag super fácil de usar pois possui poucas propriedades, elas são:
src: o nome e caminho da imagem (caminho somente se não estiver na mesma pasta).
alt: o texto que aparece enquanto a imagem não é carregada.
height: altura em pixels
width: largura em pixels

Vamos praticar?
Considere que existe uma imagem "teste.jpg" na pasta de seu site.

<img src="teste.jpg" width="250" />

No exemplo acima mostramos a imagem com 250px de largura.

PS: Vejam que a tag img não precisa de inicio+fim, basta uma tag com barra antes do sinal de maior.

Mais exemplos:
Uma imagem que está em outro caminho:
<img src="http://www.teste.com.br/teste.jpg" />

Uma imagem com altura definida em 300px:
<img src="teste.jpg" height="300" />

Exercício:
Agora já estamos prontos para criar uma página completa e bem formatada com textos e imagens.
Já preparei uma pasta com um documento vazio e algumas imagens, também possui alguns textos que podem ser usados.
Baixe esta pasta clicando aqui.

Analisem o conteúdo dela e tentem trabalhar um documento html que ao final se pareça com o abaixo: