EZ

EZNotes

🖼️ Practical 79: Webpage with framesets

Learn how to create a webpage with framesets using the <frameset> and <frame> tags to divide the browser window into multiple sections.

🎯 Aim

To create an HTML webpage that demonstrates the use of framesets using the <frameset> and <frame> tags to divide the browser window into multiple sections.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • Multiple HTML pages for different frames (or use inline content)

📖 Introduction

Framesets allow you to divide the browser window into multiple sections, each displaying a separate HTML document. Key elements:

  • <frameset> — Defines the layout of frames (rows or columns).
  • <frame> — Defines a single frame within the frameset.
  • <noframes> — Provides content for browsers that don't support frames.
⚠️ Important: The <frameset> and <frame> tags are deprecated in HTML5. They are still supported by most browsers but are not recommended for new projects. Use CSS Flexbox or CSS Grid instead. However, they are still useful for learning purposes.
💡 Tip: Framesets are commonly used for navigation menus (left frame) and content (right frame). The left frame contains links that load content into the right frame using the target attribute.

📊 Preview of the Output

🖼️ Frameset Layout Example

📐 Frame Layouts
Header Frame Height: 20%
Navigation Width: 25%
Content Area Width: 75%
Footer Frame Height: 10%
🔧 Common Frameset Layouts
Top
Menu
Content
Bottom

Header + 2 Columns + Footer

Left
Content

2 Columns (Left + Right)

Top
Content

2 Rows (Top + Bottom)

📝 Step‑by‑Step: Creating the HTML Page with Framesets

Step 1: Create the Main Frameset Page

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following simplified HTML code:
<!-- Practical 79: Webpage with Framesets --> <html> <head> <title>Frameset Example</title> </head> <!-- Frameset layout: 3 rows --> <frameset rows="20%, 70%, 10%" frameborder="1" border="2"> <!-- Top frame: Header --> <frame src="header.html" name="header" scrolling="no"> <!-- Middle section: Navigation + Content (2 columns) --> <frameset cols="25%, 75%"> <!-- Left frame: Navigation --> <frame src="nav.html" name="nav" scrolling="auto"> <!-- Right frame: Content --> <frame src="content.html" name="main" scrolling="auto"> </frameset> <!-- Bottom frame: Footer --> <frame src="footer.html" name="footer" scrolling="no"> <!-- Content for browsers that don't support frames --> <noframes> <body> <h1>Your browser does not support frames.</h1> <p>Please use a modern browser to view this page.</p> </body> </noframes> </frameset> </html>

Step 2: Create the Individual Frame Pages

  1. Create header.html for the top frame:
<!-- header.html --> <html> <head> <title>Header</title> <style> body { background: #2c3e50; color: white; text-align: center; font-family: Arial, sans-serif; padding: 15px; margin: 0; } h1 { margin: 0; font-size: 1.8em; } </style> </head> <body> <h1>🔷 My Website Header</h1> <p>Welcome to my frameset example!</p> </body> </html>
  1. Create nav.html for the left navigation frame:
<!-- nav.html --> <html> <head> <title>Navigation</title> <style> body { background: #3498db; color: white; font-family: Arial, sans-serif; padding: 15px; margin: 0; } a { display: block; color: white; text-decoration: none; padding: 10px; background: rgba(255,255,255,0.2); margin: 5px 0; border-radius: 4px; transition: background 0.3s; } a:hover { background: rgba(255,255,255,0.4); } h3 { text-align: center; border-bottom: 2px solid rgba(255,255,255,0.3); padding-bottom: 8px; } </style> </head> <body> <h3>📂 Navigation</h3> <!-- target="main" loads content into the right frame --> <a href="page1.html" target="main">📄 Page 1</a> <a href="page2.html" target="main">📄 Page 2</a> <a href="page3.html" target="main">📄 Page 3</a> <a href="https://www.google.com" target="_blank">🔗 Google</a> </body> </html>
  1. Create content.html for the main content frame:
<!-- content.html --> <html> <head> <title>Content</title> <style> body { font-family: Arial, sans-serif; padding: 20px; margin: 0; background: #ecf0f1; color: #2c3e50; } h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 8px; } </style> </head> <body> <h2>Welcome to the Content Area</h2> <p>This is the main content frame. Click on links in the navigation frame to load different pages here.</p> <p>This example demonstrates how framesets can be used to create a website layout with a separate navigation menu and content area.</p> </body> </html>
  1. Create footer.html for the bottom frame:
<!-- footer.html --> <html> <head> <title>Footer</title> <style> body { background: #2c3e50; color: #bdc3c7; text-align: center; font-family: Arial, sans-serif; padding: 8px; margin: 0; font-size: 0.9em; } p { margin: 0; } </style> </head> <body> <p>© 2025 My Website. All rights reserved. | Designed for learning purposes</p> </body> </html>

Step 3: Save All Files and Open in Browser

  1. Save all files in the same folder.
  2. Open the main frameset file (e.g., "frameset.html") in your browser.
  3. You will see the complete frameset layout with header, navigation, content, and footer.
  4. Click on links in the navigation frame to load different pages in the content area.

📊 Frameset Attributes

Attribute Purpose Example
rows Defines the height of rows (percentage or pixels) rows="20%, 70%, 10%"
cols Defines the width of columns (percentage or pixels) cols="25%, 75%"
frameborder Specifies whether to show frame borders (0 or 1) frameborder="1"
border Sets the border thickness in pixels border="2"
src Specifies the HTML file to display in the frame src="content.html"
name Assigns a name to the frame (for targeting links) name="main"
scrolling Controls scrollbars (yes, no, auto) scrolling="auto"

📊 Common Frameset Layouts

Layout Code Description
2 Columns <frameset cols="30%, 70%"> Left navigation, right content
2 Rows <frameset rows="50%, 50%"> Top and bottom sections
3 Rows <frameset rows="15%, 75%, 10%"> Header, content, footer
Header + Columns + Footer <frameset rows="15%, 75%, 10%"> ... <frameset cols="25%, 75%"> Header, navigation + content, footer
Columns + Header <frameset cols="30%, 70%"> ... <frameset rows="20%, 80%"> 2-column layout with nested frames

📊 Using target Attribute with Frames

<!-- In nav.html: target links to load in specific frames --> <!-- Loads in the frame named "main" --> <a href="page1.html" target="main">Page 1</a> <!-- Opens in a new window/tab --> <a href="https://google.com" target="_blank">Google</a> <!-- Opens in the parent frameset (if nested) --> <a href="page.html" target="_parent">Parent</a> <!-- Opens in the top window (breaks out of frames) --> <a href="page.html" target="_top">Top</a>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using <body> with <frameset> Invalid HTML structure Use either <body> or <frameset>, not both
Forgetting <noframes> fallback Poor accessibility Always include <noframes> content
Missing name attribute on frames Targeting links won't work Add name to frames you want to target
Using percentages that don't add to 100% Layout issues Ensure rows/cols add up to 100%
Not closing the <frameset> tag Invalid HTML Always close with </frameset>

📊 Observations

  • <frameset> divides the browser window into rows or columns.
  • <frame> loads an HTML document in each section.
  • The name attribute allows targeting links to specific frames.
  • <noframes> provides content for browsers that don't support frames.
  • Framesets are deprecated in HTML5 but still work in most browsers.
  • Modern alternatives include CSS Flexbox, CSS Grid, and iframe.
  • Frames were commonly used for navigation menus with content areas.

✅ Result

You have successfully:

  • Created an HTML webpage with framesets using <frameset> and <frame> tags.
  • Divided the browser window into header, navigation, content, and footer frames.
  • Used the target attribute to load content into specific frames.
  • Included <noframes> fallback content.
  • Viewed the frameset layout in a browser.
📌 Important: While framesets are deprecated in HTML5, understanding them helps you understand how websites were built in the past. For new projects, use CSS Flexbox, CSS Grid, or iframe for similar functionality.
💡 Next Steps: Try creating a frameset with 3 columns. Experiment with nested framesets (framesets inside framesets). Create a navigation menu that loads different pages into the content area. Learn about CSS Flexbox and CSS Grid for modern layouts!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو فریم سیٹس کے استعمال کو <frameset> اور <frame> ٹیگز کے ساتھ براؤزر ونڈو کو متعدد حصوں میں تقسیم کرنے کا طریقہ ظاہر کرتا ہے۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • مختلف فریموں کے لیے متعدد HTML صفحات (یا ان لائن مواد کا استعمال)

📖 تعارف

فریم سیٹس آپ کو براؤزر ونڈو کو متعدد حصوں میں تقسیم کرنے کی اجازت دیتے ہیں، ہر حصہ ایک الگ HTML دستاویز ظاہر کرتا ہے۔ اہم عناصر:

  • <frameset> — فریموں کی ترتیب کی وضاحت کرتا ہے (قطاریں یا کالم)۔
  • <frame> — فریم سیٹ کے اندر ایک فریم کی وضاحت کرتا ہے۔
  • <noframes> — ان براؤزرز کے لیے مواد فراہم کرتا ہے جو فریمز کو سپورٹ نہیں کرتے۔
⚠️ اہم: <frameset> اور <frame> ٹیگز HTML5 میں متروک ہیں۔ وہ زیادہ تر براؤزرز کے ذریعہ اب بھی سپورٹ کیے جاتے ہیں لیکن نئے پروجیکٹس کے لیے تجویز نہیں کیے جاتے۔ اس کی بجائے CSS Flexbox یا CSS Grid استعمال کریں۔ تاہم، وہ سیکھنے کے مقاصد کے لیے اب بھی مفید ہیں۔
💡 مشورہ: فریم سیٹس عام طور پر نیویگیشن مینو (بائیں فریم) اور مواد (دائیں فریم) کے لیے استعمال ہوتے ہیں۔ بائیں فریم میں لنکس ہوتے ہیں جو target صفت کا استعمال کرتے ہوئے دائیں فریم میں مواد لوڈ کرتے ہیں۔

📊 آؤٹ پٹ کا پیش منظر

🖼️ فریم سیٹ لے آؤٹ کی مثال

📐 فریم لے آؤٹ
ہیڈر فریم اونچائی: 20%
نیویگیشن چوڑائی: 25%
مواد کا علاقہ چوڑائی: 75%
فوٹر فریم اونچائی: 10%
🔧 عام فریم سیٹ لے آؤٹ
اوپر
مینو
مواد
نیچے

ہیڈر + 2 کالم + فوٹر

بائیں
مواد

2 کالم (بائیں + دائیں)

اوپر
مواد

2 قطاریں (اوپر + نیچے)

📝 مرحلہ وار: فریم سیٹس کے ساتھ HTML صفحہ بنانا

پہلا قدم: مرکزی فریم سیٹ صفحہ بنائیں

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 79: Webpage with Framesets --> <html> <head> <title>Frameset Example</title> </head> <!-- فریم سیٹ لے آؤٹ: 3 قطاریں --> <frameset rows="20%, 70%, 10%" frameborder="1" border="2"> <!-- اوپر کا فریم: ہیڈر --> <frame src="header.html" name="header" scrolling="no"> <!-- درمیانی حصہ: نیویگیشن + مواد (2 کالم) --> <frameset cols="25%, 75%"> <!-- بائیں فریم: نیویگیشن --> <frame src="nav.html" name="nav" scrolling="auto"> <!-- دائیں فریم: مواد --> <frame src="content.html" name="main" scrolling="auto"> </frameset> <!-- نیچے کا فریم: فوٹر --> <frame src="footer.html" name="footer" scrolling="no"> <!-- ان براؤزرز کے لیے مواد جو فریمز کو سپورٹ نہیں کرتے --> <noframes> <body> <h1>آپ کا براؤزر فریمز کو سپورٹ نہیں کرتا۔</h1> <p>براہ کرم اس صفحہ کو دیکھنے کے لیے ایک جدید براؤزر استعمال کریں۔</p> </body> </noframes> </frameset> </html>

دوسرا قدم: انفرادی فریم صفحات بنائیں

  1. اوپر والے فریم کے لیے header.html بنائیں:
<!-- header.html --> <html> <head> <title>Header</title> <style> body { background: #2c3e50; color: white; text-align: center; font-family: Arial, sans-serif; padding: 15px; margin: 0; } h1 { margin: 0; font-size: 1.8em; } </style> </head> <body> <h1>🔷 میری ویب سائٹ کا ہیڈر</h1> <p>میرے فریم سیٹ کی مثال میں خوش آمدید!</p> </body> </html>
  1. بائیں نیویگیشن فریم کے لیے nav.html بنائیں:
<!-- nav.html --> <html> <head> <title>Navigation</title> <style> body { background: #3498db; color: white; font-family: Arial, sans-serif; padding: 15px; margin: 0; } a { display: block; color: white; text-decoration: none; padding: 10px; background: rgba(255,255,255,0.2); margin: 5px 0; border-radius: 4px; transition: background 0.3s; } a:hover { background: rgba(255,255,255,0.4); } h3 { text-align: center; border-bottom: 2px solid rgba(255,255,255,0.3); padding-bottom: 8px; } </style> </head> <body> <h3>📂 نیویگیشن</h3> <!-- target="main" دائیں فریم میں مواد لوڈ کرتا ہے --> <a href="page1.html" target="main">📄 صفحہ 1</a> <a href="page2.html" target="main">📄 صفحہ 2</a> <a href="page3.html" target="main">📄 صفحہ 3</a> <a href="https://www.google.com" target="_blank">🔗 گوگل</a> </body> </html>
  1. مرکزی مواد کے فریم کے لیے content.html بنائیں:
<!-- content.html --> <html> <head> <title>Content</title> <style> body { font-family: Arial, sans-serif; padding: 20px; margin: 0; background: #ecf0f1; color: #2c3e50; } h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 8px; } </style> </head> <body> <h2>مواد کے علاقے میں خوش آمدید</h2> <p>یہ مرکزی مواد کا فریم ہے۔ مختلف صفحات لوڈ کرنے کے لیے نیویگیشن فریم میں لنکس پر کلک کریں۔</p> <p>یہ مثال ظاہر کرتی ہے کہ فریم سیٹس کا استعمال ایک علیحدہ نیویگیشن مینو اور مواد کے علاقے کے ساتھ ویب سائٹ لے آؤٹ بنانے کے لیے کیسے کیا جا سکتا ہے۔</p> </body> </html>
  1. نیچے والے فریم کے لیے footer.html بنائیں:
<!-- footer.html --> <html> <head> <title>Footer</title> <style> body { background: #2c3e50; color: #bdc3c7; text-align: center; font-family: Arial, sans-serif; padding: 8px; margin: 0; font-size: 0.9em; } p { margin: 0; } </style> </head> <body> <p>© 2025 میری ویب سائٹ۔ جملہ حقوق محفوظ ہیں۔ | سیکھنے کے مقاصد کے لیے ڈیزائن کیا گیا</p> </body> </html>

تیسرا قدم: تمام فائلیں محفوظ کریں اور براؤزر میں کھولیں

  1. تمام فائلوں کو ایک ہی فولڈر میں محفوظ کریں۔
  2. مرکزی فریم سیٹ فائل (مثلاً "frameset.html") کو اپنے براؤزر میں کھولیں۔
  3. آپ کو ہیڈر، نیویگیشن، مواد، اور فوٹر کے ساتھ مکمل فریم سیٹ لے آؤٹ نظر آئے گا۔
  4. مواد کے علاقے میں مختلف صفحات لوڈ کرنے کے لیے نیویگیشن فریم میں لنکس پر کلک کریں۔

📊 فریم سیٹ کی صفات

صفت مقصد مثال
rows قطاروں کی اونچائی کی وضاحت کرتا ہے (فیصد یا پکسلز) rows="20%, 70%, 10%"
cols کالموں کی چوڑائی کی وضاحت کرتا ہے (فیصد یا پکسلز) cols="25%, 75%"
frameborder فریم بارڈرز دکھانے ہیں یا نہیں (0 یا 1) frameborder="1"
border بارڈر کی موٹائی پکسلز میں سیٹ کرتا ہے border="2"
src فریم میں ظاہر کرنے کے لیے HTML فائل کی وضاحت کرتا ہے src="content.html"
name فریم کو ایک نام تفویض کرتا ہے (لنکس کو نشانہ بنانے کے لیے) name="main"
scrolling اسکرول بارز کو کنٹرول کرتا ہے (yes، no، auto) scrolling="auto"

📊 عام فریم سیٹ لے آؤٹ

لے آؤٹ کوڈ وضاحت
2 کالم <frameset cols="30%, 70%"> بائیں نیویگیشن، دائیں مواد
2 قطاریں <frameset rows="50%, 50%"> اوپر اور نیچے کے حصے
3 قطاریں <frameset rows="15%, 75%, 10%"> ہیڈر، مواد، فوٹر
ہیڈر + کالم + فوٹر <frameset rows="15%, 75%, 10%"> ... <frameset cols="25%, 75%"> ہیڈر، نیویگیشن + مواد، فوٹر
کالم + ہیڈر <frameset cols="30%, 70%"> ... <frameset rows="20%, 80%"> نیسٹڈ فریموں کے ساتھ 2-کالم لے آؤٹ

📊 فریمز کے ساتھ target صفت کا استعمال

<!-- nav.html میں: مخصوص فریموں میں لوڈ کرنے کے لیے نشانہ بنانے والے لنکس --> <!-- "main" نامی فریم میں لوڈ ہوتا ہے --> <a href="page1.html" target="main">صفحہ 1</a> <!-- نئی ونڈو/ٹیب میں کھلتا ہے --> <a href="https://google.com" target="_blank">گوگل</a> <!-- پیرنٹ فریم سیٹ میں کھلتا ہے (اگر نیسٹڈ ہو) --> <a href="page.html" target="_parent">پیرنٹ</a> <!-- سب سے اوپر کی ونڈو میں کھلتا ہے (فریموں سے باہر نکلتا ہے) --> <a href="page.html" target="_top">اوپر</a>

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
<body> کو <frameset> کے ساتھ استعمال کرنا غلط HTML ڈھانچہ یا تو <body> یا <frameset> استعمال کریں، دونوں نہیں
<noframes> فال بیک بھول جانا ناقص رسائی ہمیشہ <noframes> مواد شامل کریں
فریموں پر name صفت غائب لنکس کو نشانہ بنانا کام نہیں کرے گا ان فریموں میں name شامل کریں جنہیں آپ نشانہ بنانا چاہتے ہیں
فیصد کا استعمال جو 100% تک نہیں پہنچتے لے آؤٹ کے مسائل یقینی بنائیں کہ rows/cols کا مجموعہ 100% ہے
<frameset> ٹیگ بند نہ کرنا غلط HTML ہمیشہ </frameset> کے ساتھ بند کریں

📊 مشاہدات

  • <frameset> براؤزر ونڈو کو قطاروں یا کالموں میں تقسیم کرتا ہے۔
  • <frame> ہر حصے میں ایک HTML دستاویز لوڈ کرتا ہے۔
  • name صفت مخصوص فریموں میں نشانہ بنانے والے لنکس کی اجازت دیتی ہے۔
  • <noframes> ان براؤزرز کے لیے مواد فراہم کرتا ہے جو فریمز کو سپورٹ نہیں کرتے۔
  • فریم سیٹس HTML5 میں متروک ہیں لیکن زیادہ تر براؤزرز میں اب بھی کام کرتے ہیں۔
  • جدید متبادل میں CSS Flexbox، CSS Grid، اور iframe شامل ہیں۔
  • فریمز عام طور پر نیویگیشن مینوز کو مواد کے علاقوں کے ساتھ استعمال کرتے تھے۔

✅ نتیجہ

آپ نے کامیابی سے:

  • <frameset> اور <frame> ٹیگز کا استعمال کرتے ہوئے فریم سیٹس کے ساتھ ایک HTML ویب صفحہ بنایا۔
  • براؤزر ونڈو کو ہیڈر، نیویگیشن، مواد، اور فوٹر فریموں میں تقسیم کیا۔
  • مخصوص فریموں میں مواد لوڈ کرنے کے لیے target صفت کا استعمال کیا۔
  • <noframes> فال بیک مواد شامل کیا۔
  • فریم سیٹ لے آؤٹ کو براؤزر میں دیکھا۔
📌 اہم: اگرچہ فریم سیٹس HTML5 میں متروک ہیں، انہیں سمجھنا آپ کو یہ سمجھنے میں مدد کرتا ہے کہ ماضی میں ویب سائٹس کیسے بنائی جاتی تھیں۔ نئے پروجیکٹس کے لیے، اسی طرح کی فعالیت کے لیے CSS Flexbox، CSS Grid، یا iframe استعمال کریں۔
💡 اگلے اقدامات: 3 کالموں کے ساتھ ایک فریم سیٹ بنانے کی کوشش کریں۔ نیسٹڈ فریم سیٹس (فریم سیٹس کے اندر فریم سیٹس) کے ساتھ تجربہ کریں۔ ایک نیویگیشن مینو بنائیں جو مواد کے علاقے میں مختلف صفحات لوڈ کرتا ہے۔ جدید لے آؤٹ کے لیے CSS Flexbox اور CSS Grid کے بارے میں جانیں!
⬅ Back to Practical Notebooks