Bem gente, vejo que muitas pessoas andam perguntando como adicionar uma pagina dentro de outra...
Nem sei si isso é bem um tutorial mas vou explicar como se usa, o que é porque usar o <iframe>
Bom vamos la
Definição e uso
O iframe é uma tag que cria um frame dentro da página HTML/PHP, em vez de "dividir" a página em duas ou mais partes e é muito utilizado para exibir um conteúdo específico dentro de uma página como um texto ou arquivo multimídia. Não confunda o iframe com o frame, o frame, divide a tela em quadros.
Exemplo:
Atributos Opcionais:
Como seria esse link?
Adicionando os atributos
Como faço para adicionar um atributo na tag <iframe>?
Simples, basta adicionar depois de um espaço o atributo e o valor, exemplo:
align - Atributo de alinhamento
right - Valor
Sinal de igual (=) - Caractere padrão
Aspas ("valor") - Caractere padrão
Agora vejamos mais um exemplo, para melhor entender.
Veja:
Como estava na listinha:
src - Atributo
pagina.htm (URL) - Valor
Sinal de igual (=) - Caractere padrão
Aspas ("valor") - Caractere padrão
Como faço para adicionar dois ou mais atributos?
Basta adicionar após um espaço, veja um exemplo:
E como posso definir o tamanho?
Simples, com os atributos width e height, ambos citados na listinha acima. Exemplo:
Você pode utilizar tanto em porcentagem quanto em pixels para definir o tamanho.
Como faço em porcentagem?
Após o número adicione o %. Veja o exemplo:
Só que, lembre-se porcentagem é diferente de pixels, então a medida de porcentagem vai depender do tamanho da página. No caso aí, que está em porcento é maior que o que está em pixels (testado em uma mesma página de mesmo tamanho).[/glow]
O que é width? E height?
width - Altura
height - Largura
Como faço para tirar ou por uma borda?
Você pode estar fazendo isso usando o atributo frameborder. O valor 0 e 1, que tais eles significam 0 (não), 1 (sim), caso queira com borda faça o seguinte:
E como faço sem borda?
Simples, se o valor "0" significa "não", substitua pelo 1. Exemplo:
Como estava exatamente na listinha "Define a barra de rolagem" ou seja definirá se terá ou não barra de rolagem.
scrolling="no" - Iframe sem barra de rolagem
scrolling="yes" - Iframe com barra de rolagem
scrolling="auto" - Iframe padrão... não é muito necessário a utilização desse atributo.
Mas agora, como faço um iframe com barra de rolagem?
Simples, substitua o "no" pelo "yes". Exemplo:
Atributo allowtransparency="true"
Ele faz com que o Iframe fique transparente, mas peraí, ainda não terminamos.
Na tag <iframe> adicione ele como qualquer atributo. Exemplo:
Adicione o código acima na página que criou, agora crie uma página chamada "page.html" ou qualquer outro nome, como preferir, mas lembre-se caso salvar essa tal página com outro nome mude na tag <iframe> o src="suapage.html", coloque o nome com quê o salvou.
No page.html deve conter a seguinte tag:
Creditos:
Vitor e Eu
Nem sei si isso é bem um tutorial mas vou explicar como se usa, o que é porque usar o <iframe>
Bom vamos la
Definição e uso
O iframe é uma tag que cria um frame dentro da página HTML/PHP, em vez de "dividir" a página em duas ou mais partes e é muito utilizado para exibir um conteúdo específico dentro de uma página como um texto ou arquivo multimídia. Não confunda o iframe com o frame, o frame, divide a tela em quadros.
Exemplo:
Bom ate ai tudo bem... Mas vamos complicar um pouco mais =]
Atributos Opcionais:
Atributos Padrão:
Iframe e Links:
Observe o código acima, utilizei o atributo name, que dá o nome ao iframe, para assim possibilitar a abertura apartir de um link dentro do iframe "main".
Como seria esse link?
Observe acima, target="main" foi o nome dado ao iframe, então podemos ver que ele abrirá no iframe que foi nomeado como "main".
Adicionando os atributos
Como faço para adicionar um atributo na tag <iframe>?
Simples, basta adicionar depois de um espaço o atributo e o valor, exemplo:
O Inline frame ou melhor dizendo o iframe ficará ao lado direito da tela. Observe:
align - Atributo de alinhamento
right - Valor
Sinal de igual (=) - Caractere padrão
Aspas ("valor") - Caractere padrão
Agora vejamos mais um exemplo, para melhor entender.
Veja:
O src puxará uma página para dentro do iframe.
Como estava na listinha:
src - Atributo
pagina.htm (URL) - Valor
Sinal de igual (=) - Caractere padrão
Aspas ("valor") - Caractere padrão
Como faço para adicionar dois ou mais atributos?
Basta adicionar após um espaço, veja um exemplo:
Viu como é facil?
E como posso definir o tamanho?
Simples, com os atributos width e height, ambos citados na listinha acima. Exemplo:
Mas alí na listinha tem porcento, para que server?
Você pode utilizar tanto em porcentagem quanto em pixels para definir o tamanho.
Como faço em porcentagem?
Após o número adicione o %. Veja o exemplo:
[glow=red,2,300]
Só que, lembre-se porcentagem é diferente de pixels, então a medida de porcentagem vai depender do tamanho da página. No caso aí, que está em porcento é maior que o que está em pixels (testado em uma mesma página de mesmo tamanho).[/glow]
O que é width? E height?
width - Altura
height - Largura
Como faço para tirar ou por uma borda?
Você pode estar fazendo isso usando o atributo frameborder. O valor 0 e 1, que tais eles significam 0 (não), 1 (sim), caso queira com borda faça o seguinte:
Observe o valor, foi "1" que tal ele significa "sim".
E como faço sem borda?
Simples, se o valor "0" significa "não", substitua pelo 1. Exemplo:
Atributo scrolling na tag <iframe>
Mas para que serve o atributo scrolling?
Como estava exatamente na listinha "Define a barra de rolagem" ou seja definirá se terá ou não barra de rolagem.
scrolling="no" - Iframe sem barra de rolagem
scrolling="yes" - Iframe com barra de rolagem
scrolling="auto" - Iframe padrão... não é muito necessário a utilização desse atributo.
Mas agora, como faço um iframe com barra de rolagem?
Simples, substitua o "no" pelo "yes". Exemplo:
Iframe transparente, como faço?
Atributo allowtransparency="true"
Ele faz com que o Iframe fique transparente, mas peraí, ainda não terminamos.
Na tag <iframe> adicione ele como qualquer atributo. Exemplo:
Calma, ainda falta mais alguns ajustes...
Adicione o código acima na página que criou, agora crie uma página chamada "page.html" ou qualquer outro nome, como preferir, mas lembre-se caso salvar essa tal página com outro nome mude na tag <iframe> o src="suapage.html", coloque o nome com quê o salvou.
No page.html deve conter a seguinte tag:
Caso ela já tenha a tag <body>, basta substituir pelo código acima.
Creditos:
Vitor e Eu