Lesson 16 Explanations

This lesson creates four framesets which utilize nested framesets to create combinations of cols (columns) and rows. Five skeleton web pages are utilized in conjunction with these framesets (the body of each skeleton web page is a single character which is a number in the range of 1 to 5). The skeleton web pages are utilized only for the purpose of creating and displaying frameset configurations (any of these web pages could have as many hyperlinks of as many types as desired).

The file names of the five skeleton web pages are as follows:

  1. Less16CodePage1.html

  2. Less16CodePage2.html

  3. Less16CodePage3.html

  4. Less16CodePage4.html

  5. Less16CodePage5.html

The file names of the four framesets presented in this lesson are as follows (these files appear in the above source code frame in this order and are explained in this frame in the same order):

  1. Less16CodeFS1.html

  2. Less16CodeFS2.html

  3. Less16CodeFS3.html

  4. Less16CodeFS4.html

In the above source code frame and in this explanation frame, each file presentation is preceded by the file name in bold and underline format.

Less16CodeFS1.html

Viewing this frameset at this point may be helpful in comprehending the source code in the above frame and the explanations of same in this frame. This frame set does not have a return link, use back button on browser to return to this lesson.

A "nested" frameset is sometimes referred to as an "inner" frameset. A nested or "inner" frameset is within an "outer" frameset.

Scroll through the source code in the above frame (in conjunction with the following explanations) for comprehension.

The frameset created by this source code file is a two column outer frameset, with a two row nested (inner) frameset (nested in the second column of the outer frameset). When this frameset is opened with a browser, the two columns appear on the computer screen (the two columns are separated by the vertical pane), and two rows appear in the second column (the two rows are separated by the horizontal pane).

The syntax for creating this frameset is the same as the syntax for the frameset in the previous lesson (Lesson 15) with one change; the source code for the second frame has been replaced with the source code for the nested (inner) frameset.

The opening inner frameset tag creates the two rows which appear in the second column of the outer frameset. The two frame tags for the inner frameset specify the web page files and frame names applicale to these frames.

Scroll through the source code for this file in the above frame, noting the following sequence of components from and including the first opening framset tag, through and including the last closing frameset tag;

  1. The outer opening frameset tag creating two columns and specifying the width of each column.

  2. The frame tag for the first column of the outer frameset specifying the default web page for this frame and the name of this frame.

  3. The inner opening frameset tag creating the two rows which will appear in the second column of the outer frameset.

  4. The frame tag for the first row of the inner frameset specifying the default web page for this frame and the name of this frame.

  5. The frame tag for the second row of the inner frameset specifying the default web page for this frame and the name of this frame.

  6. The inner closing frameset tag.

  7. The outer closing frameset tag.

This frameset configuration can be changed by changing the sequence of the components of the the outer frameset. In this source code, the outer frameset has two components; 1.) a frame tag and 2.) an inner frameset tag pair. If the sequence of these two componets is reversed, the nested frameset would appear in the first column of the outer frameset.

This frameset configuration can be changed by changing the "cols" attribute in the outer opening frameset tag to "rows" and by changing the "rows" attribute in the inner opening frameset tag to "cols". Changing this source code in this manner would create an outer frameset of two rows with an inner frameset of two columns in the second row of the outer frameset.

This framset configuration can be changed by changing the percentage and asterisk values in the source code. In this source code, the two column width values specified in the outer opening frameset tag can be changed, and/or, the two row height values specified in the inner opening frameset tag can be changed.

Less16CodeFS2.html

Viewing this frameset at this point may be helpful in comprehending the source code in the above frame and the explanations of same in this frame. This frame set does not have a return link, use back button on browser to return to this lesson.

Scroll through the source code in the above frame (in conjunction with the following explanations) for comprehension.

The source code for this frameset is identical to the source code for the previous frameset, except that, a third row has been added to the nested frameset. This was achieved by the following two changes in the source code for the previous frameset;

  1. In the opening frameset tag for the inner frameset, a comma, a space and "12%" was added to the src attribute value, creating a third row in this frameset. Scroll to and view this code in the above frame.

  2. Within the inner frameset tag pair, a third frame tag was added for the newly created column. The content of this frame tag reads as follows:

    frame src="Less16CodePage4.html" name="Four"

    This tag specifies the default web page for this frame and the name of this frame. Scroll to and view this code in the above frame.

The alternative configurations described above, at the conclusion of the explanations for the first source code file (Less16CodeFS1.html), are applicable to this source code file.

Less16CodeFS3.html

Viewing this frameset at this point may be helpful in comprehending the source code in the above frame and the explanations of same in this frame. This frame set does not have a return link, use back button on browser to return to this lesson.

Scroll through the source code in the above frame (in conjunction with the following explanations) for comprehension.

The source code for this frameset is identical to the source code for the previous frameset, except that, a third column has been added to the first (outer) frameset. This was achieved by the following two changes in the source code for the previous frameset;

  1. In the opening frameset tag for the outer frameset, a comma, a space, and "12%" was added to the src attribute value, creating a third column in this frameset. Scroll to and view this code in the above frame.

  2. Following the nested (inner) frameset tag pair, a frame tag was added for the newly created column. The content of this frame tag reads as follows:

    frame src="Less16CodePage5.html" name="Five"

    This tag specifies the default web page for this frame and the name of this frame. Scroll to and view this code in the above frame.

The alternative configurations described above, at the conclusion of the explanations for the first source code file (Less16CodeFS1.html), are applicable to this source code file.

Less16CodeFS4.html

Viewing this frameset at this point may be helpful in comprehending the source code in the above frame and the explanations of same in this frame. This frame set does not have a return link, use back button on browser to return to this lesson.

Scroll through the source code in the above frame (in conjunction with the following explanations) for comprehension.

The source code for this file creates an outer frameset of two columns with two inner framesets of two rows each (an inner frameset is nested in each column of the outer frameset).

The opening frameset tag for the outer frameset specifies the src attribute value of "*, *". Scroll to and view this code in the above frame. This attribute value creates two columns (vertical frames) of equal width (each frame is comprised of 50% of the computer screen).

The first inner frameset tag pair creates two rows in the first column of the outer frameset. Scroll to and view this code in the above frame.

The second inner frameset tag pair creates two rows for the second column of the outer frameset. Scroll to and view this code in the above frame.

The second inner frameset tag pair is followed by the outer closing frameset tag. Scroll to and view this code in the above frame.

The alternative configurations described above, at the conclusion of the explanations for the first source code file (Less16CodeFS1.html), are applicable to this source code file.

Lesson 16 Comments

Any of the web pages in any of the framesets in this lesson could have as many hyperlinks of as many types as desired. The types of hyperlinks were presented and explained in Lesson 15.

Lesson 16 Practice Activities

End of Lesson 16.