EZ

EZNotes

📐 Practical 80: Horizontal frames in a webpage

Learn how to create horizontal frames using the <frameset> tag with the rows attribute to divide the browser window into horizontal sections.

🎯 Aim

To create an HTML webpage that demonstrates the use of horizontal frames using the <frameset> tag with the rows attribute to divide the browser window into horizontal sections.

🛠️ What You Need

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

📖 Introduction

Horizontal frames divide the browser window into rows (top to bottom). The rows attribute of the <frameset> tag specifies the height of each frame.

  • rows="30%, 70%" — Two rows: top (30%) and bottom (70%).
  • rows="20%, 60%, 20%" — Three rows: top (20%), middle (60%), bottom (20%).
  • Each row contains a <frame> tag that loads an HTML document.
⚠️ 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.
💡 Tip: Horizontal frames are commonly used for layouts with a header at the top, content in the middle, and a footer at the bottom.

📊 Preview of the Output

📐 Horizontal Frames Layout

📊 3-Row Horizontal Layout (Header + Content + Footer)
Header Frame Height: 20%
Content Frame Height: 60%
Footer Frame Height: 20%
📊 2-Row Horizontal Layout (Top + Bottom)
Top Frame Height: 50%
Bottom Frame Height: 50%
📊 4-Row Horizontal Layout
Header (15%)
Navigation (15%)
Content (50%)
Footer (20%)

📝 Step‑by‑Step: Creating the HTML Page with Horizontal Frames

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 80: Horizontal Frames --> <html> <head> <title>Horizontal Frames Demo</title> </head> <!-- 3-row horizontal layout: Header + Content + Footer --> <frameset rows="20%, 60%, 20%" frameborder="1" border="2"> <!-- Row 1: Header --> <frame src="header.html" name="header" scrolling="no"> <!-- Row 2: Content --> <frame src="content.html" name="main" scrolling="auto"> <!-- Row 3: Footer --> <frame src="footer.html" name="footer" scrolling="no"> <!-- Fallback for browsers without frames support --> <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; } p { margin: 5px 0 0 0; } </style> </head> <body> <h1>📋 My Website Header</h1> <p>Welcome to my horizontal frames example!</p> </body> </html>
  1. Create content.html for the middle 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>📄 Main Content Area</h2> <p>This is the main content frame. It occupies 60% of the browser window height.</p> <p>Horizontal frames divide the page into rows from top to bottom.</p> <p>This layout has three rows: Header (20%), Content (60%), and Footer (20%).</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. | Built with horizontal frames</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., "horizontal_frames.html") in your browser.
  3. You will see the horizontal frames layout with header, content, and footer.

📊 Horizontal Frameset Layouts

Layout Code Description
2 Rows <frameset rows="50%, 50%"> Two equal horizontal sections
3 Rows <frameset rows="20%, 60%, 20%"> Header, Content, Footer
4 Rows <frameset rows="15%, 15%, 55%, 15%"> Header, Nav, Content, Footer
Uneven Rows <frameset rows="100px, *, 100px"> Fixed heights with flexible middle
Mixed Units <frameset rows="20%, 60%, *"> Top and bottom fixed, middle fills rest

📊 Row Size Values

Value Type Description Example
Percentage Percentage of the total window height rows="20%, 60%, 20%"
Pixels Fixed height in pixels rows="100, 400, 100"
Asterisk (*) Remaining space (flexible) rows="100, *, 100"
Mixed Combination of units rows="20%, 300, *"

📊 Using the * (Asterisk) for Flexible Rows

<!-- Using * for flexible rows --> <!-- Header: 100px fixed, Content: remaining space, Footer: 80px fixed --> <frameset rows="100px, *, 80px"> <frame src="header.html"> <frame src="content.html"> <frame src="footer.html"> </frameset> <!-- Multiple flexible rows (each takes equal share) --> <frameset rows="*, *, *"> <!-- Three equal rows --> </frameset>

📊 Nested Framesets with Horizontal Layouts

<!-- Nested frameset: Horizontal outer, Vertical inner --> <frameset rows="20%, 80%"> <!-- Top row: Header --> <frame src="header.html"> <!-- Bottom row: Divided into 2 columns --> <frameset cols="30%, 70%"> <frame src="nav.html"> <frame src="content.html"> </frameset> </frameset>

📊 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
Row percentages not adding to 100% Layout issues Ensure rows add up to 100%
Forgetting <noframes> fallback Poor accessibility Always include <noframes> content
Missing src attribute in <frame> Frame will be empty Always specify src for each frame
Not closing the <frameset> tag Invalid HTML Always close with </frameset>

📊 Observations

  • Horizontal frames divide the browser window into rows using the rows attribute.
  • rows can use percentages, pixels, or the * (asterisk) for flexible sizing.
  • Each <frame> loads a separate HTML document.
  • Horizontal frames are commonly used for header-content-footer layouts.
  • Framesets can be nested to create complex layouts with both rows and columns.
  • Framesets are deprecated in HTML5 but still work in most browsers.

✅ Result

You have successfully:

  • Created an HTML webpage with horizontal frames using <frameset> and <frame> tags.
  • Divided the browser window into rows (header, content, footer).
  • Used the rows attribute with percentages and pixel values.
  • Learned about flexible sizing using the * (asterisk).
  • Viewed the horizontal frames 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 4-row layout with a navigation bar. Experiment with nested framesets (horizontal + vertical). Create a fixed header and footer with a scrolling content area. Learn about CSS Flexbox and CSS Grid for modern layouts!

🎯 مقصد

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

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

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

📖 تعارف

افقی فریم براؤزر ونڈو کو قطاروں (اوپر سے نیچے) میں تقسیم کرتے ہیں۔ <frameset> ٹیگ کی rows صفت ہر فریم کی اونچائی کی وضاحت کرتی ہے۔

  • rows="30%, 70%" — دو قطاریں: اوپر (30%) اور نیچے (70%)۔
  • rows="20%, 60%, 20%" — تین قطاریں: اوپر (20%)، درمیان (60%)، نیچے (20%)۔
  • ہر قطار میں ایک <frame> ٹیگ ہوتا ہے جو ایک HTML دستاویز لوڈ کرتا ہے۔
⚠️ اہم: <frameset> اور <frame> ٹیگز HTML5 میں متروک ہیں۔ وہ زیادہ تر براؤزرز کے ذریعہ اب بھی سپورٹ کیے جاتے ہیں لیکن نئے پروجیکٹس کے لیے تجویز نہیں کیے جاتے۔ اس کی بجائے CSS Flexbox یا CSS Grid استعمال کریں۔
💡 مشورہ: افقی فریم عام طور پر ہیڈر اوپر، مواد درمیان، اور فوٹر نیچے کے ساتھ لے آؤٹ کے لیے استعمال ہوتے ہیں۔

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

📐 افقی فریم لے آؤٹ

📊 3-قطار افقی لے آؤٹ (ہیڈر + مواد + فوٹر)
ہیڈر فریم اونچائی: 20%
مواد کا فریم اونچائی: 60%
فوٹر فریم اونچائی: 20%
📊 2-قطار افقی لے آؤٹ (اوپر + نیچے)
اوپر کا فریم اونچائی: 50%
نیچے کا فریم اونچائی: 50%
📊 4-قطار افقی لے آؤٹ
ہیڈر (15%)
نیویگیشن (15%)
مواد (50%)
فوٹر (20%)

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 80: Horizontal Frames --> <html> <head> <title>Horizontal Frames Demo</title> </head> <!-- 3-قطار افقی لے آؤٹ: ہیڈر + مواد + فوٹر --> <frameset rows="20%, 60%, 20%" frameborder="1" border="2"> <!-- قطار 1: ہیڈر --> <frame src="header.html" name="header" scrolling="no"> <!-- قطار 2: مواد --> <frame src="content.html" name="main" scrolling="auto"> <!-- قطار 3: فوٹر --> <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; } p { margin: 5px 0 0 0; } </style> </head> <body> <h1>📋 میری ویب سائٹ کا ہیڈر</h1> <p>میری افقی فریم کی مثال میں خوش آمدید!</p> </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>یہ مرکزی مواد کا فریم ہے۔ یہ براؤزر ونڈو کی اونچائی کا 60% حصہ رکھتا ہے۔</p> <p>افقی فریم صفحہ کو اوپر سے نیچے تک قطاروں میں تقسیم کرتے ہیں۔</p> <p>اس لے آؤٹ میں تین قطاریں ہیں: ہیڈر (20%)، مواد (60%)، اور فوٹر (20%)۔</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. مرکزی فریم سیٹ فائل (مثلاً "horizontal_frames.html") کو اپنے براؤزر میں کھولیں۔
  3. آپ کو ہیڈر، مواد، اور فوٹر کے ساتھ افقی فریم لے آؤٹ نظر آئے گا۔

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

لے آؤٹ کوڈ وضاحت
2 قطاریں <frameset rows="50%, 50%"> دو برابر افقی حصے
3 قطاریں <frameset rows="20%, 60%, 20%"> ہیڈر، مواد، فوٹر
4 قطاریں <frameset rows="15%, 15%, 55%, 15%"> ہیڈر، نیویگیشن، مواد، فوٹر
غیر مساوی قطاریں <frameset rows="100px, *, 100px"> مقررہ اونچائیاں اور لچکدار درمیان
مخلوط اکائیاں <frameset rows="20%, 60%, *"> اوپر اور نیچے مقرر، درمیان باقی بھرتی ہے

📊 قطار کے سائز کی اقدار

قدر کی قسم وضاحت مثال
فیصد کل ونڈو اونچائی کا فیصد rows="20%, 60%, 20%"
پکسلز پکسلز میں مقررہ اونچائی rows="100, 400, 100"
ستارہ (*) باقی جگہ (لچکدار) rows="100, *, 100"
مخلوط اکائیوں کا مجموعہ rows="20%, 300, *"

📊 لچکدار قطاروں کے لیے * (ستارہ) کا استعمال

<!-- لچکدار قطاروں کے لیے * کا استعمال --> <!-- ہیڈر: 100px مقرر، مواد: باقی جگہ، فوٹر: 80px مقرر --> <frameset rows="100px, *, 80px"> <frame src="header.html"> <frame src="content.html"> <frame src="footer.html"> </frameset> <!-- متعدد لچکدار قطاریں (ہر ایک برابر حصہ لیتی ہے) --> <frameset rows="*, *, *"> <!-- تین برابر قطاریں --> </frameset>

📊 افقی لے آؤٹ کے ساتھ نیسٹڈ فریم سیٹس

<!-- نیسٹڈ فریم سیٹ: افقی بیرونی، عمودی اندرونی --> <frameset rows="20%, 80%"> <!-- اوپر کی قطار: ہیڈر --> <frame src="header.html"> <!-- نیچے کی قطار: 2 کالموں میں تقسیم --> <frameset cols="30%, 70%"> <frame src="nav.html"> <frame src="content.html"> </frameset> </frameset>

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

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

📊 مشاہدات

  • افقی فریم rows صفت کا استعمال کرتے ہوئے براؤزر ونڈو کو قطاروں میں تقسیم کرتے ہیں۔
  • rows فیصد، پکسلز، یا * (ستارہ) لچکدار سائز کے لیے استعمال کر سکتے ہیں۔
  • ہر <frame> ایک الگ HTML دستاویز لوڈ کرتا ہے۔
  • افقی فریم عام طور پر ہیڈر-مواد-فوٹر لے آؤٹ کے لیے استعمال ہوتے ہیں۔
  • فریم سیٹس کو نیسٹ کیا جا سکتا ہے تاکہ قطاروں اور کالموں دونوں کے ساتھ پیچیدہ لے آؤٹ بنایا جا سکے۔
  • فریم سیٹس HTML5 میں متروک ہیں لیکن زیادہ تر براؤزرز میں اب بھی کام کرتے ہیں۔

✅ نتیجہ

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

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