Step 16 – Frames

Last update: February 21 2019

For most people, frames are the most complex features of HTML. Luckily, it’s not used that much anymore.

This tag is phased out in HTML5. CSS offers some great alternatives.

A website using frames loads more than one HTML file, at one time. It has one master file, that calls all the other files together and creates its frames. This caused for a lot of partial content to float around the internet, which was indexed by search engines. If you stumbled upon a frames websites, using your keyword, it would only show a part of the site. It was not so good, so search engines changed their algorithms to ban frames websites. Therefore, CSS is a good alternative.

Frameset

The first HTML file is the master file. Let’s create a new file with out FRAMESET and call it frames.html :

<html>
<head><title>My frames website</title></head>
<frameset rows="50, *">

<frame src="upper-frame.html" />
<frame src="lower-frame.html" />
</frameset>
</html>

In our example, the FRAMESET divides the screen into two parts, horizontally. Additionally, it fills both portions of the screen with two other HTML files (which we don’t have, so it will show errors in the browser when you open this, but you do see the division). Notice, how this HTML file doesn’t have a BODY-tag? It wouldn’t work, if you added this.

Now a more complex example. Change the file to this:

<html>
<head><title>My frames website</title></head>
<frameset rows="50, *">

<frame src="upper-frame.html" />
  <frameset cols="140, *">

  <frame src="left-frame.html" />
<frame src="right-frame.html" />

  </frameset>
</frameset>
</html>

We’ve just nested one frameset into another. With the above HTML code, we’re using 3 frames. A top frame, a left frame en a main frame on the right.

ROWS

With

<frameset rows="50, *">

you open a FRAMESET that exists of two more frames. Using the ROWS-attribute, you set how big the frames are. In this case, the first, upper frame is set at a fixed height of 50 pixels. I could’ve also used a percentage here. The second frame has received the rest, whatever width that is. A star (*) means that rest can be used for the other frame. The first frame is filled with an HTML file called upper-frame.html:

<frame src="upper-frame.html" />

In the SRC value we assume that the upper-frame.html file is located in the same directory as the frames.html. If not, the same instruction apply here for the SRC location as I’ve explained in the step about images

Note: Make sure you never refer back to the masterfile (in this case frames.html). You’ll get caught in a loop and might crash the browser. However, you can load a second frameset.

The bottom (thus second) frame is divided in two more frames (COLS):

<frameset cols="140, *">

The first column has a width of 140 pixels and is filled with “left-frame.html”:

<frame src="left-frame.html" />

the rest is used for right-frame.html:

<frame src="right-frame.html" />

Lastly, we’re closing both framesets:

</frameset>
</frameset>

A FRAMESET is never placed within a BODY-tag.

So, to get this page to work you need 4 HTML documents:

1. frames.html
2. upper-frame.html
3. left-frame.html
4. right-frame.html

To view the page, you open frames.html in a browser. This is the master file. HTML files 2 to 4 can be filled with whatever content you want.

Borders

When you look at this in a browser, you’ll see the frames contain borders. You can turn this off as followed:

<html>
<head><title>My frames website</title></head>
<frameset rows="50, *" border="0" border="0" marginheight="0" marginwidth="0" frameborder="0">

<frame src="upper-frame.html"/>
<frameset cols="140, *" border="0" marginheight="0" marginwidth="0" frameborder="0">

  <frame src="left-frame.html" />
<frame src="right-frame.html" />

  </frameset>
</frameset>
</html>

Adding the attributes BORDER and FRAMEBORDER, with a value of 0 pixel, makes any border disappear. Turning off any margin smooth out any additional spaces that could be showing. The FRAMESET becomes invisible.

Resizing and Scrolling

By default, frames can be resized. People can pick up the edge and move the edge. When content is bigger than a frame, people can automatically scroll within that frame. To disable some of this:

<html>
<head><title>My frames website</title></head>
<frameset rows="50, *" border="0">

<frame src="upper-frame.html" noresize scrolling="no" />
<frameset cols="140, *">

  <frame src="left-frame.html" noresize scrolling="no" />
<frame src="right-frame.html" noresize scrolling="auto" />

  </frameset>
</frameset>
</html>

With SCROLLING=AUTO, you activate a scrollbar on the right side of the frame (only when necessary). By setting this to NO, you’ll never allow a scrollbar to appear. By default, it’s set to AUTO.

Using NORESIZE ensures the visitor can’t change the size of a frame by dragging its edge.

Name The Frame – linking within frames

In order to navigate between frames, you need to give every frame a unique name. This way, you can click on a link in the left frame and have the requested page loaded in the right:

<html>
<head><title>My frames website</title></head>
<frameset rows="50, *" border="0">

<frame src="upper-frame.html" name="top" />
<frameset cols="140, *">

  <frame src="left-frame.html" name="left" />
<frame src="right-frame.html" name="right" />

  </frameset>
</frameset>
</html>

Suppose, you’ve used the above frameset and used the left-frame.html for the buttons. The right frame is supposed to show the content. This is what a link in the left frame should look like:

<a href="home.html" target="right">Home</a>

A TARGET is always followed by one the names of the other frames. Or with _parent, _top or _self if you want to jump out of the frames but stay in the same window. You could also use new, when you want a new window to open.

If the above link would to be clicked, home.html would be opened in the right frame.

You’re practically done. Go to Step 17 to find out how to publish a site

Bookmark the permalink.

Comments are closed.