SdevLab – Tutorial | HTML Frame

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

HTML Frame

Utilizando os frames nós mudamos um pouco o formato de nossas páginas, podemos abrir mais de uma ao mesmo tempo na mesma aba do navegador. Com isto é possível desenvolvermos projetos mais elaborados.

Para explicar melhor como utilizar os frames, vamos ao primeiro exemplo, copie o código abaixo e colo no Bloco de Notas, salvando como teste7.html:


<html>
   <head>
      <title>
           Teste 7
      </title>
   </head>
   <frameset cols="25%,75%">
      <frame src="frame_1.html">
      <frame src="frame_2.html">
   </frameset>
</html>

Agora crie dois arquivos html e salve ambos no mesmo diretório que você salvou o teste 7. Um dos arquivos dever ser nomeado como frame_1.html e o outro frame_2.html.

Note que se você clicar na barra que divide os frames você poderá redimensionar o tamanho deles. Para criar um frame de tamanho fixo, utilize o atributo noresize seguindo a sintaxe abaixo


<frame noresize="noresize" src="seuframe.html">

Frames Mistos

Um frame misto tem linhas e colunas na sua composição, copie e cole o exemplo abaixo no Bloco de notas e salve como teste8.html; crie também mais 1 arquivo,  frame_3.html, que deve ser salvo no mesmo diretório que os arquivos criados no exemplo 7 e 8.


<html>
   <head>
      <title>
           Teste 8
      </title>
   </head>
   <frameset rows="50%,50%">
      <frame noresize="noresize" src="frame_1.html">
      <frameset cols="25%,75%">
           <frame noresize="noresize" src="frame_2.html">
           <frame noresize="noresize" src="frame_3.html">
      </frameset>
   </frameset>
</html>

Noframes

Regiões de noframe são áreas que só serão exibidas por navegadores que não exibirem frames, dentro dela você pode usar a tag body como no exemplo abaixo:


<html>
   <head>
      <title>
           Teste 9
      </title>
   </head>
   <frameset rows="50%,50%">
      <frame noresize="noresize" src="frame_1.html">
      <frameset cols="25%,75%">
           <frame noresize="noresize" src="frame_2.html">
           <frame noresize="noresize" src="frame_3.html">
           <noframes>
                <body>
                     <p>
                          Esta região só será exibida em navegadores 
                          que não suportarem frames.
                     </p>
                </body>
           </noframes>
      </frameset>
   </frameset>
</html>

Copie o código e salve no mesmo lugar do exemplo anterior, com o nome teste9.html.

Navegação entre frames

Para fazer uma página que utilize um frame somente para a navegação, fazemos um arranjo da seguinte maneira: um arquivo html é utilizado de “menu” e guarda todos os links que irão abrir no frame “principal”. Segue um exemplo para ilustrar melhor a idéia. Copie e cole o código como nos exemplos anteriores e salve este como teste10.html.


<html>
   <head>
      <title>
           Teste 10
      </title>
   </head>
   <frameset cols="25%,75%">
      <frame noresize="noresize" src="menu.html">
      <frame noresize="noresize" src="frame_1.html" name="principal">
   </frameset>
</html>

Note que foi utilizado o atributo name dentro da tag frame, que é o responsável por fazer a conexão com o link, que é exemplificado no código abaixo, que deve ser salvo como menu.html.


<html>
   <head>
      <title>
           Menu
      </title>
   </head>
   <body>
      <a href="frame_1.html" target="principal">
           Frame 1
      </a>
      <a href="frame_2.html" target="principal">
           Frame 2
      </a>
      <a href="frame_3.html" target="principal">
           Frame 3
      </a>
   </body>
</html>

Observe que na tag do link, foi utilizado o atributo target (que foi explicado neste tutorial) com o argumento “principal”, que foi definido dentro do exemplo anterior. Quando qualquer link do código acima for clicado, ele abrirá a página destino no frame da direita do navegador.

OBS: para o exemplo funcionar corretamente você deve ter todas as páginas envolvidas (teste10.html, menu.html, frame_1.html, frame_2.html e frame_3.html)  salvas no mesmo diretório.

Frames dentro de uma página

Para inserirmos um frame dentro de uma página (um arquivo que tem as tags head, body, ou seja, que não foi feita utilizando a tag frameset), utilizamos a tag iframe, que é demonstrada na prática no exemplo abaixo.


<html>
   <head>
      <title>
           Teste 11
      </title>
   </head>
   <body>
      <p>
           Esta é minha página.
      </p>
      https://sdevlab.wordpress.com
      <p>
           Eu continuo com a pagina normalmente, porém, 
           uma outra página está "dentro" dela.
      </p>
   </body>
</html>

Errata: Este trecho do iFrame ficou um bom tempo errado aqui no blog, mas foi corrigido em 26/05/2016.

Salve o exemplo como teste11.html. Crie uma página e salve como iframe.html no mesmo diretório do teste11.html ou então faça um iframe para uma página da web para testar!

Este foi o tutorial sobre frames, até a próxima!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Fonte de pesquisa: w3schools.com/html

Anúncios

2 comentários sobre “SdevLab – Tutorial | HTML Frame

  1. Pingback: SdevLab – Tutoriais | Tabela « Sanoj's devLab
  2. Pingback: SdevLab – Curso| Aprenda HTML 4.1 Online | Sanoj's devLab

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s