Você está na página 1de 4

HTML

FRAME E IFRAME

1. FRAME

O elemento Frame, quadro, permite definir uma divisão de um website em 2 ou mais


arquivos que formam o Layout da página. É um elemento bloco.

Os frames, definidos em um documento html por meio da tag <frame>, devem ser
definidos no interior do elemento frameset, tag <Frameset>.
Um Frameset é um elemento define o layout da página da web que é composta de outras
páginas (arquivos de html separados). A página com frameset ao invés de conter os tags <BODY>
e </BODY> os quais indicam o conteúdo do documento, possui as tags <FRAMESET> e
</FRAMESET> e opcionalmente <noframeset> e </noframeset> para que o navegador exibi o
conteudo deste elemento caso ele não disponibilize o recurso Frame.

Atributos para a etiqueta frameset:

Atributo Valor Descrição


cols % ou pixels Define a largura ocupada por cada quadro

rows % ou pixels Define a altura ocupada por cada quadro

frameborder 1 ou 0 Estabelece a largura em pixels da borda dos quadros.

Atributos para a etiqueta frame:

Atributo Valor Descrição


align top, middle, Define a largura ocupada por cada quadro
bottom, left, right
noresize % ou pixels Impede que o quadro possa ser redimensionado
pelo usuário

frameborder 1 ou 0 Estabelece a largura em pixels da borda dos


quadros.

src URL Informa a URL do documento que será exibido


dentro do quadro.
marginheight numero Define um espaçamento vertical em pixels entre a
borda do quadro e o seu conteúdo.

name rotulo Define um nome para o quadro que pode ser


referenciado pelo atributo target do elemento <a>.
marginwidth número Define um espaçamento horizontal em pixels entre
a borda do quadro e o seu conteúdo.
scrolling yes ou no Decide se haverá ou não barra de rolamento para
permitir a visualização do conteúdo do quadro.
Exemplos:

Exemplo 1: frame de columas


<html><head></head>
<frameset cols="25%, 50%, *">
<frame src="contents.htm" />
<frame src="info.htm" />
<frame scrolling="no" src="graphic.htm" />
</frameset>

</html>

exemplo 2: frame de colunas


<html><head></head>
<frameset cols=10,30,20>
<frame src="frame1.htm">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</html>
exemplo 3: frame de linhas

<html><head></head>
<frameset rows=10,25,10 frameborder="0">
<frame src="frame1.htm">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</html>

Exemplo 4: solução para navegadores que não suportam frameset

<html><head></head>
<frameset rows=10,25,10 frameborder="0">
<frame src="frame1.htm">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
<noframe>
o que será exibido caso o navegador não suporte frameset
<noframe>
</html>
OBS:Alguns navegadores, tais como o Firefox, suportam a definição do frameset dentro
do corpo do documento.
Exemplo:
<html><head></head><body>
<frameset cols="25%, 50%, *">
<frame src="contents.htm" />
<frame src="info.htm" />
<frame scrolling="no" src="graphic.htm" />
</frameset>
</body></html>

Exemplo:
<html>
<frameset cols="20%, 60%, 20%" border="0">
<frame src="frame1.html" name="esquerda" marginheight="20"
marginwidth="30" scrolling="yes" />
<frame src="frame2.html" name="meio" scrolling="no" />
<frame src="frame3.html" name="direita" noresize="noresize" />
</frameset>
</html>

2. IFRAME

A etiquetaq Iframe define um quadro embutido que contém um outro documento html,
sendo conhecido como inline frame (iframe).

Grande parte dos navegadores tais como Internet Explore, Firefox, Google Chrome e
Safari, suportam iframe

Atributos para o iframe:

Atributo Valor Descrição


class classname Especifica um nome de classe para um elemento
id id Especifica um ID único para um elemento
style definição do estilo Especifica um estilo para um elemento
title texto Especifica informações adicionais sobre um elemento
left
right
specifica o alinhamento de um iframe de acordo com os
align top
elementos ao redor
middle
bottom
1 Especifica se deve ou não exibir uma borda em torno de um
frameborder
0 iframe
height pixels ou % Especifica a altura de um iframe
Especifica uma página que contém uma longa descrição do
longdesc URL
conteúdo de um iframe
marginheight pixels Especifica as margens superior e inferior de um iframe
Specifies the left and right margins of an iframe Especifica as
marginwidth pixels
margens esquerda e direita de um iframe
name texto Especifica o nome de um iframe
scrolling yes Especifica se deve ou não exibir barras de rolagem em um
no iframe
auto
src URL Especifica o URL do documento para mostrar em um iframe
width pixels ou % Especifica a largura de um iframe

Exemplos:

<html><head></head><body>
<h1> Esta é minha pagina pessoal</h1>
<iframe src ="http://www.sidneyvieira.co.nr" width="100%" height="300">
<p>seu navegador não suprta iframes.</p>
</iframe>
</body></html>

<html><body>
<iframe src="frame1.html" width="200" height="150" frameborder="1"
marginheight="10" marginwidth="20" scrolling="no"> </iframe>
<iframe src="frame2.html" width="300" height="200" align="center" frameborder="0"
scrolling="auto"></iframe>
<body></html>