HTML Frames Tutorials

Although this is not advisable (I would never do it), you can divide your web pages into what's known in HTML coding as frames. A frame layout allows you to separate each component of your web page into its own separate box. One or more of these boxes remain the same while another box containing content gets swapped out for different content as the viewer interacts with your website.

For example, a simple frame layout might consist of a menu in one frame running down the left side of your web page and a content frame running along the right side. When the viewer clicks on a link in the menu frame, the content frame displays new content according to the link clicked on.

The advantages of this are the menu frame can be created using a single .html file which always remains the same, as in, it can be reused to easily insert the same menu across multiple pages on your website. Thus, whenever something needs to be updated in the menu, only a single .html file needs to be modified as opposed to having to edit the HTML code for the menu across multiple web pages in a non-framed website.

Sounds great, eh? Well before you get all excited, you should go through this series of HTML frames tutorials to get all the ins and outs of what's up with this frame business...

Using Frames for Layout

This tutorial is where I try to scare you off from using HTML frames by outlining some common problems they have and if you survive that then we get into the actual coding required to create a simple frame layout template. You'll learn how to set up frames by creating a frameset document, how to set rows, columns and how to establish what gets displayed in each frame by making frame source documents...

MORE...

Advanced & iframe Layouts

A full blown frame layout would not only have a menu frame but would also have a header frame running across the top of the web page displaying, say, your company's logo. This requires you to create a more advanced frame layout using both rows and columns together. This page goes into detail about that as well as how to create simple inline frames which are framed boxes you can insert into non-framed web pages...

MORE...

Creating Hyperlinks in Frames

Creating hyperlinks in frames is a little more complex that it is in just standard web pages. Here you'll have to familiarize yourself with the concept of 'targetting' frames using the target attribute in your hyperlink code. This will allow you to place a link in one frame and have it open or change content in another frame...

MORE...

Frame Border Width

Alright, so now you've got your framed website all happening and everything is copesthetic except for one thing. Those butt-ugly borders! This page goes into detail about frame borders, how to hide them (or make them bigger) and what code to use to make sure you cover all the bases with regards to how various web browsers (e.g. Internet Explorer, Firefox) handle frame borders...

MORE...

Color, Margin and Control

You can further pimp out your framed layout by adding background colors, frame border colors and setting the margins in each frame...

MORE...

Problems with Frames

Here's where I once again try to scare you off from using a framed layout for your website by going into greater detail about some of the common problems mentioned earlier when using frames. Most of this has to do with how search engines index and link to your framed website as well as user interaction regarding sharing links to your framed pages...

MORE...

SmartFrames: A Solution

Here's a special framed layout I whipped up that you can use as a basic template to create your website that solves most of the problems frames have regarding search engine optimization and user friendliness...

MORE...

SSI: An Alternative to Frames

And finally, this is simply the best alternative to framed web pages (aside from using a PHP-based website). This solution allows you to create single web files with the .inc extension which are then called into your web page using Server Side Includes codes or SSI, for short. I know this all stinks of gobbledy-geek but really it's quite simple to implement and it accomplishes the same thing as frames without all the inherent problems...

MORE...