Como criar um site com frames em HTML

Agora que já sabemos o que são frames em HTML, bem como se dá seu funcionamento através das tags frameset e frame, vamos criar nosso primeiro site com dois frames: um na lateral, com os links do menu, e o outro com a página/conteúdo desses links.

Obtenha seu certificado do curso de HTML para entrar no Mercado de Trabalho como Webmaster

Criando as páginas de um site com frames

Como dissemos, frames em um site nada mais são que uma página que exibe 2 ou mais páginas.
Ou seja, para usarmos frames temos que ter algumas páginas em HTML prontas.

Sugerimos que criem uma pasta em seu sistema operacional especialmente pra essa seção, pois iremos fazer diversos documentos HTML (fica mais fácil para você se organizar e não se perder em meio à tantos arquivos .html :)

Para iniciar no uso dos frames, vamos criar uma página em HTML chamada "menu.html".
Como o nome sugere, ela vai apenas conter os links de navegação de nosso site.

Assim, o código desta nossa página poderia ser simplesmente:

<!DOCTYPE html>
 
<html>
 <head>
  <title> Menu de navegação </title>
  <meta name="description" content="Menu com links de navegação">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 </head>
 
 <body>
  <a href="home.html">Home</a><br />
  <a href="html.html">Apostila de HTML</a><br />
  <a href="css.html">Apostila de CSS</a><br />
  <a href="html5.html">Apostila de HTML 5</a><br />
  <a href="sobre.html">Sobre o autor</a><br />
  <a href="contato.html">Contato</a><br />
 </body>

</html>

Como podem notar, nosso menu 6 links: Home, Apostila de HTML, Apostila de CSS, Apostila de HTML 5, um link para uma página do autor e outro link para uma página de contato.

Agora, como exercício, crie essas páginas e adicione o conteúdo que você achar mais interessante.
Mas é importante que você crie, iremos usar essas outras páginas em próximos tutoriais de nossa apostila de HTML.

<frameset> - Definindo o layout de nossa index

Páginas criadas, agora vamos criar a página principal de um site, a index.html

Diferente dos outros documentos HTML que criamos, não vamos adicionar uma tag body nem conteúdo visível, pois iremos trabalhar com frames.

Na tag frameset vamos definir as características de nossos frames, como os tipos de frames e seus tamanhos.
Se acostume a sempre chamar sua página principal de index.

Tamanho dos frames - Os atributos cols e rows

Podemos ter dois tipos de frames: os verticais (com colunas) e os horizontais (com linhas).
Os verticais são aqueles em que as páginas são exibidas uma ao lado da outra, com barras verticais separando cada documento.

E como podem imaginar, os frames horizontais são aqueles em que as páginas são exibidas uma abaixo da outra.
Neste tutorial iremos criar frames verticais, onde teremos apenas duas colunas (o menu e o conteúdo).
Em breve iremos aprender a usar os dois (para criar um site com cabeçalho, menu e conteúdo, por exemplo).

Tanto o atributo cols como rows recebem como valores os tamanhos dos frames.
Como de praxe, esses tamanhos podem ser em pixel ou em porcentagem.

Por exemplo, se quisermos criar um site com dois frames em forma de duas colunas, onde cada um ocupe 50% da tela, fazemos:
cols="50%,50%"

Ou simplesmente: cols="50%,*"
Pois ao colocar o caractere *, o navegador vai saber que deve pegar o restante da tela.

E se quisermos 3 frames em linha onde cada um ocupe 100px ? Fazemos:
rows="100px,100px,100px"

E um site com 3 frames em coluna, onde o primeiro e o terceiro frame são menus, e cada um ocupa 10% da tela?
cols="10%, 80%, 10%" ou somente cols="10%,*,10%" , pois seu navegador é inteligente o suficiente para saber que resta 80% para o frame central.




<frame> - Definindo as características de cada frame

Ok, layout feito, tamanho e tipos (em linha ou coluna) de frames definidos, vamos trabalhar com as características de cada frame separadamente.

Ao longo desta seção sobre frames de nosso curso, iremos usar basicamente dois atributos nesta tag <frame>, que são 'name' e 'src'
Iremos usar o atributo 'name' em outro tutorial.

O atributo src

O nome 'src' vem de source, que significa fonte.
Se sua memória estiver boa, vai se lembrar que já usamos este atributo src quando estudamos as imagens em HTML, e lá usamos esse atributo para informar o endereço da imagem que iríamos adicionar no site.

Pois bem, geralmente os nomes dos atributos em HTML são universais, ou seja, usados em várias tags.
E assim como em imagens, em frames o atributo src também vai indicar um endereço, uma URL, porém ele vai conter o endereço da PÁGINA que queremos exibir naquele frame.

Em nosso caso, vamos exibir inicialmente duas páginas: o menu (cuja URL é menu.html) e a página de conteúdo (cuja URL é home.html).
Assim, nossas tags <frame> com atributo src ficam:

<frame src="menu.html"></frame>
<frame src="home.html"></frame>

Criando o site com frames

Pronto! Agora você já conhece bem os conceitos de frames em HTML e já aprendeu a usar as tags <frameset> e <frame>, e poderá criar sites incríveis com estas técnicas.

Agora vamos ver como ficou nosso arquivo index.html que contém apenas as informações de exibição dos frames:

<!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="20%,*">
        <frame src="menu.html"></frame>
        <frame src="home.html"></frame>
    </frameset>

</html>

Como puderam notar, vamos exibir os frames em colunas, ou seja, verticalmente um ao lado do outro, com o menu ocupando 20% e o conteúdo o restante da tela (80%).
O resultado deste site será como o que está nessa imagem:

Curso de HTML online grátis. Apostila completa para download


Bem simples, não?
Pois saiba que a maioria dos webmasters consideram os frames a parte mais difícil do estudo do HTML. Certamente porquê não estudaram pelo Curso HTML Progressivo :)

Exercício de HTML

Tente reproduzir o seguinte site, usando os mesmos documentos que usamos para criar a página deste tutorial:
Apostila completa online grátis de HTML e CSS

Dica: usamos o atributo rows em vez de cols.
Criamos uma tabela no arquivo menu.html, com uma linha e 6 colunas.

Nenhum comentário: