HTML Frame Background Tutorial

Frames in HTML allow the web designer to create content in two separate files then pull them together on one page. The Frameset tags are used on the main page to pull the content from separate files. Thus you can edit the content of one file and not have to change the other. The downside of background frames is that search engines will not always find the content in the separate files. You can make as many frames as you like on a page.

Things You'll Need

• Text editor

Instructions

1. Create three new files in your text editor by clicking on “File,” then “New.”

2. Save your files as "index.html," "1.html" and "2.html."

3. Write any content you want in 1.html and 2.html. Save the files. For example, 1.html could contain a menu and 2.html could contain a welcome message.

4. Create a frameset in index.html using the FRAMESET tags. This tells the browser where the frames begin and end. For example:
   <frameset>
   </frameset>

5. Give the frameset a width by adding the cols attribute. The cols attribute looks like:
   <frameset cols="160,*">
   </frameset>

   The first number is the number of pixels wide the first column will be. After the comma is the space for the second column frame. By using an asterisk, you allow the second column to fill the rest of the browser no matter the size of the screen. You can use a number there if you do not want the column to fill the browser window.

6. Add frame names for 1.html and 2.html using the FRAME tag. This will call the two files into the frames.
   <frameset cols=”160,*”>
   <frame src="1.html" name="navigation" >
   <frame src="2.html" name="welcome" >
   </frameset>

   The names allow the browser to differentiate between the two files. You can give them any names you want. Best practice is to give the frames names that match their purpose.

Tips & Warnings

• You can add other attributes to the FRAMESET tag. The frameborder attribute will allow you change the size of the border and the framespacing attribute will allow you to change the spacing between borders.

References

• HTML Code Tutorial: HTML Frames
• W3 Schools: HTML Frames
• Echo Echo: Frames
• HTML Source: Basic Frames