HTML Frames Tutorials

HTML Frames Tutorials | Learn HTML Frames

HTML Lessons
Main
:: Home Page
:: Tools
:: Glossary
:: First Steps

Tutorials
:: Basic HTML

Elements
:: Text
:: Dividers
:: Links
:: Graphics
:: Lists
:: Tables
:: Frames

Tips
:: Graphics
:: Frames/Tables

Extra
:: Links
:: Web Tools
:: Web Hosting
:: Domains

Frames are a good way to organize content and provide your visitors with a list of links or table of content that is always at the users fingertips.

To start understanding how frames work, you should first take a look at a page that uses frames. Chances are that if this is not your first time using the internet, you've encountered dozens of frame-sites. If you haven't (and even if you have) click here to see an example of such a page.

The example you've seen looks a little like the diagram above.

A frame page actually consists of a html file with the frame code inside, that calls up other html files and displays them in one window. This way you have three different html files on screen, top.html, menu.html and main.html. They are called up in the index.html.

The following is the HTML code of the index.html file (the red code is the actual frame code):

<html><head><title>FRAME EXAMPLE</title></head>

<frameset cols="30%,70%">
  <frameset rows="30%,70%">
    <frame src="frame1.html" name="frame1">
    <frame src="frame2.html" name="frame2">
  </frameset>
  <frame src="frame3.html" name="frame3">
</frameset>

<body></body></html>

As you can see, the index.html calls up frame1.html, frame2.html and frame3.html which are normal html files with text and links.

FRAMESET COLS refers to the columns (vertical divison) of the layout which in our case is divided into two columns, one that makes up 30% of the maximum width, the second 70%. You can have as many columns as you like, but it's best to keep it as simple as possible.

FRAMESET ROWS refers to the rows (horizontal division) of the layout, in our example 30%,70%. This is not a required attribute and you can leave it out if you do not wish to divide a column into more rows. If you do not use ROWS you can specify the FRAME SRC right away.

FRAME SRC specifies the html file that will be displayed in the specific row/column. The source files are ordinary HTML files, with their own HTML, HEAD and BODY tags.

THE MENU: To make links from one frame open a page in a different frame you must include a TARGET attribute in your A HREF link tag. The TARGET will specify the name of the frame that is the target of the link. For example, if you wish a link from menu.html to open in main.html you would use the following tag:

<a href="link.html" target="MAIN">Link</a>.

For this to work you must name your frames with the NAME attribute (see the example above).

Link To Us

TOP LINKS
Free Javascripts
Computer Software
Free Clipart
Freebies
Free Backgrounds
Web Hosting Directory