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
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:
o site do http://projetoprogressivo.net/html/frames/exemplo1.html
que mostra o exemplo do frame não está acessível.
Fiz o exemplo acima e aparece a divisão da tela e somente o site da globo o outro não aparece nada...
Eu tentei mas a imagem nao se adapta a frame fica sempre com scroll! Como tiro isso e adapto a imagem?
Postar um comentário