TI Column Logo
June 1997

Web pages and frames

As we browse various Web sites, we see a wide variety in the presentation of text, graphics, and the overall layout. Hypertext markup language (HTML) defines the codes for displaying the content of Web pages. Every so often a new version of HTML is announced as new formatting codes are introduced and a new "standard" is adopted.

Information about IEEE's information highway is available electronically. To find out what is available, view the Web page at " www.ieee.org/eleccomm " or send a message to " fileserver@ieee.org " and place the file name "info.email" by itself at the start of the first line of the message.

One of the inherent problems in preparing Web pages is that the Web browser interprets the HTML codes, and different browsers interpret differently. Also, the user can change many of the default settings in the browser and thus change the appearance on the screen from what the author had intended. Some browsers do not recognize some codes that other browsers do.

Generally newer versions of browsers recognize more codes than older versions. My first column about the Web, August 1994, was entitled "Mosaic and the Web: the more sophisticated Internet."

At that time, Mosaic was the most popular browser. Today, Netscape Navigator and Microsoft Internet Explorer are the most commonly used browsers. I use both, and when I create a new page, I view it with both browsers to check that I am satisfied with the appearance. If not, I change my codes to eliminate unwanted differences.

One source about HTML codes that I find useful is Maran Wilson's "HTML Quick Reference V 1.2" which can be found at "http://sdcc8.ucsd.edu/~m1wilson/htmlref.html". This includes codes up to HTML version 3.2 and some extensions specific to Internet Explorer and Netscape.

FRAMES.   This is a technique to subdivide your Web page into several pages by splitting the Web page window vertically and/or horizontally into discrete sub-windows or frames. I will use an example with three frames. The Web page is first split horizontally into a top portion and a lower portion with a 15 percent, 85 percent fixed split. The lower portion is split vertically with a flexible ratio whose default value is 25 percent, 75 percent.

To create a set of three frames requires four HTML files -- one for each frame, and one to define the set of frames. Lets look at a three-frame example in detail.

EXAMPLE.   One of my own pages in my personal Web site is called "Bob Alden's World In General Web Page Links" and includes a set of links to many different sites organized into categories. Originally I placed a menu (table of contents) at the top of the page with links to move down the page to the various category headings. The name of this file is "wig.html".

This is an ideal application for using frames. My top frame file, named "wigb.html", is the banner with information that I want to display all the time. The left frame file, "wigm.html", contains the menu. The right frame file, "wigc.html", contains the complete set of contents. Both left and right frames scroll automatically since there is more information than can be displayed at one time.

Each of these three files is just like any other HTML file. If you enter the URL "http://power.eng.mcmaster.ca/alden/wigc.html", you see that HTML file displayed by your browser using the entire window. The file, "wigf.html", contains the frames definition code. If you use the URL "http://power.eng.mcmaster.ca/alden/wigf. html", you will not see that HTML file but the set of three files it defines -- each in their sub-window.

Lets look at this frame definition file displayed in the large box. I have added the numbers 0 to 9 at the left to aid in this explanation.
  Line 0 contains the traditional starting tags for an HTML document including the title that is contained inside the head tags. Line 9 contains the necessary closing tags.
  Line 1 contains the first of two nested frameset tags that define the first frame pair with a 15 percent, 85 percent split using the rows attribute to define a top-bottom partition.
  Line 2 defines the top frame source as the file "wigb.html", fixes the size of the frame, and enables scrolling if needed.
  Line 3 is another frameset tag and splits the bottom partition 25 percent, 75 percent using the "cols" attribute to define a left-right partition.
  Lines 4 and 5 define the sources for the bottom two frames.
  Lines 6 and 8 define the body of the non-frames HTML document and enclose the content that can be read by a browser that does not support frames. In such a situation, all of the tags that begin with

OTHER CODES.   There are two other key codes to know about before you start: How to link from one frame to the other, and how to ensure the visited site fills the full browser window as opposed to filling the frame only.

Line 5 includes the "src" tag to identify the URL of the HTML file. It also defines a name for that file -- in the example, it is "wc", my short name for the file "wigc.html". In the left frame, the first link is to a heading in the right frame.

The link tag contains both the URL (wigc.html) and the name (wc): "/careers/institute/article.jsp?articleId=0697Hotels ". We also see that the URL has been expanded by the addendum "#hotels" which is a way of identifying a specific item within this long list (so one can skip down the page to the right point). That point is identified in the right frame HTML file by the following name tag: "Hotels". The link from the left to the right frame is internal, within the same directory, so it uses the simplest URL possible -- the file name.

The links from the right frame are normally external and the full URL is needed -- for example: Hilton Hotels. The only additional attribute within this link tag is target="_top". This is used to force the use of the entire browser window instead of only the right frame to display the linked page.

Well, that's a start. For more information about creating frames, you can check out Netscape's site at " http://home.netscape.com/assist/net_sites/frames.html ".


Robert T.H. (Bob) Alden is the chair of the IEEE Electronic Communications Steering Committee, and a former IEEE vice president.   In his other life, he is the director of the Power Research Laboratory at McMaster University in Hamilton, Ontario, Canada.   He welcomes your input via .

extracted from the IEEE website www.theinstitute.ieee.org
by Bob Alden