  Build a Website: Home
  Contact
  Link to Build a Website

Webmastering
  How to Build a Website
  Planning your Website
  Uploading Files
  Using a FTP client
  Getting Visitors
  Monitoring Web Traffic
  Publishing Banner Ads

Web Hosting
  Finding a Web Host
  Moving to a New Host
  Domain Names

Coding
  HTML Tutorials
  Text Editors
  WYSIWYG Editors

Blogs
  How do I Make a Blog
  Adding Music to a Xanga

Graphics
  Hex Color Codes
  Common Banner Sizes

Forums
  What's a Forum
  Forum Scripts
  Webmaster Forums

Web Host Reviews
  CirtexHosting Review
  ICDsoft Review
  Sonata Web Review

Misc.
  Short URLs
  Review of CNcat

Other Resources
  HTML Tutorials

HTML Frames tutorial

Skip to...
  What are frames?
  How do I make a frame set?
  How do I make a page break out of the frame or go a certain cell?
  Adding Rows.
  What are inline frames or iFrames?

What are frames?

Frames are distinctly different from any other HTML thing you probably know how to do. If you plan on using frames think of it like sewing two web pages together into one page.

Click here to see an example of a web page using frames.

How do I make a frame set?

Basic frame set code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<HTML>

<TITLE>Title</TITLE>

<FRAMESET COLS="25%,75%">

<NOFRAME>

Hi If you're reading this then you need to upgrade your browser.
<P>
<a href="http://www.mozilla.org" target="_blank">Click here to get Mozilla</A> the open source, free, version of Netscape. It has a built-in pop-up blocker and is far more advanced than Internet Explorer.

</NOFRAME>

<FRAME NAME="1" SRC="page-1frame.html">
<FRAME NAME="2" SRC="page-2frame.html">
</FRAMESET>

</HTML>
Click here to see an example of a web page using that code.

Explanation of the Frame commands

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
That is a DTD, Document Type Definition, it's not required but it helps web browsers read and present web pages correctly to the visitor. The above DTD is only used by web pages that use frames.

FRAMESET
FRAMESET tells the browser that there is a frame on the page. It should be the first HTML command after the title.

NAME="1"
This will come in handy later on go to How do I make a page break out of the frame or go a certain cell? to learn more. What ever you put in the " " is the name of that cell of the frame.

COLS="25%,75%"
The COLS tag sets the widths of the columns. In this example I wanted the left hand column to take up 25% of the screen and the other one to take up 75% of the screen.

<NOFRAME> and </NOFRAME>
If someone with an outdated browser tries to visit your web page, you can put a message in the NOFRAME command to tell them to upgrade their browser. Many older text only browser cannot read and present frames correctly so they will only show a blank page. Whatever you put in the NOFRAME commands will be shown to any visitor with an outdated browser.

<FRAME SRC="page name">
The name of the HTML page that you want to be placed in the frame goes in there. That HTML page is the source of the frame. There are 2 columns so I need 2 web pages to be placed inside the columns. The first web page will always be put in the left hand column then the next one will be placed in the right hand one.

</FRAMESET>
/FRAMESET ends the frame set.

How do I make a page break out of the frame or go a certain cell?

To make a page break out of the frames put TARGET="_TOP" into the link command.

Example:
<A HREF="http://build-a-website.cnwcentral.com" TARGET="_TOP">

To make a page go to a certain cell add TARGET="The name of the cell" into the link.

Example if you used the frameset from above and you want the page to appear in the right hand cell; If someone clicks a link from the left hand cell:
<A HREF="http://build-a-website.cnwcentral.com" TARGET="2">

Adding Rows

To add rows you need to add a FRAMESET ROWS in between FRAMESET COLS and /FRAMESET.

Example:

Click Here to see web page using that HTML code. The FRAMESET ROWS act as the source of the frame. I think that everything else explains itself.

What are inline frames, iFrames?

An inline frame is a frame that floats inside of a regular webpage. I'll make a tutorial after I make a couple CSS ones.

Go to...
  HTML Tutorials
  Table Tutorial
  Hex Color Codes



Build a Website: Home Contact Link to Build a Website Webmastering How to Build a Website Planning your Website Uploading Files Using a FTP client Getting Visitors Monitoring Web Traffic Publishing Banner Ads Web Hosting Finding a Web Host Moving to a New Host Domain Names Coding HTML Tutorials Text Editors WYSIWYG Editors Blogs How do I Make a Blog Adding Music to a Xanga Graphics Hex Color Codes Common Banner Sizes Forums What's a Forum Forum Scripts Webmaster Forums Web Host Reviews CirtexHosting Review ICDsoft Review Sonata Web Review Misc. Short URLs Review of CNcat Other Resources HTML Tutorials	HTML Frames tutorial Skip to... What are frames? How do I make a frame set? How do I make a page break out of the frame or go a certain cell? Adding Rows. What are inline frames or iFrames? What are frames? Frames are distinctly different from any other HTML thing you probably know how to do. If you plan on using frames think of it like sewing two web pages together into one page. Click here to see an example of a web page using frames. How do I make a frame set? Basic frame set code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <TITLE>Title</TITLE> <FRAMESET COLS="25%,75%"> <NOFRAME> Hi If you're reading this then you need to upgrade your browser. <P> <a href="http://www.mozilla.org" target="_blank">Click here to get Mozilla</A> the open source, free, version of Netscape. It has a built-in pop-up blocker and is far more advanced than Internet Explorer. </NOFRAME> <FRAME NAME="1" SRC="page-1frame.html"> <FRAME NAME="2" SRC="page-2frame.html"> </FRAMESET> </HTML> Click here to see an example of a web page using that code. Explanation of the Frame commands <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> That is a DTD, Document Type Definition, it's not required but it helps web browsers read and present web pages correctly to the visitor. The above DTD is only used by web pages that use frames. FRAMESET FRAMESET tells the browser that there is a frame on the page. It should be the first HTML command after the title. NAME="1" This will come in handy later on go to How do I make a page break out of the frame or go a certain cell? to learn more. What ever you put in the " " is the name of that cell of the frame. COLS="25%,75%" The COLS tag sets the widths of the columns. In this example I wanted the left hand column to take up 25% of the screen and the other one to take up 75% of the screen. <NOFRAME> and </NOFRAME> If someone with an outdated browser tries to visit your web page, you can put a message in the NOFRAME command to tell them to upgrade their browser. Many older text only browser cannot read and present frames correctly so they will only show a blank page. Whatever you put in the NOFRAME commands will be shown to any visitor with an outdated browser. <FRAME SRC="page name"> The name of the HTML page that you want to be placed in the frame goes in there. That HTML page is the source of the frame. There are 2 columns so I need 2 web pages to be placed inside the columns. The first web page will always be put in the left hand column then the next one will be placed in the right hand one. </FRAMESET> /FRAMESET ends the frame set. How do I make a page break out of the frame or go a certain cell? To make a page break out of the frames put TARGET="_TOP" into the link command. Example: <A HREF="http://build-a-website.cnwcentral.com" TARGET="_TOP"> To make a page go to a certain cell add TARGET="The name of the cell" into the link. Example if you used the frameset from above and you want the page to appear in the right hand cell; If someone clicks a link from the left hand cell: <A HREF="http://build-a-website.cnwcentral.com" TARGET="2"> Adding Rows To add rows you need to add a FRAMESET ROWS in between FRAMESET COLS and /FRAMESET. Example: <FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME NAME="1" SRC="page-1.html"> <FRAME NAME="2" SRC="page-2.html"> </FRAMESET> <FRAMESET ROWS="50%,50%"> <FRAME NAME="3" SRC="page-3.html"> <FRAME NAME="4" SRC="page-4.html"> </FRAMESET> </FRAMESET> Click Here to see web page using that HTML code. The FRAMESET ROWS act as the source of the frame. I think that everything else explains itself. What are inline frames, iFrames? An inline frame is a frame that floats inside of a regular webpage. I'll make a tutorial after I make a couple CSS ones. Go to... HTML Tutorials Table Tutorial Hex Color Codes
Copyright © 2003 'Build a Website' by CNW Central.com Home \| Links \| Contact My other sites: Zoo Tycoon Help SC's Neopets Help SciFi Directory