Chapter 13

Understanding the Frame Tags

 

Exercise 1

Dividing a single browser window into multiple windows for separate document viewing is called framing.

 

Imagine you have three different Web pages, as shown. To view these pages, you need to open them one at a time.

 

 

 

 

 

 

 

 

Using frames in your Web page allows you to divide the browser into numerous sub windows – in this case three, each displaying a separate document. Each of the Web pages above can then be simultaneously viewed as shown below.

 

 

 

 

 

There are two kinds of HTML documents now available for use on the Web: frameset documents and body documents.

 

Body documents are the Web pages that you have created so far and that are formatted using the <BODY></BODY> tags. Body documents tell the browser to display the information contained between the <BODY> tags.

 

Frameset documents contain the information necessary for the browser to determine what kind of frame structure it should use when dividing the window into frames. Frameset documents do not contain any information about the Web pages to be used in the frame, but instead contain the URLs referencing a document that the browser should display within the frame. In other words, frameset documents tell the browser, “Display this file here and that file there.”

 

In a frameset document, the <BODY> tag is replaced by the <FRAMESET> </FRAMESET> tags. The <FRAMESET> tag tells the browser how to divide the window. For example, how many “miniwindows” are to be displayed and whether the windows will be displayed horizontally (rows) or vertically (columns).

 

The tag used to specify which document is to be placed in the window is <FRAME SRC=”filename”>. The <FRAME> tag tells the browser which filename to use as the source for that frame.

 

Let’s create a few smaller files to used in the frames.

  1. Open your HTML template file.
  2. Put Welcome to my frame page between the title tags.
  3. Key Purple between the body tags.
  4. Change the body background to purple.
  5. Save the document as chap 13 exer 1a lastnameintitial.html.

 

Next you will change the body text of this document to create other documents.

  1. Change the word “Purple” to “Red.”
  2. Change the body background to red.
  3. Save the document as chap 13 exer 1b lastnameinitial.html.
  4. Change the word “Red” to “Blue.”
  5. Change the body background color to blue.
  6. Save the document as chap 13 exer 1c lastnameinitial.html.

 

Splitting the Window Vertically

Once you have created the documents to be displayed in the frames page, you are ready to create the master page or frameset document.

  1. Delete the word “Blue” and the body background color tag.
  2. Change the <BODY> tag to <FRAMESET>.
  3. Change the </BODY> tag to </FRAMESET>.

 

Now would be a good time to save the document.

  1. Save the document as chap 13 exer 1d lastnameintial.html

 

Next, tell the browser to split the main window into three columns. When splitting the window, you need to specify what percentage of the window each document will have. Be careful that your percentages do not total more than 100% or the browser will display the Web page incorrectly.

  1. Change the <FRAMESET> tag to <FRAMESET COLS=“25%,50%,25%”>.

 

That means to make the first window 25%, the second window 50%, and the third window 25%.

 

Now we need to tell the browser what file to put in each frame.

  1. On the next line, key <FRAME SRC=“chap 13 1a lastnameinitial.html”>.
  2. On the next line, key <FRAME SRC=“chap 13 1b  lastnameinitial.html”>.
  3. On the next line, key <FRAME SRC=“chap 13 1c  lastnameinitial.html”>.
  4. Save the document and view the Web page in your browser.

                                                                                                                                                     

Your Web page should have three columns, each being a different color. If your Web page is incorrect double-check your source code and make sure you keyed the tags correctly.

 

Splitting the Window Horizontally

To divide the window into rows, do the following steps.

  1. In the <FRAMESET> tag, change the word “COLS” to “ROWS.”
  2. Save the document and refresh your browser.

 

Your Web page should have three rows, each being a different color. If your Web page is incorrect, double-check your source code and make sure you keyed the tag correctly.

 

  1. Change the frame back to horizontal by changing the word “ROWS” to “COLS.”
  2. Save the document and view the Web page in your browser. Remember to reopen the file are unable to refresh the browser.

 

Now let’s change the size of each frame.

 

There are two ways to specify the size of each window in a frameset document. The percent sign (%) creates an absolute dimension for that window. That means that no matter what size monitor is used to display the page, the frame is to be the specified percentage of the window. It is a good idea to always have at least one elastic (*) frame. An elastic frame enlarges or gets smaller depending on how much room is left in the window. For example, if the tag reads <FRAMESET COLS=“30%,25%,*”>, the first window would be 30%, the second 25%, and the third would be whatever was left over.

 

Because so many different screen sizes are available, elastic frames help your Web page display correctly no matter what size screen your readers are using. If you created the page using a screen that is 800 x 600 pixels and the person viewing your page has a 640 x 480 screen, then using absolute dimensions would cause the Web page to display incorrectly on the smaller screen. By using an elastic frame, the browser can adjust the size of the Web page to fit any size screen.

 

To create an elastic frame, do the following steps.

  1. Change “25%,50%,25%” to “45%,45%,*”
  2. Save the document and refresh the browser to reopen the file.
  3. Change the size again by changing “45%,45%” to “25%,*,*”

 

Notice the columns change sizes each time the document is refreshed or reopened. Remember, some browsers will not refresh a frameset document. You will need to reopen the file by choosing File, then Open, or Open File.

 

  1. Change “25%,*,*” to “*,*,*”.
  2. Save the document and refresh your browser or reopen the file.
  3. Change the columns to rows.
  4. Change the second row to 75% and make the first and third row elastic.

 

The tag should read <FRAMESET ROWS=“*,75%,*”>.

 

  1. Save the document and refresh your browser or reopen the file.

 

Now let’s change the files in each frame.

  1. Change “chap 13 exer 1a lastnameinitial.html” to “chap 5 exer 3 lastnameinitial.html”.
  2. Change “chap 13 exer 1b lastnameinitial.html” to “chap 8 exer 1b lastnameinitial.html”.
  3. Change “chap 13 exer 1c lastnameintial.html” to “chap 4 exer 3 lastnameinitial.html”.
  4. Save the document as chap 13 exer 1e lastnameinitial.html
  5. View the Web page in your browser.

 

Does your Web page display the different files? If not, double-check your source code and make sure the tags and filenames are correct.

 

  1. Use the scroll bars in each window to scroll through the documents.

 

Exercise 2

In this exercise you will use multiple <FRAMESET> tags to further split the document window.

 

Text Box: <HTML> <HEAD> <TITLE>Welcome to my frame page</TITLE> </HEAD> <FRAMESET ROWS="*,*"> <FRAME SRC="purple.html"> <FRAMESET COLS="*,*"> <FRAME SRc="red.html"> <FRAME SRC="blue.html"> </FRAMESET> </FRAMESET> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <ADDRESS>Created by<BR>Mrs. Jones</ADDRESS> </HTML> The figure on the right shows a Web page with one frame on top and two frames on the bottom. This page was first split into two rows, then the second row was split into two columns.

 

To split the second row in your Web page, do the following steps.

  1. In Notepad, open chap 13 exer 1d lastnameinitial.html
  2. Change the <FRAMESET> tag to have two rows. Make both rows elastic.

 

The tag should read <FRAMESET ROWS=“*,*”>

  1. Insert a blank line between the first two <FRAME> tags (chap 13 exer 1a and chap 13 exer 1b).

 

We need to divide the second row into two columns. Remember when you want to do any dividing you must use the <FRAMESET> tag.

 

  1. In the blank line, key <FRAMESET COLS=“*,*”>.

 

This creates two columns of equal size.

 

The <FRAMESET> tag is a container tag, which means every time you use an open container tag, you must also use the closing container tag. You must have the same number of open and closing tags.

  1. Insert an additional </FRAMESET> tag after the first one.

 

Note: The closing tags can be on the same line, if desired.

  1. Save the document as chap 13 exer 2 lastnameinitial and open the file in your browser.Does your Web page display the purple file on top and the red and blue files on the bottom? Is so, congratulations! If not, double-check your source code and make sure you keyed the tags correctly. If you need further help, compare your source code to the example.

 

 

Now let’s change the Web page back to columns and split the second column into two rows.

  1. In the first <FRAMESET> tag, change the word “ROWS” to “COLS”.
  2. In the second <FRAMESET> tag, change the word “COLS” to “ROWS”.
  3. Save the document and reopen the file in your browser.

 

Does your Web page display the purple file on the left and the red and blue files on the right? If not, double-check your source code and make sure you keyed the tags correctly.

 

Exercise 3

In this exercise you will change the way Internet Web pages display in your frameset document.

 

Linking Within Frames

Links are created the same way in frameset documents as they are in body documents. The difference is in how the linked document will display.

 

You can have the linked file appear in the same window, appear in a different window, or appear in a new window that does not use frames.

 

To change the display of linked files in your Web page, do the following steps.

  1. In Notepad, open chap 13 exer 1e lastnameinitial.html.
  2. Change the <FRAMESET> to columns. Make 2 columns elastic.

 

The tag should read <FRAMESET COLS=“*,*”>.

  1. Delete the line for the first <FRAME> TAG (chap 5 exer 3 lastnameinitial.html).
  2. Save the document as chap 13 exer 3 lastnameinitial and open the Web page in your browser.

 

You should have two windows side by side.

  1. In the chap 8 exer 1b lastnameinitial.html Web page, click the link for computer definitions.

 

Notice the computer definitions page takes the place of the link lastnameinitial.html page in the window. If you wanted to return to the link lastnameintial.html Web page, you may have to reopen the chap 13 exer 1e lastnameinitial.html Web page again. Clicking the Back button may not return you to the link lastnameintial.html page.

 

  1. Reopen chap 13 exer 3 lastnameinitial.html in your browser.

 

To correct this problem, you need to insert an attribute in the <A HREF> tag in the LINK document that tells the browser where to open the new Web page. Many Web pages have a column on the left side of the Window and as you click the links, the document appears in a window to the right. This allows you to see the links available and the new Web pages on the same screen.

 

To be able to click a link in the left window and have the Web page appear in the right window, you first need to name the new window. Naming a frame gives it an identity and allows you to specify a target where the new Web page should appear. To name a frame, use the NAME=“xxx” tag. To specify a target, use the TARGET=”xxx” tag.

  1. Add NAME=“WINDOW-2” to the second frame tag.

 

The frame tag should read <FRAME SRC=“chap 4 exer 3 lastnameintial.html” NAME=“window-2”>.

  1. Save the document.
  2. In notepad, open chap 8 exer 1b lastnameinitial.html.
  3. Change the first <A HREF> tag to <A HREF=“chap 6 exer 2 lastnameinitial” TARGET=“window-2”>.
  4. Save the document.

 

Now, when the link is activated, the computer will look for “window-2” and open the Web page in the correct frame.

  1. In your browser, reopen chap 13 exer 3 lastnameinitial.html
  2. Click the computer definition link.

 

Did the list of computer terms appear in the right frame? If not, double-click the source code in both documents and make sure you keyed the name and target correctly.

 

  1. Click the link for Walt Disney.

 

Notice the Walt Disney home page opens in the left frame. You should always have outside Web pages open in a new, full-size window. To do this, change the target to <TARGET=“_top”>. The underscore _ is created by pressing Shift+dash (-).

 

NOTE: Be sure you key “top” in lowercase letters. Some browsers will open the document in a new browser window instead of opening it in the current browser window.

 

  1. In Notepad, open chap 8 exer 1b lastnameinitial.html link.
  2. Change the Disney <A HREF> tag to <A HREF=http://www.disney.com TARGET=“_top”>
  3. Save the document.
  4. In your browser, reopen chap 13 exer 3 lastnameinitial.html lastnameintial.html
  5. Click the Disney link.

 

Did the Disney homepage appear in the window? If not, double-check your source code and make sure you keyed the tag correctly.

 

Exercise 4

Define the Web page as a frameset document

<FRAMESET>…</FRAMESET>

Define document for frame

<FRAME SRC=”filename”>

Define rows

ROWS=

Define columns

COLS=

Name a frame

NAME=“xxxx”>

Target a frame

TARGET=“xxxx”

Target a new browser window

TARGET=“_top”>

 

Using the tags in the above table, do the following:

  1. In Notepad, create a new Web page and insert the essential HTML tags using <FRAMESET> instead of <BODY>.
  2. Key Frames are easy! as the title.

 

Your master page will have one frame on the top and two frames on the bottom.

  1. Define two rows of equal length.
  2. Define the first frame with the HTML document of your choice.
  3. Split the second row by defining two columns of equal length.
  4. Define two frames with the HTML documents of your choice.

 

Remember, you need to have an equal number of open and close tags.

  1. Insert two </FRAMESET> tags.
  2. Save the document as chap 13 exer 4 lasntameinitial.html
  3. View the document in your browser.

 

Did it work? Do you have one Web page in the top frame and two Web pages underneath? If not, double-check your source code and make sure you keyed the tags correctly. If you need further help, compare your source code to the example below and make sure they are identical.

 

Exercise 5

Create a frameset document with three columns. Split the last column into two rows. Display Web pages you have created in the first two columns. Display images you have downloaded in the two rows.

 

Save the document as chap 13 exer 5 lastnameinintial.html