As Tags `frameset` e `frame`: A Evolução para o CSS Moderno
Agora que já fizemos uma breve explicação sobre a história dos frames, vamos entrar nos detalhes técnicos sobre como a web era construída no passado e como nós recriamos esses efeitos na internet de hoje.
Neste tutorial de nosso curso de HTML, iremos dissecar duas tags clássicas que reinaram na época do HTML 4.01: <frameset> e <frame>. Vamos entender como elas dividiam a tela e o que você deve usar hoje para não ser punido pelos buscadores!
Como funcionam as tags `frameset` e `frame`?
Para que serve a tag frameset? No HTML antigo, a tag <frameset> substituía a tag <body> e era usada para dividir a janela do navegador em várias seções (linhas ou colunas). Dentro dela, usava-se a tag <frame> para carregar um documento HTML diferente em cada seção. Hoje, o HTML5 baniu essas tags, e a divisão de telas é feita utilizando CSS (Flexbox ou Grid) combinado com <iframe>.
Muitos desenvolvedores das antigas consideravam os frames a parte mais confusa da criação de sites. O motivo era simples: um site com frames quebrava o padrão normal do HTML.
Até o momento, todos os nossos sites tinham sempre a mesma anatomia: a tag <head> para as configurações e a tag <body> para o conteúdo visível. No entanto, uma página que organiza frames não possui conteúdo próprio. A função dela é apenas dividir a tela e "chamar" outras páginas para preencherem esses espaços.
Por isso, a tag <frameset> substituía completamente o <body>. Dentro deste "Set" (um conjunto configurado), nós definíamos:
- O número de frames na tela.
- O tamanho exato (ou em porcentagem) de cada pedaço.
- A disposição (se a tela seria cortada em colunas verticais ou linhas horizontais).
O Código Antigo: Um Site Dividido ao Meio
Vamos dar um exemplo prático de como isso era feito antigamente. Imagine que queremos criar uma página que divida a tela exatamente no meio: 50% da tela exibe o site da Globo e os outros 50% exibem o site do UOL. O código seria este:
<!DOCTYPE html>
<html>
<head>
<title>Frames em HTML (Modo Antigo)</title>
<meta charset="utf-8">
</head>
<!-- A tag frameset substitui o body e corta a tela em duas colunas (cols) de 50% -->
<frameset cols="50%,50%">
<frame src="http://www.globo.com">
<frame src="http://www.uol.com.br">
</frameset>
</html>Se você usar o código acima hoje, o Google vai olhar para o seu site e pensar: "Onde está o conteúdo dessa página?" Como o conteúdo pertence a sites externos (Globo e UOL), sua página não ganha relevância nenhuma. Além disso, no celular do usuário, a tela ficaria esmagada. É por isso que o
frameset morreu!
O Mercado Mudou. Você Vai Ficar Preso no Passado? 🚀
Enquanto as faculdades e tutoriais antigos continuam ensinando tags obsoletas que destroem o SEO do seu site, o mercado exige programadores que dominem as boas práticas modernas.
"Eu estava travado tentando entender essas montagens malucas de frames e CSS antigo. A apostila Progressiva mastigou o CSS Grid e o Flexbox de um jeito que salvou meus projetos reais!" - Carlos, Desenvolvedor Front-End.
A Solução Moderna: Flexbox e Iframes
Como nós dividimos a tela hoje no mercado de trabalho sem ser penalizado? Nós usamos a tag <body> normalmente, dividimos o layout usando CSS (Flexbox) e, se precisarmos embutir um site externo, usamos a tag moderna <iframe>.
Veja como recriamos o efeito de dividir a tela em duas colunas (50% / 50%) usando as melhores práticas do HTML5:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Divisão de Tela Moderna (CSS + Iframe)</title>
<meta charset="utf-8">
<style>
/* Usamos o Flexbox para organizar os elementos lado a lado */
.container-moderno {
display: flex;
width: 100%;
height: 500px;
gap: 10px; /* Cria um pequeno espaço entre as janelas */
}
/* Cada iframe vai pegar metade do espaço flexível (flex: 1) */
.meu-iframe {
flex: 1;
border: 2px solid #ccc;
border-radius: 8px;
}
</style>
</head>
<body>
<h2 style="text-align: center;">O Jeito Certo de Embutir Sites Externos</h2>
<div class="container-moderno">
<!-- O Iframe é um elemento embutido que vive DENTRO do body -->
<iframe src="https://www.programacaoprogressiva.net" class="meu-iframe" aria-label="Portal Progressivo"></iframe>
<iframe src="https://pt.wikipedia.org" class="meu-iframe" aria-label="Wikipedia"></iframe><!-- Nota: Alguns sites grandes bloqueiam iframes por segurança -->
</div>
</body>
</html>Exercício Prático: O Desafio Hacker
A característica mais marcante de desenvolvedores e hackers de elite é a curiosidade implacável e a vontade de fuçar no código. Agora que você entendeu o conceito, que tal um desafio de lógica?
Tente modificar o código CSS moderno que passamos acima para resolver os seguintes problemas:
- Como você faria para que o primeiro Iframe ocupe 70% da tela, e o segundo ocupe apenas 30%? (Dica: Pesquise sobre propriedades CSS como `width` ou a função `flex-basis`).
- Você seria capaz de colocar 4 iframes na tela, onde cada um deles ocupe exatos 25%? Teste criar isso no seu próprio bloco de notas!
Perguntas Frequentes (FAQ)
Ainda posso usar a tag frameset no HTML5?
Poder até pode, porque os navegadores atuais (como Chrome e Edge) mantêm compatibilidade reversa para não quebrar a "web antiga". Porém, a tag foi oficialmente classificada como obsoleta e banida das especificações do HTML5. Seu uso prejudica o SEO, destrói a responsividade no mobile e é considerado uma má prática extrema no mercado profissional.
Como usar iframes sem quebrar a tela do celular?
O maior erro ao usar <iframe> é declarar width="800" (tamanho fixo). Para manter o site responsivo em qualquer dispositivo móvel, remova os tamanhos fixos da tag HTML e adicione estilos CSS ao elemento: style="max-width: 100%; height: auto;".
Como ter um cabeçalho único em todas as páginas sem usar frames?
Antigamente usava-se frames para não precisar copiar o código do menu em todas as páginas. Hoje, nós usamos linguagens de servidor. A forma mais clássica e eficiente é criar um arquivo menu.php e usar o comando PHP include('menu.php'); em suas outras páginas, injetando o código dinamicamente.
🎯 O que estudar a seguir:
Pare de viver no passado e acelere a sua carreira. Recomendamos os próximos passos:
- Documentação Oficial: Aprofunde-se nos atributos do Iframe (MDN)
- Introdução ao Flexbox CSS: O padrão atual de criação de Layouts
- Curso de PHP Gratuito: Como criar sites dinâmicos reais usando a função include()
Nenhum comentário:
Postar um comentário