spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / html / tutorials / 14 / 1

index1234567exercises1

Tutorial 14: You've been Framed, Part I

Developer News
Google to Shake Up Browsers With Own Launch
Mozilla's Ubquity Mashup: For The Masses?
iPhone Users Just Want to Have Fun

The Way the Web was Framed

The details of the invention of frames and the reasons behind them are a long story. In fact, it's such a long story, with so much to be said on the subject that I'm saving all of that for a separate Style Watch article on this and more. For now, it will suffice to say that back in the days of Navigator 2.0 and the big Feature Rush, someone in Netscape had this idea for frames, someone else liked it, and it was implemented. The rest, as they say, is history.

"So, what are frames?" ask those of you who only recently vacated the underside of a rock. Frames, dear reader, are a method of splitting a Web page into different sections, and having each scroll independently of each other, or not at all.

"What a great idea!" I hear you exclaim already. And, I am forced to concede, it is a great idea. There are many interesting uses for something like this. And, when executed properly, frames can add a lot to a Web site. But alas, this is not the case in today's Web.

The shrewdest among you may have noted that splitting a document into separate sections that scroll separately is a presentation issue, and not related in any way to the semantic content of the document itself. The very concept of scrolling has nothing to do with a document's semantics, but is tied to the idea of displaying an HTML document on a computer screen. All of this means that an implementation of frames should lie in the realm of CSS, and not HTML. Unfortunately for all of us, at the time that frames where first implemented, CSS was only a pipe dream, and frames were hacked into the existing HTML framework, as was the custom for all new features at the time.

Frames were incredibly popular despite their implementation flaws, and for a time the Web saw a "frame boom" during which almost every major Web site was framed. In this day and age, frames have become very unpopular in major Web sites (such as WebReference.com, which is almost entirely frame-free) because Web authors have come to realize the problems in their design, and frames usually reside in more amateur pages whose authors are still mesmerized by the magic of having frames appear on their Web pages, and are usually in the company of blinking text, pop-up ad windows and crude JavaScript roll-overs. This, in my humblest of opinions, is a Good Thing.

However, mainly because of their erstwhile popularity, frames finally wiggled their way into the HTML 4.0 Specification. So they are bona fide HTML in some ways. The specification also took some measures to fix some of the more glaring problems with frames, but most of these adjustments remain unimplemented.

Regardless of all the reasons given above why you should not use frames, how they work is something you should learn. You might run into them at some point in the future through no fault of your own, and you may even (though this is hardly likely) have a legitimate need for them. So let's get to the point and take a look at how you use frames in HTML documents.

Using Frames in HTML

Defining a frameset

The first thing you need to do in order to create a framed Web page is create a frameset document. A frameset document is a special kind of HTML document that defines how many frames you're going to be using, and what their layout will be.

The Frameset DTD

A while back I briefly explained what a Document Type Declaration is and how to use it. If you want a refresher, check out the relevant section in Tutorial 4. Frameset documents use a special DTD, and the Document Type Declaration to use for them is the following:

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

index1234567exercises1



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency
Intel eBook: Managing the Evolving Data Center
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Symantec eBook: The Guide to E-Mail Archiving and Management
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization
HP Webcast: Disaster Recovery Planning
Go Parallel Video: Performance and Threading Tools for Game Developers
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control
IBM Energy Efficiency eKIT: Learn How to Reduce Costs
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
HP Demo: StorageWorks EVA4400
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
The Partial Function Application in JavaScript · Creating Dynamic RSS Feeds with Ajax · Performance Optimizations for High Speed JavaScript
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Cablevision Deploys More Hotspots for Commuters · Dell Joins the Netbook Movement with its Inspiron Mini 9 · It's Official: Dell Enters the Netbook Fray

URL: http://www.webreference.com/html/tutorial14/1.html

Produced by Stephanos Piperoglou
Created: June 30, 1999
Revised: June 30, 1999