Frames 1 - HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
FRAMES 1 - CREATING FRAMES

FRAMES

For better or for worse we will now look at creating FRAMES. If you detected a note of reluctance here, you are correct. I will state here that I do not like frames. There are some superbly crafted sites using frames to their best advantage, but so many more that are an abomination, slow to load, nearly impossible to read or navigate. Most search engines don't like them either. Anyway, enough of the personal comments and on with the lesson.

HOW FRAMES WORK

A web page containing frames consists of a window (the grey bit in the diagram below) which contains two or more HTML documents (the green and yellow bits). This diagram is not a frame page just a representation of one and you won't see the "grey bit" in a real frame page.

This is the left hand frame

This is the right hand frame

To create a simple frame page like this you need to create a "frame" to hold two new web pages - one each for the left hand and the right hand columns or frames. You can use the examples supplied for this exercise. They are:

fryellow.html
frgreen.html, and later we will use
frgrey.html

Using the above pages here is the code to create two frames, the left taking 30% of the page and the right 70%:

</HTML>

And to see how this looks, JUST CLICK HERE. Click your BACK button to return here.

FRAME TAGS

We now have a couple of new tags - the <FRAMESET> tag which replaces the BODY tag at the beginning of the document and the <FRAME SRC> tag. (NOTE - replaces the body tag.) Now let's take a closer look at what it all means.

<FRAMESET This part of the tag sets the scene, as it were, for the web browser to expect a series of frames rather than the usual single web page. It creates a sort of "holder" for your pages.

<COLS="30%,70%"> This part follows the FRAMESET tag and tells the browser to split the page into two columns. In this case, the left frame or column takes up 30% of the screen width and the right takes 70%. You can specify whatever percentages you want.

<FRAME SRC="fryellow.html"> The last time we saw the SRC tag it was used to find an image file. This time it is used to search for the url of the page for the furthest left hand frame.

Keep in mind that a browser reads the FRAME SRC tags for the columns or frames from left to right, so put your frame pages in the order you want things to appear.

<FRAME SRC="frblue.html"> This tag gives the url of the next frame, or if there are more than one, of the frames going from left to right.

To add more frames you will need to create more web pages. Let's keep it fairly simple and add just one more. The percentages will change now that we have three frames - just make sure it adds up to 100%. The new frame page is frgrey.html so here is the code for the third column:

To see how this looks, JUST CLICK HERE. Click your BACK button to return here.

USING ROWS

Now instead of columns we will make some rows, using the same HTML pages we used to create columns. You may need to use the scrollbars to see all of the page in each frame. This is the code:

And HERE IS THE EXAMPLE. Click your BACK button to return here.

Next: Frames 2 - Multiple frames

Advanced Index