Back: General Guidelines

Next: Tables

Frames

HTML frames are a very, very useful set of tags when used properly. Remember how we said a link could target a frame name in the previous page? Well, frames essentially divide your page into separate independent pages. Each part has a name, and using that name you can assign each frame different content. Ever notice how in Google Images, when you search for an image you can see the original site, plus small message from Google at the top? That's frames at work. The bottom frame is showing you the site from your search results, and the top is there Google can let you know it is a search result while you browse the site. site and can return whenever you click the button.

Frames always must be started with a <frameset>. A frameset tells the browser that you're going to use frames, then you can define the individial frames with a <frame> tag.

NOTE: When you use a frameset, it replaces the 'body' tag so you should not have both.

Attributes

The frameset tag has the following useful attributes that will help you define how the frames look:

  • rows=: Use this if your frameset will divided horizontally. The value is a comma-seperated list of values that will define how big each frame is. You can use percentages for the value like this: "10%,90%" which would mean the top frame is 10% of the page and the bottom if 90%, or you can also use hard-coded pixels: "100,500". This would make the top frame 100 pixels high, and the bottom 500. A useful trick is the star character ( * ), which mean "fill up the rest of the space available". So a row value of "10%,*" means the top frame should use 10% of the page, and the bottom frame fills the rest.
  • cols=: Use this just like the row= attribute, but cols= divides the frames vertically rather than horizontally.
  • framespacing=: This is a value must be number, and tells the browser how much spacing in pixels should be in between each frame.
  • frameborder="0" || "1": The value for this tag must be "0" or "1". 1 means each frame will have a border, and 0 means the opposite.
  • scrolling="yes" || "no": You can only use "yes" or "no" for the value of this attribute. It tells the browser if it should show the scrool bars or not on the side and bottom of the frame.
  • noresize: This attribute doesn't have a value an can be placed by itself, it tells the browser the user isn't allowed to resize the frame. You usually want to use this tag.
  • name=: This attribute is used to give frames a name; When you click a link and wish for it to open in a frame, you have to use the "target" attribute in the link (discussed earlier) and use the frame's name you defined here.
  • src=: This attribute is the most important, it lets you put the webpage to capture inside the frame. Usually, this is your own site so you can put the name of the HTML file. For example "indexframe.html" would put the contents of indexframe.html into the frameset.

Example

<html>
<frameset rows="*,90" framespacing="0" frameborder="0" scrolling="no" noresize>
  <frame src="indexframe.html" name="content">
  <frame src="footer.html" name="footer">
</frameset>
</html>

This code would divite the screen into two vertical parts; The top fills the screen as much as possible, and the bottom takes exactly 90px. There are no spacing between the frames, and no borders. Resizing and scrolling frames is not permitted. The top frame is using the "indexframe.html" file, and the bottom is displaying the "footer.html" file. This is the code used on for this site; Take a look at the copywrite notice at the bottom. That is a 90 pixel frame that will always stay there; The top frame, where you're reading this text from, will take up all the rest of the space. Try it out - Resize the window! You'll see the top shrinks but the bottom always stays the same hight.

If there was a link in "footer.html" that I wanted to open in the top frame, "indexframe.html", I could use:

<a href="http://www.google.ca" target="content">click here to visit google.ca</a>

Since I named the frame for indexframe.html "content", I use "content" as the target.

Back: General Guidelines

Next: Tables