HTML Frames Code
You can use the following HTML code to create a web page split into separate frames. You can also check out these frames templates for HTML5 compliant frames templates.
HTML5 Compliant Frames
Since HTML5 became an official recommendation, frames (in the traditional sense) are not supported in HTML. Frames used to be created using the <frameset>
and <frame>
elements, but those elements are no longer supported in HTML.
To create HTML5 compliant frames, you need to use either iframes (i.e. using the <iframe>
tag), or use CSS to provde the "frame" functionality.
The CSS method is probably the better choice in most scenarios. It involves using a <div>
element (or any other suitable element) for each frame. Then using the CSS overflow
property to hide any "overflowing" content on an element, and enable scrollbars for the user to scroll with. You can do this by specifying overflow:scroll
or overflow:auto
. You can also specify overflow:hidden
to prevent scroll bars from appearing.
This method of creating frames requires that the contents of each "frame" is actually included in the same file. So rather than creating a separate HTML file for each frame as well as another file for the frameset (as one would do using the old method of creating frames), you only need to create one file.
Here's a mini-example to demonstrate the concept:
The main difference when doing this on a whole page (as opposed to the small example above), is that you will need to use CSS to position each <div>
element on the page.
Check out these frames templates for a bunch of ready-made templates that are HTML5 compliant using the above method.
Traditional HTML Frames Code
As mentioned, this method is no longer supported in HTML. However, if you still need to do it, here's how.
To make frames the traditional way, you need 3 or more pages. One page is the frameset page, the other pages are for each individual frame. The following code is for a frameset page. Note the code pointing to 2 other pages - one for the left frame, the other for the right frame.
The frameset page:
The left frame (frame_example_left.html):
The right frame (frame_example_right.html):
Don't forget to check out these HTML frames templates.
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties