Step-by-Step

Using Animated GIFs

Using Frames

1	Details
2	Examples
3	Resources
4	Step-by-Step

Using Image Maps

Adding Multimedia

Using Tables

1 2

Using Frames

Creating a simple frames-based web page

Here you will learn how to assemble a simple frames-based web page.

Create the individual pages/frames

Use a simple text editor (such as Notepad or Simpletext) to type the following documents. When saving the documents, make sure they are saved with a .htm extension rather than .txt, so that your browser will recognise and open them.

Type the following and save as green.htm:

<HTML> <HEAD> <TITLE>My Green Page </TITLE> </HEAD> <BODY bgcolor="green"> This is my green page .... This is my green page .... This is my green page .... This is my green page .... This is my green page .... This is my green page .... This is my green page .... This is my green page .... This is my green page .... </BODY> </HTML>

View this page by opening green.htm. To see how your page should look, click here.

Now type the following and save as red.htm

<HTML> <HEAD> <TITLE>My Red Page </TITLE> </HEAD> <BODY bgcolor="red"> This is my red page .... This is my red page .... This is my red page .... This is my red page .... This is my red page .... This is my red page .... This is my red page .... This is my red page .... This is my red page .... This is my red page .... This is my red page .... This is my red page .... </BODY> </HTML>

View this page by opening red.htm. To see how your page should look, click here.

step 2 Create the FRAMESET page

Now type the following and save as colours.htm. This will be our FRAMESET page which will coordinate the layout of our frames.

<HTML> <HEAD> <TITLE>Colours</TITLE> </HEAD> <FRAMESET COLS="220,380"> <FRAME SRC="red.htm"> <FRAME SRC="green.htm"> </FRAMESET> </HTML>

step 3 Testing the FRAMESET

Open the document colours.htm. To see how your page should look, click here.

Note: Before advancing, you should fiddle about with some of the HTML in your FRAMESET document. This will confirm your understanding of how frames behave. For example, try changing the values of red.htm, green.htm, to other documents you have created. Try substituting 220 and 380 with other values, for example 20% and 80% or even 70% and 60%, just to see how your browser behaves.

Tip: Remember to press Refresh or Reload to update your page after each page.

Tip: To open a .htm document as a text page for editing, in Windows, hold down the SHIFT key and right click. This will open an "OPEN WITH.." menu item, so choose to open with Notepad. Alternatively, right-click on the frame and choose View Source.