How to view more web pages in single web page using frame tag | 2my4edge

23 August 2013

How to view more web pages in single web page using frame tag

Today i'm going to show you that, how to make view more web pages in a single web page using frame tag. you already know that frame tag does not support in HTML5, because it affect the usability of web page. but here going to show to how to run more than one. that is tow or more pages run in a single web page. by using frame tag. let see the details about that.
more than one page in single page

DOWNLOAD               LIVE DEMO
in a single page page i'm going to run more than one page using frame. here i'm going to run 7 pages in a single web page. let see how it going work. in a <frame> and <frameset> tag we can not use <body> tag. so that is also kind of minus in the frame tag. 
7 FILE LISTS :
  1. index.html
  2. left-frame.html
  3. right-frame.html
  4. php.html
  5. css.html
  6. java-script.html
  7. jquery.html
the above all 7 files are going to run in a single page. 

INDEX.PHP

<frameset cols="30%, 70%">
<frame src="left-frame.html" name="sample">
<frame src="right-frame.html" name="show">
</frameset>
in a frameset tag cols and rows are used to make horizontal and vertical frameset, if you are using cols means that will be vertical frameset, and if you are using rows means that will be horizontal frameset. and in the frame tag we have to give src link to the file which want show in the page. name is the attribute of frame tag.  
we have to give name for that.

LEFT-FRAME.HTML

<ul class="ulclass"> 
   <a href="php.html" target="show"> 
   <li class="liclass">PHP</li>   
   </a>

   <a href="java-script.html" target="show"> 
   <li class="liclass">Java script</li>   
   </a>
   
   <a href="css.html" target="show"> 
   <li class="liclass">CSS</li>   
   </a>
   
   <a href="jquery.html" target="show"> 
   <li class="liclass">JQuery</li>   
   </a>
</ul>


in anchor tag assign target page as the name of the frame. that is it to make view all the web page in the same page. 

RIGHT-FRAME.PHP

In the right side frame, we can give any of what you need in that page. else leave it as dummy page. you assign the frame name as show. so what you click on the left-frame.html. that will be shown in the right-frame.html. 

as similarly we can give any of the content in the other files. you can give any of the content in the below page.
PHP.HTML
CSS.HTML
JAVA-SCRIPT.HTML
JQUERY.HTML

This frames are re-sizable, so if you don't want to resize the frame, use noresize in the frame. that will not allow to make resize the frame. you can get clear idea from demo. click on the above link.



RELATED POSTS:









4 comments:

  1. how to apply this in blogger ...

    ReplyDelete
  2. you should better use PHP to achieve the same result in a much more clean way. Frames are not a good idea/practice , and not in use anymore since quite some years now, for a lot of reasons.

    ReplyDelete

^