How to Create Frames in HTML
How to Create Frames in HTML
In this article we will learn How to Create Frames in HTML, in details with coding example and also with output, for your better understanding. Here you will learn to create different types of Frames using HTML, so let’s start the learning.
What is HTML Frame?
HTML Frames allow us to divide our browser window into multiple section, each capable of displaying different HTML document. It displays the document in multiple views, one frame can display a navigation bar, the other frame can display the main content of web pages etc.
The primary elements used to create frames are the <frameset> and <frame> tag, let’s explore how frames.
How it used to Work
Basic Structure: In older HTML, you would use the <frameset> tag to define a layout with multiple frames. Inside the <frameset>, the <frame> tags specify what content each frame should display, Here’s below simple example with code explanation.
<!DOCTYPE html>
<html>
<head>
 <title>Frames Example</title>
</head>
<frameset cols="25%, 75%">
 <frame src="sidebar.html" name="sidebar">
 <frame src="content.html" name="main">
</frameset>
<noframes>
 <body>
   <p>Your browser does not support frames.</p>
 </body>
</noframes>
</html>
- <frameset>: Replaces the <body> tag in documents using frames.
- cols and rows attributes: Define how the frames are sized. In this example, the window is divided into 25% and 75% columns.
- <frame>: Specifies the source (src) of the content for each frame.
- <noframes>: Provides fallback content for browsers that do not support frames.
- src: URL of the document to display in the frame.
- name: Identifies the frame for targeting links (e.g., <a href=”page.html” target=”sidebar”>).
Modern Frames:
HTML frames have been deprecated in HTML5. Modern web design practices use CSS for layout and JavaScript for dynamic content management. Here’s how you can achieve the same effect using modern methods:
Using <iframe>
The <iframe> element allows us to embed another document within our current document. This is somewhat similar to a single frame in the old <frameset> approach:
 Programming Example:
<!DOCTYPE html>
<html>
<head>
  <title>Modern Layout Example</title>
 <style>
   .container {
     display: flex;
   }
   .sidebar {
     width: 25%;
   }
   .content {
     width: 75%;
   }
   iframe {
     width: 100%;
     height: 100vh;
     border: none;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="sidebar">
     <iframe src="sidebar.html"></iframe>
   </div>
   <div class="content">
     <iframe src="content.html"></iframe>
   </div>
 </div>
</body>
</html>
- <iframe>: Used to embed content from another source.
- CSS Flexbox: Used to create a responsive layout.
 Using CSS Grind for Frame:
In modern times we use CSS Grid, it is a powerful layout system that allows us to create complex layouts with responsive design.
Programming Example:
<!DOCTYPE html>
<html>
<head>
 <title>CSS Grid Layout</title>
 <style>
   .container {
     display: grid;
     grid-template-columns: 25% 75%;
     height: 100vh;
   }
   .sidebar {
     background-color: #f4f4f4;
   }
   .content {
     background-color: #fff;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="sidebar">
     <!-- Sidebar content here -->
   </div>
   <div class="content">
     <!-- Main content here -->
   </div>
 </div>
</body>
</html>
- CSS Grid: Defines a grid layout, with specified columns and rows.
- Responsive: Easily adapts to different screen sizes.
Conclusion
HTML frames were once a common way to create multi-panel layouts, but they have now been replaced by modern techniques such as <iframe>, CSS Flexbox, and CSS Grid. Understanding these methods not only helps maintain legacy systems, but also ensures that your web designs are up-to-date and responsive. Adopt modern CSS techniques to create more flexible and accessible web layouts, ensuring that your content looks great on all devices.
0 Comments