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.2: More About Using Frames

HTML Tutorial Chapters:  

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

Special Linking with HTML Frames

Okay, so let's go back to our original example, the side menu bar.

In file index.htm:


<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>

</html>

Now, we are going to need to create our menu_bar.htm page, and our main.htm page. Each of these must be edited separately. Each of these pages is almost exactly like a regular HTML page, except that there is an advanced linking option called the target attribute.

If you added regular links in menu_bar.htm and clicked on them, each page would load into the small, side frame! To get around this, you'll want to add a target attribute to each link you want to load in the main window.

inside menu_bar.htm:


<a href="oranges.htm" target="mainwindow">Load oranges</a><br>
<a href="apples.htm" target="mainwindow">Load apples</a><br>
<a href="kiwis.htm" target="mainwindow">Load kiwis</a><br>

Now, when you click on any of those links, they will end up loading in the larger window instead of the smaller window.

If you wanted to change the menu, to say animals instead of fruits from the main window, you could do something like <a href="animals.htm" target="sidemenu">Load animals into side menu bar</a> in main.htm.

There are three important target attributes you should be aware of:

target="_blank" - link is loaded into a new blank browser window (and your old window stays open).
target="_self" - link is loaded into frame that link was clicked in. (this is the default selection. Leave it out if you so please.)
target="_top" - link is loaded into current full browser window, and all frames disappear, leaving the new linked page to occupy the entire window.

Continue on to MiniChapter 14.3 for our third and final lesson about 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_2.shtml