Reviews and recommendations on this web site, including web hosting reviews, may result in commissions paid to the Dave's Site. Follow on Twitter @firstdave
Check Out my new PhoneGap Tutorial / Cordova Tutorial


Hosting Tutorial - Table of Contents

This course was developed in much earlier days of the web and has been updated into Web Design Basics for iPad (same Dave, much better course!)
iPage Web Hosting -- Go Green for only $1.99/mo.
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5


HTML Code MiniChapter 14: Using Frames Tutorial

HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad

What are HTML Frames?

Frames are a way to divide the browser screen to allow easier navigation under some circumstances. Frequently, frames are used to add a side menu bar to a web site where the constant back and forth clicking would become tedious in a single page. In this example, the side menu bar would allow the user to just click in the side menu bar, and their choice would load into the main window.

Example: Side Menu Bar

This is what the index.htm would look like:

<html>
<head><title>title here</title></head>

<frameset cols="15%,85%">
 <frame src="menu_bar.htm" name="sidemenu">
 <frame src="main.htm" name="mainwindow">
</frameset>

<noframes>
 Your browser does not support frames.
 <a href="frameless_main.htm">Please visit the frameless page.</a>
</noframes>

</html>

Notice that there is no actual <body> coding. It is common courtesy, however, to place a <noframes> area after the frameset, but this is completely optional. This <noframes> area only displays in browsers that are not able to show frames.

If you create a special page for those without frames, you may be doubling your work. It is best, with effort and practice, to create a page, in this case, main.htm, that will work in both frames and noframes browsers. Then your noframes would read:


<noframes>
 Your browser does not support frames.
 <a href="main.htm">Please visit the frameless page.</a>
</noframes>

About <frameset> and <frame>

The frameset tag is used to declare multiple frames. As you can see in our first example, the menu bar side, there was one frameset. It read:


<frameset cols="15%,85%">

This tells the browser, we are creating column of framed pages, the first one is to take up 15% of the total browser screen, and the second is to take up 85% of the total browser screen. Then, we introduced <frame>, which is what actually loads the pages. Each frame must have a src, such as src="some_page.htm". So, because we used two framed areas within the frameset, we need two frame tags, each of them to load a page.


<frameset cols="15%,85%">
 <frame src="menu_bar.htm" name="sidemenu">
 <frame src="main.htm" name="mainwindow">
</frameset>

If we would like to add a third column, we would need to add a third size definition in the cols (so that all would add up to 100%) and another frame tag inside the frameset.

Likewise, we can use a rows definition instead of a columns definition. If we wanted the menu to be a bottom menu bar, we would do something like:


<frameset rows="80%,20%">
 <frame src="main.htm" name="mainwindow">
 <frame src="menu_bar.htm" name="bottommenu">
</frameset>

If you wanted the menu at the top, just switch it around a little bit:


<frameset rows="20%,80%">
 <frame src="menu_bar.htm" name="topmenu">
 <frame src="main.htm" name="mainwindow">
</frameset>

Continue on to MiniChapter 14.2 for the next page continuing our lesson on frames.

Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.
Copyright © Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/chap14.shtml