This lesson creates a frameset and four web pages which are utilized in conjunction with this frameset. This particular frameset is comprised of a narrow vertical frame on the left side of the computer screen (for a menu of hyperlinks) and a large vertical frame comprised of the remainder of the computer screen (for display of page selected in menu frame). This is a common utilization of a frameset on the internet.
Viewing and utililizing 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.
The above lesson frame (Lesson 15 Source Code) contains five source code files (the file which creates the frameset and four files which create web pages utilized in conjunction with this frameset). In the above frame, each source code file is preceded by an underlined heading which displays the file name and a brief explanation of the file.
The names of the five source code files for this lesson are as follows (the presentations and explanations of these files are in this order);
Less15CodeFS.html
Less15CodeMenu.html
Less15CodeDisplay.html
Less15CodeNext.html
Less15CodeNonFrame.html
This source code file creates the frameset. In a file which creates a frameset, the body tag pair is replaced with the frameset tag pair. The frameset tag identity is "frameset".
In the above lesson frame, the contents of the opening frameset tag is as follows; frameset cols="12%, 88%". Scroll this code into view in the above frame. The tag identity (frameset) is followed by the cols (columns) attribute. This attribute causes the frames on the web page to be columns (vertical). The attribute vaule ("12%, 88%") causes the browser to create two frames. The first (left) frame will be comprised of 12% of the computer screen and the second (right) frame will be comprised of 88% of the computer screen. The total of the percentages should equal 100%.
In the cols attribute value, the utilization of the comma after the first percent (12%) is a syntax requirement. Without the comma, the frameset will not open.
In this frameset tag, three frames could be created by utilizing any three percentages which have a total of 100 percent. In this instance, the first and second percentage values would be followed by a comma.
In this frameset tag, changing the cols (columns) attribute to the rows attribute would cause the frames on the web page to be rows (horizontal) with the first (top) row comprised of 12% of the computer screen and the second (bottom) row to be comprised of 88% of the computer screen.
The attribute value of "12%, 88%" can be typed as "12%, *". The asterisk causes the second column of the frameset to be comprised of the remainder of the the computer screen. A cols (columns) attribute with the value of "50%, 50%" can be typed as "*, *". The two asterisks cause the two columns to be equal in width. (three asterisks would create three equal columns, etc..) Multiple aterisks can be utilized in conjunction with multiple percentages (in these instances, each of the column widths specified by an asterisk will be the same).
A cols (columns) or rows attribute value can be specified in pixels by omitting the percent sign. The number of pixels on monitors varies. The risk of specifying pixels is specifying too many pixels for some monitors. When pixels are utilized, the largest column width (or row height) can be specified by an asterisk, causing the frameset to be the same size as the computer screen regardless of the number of pixels on the monitor. An attribute value for a cols or rows attribute can be comprised of a combination of percents, pixels, and axterisk(s).
The utilization of percentages yields proportional column widths and row heights regardless of the number of pixels on the monitor. However, the inadvertant utilization of percentages which have a total greater than 100% may cause undesirable results. Such inadvertant errors can be minimized by utilizing an asterisk to specify the column width or row height for the column or row with the greatest value.
Each line of the next two lines of code creates a "frame" tag. Scroll both of these two lines of code into view in the above frame. The frame tag identity is "frame". The frame tag is not a paired tag (note the space slash syntax).A frame tag is utilized for each frame created in the openig frameset tag. The first frame tag applies to the first frame created (in this instance, the 12% frame). In the first line of this source code, the contents of the first frame tag is as follows;
frame frameborder="0" bordercolor="red" name="menu" src="Less15CodeMenu.html"
The frameborder value (attribute is optional) is set to "0" (setting a pixel value greater than zero creates a wider frame). This zero value causes a narrow pane (not an invisible pane). The bordercolor attribute value (attribute is optional) is set to red causing the pane to appear in this color (Netscape does not support the bordercolor attribute; the frame color does not appear on the Netscape browser). The name attribute is set to "menu". The frame name is utilized when a link in one frame of a frameset is for the purpose of changing the page in a different frame of the frameset (this type of link is a subsequent content in this lesson). The src attribute is set to the value of Less15CodeMenu.html, causing this web page to be opened in this frame (the frame named "menu") when this frameset file is opened with a browser.
The frame name can be any name subject to the name syntax (characters in names are limited to alphanumeric characters plus the hyphen and underscore characters).
The second frame tag applies to the second frame created in the opening frameset tag (in this instance, the 88% frame). In the second line of this source code, the contents of the second frame tag is as follows;
frame frameborder="0" bordercolor="red" name="display" src="Less15CodeFirst.html"
This tag has the same value settings for the frameborder and bordercolor attributes. This tag sets the name attribute to the value of "display" and the src attribute to the value of Less15CodeFirst.html, causing this file to be opened in this frame (the frame named "display") when the frameset file is opened with a browser.
This code (the frameset tag pair and the frame tags) creates the frameset. This code is followed by a "noframes" tag pair which is for the benefit of users with browsers that do not support (cannot open) framesets.
This source code begins with the opening noframes tag (th tag identity is "noframes"). Scroll this code into view in the above frame. The source code between the opening and closing noframes tags is, in essence, a web page that will appear on the computer screen of a browser that does not support (cannot open) framesets. View this code in the above frame in conjunction with the explanations that follow. The code in the "noframes" tag pair displays a paragraph informing the user that the lessons are in framesets, followed by a paragraph informing the user that his/her browser does not support framesets, followed by a paragraph containing instructions (including a hyperlink) for acquiring a free browser that does support framesets (the link, as evidenced by the pound symbol (#), is to a named anchor on the linked page). This code is followed by the closing noframes tag.
The remaining code in this file is the closing frameset tag and the closing html tag.
Most of the code in this file is the content of previous lessons and the explanations of such code are minimal and general. Scoll through and view this code (for comprehension) in conjunction with the following explanations.
The body of this code begins with a pre tag pair which creates blank lines for the purpose of formatting (positioning) the first menu choice (a hyperlink) on the web page. View this code in the above frame.
The next eight lines of code create the first of three tables. Scroll all eight lines of this code into view in the above frame. This table has one cell. The contents of this cell is a hyperlink. This hyperlink is the first menu choice (the hypertext, "First", appears on the computer screen as this menu choice). The contents of the opening anchor tag creating this hyperlink is as follows:
a href="Less15CodeFirst.html" target="display"
The value of "display" for the target attribute causes the linked page to appear in the frame named display (a diferent frame in the frameset). Without the target attribute, the linked page would replace the menu page in the menu frame. This menu choice is not needed when the frameset is first opened with a browser because the specified web page (Less15CodeFirst.html) is in the frame named display. However, when the user has used the menu to replace the "First" web page with the "Next" web page, this menu choice allows the user to get the "First" web page back into this frame, if desired.
A table is utilized for this hyperlink so that a color frame can be created around the hypertext (the menu choice) which appears on the computer screen. The color frame is created by setting a background color (bgcolor) in the opeing tr (table row) tag and by setting the cellpadding to a value of "5". The cellpadding attribute value specifies a minimin amount of space (5 pixels) that is to exist between the edge of the cell and the cell contents (this minimum spacing applies on all four sides of the cell content) thereby creating a color frame around the cell contents.
The font tag pair is utilized to change the color and size of the hypertext.
The syntax utilized in the opening anchor tag in this table can be utilized to open a web page in a new browser window. If the web page file name is valid, and the target attribute value is invalid (no frame with this name), the web page specified in the href attribute value will be opened in a new window (this process of opening a web page in a new browser window is utilized frequently on the internet). In this instance, if the target attribute value is changed to "qqqq" (assuming this is an invalid name), the web page, "Less15CodeFirst.html", will be opened in a new window. This syntax for opening a linked web page in a new window applies when the web page containing the link is in a frameset or is not in frameset.
A web page created for utilization in a frame of a frameset can be opened individually. If the file Less15CodeMenu.html is opened individually and the "First" or "Next" menu choice is clicked, the linked page will open in a new window. In this instance the target attribute value is invalid because the frameset in not open. This combination of events (a valid web page file name and an invalid frame name) causes the web page file to be opened in a new frame.
The first table is followed by a pre tag pair for positioning of the second table. View this code in the above frame.
The next eight lines of code create the second table. Scroll all eight lines of this code into view in the above frame. The syntax creating this table is the same syntax utilized to create the first table. The contents of the one cell in this table is also a hyperlink. This hyperlink is the second menu choice (the hypertext, "Next", appears on the computer screen as this menu choice). The contents of the opening anchor tag creating this hyperlink is as follows:
a href="Less15CodeNext.html" target="display"
The target attribute value in this second menu choice, "display", is the same as the target attribute value in the first menu choice because both choices display a web page in the same frame (the frame named display).
The second table is followed by a pre tag pair for positioning of the third table. View this code in the above frame.
The next eight lines of code create the third table. Scroll all eight lines of this code into view in the above frame. The syntax creating this table is the same syntax utilized to create the first and second tables. The contents of the one cell in this table is a hyperlink. This hyperlink is the third menu choice (the hypertext, "Non-Frame", appears on the computer screen as this menu choice). The contents of the opening anchor tag creating this hyperlink is as follows:
a href="#" onclick="parent.location='Less15CodeNonFrame.html';"
The syntax utilized in this opening anchor tag causes a single web page to replace the frame set. In this instance, the specified web page, "Less15CodeNonFrame.html", replaces the frameset on the computer screen. Note that the specified web page appears in single quote marks in this anchor tag. This use of single quote marks is a syntax requirement (if doulbe quote marks are typed in these locations, the link will not function). The syntax in the this opening anchor tag can be used as presented to replace any frameset with any single web page (type every character as shown, with the only variable being the file name of the linked web page).
This same syntax can be utilized to change from a frameset to a different framset as follows:
a href="#" onclick="parent.location='NameOfFrameset.html';"
In this code, the web page file name has been change to a frameset file name.
The remaining source for this web page is comprised of the closing body tag and the closing html tag.
The source code for this web page does not contain any new content. View this code in the above frame for comprehension. A heading tag pair contains the text, "First Page". This heading is followed by two one cell tables containing text content (the two tables have different widths). A break tag is utilized between the two tables for spacing.
Eash table has a wide border created by utilizing the border attribute; the first table has a border attribute value of "15" (value in pixels set in opening table tag) and the second table has a border attribute value of "25".
Each table has a red border created by setting the bordercolor attribute to the value of "red" (set in the opening table tag).
The cell content in each table has a color frame created by the utilization of a table row bgcolor (background color) attribute in the opening tr (table row) tag and a cellpadding attribute in the opening table tag.
Links are excluded in the source code for this web page as a means of keeping the focus on framesets. A web page in a frame of a frameset can contain as many links as desired. Any link on a web page in a frame of a frameset can be one of the three following types;
The following syntax (previous lesson content) can be utilized in the opening anchor tag and the linked page will appear in the frame which contains the hyperlink;
a href="FileName.html"
a href="FileName.html" target="FrameName"
a href="#" onclick="parent.location='FileName.html';"
The source code for this web page is very similar to the source code for the previous web page (Less15CodeFirst.html).
The heading "Next Page" is followed by two one cell tables which are utilized to display text on the computer screen. The syntax utilized to create the two tables on the previous web page, "Less15CodeFirst.html", is utilized for the two tables on this web page.
The souce code for this web page is very similar to the source code for the previous two web pages, except that, the cell content for the second table on this web page contains text and a hyperlink. The content of the opening anchor tag for this hyperlink is as follows (scroll this source code into view in the above frame);
a href="Less15CodeFS.html"
This anchor tag creates a link to a frameset (in this instance, the single web page on the computer screen is replaced by a frameset). The href attribute value is a file name for a frameset file, causing the browser to open the frameset. If this code is typed in a frame of a frameset, the linked frameset opens in the frame containing the link (in this instance, the cols or rows percentages in the linked frameset apply to the frame, rather than to the screen).
End of Lesson 15.