Tutorial 1 of 3: Frames

Objectives:

Template File(s):

(Note: If you have not already done so, please downloaded the html template files.)

Frames

Frames are used to divided the main window into separate sections (or frames). Each frame has one name but, like a picture frame, can have any content. A link in one frame may update the content in another frame. See an example.

Layout

The <FRAMESET> tag is used to divide the browser window into frames. It replaces the <BODY> tag and has 2 attributes: ROWS and COLS. These attributes specify the height (rows) and width (columns) of each frame. These can be specified as pixels on the screen or, more commonly, as percentages of the user's window.
Tag Attribute
<FRAMESET>
(replaces BODY tag)
  • ROWS=
  • COLS=

Example

Open the file frame-qu.htm in your browser. Note how it has 4 frames, each occuping 50% of the height and width. Now, open the file in your text editor, and note how this is implemented:

<FRAMESET ROWS="50%,50%" COLS="50%,50%">

Open the file in your text editor. Try modifying these percentages. Save the file, then display it in your browser.

Example

Suppose you wanted to nest a frame within another. For example, open the file framem.html in your browser. Take a moment to think how you might implement this.

Now open this file in your text editor. Note how we've nested multiple <FRAMESET> tags. This serves to embed a set of frames within the a larger, surrounding frame.

Modify this file in your text editor. See if you can embed yet another set of frames within a larger frame.

Content

None of the previous examples would have worked without the <FRAME> tag. This tag is used to insert content into the various frames. As shown in the next table, it has a number of important attributes.
Tag Attribute Function



> <br >

Tutorial 2 of 3: Graphics and Multimedia

Objectives:

Template File(s):

(Note: If you have not already done so, please downloaded the html template files.)

Web Graphics

Two major kinds of graphical formats are supported in Web documents: GIF and JPEG. Thus, if creating graphics from scratch, make sure you save your files in one of these 2 formats. Also, when saving your files, follow these guidelines:

Now, open the file multimedia.html in your web browser. Note how it has a very simple graphic displayed. Now view the HTML source of this file (View ... Source) and find the relevant IMG tag which inserts the image:
<IMG SRC="WEB-small.gif" ALT="Image of the Web" >
A few things to note about this tag:

Example KAYAK.GIF, located in the template directory, into your ever-evolving home page:

  • Copy the file into the same directory/folder as your home page (NOTE: file names are case-sensitive)
  • Open your home page file in Notepad
  • Add the text:  <IMG SRC="KAYAK.GIF">
  • Save the file, then view it in your browser. You should now see the graphic.



> <br >

Tutorial 3 of 3: Graphics and Multimedia

Objectives:

Template File(s):

(Note: If you have not already done so, please downloaded the html template files.)

Using web graphics

Graphics can be easily copied or referenced on the Web. Using your Web browser, locate a graphic on the Web that you would like to use. Move your mouse over the image, hold your (right if using a Windows box) mouse button down and notice how several alternatives become available through a pop-up menu.

One alternative:

On Netscape's browser, another alternative is:

The power of a distributed document system should now become apparent.

You can also turn a graphic into a clickable link. You do this by embedding the graphic within the <A> tag. Like this:

<A HREF= "http://www.usu.edu"><IMG SRC="kitten.jpg"></A>

Example

Using your text editor, insert the above code into your home page. Save the file, then view it in your browser (you might have to hit the "Refresh" icon). Now, clicking on the Web graphic will take me to the USU home page. Not exactly intuitive, but you get the idea! See if you can replace the Web graphic with something more appropriate.

Graphics can be used as powerful navigation icons within Web documents.

[End of tutorial]