The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

HTML Frames - Frames Examples

This page meets 'W3c Transitional' guidelines but does not meet WCAG Accessibility Guidelines
HTML Frames Demonstration
left click area to view underlying Markup

Understanding frames ...

HTML frames provide a method of displaying several different HTML pages, all at the same time and all in the same browser window. The adjacent graphic shows how three different frames could be created and this example is designed to display a site header page, a site menu page and content pages. You would have to create a minimum of four HTML pages to implement this design and these would be the three pages discussed here plus a special 'Frameset' page, similar to the one that we will discuss further down the page.

If you run your mouse cursor over our example graphic you will see that we have used some neat image switching to highlight each of the different areas with a red border as the mouse cursor moves over them. If you left-click on the area you are interested in a child window will open displaying example HTML Markup for the page you are interested in (please check notes below).

Create a temporary folder and then copy/paste the Markup from each popup window into your text editor. Save each page in the temporary folder, using the filename specified in the Markup. Finally, use Windows Explorer (not Internet Explorer) to navigate to the temporary folder and then double-click on the 'frameset-page.html' file. If your system is working correctly and you have done everything in accordance with the instructions then a browser window should open displaying the three visible pages from the demo Frameset. It is all a little bit basic but it does give you the opportunity to compare the underlying page Markup with the results displayed in the browser window.

example opens in a new window...

In addition to this we have also created an example website that implements the same design as the adjacent graphic except that it has been expanded to include a working menu system and five different content pages. It is well worth studying this example website because you can see how frames work in real-time and because each of the five content pages contain explanations about different aspects of implementing HTML frames effectively.

not working properly - please check notes...


HTML FRAMESET & FRAME Elements:  Frames are widely used to display multiple web pages at the same time, in different sections of the same browser window and they are supported by all modern HTML browsers. However, the FRAMESET & FRAME Element have been depreciated by W3c and this means that web pages that use frames will not validate to the 'W3c Strict' standard or meet WCAG Accessibility guidelines. Pages that contain frames will validate to the 'W3c Transitional' standard and I feel sure that web browsers will continue to support frames for a long time to come.


HTML Frames in context ...

Framesets and frames have been with us for a long time and were originally a part of the old HTML 3.2 Specification. They should not be confused with 'inline frames' which are a different type of frame that is embedded into a web page and is part of the HTML 4 Specification. As with most HTML Markup, Framesets can behave differently in different browsers and because of this you should always test your work in several browsers (e.g. Microsoft, Firefox, Opera. etc.) to ensure maximum cross-browser compatibility. Testing Framesets is important because if a Frameset does not work in a particular browser or browser version then a user may not be able to view any of the pages on the site. Also, testing your pages for conformance to W3C standards is important and because of this we have included appropriate SGML DOCTYPE directives at the top of each of the example pages.


Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - HTML Frames Interactive Demo Understanding frames. HTML frames provide a method of displaying several different HTML pages, all at the same time and all in the same browser window. Learn through using the interactive demo.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
Post your link NOW!
Featured HTML Frames Links
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England
Left-click to view 'header page' MarkUp Left-click to view 'menu page' MarkUp Left-click to view 'content page' Markup Left-click to view 'frameset page' MarkUp