HTML Frames

HTML Frames can be used to split a web page so you can load multiple HTML files or pages into one web page. This will cause the web browser to display multiple pages at one time. A common example of this technique which I like to use is to display an index of a document on the left side of the browser window with descriptions and links so when the reader clicks on the link, that page is displayed on the right side of the browser window. Using HTML frames may be a bit complicated at first for those new to HTML, so you may want to skip this section or skim it, then come back to it when you want to create frames in your HTML documents.

Important Note about HTML Frame use

Should you decide to use HTML frames on your web page, you should be aware of some things.

Not all browser and webcrawler programs support frames. This is especially important with regard to webcrawlers since, if your pages are not browsed by webcrawlers, search engines may not log your pages for those searching for your subject material. Therefore, you should do two things:

Utilize the NOFRAMES tag described below to support frames. In your file that contains the FRAMESET, you may support this by including a copy of your index body in the NOFRAMES section.
Create a site map page with links to all your pages on the site especially including the pages linked to from within framed pages. This will allow search engines to use their web crawlers to see all your pages.

Also, to support users that can't see frames, you should put a link at the top and bottom of the page that allows them to get back to your main index or home page.
The Frameset DTD must be specified on the first line as in the below example rather than the strict or transitional DTD in order to support frames.

When I start an HTML document, I typically call the first page in the document "index.html". This is because it is a standard name used by web servers for the home page, and it is easy to remember that most html documents start with the name "index.html". The "index.html" file and all associated html files it will link to which are a part of the document are contained in the same sub directory on the computer. Therefore, when writing this document I started with the following HTML file as my "index.html" file. Note: Some experts would argue the wisdom of naming your file "index.html", in favor of a more descriptive title that would show up on search engines. What you do should depend on your needs.

<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML Frameset 4.01//EN">

<html>

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

   <meta name="GENERATOR" content="Arachnophilia 3.9">

   <META NAME="FORMATTER" CONTENT="Arachnophilia 3.9">

   <meta name="keywords" content="Documentation, networking, howto, routing,

information, routers, firewalls, firewall, IP, masquerading, masquerade, arp, rarp, tcp,

udp, protocol, protocols">

   <title>The CTDP HTML Guide</title>

<head>

<frameset border="1" cols="200,*" frameBorder="0" frameSpacing="4">

<noframes>

<body>

<p>

You should include HTML here to support webcrawlers and browsers that don't support frames.

You may want to include a second copy of your index, and set your wallpaper and colors

in the BODY statement above the same as you would in your index file.

</p>

</body>

</noframes>

<frame name="left" src="htmlindex.html">

<frame name="right" src="htmlintroduction.html">

</frameset>

</html>

Notice that in this example there are initially no <body> tags. The only <body> tags occur inside the NOFRAMES section which supports browsers that are not frames capable. The <body> tag is replaced by the <frameset> tags. The <frame> tags are used to define each element in the FRAMESET. Notice that there is no </frame> to end the FRAME element. You should also note that rather than setting the document type (in the first line, above) to Transitional, it is set to Frameset in order to support frames.

Tags and associated attributes for FRAMES

<FRAMESET> - Used to divide the browser window into separate frames that can display multiple documents

ROWS="10" - Splits the window vertically into a number of rows specified by one of:

A number of rows.
A percentage of the total window height. EX: ROWS="10%".
An asterisk means the frame will occupy all the remaining space. It will divide the space evenly between frames if multiple frames are specified with the asterisk.

ColS="10" - Splits the window horizontally into a number of columns specified by one of:

A number of columns.
A percentage of the total window width. EX: ColS="10%".
An asterisk means the frame will occupy all the remaining space. It will divide the space evenly between frames if multiple frames are specified with the asterisk.

ONLOAD - Used to specify the name of a script to run when the document is loaded.
ONUNLOAD - Used to specify the name of a script to run when the document exits.
FRAMESPACING="12" - (Depreciated) Defines the space between the frames in pixels.
FRAMEBORDER="NO" - (Depreciated) Defines whether a border for the frames should be displayed. The choices are YES or NO.
BORDER="5" - (Depreciated) The size of the frame border in pixels.

<FRAME> - Specifies a frame to be placed inside a FRAMESET.

FRAMEBORDER - Determines if there is a visible border for the frame. The possible values are 0 and 1 with a default value of 1.
LONGDESC - A frame long description.
NAME=left - Defines the name of the frame. In this case, the name of the frame is "left". This will be used in A (anchor) references later to place various content into the frame.
SRC="htmlindex.html" - Specifies the location or the URL (Universal Resource Location) of the document that will be placed in the frame.
MARGINHEIGHT="5" - The number of pixels left above and below a document that is in a frame.
MARGINWIDTH="10" - The number pixels to left on the right and left side of a document in a frame.
SCRolliNG="AUTO" - Specifies the possible existence of scrollbars in a frame. Possible values are YES, NO, and AUTO, with AUTO as the default.
NORESIZE - Keeps this frame from being resized with the mouse.
SCRolliNG - Determines if the frame can use a scroll bar if it exceeds the size of the available area on the browser. Possible values are yes, no, and auto.

<NOFRAMES> - Used for web browsers that don't support FRAMESETs. It provides an alternate body in documents that are FRAMESET documents. The <BODY> and </BODY> tags which define the BODY element are normally inside the <NOFRAMES>...</NOFRAMES> tags.
</NOFRAMES> - Ending tag for the NOFRAMES element..
</FRAMESET> - Used to end a frameset.

Another example

Another, slightly more complicated example is:

<frameset rows="10%, *">

   <frame name="top" src="topselect.html">

   <frameset cols="10%, 30%, 30%, 30%">

      <frame name="leftbar" src="myindex.html">

      <frame name="mleft" src="mleft.html">

      <frame name="mmiddle" src="mmiddle.html">

      <frame name="mright" src="mright.html">

   <frameset>

</frameset>

This example uses two framesets. The first divides a top section and a bottom section. The second frame set divides the rest of the window (90%) into four sections, the first composing the leftmost 10%, and each of the other three sharing 30%.

How to get new information into the frame

To make frames useful, you will need to use anchor links to direct the contents of HTML files to them. This is done using the TARGET attribute with the anchor tag as follows:

<a href="htmlstructure.html" target="right">HTML Document Structure</a>

In my first example, I defined a frame with the name "right". When the user clicks on this link with their web browser, the HTML file pointed to by the link will be directed to the target named "right" which is defined on the right side of the browser window. The anchor statements shown above are placed in the file called htmlindex.html which resides on the left side of the browser window. This allows the user to control the contents of the right side of the browser with the index file, full of anchor links, which resides in the left side of the browser window. A sample abbreviated index file is listed below:

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

   <meta name="GENERATOR" content="Arachnophilia 3.9">

   <meat name="FORMATTER" CONTENT="Arachnophilia 3.9">

   <title>The CTDP HTML Guide</title>

</head>

<body>

<h3>HTML Index</h3>

<hr>

<ol>

<li><a href="htmlintroduction.html" target="right">Introduction</a>

<h3>Structure</h3>

<li><a href="htmlstructure.html" target="right">HTML Document Structure</a>

<li><a href="htmlhead.html" target="right">The Header Section</a>

<li><a href="htmlbody.html" target="right">The Body Section<a>

<li><a href="htmlframes.html" target="right">Using Frames</a>

<h3>Layout Mechanisms<h3>

<li><a href="htmlparagraphs.html" target="right">Headers and Paragraphs<a>

<li><a href="htmllists.html" target="right">Lists</a>

<li><a href="htmltables.html" target="right">Tables</a>

</ol>

<center>

<a href="../index.html" target="_top" onMouseOver="window.status='To Computer

 Tech Home Page' ;return true" onMouseOut="window.status='';return true"><img

 src="../greenhomebutton.gif" alt="Home" vspace=3 border=0 height=33 width=115<a>

</center>

</body>

</html>

Computers 4 you!

Mar 20, 2008

HTML Frames

HTML Frames

Important Note about HTML Frame use

Tags and associated attributes for FRAMES

Another example

How to get new information into the frame

No comments:

Post a Comment

Popular Posts

Popular Posts

Total Pageviews

Categories