WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

HTML Tutor - Getting Started
Part 4

By Michael Hayman

All About Frames

Frames can be great. However, if used incorrectly, they can cause a lot of grief to your visitors and make your page look cluttered and, worst of all, ugly. Use the following tutorial and you'll have no problems with the second worst-used element of Web 'design' (the first begins with the letter 'B').

As with all HTML tags, frames have their own, and they begin with:

This is inserted before the <BODY> tags begin in the HTML file. It has the following options:

  • ROWS="#, #" | "%, %" | "#*, *"
  • COLS="#, #" | "%, %" | "#*, *"

The hashes (#) represent pixel sizes. For example: <FRAMESET ROWS="100,*"> would give you two frames--one being 100 pixels tall, the other filling in the rest.

The percentage (%) represents the percentage of width of the frame. For example, <FRAMESET COLS="25%,75%"> would give you two columns: one being 25 percent of the screen, the other being 75 percent.

The #*, * represents the first frame being a multiple of the size of the second. For example, <FRAMESET ROWS="2*, *"> would give you the first frame being twice the size of the second.

Now for the meat of the frames. The following tag defines what's inside each frame.

The frame tag defines each frame within the frameset. It includes the following attributes:

  • SRC="/path/to/file.html" tells the browser what to load inside this particular frame. You can also leave it blank or specify a picture.
  • NAME="x" allows a link in one frame to load its target in another frame. You can name it whatever you want.
  • NORESIZE renders your frame unresizable by viewers.
  • SCROLLING="yes/no/auto" the scrolling option allows you to define whether or not the frame can be scrolled through or not.
  • MARGINHEIGHT="x" defines the height of the margin in the individual frame. Values can be from 1 to whatever.
  • MARGINWIDTH="x" defines the width of the margin in the individual frame. Values can be from 1 to whatever.
  • FRAMEBORDER="x" defines whether or not there's a border between frames. Values can be from 0 in up.
  • FRAMESPACING="x" defines the frame spacing in each individual frame. Values can be from 0 on up. These can make a page look like it doesn't use frames.

What if someone has a browser that doesn't support frames? Add this after all of your frame tags:

After this tag you can put your <BODY> tag like you normally would. This tag comes into play if the user has an older browser -- they can still see the page, just without frames. This tag has no options.

The TARGET value allows you to load files in other frames. It appears in the HTML file itself.

Let's say you want a link from frame #1 to load a page in frame #2. <FRAMESET COLS="150, *"> <FRAME HREF="file1.html" NAME="#1"> <FRAME HREF="file2.html" NAME="#2"> </FRAMESET> You would make your links in file1.html look like this:

<A HREF="file.html" TARGET="#2">

and you would have file2.html include the following after the <BODY> tag:


The <TARGET> tag can also include one of the following attributes:

  • TARGET="_self" allows the file to load in the same frame.
  • TARGET="_parent" allows the file to load in the same frameset.
  • TARGET="_blank" allows the file to load in a new blank window.
  • TARGET="_top" the link will load completely outside of the frames without starting a new instance of the browser.

[ < HTML Tutor: Part 3 (Tables) ] [ HTML Tutor: Part 5 (Forms) > ]

HTML5 Development Center

Recent Articles