Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

As tags < frameset > e < frame > - Como funcionam os frames em HTML

Agora já fizemos uma breve explicação sobre o que é e para que serve um frame em HTML, vamos entrar em detalhes mais específicos sobre o uso dos frames para criar sites.

Para usar frames, temos que usar obrigatoriamente duas tags principais, que serão objetivo de estudo deste tutorial de nosso curso de HTML


.Entre no Mercado de Trabalho - Obtenha seu certificado de HTML e seja Webmaster

Como criar frames em sites HTML

Trabalhar com frames é algo mais diferente de tudo aquilo que você já viu em nossa apostila de HTML, afinal, não é à toa que dedicamos totalmente uma seção de nosso site para essa técnica de criação de sites.

Muitos consideram os frames como a parte mais difícil do entendimento e criação de sites através de códigos HTML 4.01, mas não é. Iremos mostrar e explicar bem os conceitos e ideias por trás dos frames, e verá que não é um assunto difícil, e sim diferente.
Vamos lá!

Como dissemos, frames são sub-janelas dentro da janela de seu browser, onde podemos exibir vários documentos (várias páginas, urls diferentes) em uma mesma janela do navegador.
É como se entrássemos em um site e ele estivesse dividido ao meio: metade dele exibe o site da uol, e a outra metade exibe o site da globo.





Vamos dar um exemplo real. Criamos um site bem simples, que divide a tela pela metade e exibe o site da Globo e da UOL. Veja como é o uso de um frame na prática:
Exemplo de Frame

Ora, se exibe mais de um site em um mesmo site (?), como é o código HTML?
É o código dos dois sites? Criamos dois conteúdos, dois menus, dois layouts ?
Não, é bem mais simples que isso.
Basicamente temos que usar duas tags: frameset e a frame, que veremos como usar em seguida.

As tags <frameset> e <frame> - Configurando um site com frames

Até o momento, em nosso curso, nossos sites HTML tinham sempre um mesmo padrão: tags html, header e o corpo (body), que contém nosso conteúdo.

Mas qual o conteúdo de um documento que tem por função exibir outros documentos (que é a definição de frames) ?
Ora, páginas que irão exibir frames não tem conteúdo, e sim uma configuração dos frames.

Isso quer dizer que não iremos mais utilizar a tag body, pois o corpo de nosso site agora será um conjunto (dois ou mais) frames, ou seja, dois ou mais documentos na mesma janela do browser.

Podemos entender o 'set' como um conjunto configurado.
Configurado pois iremos decidir uma série de opções para o uso dos frames, como:
  • número de frames
  • tamanho de cada frame
  • disposição (frames em linha ou em coluna)
  • interação entre os frames (clica em um link de um frame, a página atualiza em outro frame)

E por aí vai. Não é à toa que temos que realmente configurar nossos frames, pois as possibilidades são muitas.
Isso é feito através da tag frameset, que substitui a tag body.
E dentro desta tag frameset, vamos usar a tag frame para definir o comportamento de cada frame.

Código HTML de um site com frames

Como citamos no item passado, existe uma infinidade de possibilidades para se usar frames em um site.

Porém frames não é o assunto mais simples de se entender, configurar e usar, por isso iremos explicar as diferentes maneiras de se usar frames aos poucos, nesta seção de nosso curso.

Vamos mostrar agora o esboço de um site que faz uso de frames.
Como de praxe, usamos nossa velha conhecida tag <html> e também a tag <head>.
Em seguida abrimos a <frameset> para iniciarmos as configurações dos frames.

Como fizemos no decorrer de nossa apostila, esses detalhes e configurações se dão através de atributos que iremos usar em cada tag. Veremos em detalhes esses atributos no decorrer desta seção de frames em HTML.

Continuando o esboço do site, dentro da <frameset></frameset> iremos colocar as tags <frame> onde cada uma indicará uma frame, uma sub-janela diferente que irá aparecer no nosso site.
Como já dissemos, cada frame deste é na verdade um documento de html, uma outra página.
Então é óbvio esperar que cada tag frame venha acompanhada com a URL deste documento que ficará dentro do frame.

<html>
   <head>
      <title> Frames em HTML </title>
      <meta name="description" content="Framset - Como usar frames em sites HTML">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   </head>
 
   <frameset atributros_do_frameset>
        <frame atributos_deste_frame></frame>
        <frame atributos_deste_frame></frame>
        ...
        <frame atributos_deste_frame></frame>
   </frameset>

</html>


Exemplo de um site com frames

Nós mostramos um link que mostra na prática o uso dos frames (Exemplo de Frame), exibindo, ao mesmo tempo, o site da Globo e da UOL.
Á título de curiosidade, vamos mostrar o código HTML deste exemplo:

<!DOCTYPE html>
 
<html>
 <head>
  <title> Frames em HTML </title>
  <meta name="description" content="Framset - Como usar frames em sites HTML">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 </head>
 

      <frameset cols="50%,50%">
        <frame src="http://www.globo.com"></frame>
        <frame src="http://www.uol.com.br"></frame>
      </frameset>


</html>

Exercício de HTML

A característica mais importante de hackers e grandes desenvolvedores web é a curiosidade.
Como exercício, estude o código do frame acima, e mesmo sem ter lido nossas lições sobre os atributos, tente descobrir como funciona as tags.

Note que a tela está dividida meio a meio. Por quê?
Faça com que o site da UOL seja exibido 70% da tela, e o da Globo em 30%.
Você seria capaz de colocar 4 frames, exibindo 4 sites diferentes na mesma página, onde cada um ocupa 25% da tela?

Tente!

3 comentários:

Henrique Mattos e Silva disse...

o site do http://projetoprogressivo.net/html/frames/exemplo1.html

que mostra o exemplo do frame não está acessível.

Unknown disse...

Fiz o exemplo acima e aparece a divisão da tela e somente o site da globo o outro não aparece nada...

Unknown disse...

Eu tentei mas a imagem nao se adapta a frame fica sempre com scroll! Como tiro isso e adapto a imagem?

Tutoriais de HTML e CSS