HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML frames

Displaying a webpage in a browser is great, but what if you had the ability to display more than one webpage at a time?

This tutorial focuses on:

What are frames?

In HTML, frames are a way to display more than one webpage in the same window. Each of these pages will be called a frame. The main page will not have any content on it, but will contain a 'frameset' that will consist of these frames.

The <frameset> tag

The <frameset> tag specifies that a page will be composed of frames.

Attributes of the <frameset> tag

The <frame> tag

The <frame> tag denotes a frame in a frames page.

Attributes of the <frame> tag

NOTE: The <frame> tag has no end tag.

<frameset rows="50%, 50%"> <frame src="frameone.php" name="frameOne" /> <frame src="frametwo.php" name="frameTwo" /> </frameset>

In this example, there is a frameset with two rows. The first row is set to 50% of the height of the browser window, and the second row is set to 50% as well.

What it would look like in a browser:

Linking within frames

What if you want to open a link from one frame in another frame? How does linking work with frames?

Linking from one frame to another

To link from one frame to another, use the target attribute in the <a> tag and set it to the name of the frame where you want the content of that link to appear.

<frameset rows="50%, 50%"> <frame src="frameLinker.html" name="frameLinker" /> <frame src="frameLinked.html" name="frameLinked" /> </frameset>
Output:
The code for the link from the first frame:
Click <a href="http://www.dynamicdrive.com" target="frameLinked"> here</a> to open Dynamic Drive in the other frame.</a>

Notice how in the code the target of the link is specified as "frameLinked" using the target attribute. This ensures that the link will open in the second frame.

Opening a link from a frame in a new window

To open a link from a frame in a new window, use the target attribute in the <a> tag and set it to _blank, the same way you would for any other link.

<frameset rows="50%, 50%"> <frame src="framenw1.html" name="framenw1" /> <frame src="framenw2.html" name="framenw2" /> </frameset>
Output:

Opening a link in the same window and breaking out of a frames page

To open a link in the same window and break out of a frames page, use the target attribute in the <a> tag and set it to _top

NOTE: Example below will open links for the entire web browser window, not just the frame.

<frameset rows="50%, 50%"> <frame src="framesw1.html" name="framesw1" /> <frame src="framesw2.html" name="framesw2" /> </frameset>
Output:

Building a frames page

Start out with a basic structure -- just the <frameset>tag:

<frameset> </frameset>

Decide if you're going to have a vertical or horizontal frameset. If it's vertical, you're going to be using the cols attribute of the <frameset> tag. If it's horizontal, you're going to be using the rows attribute. Let's go with horizontal!

Decide how much space each frame will take up in the browser window, and code this:

<frameset rows="20%, 60%, *"> </frameset>

In this case, the rows attribute will take three values, each signifying the amount of space each frame takes. Remember that you will need to supply as many values as there are frames for either the cols or rows attribute.

NOTE: The * symbol in the above example means whatever space is left, in this case it is 20%

Put the frames in the frameset:

<frameset rows="20%, 60%, *"> <frame src="menu.html" name="menu" /> <frame src="content.html" name="content" /> <frame src="nav.html" name="nav" /> </frameset>

Ask yourself a few questions about how you want the page with the frames to function.

With these questions in mind, lets make our frames page have a border of 1, where none of the frames are resizable, and only the middle frame has a scrollbar.

<frameset rows="20%, 60%, *" border="1"> <frame src="menu.html" name="menu" noresize="noresize" scrolling="no" /> <frame src="content.html" name="content" noresize="noresize" scrolling="yes" /> <frame src="footer.html" name="nav" noresize="noresize" scrolling="no" /> </frameset>
Output:

Click here to see the frames page in a separate window.

Dealing with browsers that do not support frames

Not all browsers can handle frames. For such a situation, use the <noframes> tag. If someone tries to access a frames page through a browser that can not handle frames, they will see what is specified with the <noframes> tag.

<noframes> <body> Your browser does not support frames! </body> </noframes>

NOTE: When creating a frames page, do not use the <body></body> tags. However, if you use the <noframes> tag, sorround the data in it with <body></body> tags. Also, the <noframes> tag should go inside the <frameset> tag.

<frameset cols="25%,25%"> <noframes> <body> Your browser does not support frames! </body> </noframes> <frame src="frameone.php" name="frameOne"> <frame src="frametwo.php" name="frameTwo"> <frameset>

Inline frames

Another type of frame is an inline frame - a frame inside a webpage that contains within it another webpage, but is not within a frameset. An inline frame is declared with the <iframe> tag.

Attributes of the <iframe> tag
<iframe src="http://www.yahoo.com" name="iframeone" width="380" height="270"></iframe>
Output:
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information