DevVoltz Academy | HTML Frames

Part 11: HTML Frames

<frameset> vs <body>

Understanding the Fundamental Difference

Important Note: HTML frames are deprecated in HTML5 and should not be used in modern web development. This lesson is for understanding legacy code only.

<frameset> Document

A frameset document divides the browser window into multiple sections, each containing a separate HTML document.

Replaces the <body> tag with <frameset>
Contains <frame> or nested <frameset> elements
Defines layout using rows or cols attributes
Cannot contain regular HTML content

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
  <title>Frameset Example</title>
</head>
<frameset cols="25%,75%">
  <frame src="nav.html">
  <frame src="content.html">
</frameset>
</html>

Regular <body> Document

A standard HTML document contains a <body> element with content.

Contains all visible page content
Can include text, images, links, forms, etc.
Modern approach uses CSS for layout
Compatible with all browsers and devices

<!DOCTYPE html>
<html>
<head>
  <title>Standard Page</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is a regular HTML document.</p>
</body>
</html>

Key Differences

Aspect	Frameset	Body
Structure	Divides window into frames	Single document
Content	Multiple HTML files	Single HTML file
URL	Shows frameset URL only	Shows current page URL
Bookmarking	Difficult	Easy
Modern Usage	Deprecated	Standard

Part 11: HTML Frames

<frame> Tag Attributes

Configuring Individual Frames

src

Specifies the URL of the document to show in the frame.

name

Specifies a name for the frame, used as a target for links.

frameborder

Specifies whether to display a border around the frame (0 or 1).

marginwidth

Specifies the left and right margins of the frame in pixels.

marginheight

Specifies the top and bottom margins of the frame in pixels.

noresize

Prevents users from resizing the frame.

scrolling

Specifies whether to display scrollbars (yes, no, auto).

longdesc

Specifies a URL to a long description of the frame's content.

This would create a layout with:

A fixed 200px navigation frame on the left
A content frame taking up the remaining space
Borders only on the navigation frame
Margins in the navigation frame
The content frame cannot be resized

Part 11: HTML Frames

Rows, Columns & Nested Frames

Creating Complex Layouts

Rows and Columns

Framesets use rows and cols attributes to define layout.

cols divides the window vertically
rows divides the window horizontally
Values can be pixels, percentages, or relative sizes (*)
Multiple values create multiple frames

Examples:

<frameset cols="50%,50%">


<frameset cols="200,*">


<frameset rows="100,*,50">


<frameset cols="20%,30%,50%">

Nested Framesets

Nested framesets allow complex layouts by placing framesets inside other framesets.

Create grids and complex arrangements
Each nested frameset divides its parent frame
Can combine rows and columns

Example: 3-Frame Layout

Header Frame

Navigation Frame

Content Frame

This creates a layout with:

A fixed header at the top
Left and right navigation panels
A main content area with its own footer
The header cannot be resized and has no scrollbars

Part 11: HTML Frames

<noframes> Fallback

Providing Content for Non-Supporting Browsers

What is <noframes>?

The <noframes> tag provides alternate content for browsers that don't support frames or have frames disabled.

Placed inside the <frameset> element
Contains regular HTML content
Only displayed if frames aren't supported
Important for accessibility and compatibility

Basic Syntax:

<frameset cols="25%,75%">
  <frame src="nav.html">
  <frame src="content.html">
  <noframes>
    <body>
      <h1>Frames Required</h1>
      <p>Your browser does not support frames.</p>
      <a href="no-frames-version.html">Click here for non-frames version</a>
    </body>
  </noframes>
</frameset>

WHY

Why Use <noframes>?

Reasons to include <noframes> content:

Accessibility: Screen readers and text browsers may not support frames
Search Engines: Early search engines had difficulty indexing framed content
Browser Compatibility: Some mobile browsers or older browsers don't support frames
User Preference: Some users disable frames for security or performance reasons

Best Practices:

Provide meaningful content, not just an error message
Include navigation to key sections of your site
Offer a link to a non-frames version if available
Keep the content updated along with your framed content

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
  <title>My Website - Frames Version</title>
</head>
<frameset rows="80,*">
  <frame src="header.html" name="header">
  <frameset cols="200,*">
    <frame src="menu.html" name="menu">
    <frame src="welcome.html" name="content">
  </frameset>
  <noframes>
    <body>
      <div id="header">
        <h1>My Website</h1>
      </div>
      <div id="nav">
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <div id="content">
        <h2>Welcome to My Website</h2>
        <p>This is the non-frames version of our site.</p>
      </div>
    </body>
  </noframes>
</frameset>
</html>

Part 11: HTML Frames

Practical Demo: 3-Frame Layout

Building a Complete Frameset Example

layout.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
  <title>3-Frame Layout Demo</title>
</head>
<frameset rows="80,*,60">
  <!-- Header Frame -->
  <frame src="header.html" name="header" 
         scrolling="no" noresize>
  
  <!-- Middle Section with Navigation and Content -->
  <frameset cols="200,*">
    <!-- Navigation Frame -->
    <frame src="navigation.html" name="nav">
    
    <!-- Content Frame -->
    <frame src="content.html" name="main">
  </frameset>
  
  <!-- Footer Frame -->
  <frame src="footer.html" name="footer" 
         scrolling="no" noresize>
  
  <noframes>
    <body>
      <h1>Frames Not Supported</h1>
      <p>Your browser does not support frames.</p>
      <p>Please <a href="no-frames.html">click here</a> 
         to view the non-frames version.</p>
    </body>
  </noframes>
</frameset>
</html>

layout.html

Header Frame (80px)

Navigation (200px)

Content Frame

Footer Frame (60px)

Implementation Steps:

Create the main frameset file (layout.html)
Create individual HTML files for each frame:
- header.html - Contains site header and logo
- navigation.html - Contains navigation menu with target="_main" for links
- content.html - Default content page
- footer.html - Contains footer information
Test the frameset in a browser that supports frames
Verify the <noframes> content displays in browsers without frame support

Part 11: HTML Frames

Modern Alternatives to Frames

Better Approaches for Contemporary Web Development

<iframe> (Inline Frame)

<iframe> allows embedding another HTML document within the current document.

Supported in HTML5
Can be placed anywhere in a regular <body>
More flexible than traditional frames
Commonly used for ads, videos, and embedded content

Example:

CSS

CSS Layout Techniques

Modern CSS provides powerful layout options that replace frames.

Flexbox: For one-dimensional layouts
CSS Grid: For complex two-dimensional layouts
Positioning: Fixed, absolute, and relative positioning
Responsive design works on all devices

CSS Grid Example (Replacing Frames):

.container {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
  grid-template-columns: 200px 1fr;
  height: 100vh;
}

.header { grid-area: 1 / 1 / 2 / 3; }
.nav { grid-area: 2 / 1 / 3 / 2; }
.content { grid-area: 2 / 2 / 3 / 3; }
.footer { grid-area: 3 / 1 / 4 / 3; }

SPA

Single Page Applications

SPAs load a single HTML page and dynamically update content.

JavaScript frameworks (React, Angular, Vue)
Smoother user experience
Better performance after initial load
Modern standard for web applications

Benefits Over Frames:

Clean URLs with proper routing
Better SEO capabilities
Improved performance
Mobile-friendly responsive design
Enhanced user experience

Recommendation: For new projects, use CSS layout techniques (Flexbox/Grid) or Single Page Applications instead of frames. Only study frames to understand and maintain legacy code.

COMPLETE

Great Job!

You've learned HTML Frames

What We Covered in Part 11:

FS/B

Frameset vs Body

Fundamental structural differences

ATTR

Frame Attributes

src, name, frameborder, scrolling, etc.

Rows & Columns

Creating layouts with framesets

Nested Frames

Complex layouts with nested framesets

NOF

<noframes>

Fallback for non-supporting browsers

DEMO

3-Frame Layout

Practical implementation example

Practice Exercise:

Create a Frameset Layout

Create a frameset with the following structure:

A header frame (100px high)
A navigation frame (25% width) on the left
A content frame (75% width) on the right
A footer frame (60px high)
Include proper <noframes> content

Next: Learn about form elements, input types, and form validation

Presenter Notes - Video 11

Intro Slide: Start by emphasizing that frames are deprecated but important to understand for legacy code. Mention that we'll also cover modern alternatives.

Frameset vs Body: Clearly explain that frameset replaces the body element. Show examples of both structures side by side.

Frame Attributes: Demonstrate each attribute with practical examples. Emphasize the 'name' attribute for targeting links.

Rows, Columns & Nested Frames: Use visual diagrams to explain how framesets divide the browser window. Show how nesting creates complex layouts.

Noframes Fallback: Explain why this was important for accessibility and compatibility. Show examples of good noframes content.

Practical Demo: Live code the 3-frame layout. Create each component file and demonstrate how they work together.

Modern Alternatives: Contrast frames with modern approaches. Demonstrate CSS Grid recreating the same layout as frames.

Recap: Summarize key concepts. Emphasize that frames should not be used in new projects but are important to understand.

HTML Frames Legacy Layouts Multi-Page Views

Simegnew Destew

<frameset> vs <body>

<frameset> Document

Regular <body> Document

Key Differences

<frame> Tag Attributes

Rows, Columns & Nested Frames

Rows and Columns

Examples:

Nested Framesets

Example: 3-Frame Layout

<noframes> Fallback

What is <noframes>?

Basic Syntax:

Why Use <noframes>?

Best Practices:

Practical Demo: 3-Frame Layout

Implementation Steps:

Modern Alternatives to Frames

<iframe> (Inline Frame)

Example:

CSS Layout Techniques

CSS Grid Example (Replacing Frames):

Single Page Applications

Benefits Over Frames:

Great Job!

What We Covered in Part 11:

Frameset vs Body

Frame Attributes

Rows & Columns

Nested Frames

<noframes>

3-Frame Layout

Practice Exercise:

Create a Frameset Layout

Presenter Notes - Video 11