Howi.In

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-fpXp4A2fryE/VZrL3AZhcbI/AAAAAAAAG1M/6-47XQsJ_1A/s1600/Create%2BWebsite%2BLayout%2BDesign%2BUsing%2BHtml%2BFrameset%2BTag-min.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Create Website Layout Using Html Frameset" border="0" src="https://1.bp.blogspot.com/-fpXp4A2fryE/VZrL3AZhcbI/AAAAAAAAG1M/6-47XQsJ_1A/s1600/Create%2BWebsite%2BLayout%2BDesign%2BUsing%2BHtml%2BFrameset%2BTag-min.png" title="Create Website Layout Using Html Frameset" /></a></div>
<h2 style="text-align: left;">
Introductions :</h2>
<div>
It is very hard to create Html Layout using Tables and CSS because it consists of ideology. Without knowing the full function of Table and CSS, we can't create a perfect layout for our website. But with Frameset Tag, we can easily create website layout.  In the olden days, almost every web developers where chooses Frameset Tag to create their website layout. Today on this article you are going to learn about creating a website layout using Frameset Html Tag.<br />
<br />
<a class="btn-slide" href="http://forum.howi.in/Downloads/frame/Demo/" rel="nofollow" target="_blank"> <span class="circle"><i class="fa fa-laptop"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a class="btn-slide2" href="https://app.box.com/s/gfw07bwqeuo6fcc83t4371sxp3g5yier" rel="nofollow" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a>
<br />
<h4 style="text-align: left;">
How to Create a Website Layout Using Frameset Html Tag :</h4>
<iframe allowfullscreen="" frameborder="0" height="350" src="https://www.youtube.com/embed/OpdLQCYWPdg" width="820"></iframe>
It is very easy to create website layout using Html Tag . Before getting in to the tutorial you need to know about website layouts . By viewing the below picture representation you can simply understand what is Layout of a Website .</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-rn3cZYKKRk4/VZrACyJx33I/AAAAAAAAG08/Qko-qFCaxxA/s1600/layout-min.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Html Frameset Model" border="0" height="266" src="https://3.bp.blogspot.com/-rn3cZYKKRk4/VZrACyJx33I/AAAAAAAAG08/Qko-qFCaxxA/s640/layout-min.png" title="Html Frameset Model" width="640" /></a></div>
<div>
I hope you got an idea about what is Frameset, Now you are going to learn about Frameset in detail on the below paragraph. Follow the rules and regulation that given below . Step by Step process will help you fast learning .</div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Create a page name "<b>home.html</b>" and copy paste the below Html code to it.</span></li>
</ul>
<pre class="brush: js;"><frameset rows="25%,25%">
  <frame src="header.html">
<frameset cols="25%,25%">
  <frame src="sidebar.html">
  <frame src="main.html" name="main">
</frameset>
  </frameset></pre>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Replace the "<b>header.html</b>" With the header Html page you created.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Replace the "<b>sidebar.html</b>" With the Sidebar Html Page you created.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Replace the "<b>main.html</b>" With the page which you want to show on the "Main" Area .</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Don't forget every "<b>Html Pages</b>" Must be placed inside one folder.  Other wise it will not work correctly.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">You can change the "<b>Frame</b>" Size by changing the "<b>rows or cols % rate</b>".</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">You can change the "<b>Frame</b>" Position by changing the "<b><frame src="frame.html"></b>" Position. </span></li>
</ul>
<h4 style="text-align: left;">
Sidebar Page Setting :</h4>
</div>
<div>
Sidebar page must be configure other wise the link action will take place inside through the Sidebar Page itself . When a user click on the Sidebar Page link , The result must be shown inside through the "<b>Main.html</b>" Window. For the action, we already named the "<b>Main.html</b>" Page as "<b>main</b>" using the "<b>Name</b>" Tag. When you make a link on the "<b>sidebar.html</b>" Page the link must be "<b>Target</b>" With "<b>Name</b>" Tag "<b>ID</b>". Like the below example.</div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><a href="<b>about.html</b>" <b>target="main"</b>>About Me</a> .</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">By using the above example. The link was targeted to "<b>main.html</b>" Page using "<b>Target</b>" Tag. </span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">When a user clicks on the link which appear on the sidebar . The result of the click action will passes to "<b>main.html</b>" Page using the "<b>Target</b>" Tag .</span></li>
</ul>
<div>
<span style="font-family: inherit;">Remember the Frameset tag will not work on Html 5 Version . I already mentioned that on the Introduction . If your coding language is Html 5 Then use the CSS function to create Layout of the website . </span></div>
<h4 style="text-align: left;">
<span style="font-family: inherit;">Suggested Article for Webmasters:</span></h4>
<div>
<ul style="text-align: left;">
<li><a href="http://www.howi.in/2015/06/open-source-directory-to-publish-php-script.html" target="_blank">Top 6 Opensource Directory to Publish Your Php Opensource Script.</a></li>
<li><a href="http://www.howi.in/2015/06/turn-off-developer-mode-of-facebook-app.html" target="_blank">Turn Off Facebook App Development Developer Mode.</a></li>
<li><a href="http://www.howi.in/2015/06/top-5-wapmaster-forums-to-share-and-download-scripts.html" target="_blank">Top 5 Webmaster Forums to Download & Share Scripts.</a></li>
<li><a href="http://www.howi.in/2015/06/wapmaster-useful-javascript-code-collection.html" target="_blank">Webmaster Useful Java-scripts When Building a Website.</a></li>
</ul>
<div>
I hope you well enjoyed this article, If you have any doubts about this article. Please let me know by using the comment box given below. Thanks </div>
</div>
</div>
</div>

How to Create Web Layouts Using Html Frameset

Introductions : It is very hard to create Html Layout using Tables and CSS because it consists of ideology. Without knowing the full f...

+ Read more »