HTML - Frames

Os quadros HTML são usados para dividir a janela do navegador em várias seções, onde cada seção pode carregar um documento HTML separado. Uma coleção de quadros na janela do navegador é conhecida como conjunto de quadros. A janela é dividida em quadros de forma semelhante às tabelas são organizadas: em linhas e colunas.

Desvantagens das molduras

Existem algumas desvantagens no uso de frames, então nunca é recomendado usar frames em suas páginas da web -

Alguns dispositivos menores não conseguem lidar com frames frequentemente porque sua tela não é grande o suficiente para ser dividida.
Às vezes, sua página será exibida de forma diferente em computadores diferentes devido à resolução de tela diferente.
O botão Voltar do navegador pode não funcionar como o usuário espera.
Ainda existem poucos navegadores que não suportam a tecnologia de quadros.

Criação de quadros

Para usar frames em uma página, usamos a tag <frameset> em vez da tag <body>. A tag <frameset> define como dividir a janela em frames. orows atributo da tag <frameset> define quadros horizontais e colsatributo define quadros verticais. Cada quadro é indicado pela tag <frame> e define qual documento HTML deve ser aberto no quadro.

Note- A tag <frame> tornou-se obsoleta em HTML5. Não use este elemento.

Exemplo

A seguir está o exemplo para criar três quadros horizontais -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Isso produzirá o seguinte resultado -

Exemplo

Vamos colocar o exemplo acima da seguinte maneira, aqui substituímos o atributo de linhas por cols e alteramos sua largura. Isso criará todos os três quadros verticalmente -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Isso produzirá o seguinte resultado -

Os atributos da tag <frameset>

A seguir estão atributos importantes da tag <frameset> -

Sr. Não	Atributo e descrição
1	cols Especifica quantas colunas estão contidas no conjunto de quadros e o tamanho de cada coluna. Você pode especificar a largura de cada coluna de uma das quatro maneiras - Valores absolutos em pixels. Por exemplo, para criar três quadros verticais, use cols = "100, 500, 100" . Uma porcentagem da janela do navegador. Por exemplo, para criar três quadros verticais, use cols = "10%, 80%, 10%" . Usando um símbolo curinga. Por exemplo, para criar três quadros verticais, use cols = "10%, , 10%"* . Nesse caso, o curinga ocupa o restante da janela. Como larguras relativas da janela do navegador. Por exemplo, para criar três quadros verticais, use cols = "3 , 2 , 1 "* . Esta é uma alternativa às porcentagens. Você pode usar larguras relativas da janela do navegador. Aqui, a janela é dividida em sextos: a primeira coluna ocupa metade da janela, a segunda ocupa um terço e a terceira ocupa um sexto.
2	rows Este atributo funciona exatamente como o atributo cols e assume os mesmos valores, mas é usado para especificar as linhas no conjunto de quadros. Por exemplo, para criar dois quadros horizontais, use rows = "10%, 90%" . Você pode especificar a altura de cada linha da mesma forma como explicado acima para as colunas.
3	border Este atributo especifica a largura da borda de cada quadro em pixels. Por exemplo, border = "5". Um valor de zero significa sem borda.
4	frameborder Este atributo especifica se uma borda tridimensional deve ser exibida entre os quadros. Este atributo assume o valor 1 (sim) ou 0 (não). Por exemplo, frameborder = "0" não especifica nenhuma borda.
5	framespacing Este atributo especifica a quantidade de espaço entre os quadros em um conjunto de quadros. Isso pode assumir qualquer valor inteiro. Por exemplo, framespacing = "10" significa que deve haver um espaçamento de 10 pixels entre cada frame.

Os atributos da tag <frame>

A seguir estão os atributos importantes da tag <frame> -

Sr. Não	Atributo e descrição
1	src Este atributo é usado para dar o nome do arquivo que deve ser carregado no quadro. Seu valor pode ser qualquer URL. Por exemplo, src = "/html/top_frame.htm" carregará um arquivo HTML disponível no diretório html.
2	name Este atributo permite que você dê um nome a um quadro. É usado para indicar em qual quadro um documento deve ser carregado. Isso é especialmente importante quando você deseja criar links em um quadro que carrega páginas em outro quadro; nesse caso, o segundo quadro precisa de um nome para se identificar como o destino do link.
3	frameborder Este atributo especifica se as bordas desse quadro são ou não mostradas; ele sobrescreve o valor fornecido no atributo frameborder na tag <frameset> se um for fornecido, e isso pode assumir valores 1 (sim) ou 0 (não).
4	marginwidth Este atributo permite que você especifique a largura do espaço entre a esquerda e a direita das bordas do quadro e o conteúdo do quadro. O valor é dado em pixels. Por exemplo marginwidth = "10".
5	marginheight Este atributo permite que você especifique a altura do espaço entre as partes superior e inferior das bordas do quadro e seu conteúdo. O valor é dado em pixels. Por exemplo marginheight = "10".
6	noresize Por padrão, você pode redimensionar qualquer quadro clicando e arrastando nas bordas de um quadro. O atributo noresize impede que um usuário seja capaz de redimensionar o quadro. Por exemplo noresize = "noresize".
7	scrolling Este atributo controla a aparência das barras de rolagem que aparecem no quadro. Isso leva os valores "sim", "não" ou "automático". Por exemplo, scrolling = "no" significa que não deve haver barras de rolagem.
8	longdesc Este atributo permite que você forneça um link para outra página contendo uma longa descrição do conteúdo do quadro. Por exemplo longdesc = "framedescription.htm"

Suporte de navegador para frames

Se um usuário estiver usando qualquer navegador antigo ou qualquer navegador que não ofereça suporte a quadros, o elemento <noframes> deve ser exibido para o usuário.

Portanto, você deve colocar um elemento <body> dentro do elemento <noframes> porque o elemento <frameset> deve substituir o elemento <body>, mas se um navegador não entende o elemento <frameset>, ele deve entender o que está dentro do Elemento <body> que está contido em um elemento <noframes>.

Você pode colocar uma mensagem agradável para o seu usuário com navegadores antigos. Por exemplo, desculpe !! O seu navegador não suporta frames. conforme mostrado no exemplo acima.

Nome do quadro e atributos de destino

Um dos usos mais populares de frames é colocar barras de navegação em um frame e carregar as páginas principais em um frame separado.

Vamos ver o exemplo a seguir, onde um arquivo test.htm tem o seguinte código -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Aqui, criamos duas colunas para preencher com dois quadros. O primeiro quadro tem 200 pixels de largura e conterá a barra de menu de navegação implementada pormenu.htmArquivo. A segunda coluna preenche o espaço restante e conterá a parte principal da página e é implementada pormain.htmArquivo. Para todos os três links disponíveis na barra de menu, mencionamos o quadro de destino comomain_page, portanto, sempre que você clicar em qualquer um dos links na barra de menu, o link disponível será aberto na página principal.

A seguir está o conteúdo do arquivo menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

A seguir está o conteúdo do arquivo main.htm -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Quando carregamos test.htm arquivo, ele produz o seguinte resultado -

Agora você pode tentar clicar nos links disponíveis no painel esquerdo e ver o resultado. O atributo target também pode assumir um dos seguintes valores -

Sr. Não	Opção e descrição
1	_self Carrega a página no quadro atual.
2	_blank Carrega uma página em uma nova janela do navegador. Abrindo uma nova janela.
3	_parent Carrega a página na janela pai, que, no caso de um único conjunto de quadros, é a janela principal do navegador.
4	_top Carrega a página na janela do navegador, substituindo quaisquer quadros atuais.
5	targetframe Carrega a página em um targetframe nomeado.