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.
sexta-feira, 21 de setembro de 2012
quinta-feira, 13 de setembro de 2012
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 >
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 />
- 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 />
Assinar:
Postagens (Atom)