Advanced HTML (6)HTML Frames [Archives:2003/671/Education]

September 25 2003
Fig. 1
Fig. 1
Adnan A. Al-Harazi
Academic Head
NCC Education, Yemen Center

Many web sites use frames as a way of dividing the screen into independent rectangular areas, within which different HTML files can be displayed. Typically one or more of these areas can scroll independently from the others. A very common stylistic device is to use one frame for a series of navigation buttons and another to present scrolling content corresponding to the menus choices.
Creating frames is relatively simple. A frameset is created to act as containers for HTML resources. The HTML resources displayed in the frames and the frameset itself are completely independent. The HTML code needed to add a frame is as follows:

The size of the columns is defined in the TAG. The size can be specified in a number of different ways. In this example, we have a column 200 pixels wide, with a second column (specified as *) filling the rest of the available screen width. It is possible to use percentages ( i.e 30 %) or ratios.
Rows are specified in a similar way. If ROWS is not specified the result is one row by default. Similarly if COLS is not specified there will be horizontal borders. The frame tag is used to specify the individual frames. It has the following form:

– SRC specifies the HTML file that will be displayed in the frame. Like any source, this can be any URL.
– NAME gives the frame a name. This is a useful feature that makes using one frame as a menu to control another frame which is easy to set up.
– SCROLLING defines whether scrollbars will be displayed if the content is too big for the frame. The scroll bars are similar to those that are familiar from normal Windows usage. The values can be YES, NO or AUTO. Normally the SCROLLING attribute can be omitted, and AUTO is the default which means scrollbars are displayed when needed.
– NORESIZE is optional. If used it prevents the user from dragging the margin to resize a frame. Recall that you were able to do this with our experimental file.

Usually, it is required to have a button click on an item in one frame display a resource in another frame. By default the usual HTML link mechanism can only change the resource displayed in the same frame. A mechanism is needed to change the resource displayed in a different frame. The addition of the NAME attribute allows the frame to be identified and referenced. The extended version of the Link tag is:

In this case if TARGET is set to another frame, the browser will display the HREF url, in the target frame.
Let's put all of these attributes in one example. Suppose we need to display a message in different languages. The user will have to click over a hyperlink to display the message in that language as it looks in Fig1.
In this example, when the user clicks on “English”, the message written in English will be displayed inside the frame and if he/she clicked on “Arabic 'ain character” the Arabic message will be displayed instead. Check the code for this HTML file in Fig 2.
Notice in the code:
– For each language, you have to create a separate HTML file.
– In the hyperlink tags, you add the target attribute.
– The NAME attribute in the frame tag should be added so that it could be referenced.

Designing With Frames
Frames are easy to use even when constructing web pages without any special tools. This is also a problem, since we, site designers, may overuse frames. This can make a web site very difficult for a user to understand. The best web site designers use frames in a restrained way and will often provide an alternative version of the web site without frames. This can be done without completely redesigning all the web pages.

Java has become an important language for programming on the Internet and particularly for web site development. It is essential that web site designers have a good appreciation of what Java can offer and how it can be used. Java began as a programming language designed for consumer products like microwave ovens and toasters. This environment has some unique requirements; foremost of which is that control software must be able to work on a wide variety of different microcontrollers. This software must also be extremely reliable; bugs can cause major product recalls. Workers at Sun Microsystems wanted to meet this requirement. The team realized that such a programming language would be ideal for other applications as well. In particular it was clear that the new language (Java) would be ideal for use by the Internet systems. Java is designed for use on networks and particularly the Internet. Java has the concept of using resources located on remote hosts built-in; it understands URLs.

Java Applets
Java can be used to write entire applications just like a conventional programming language. All that is required to run them is a Java interpreter. Java is also very popular for writing applets (small applications). These are intended for use within a web browser and cannot be run as a stand-alone application. Typically applets extend the capabilities of the browser, or provide web site specific functionality.
Java applets are usually very small. This means that they can be downloaded from web sites very quickly. All up-to-date web browsers contain Java interpreters. This allows web sites to use applets in a very flexible fashion. Many web site designers wish to extend the impact of their sites by adding such applets.

If you have any questions about the lessons please send me an e-mail to [email protected].

Next week: More in Advanced HTML