deepeweb.github.io

HTML Frames & IFrame in Hindi

HTML Frames

HTML में Frames का इस्तेमाल एक ही web page पर multiple HTML documents को दिखाने के लिए किया जाता था। यानी browser की screen को कई हिस्सों (sections) में divide करके हर हिस्से में अलग-अलग page load किए जाते थे।

Frames को बनाने के लिए पहले <frameset> tag का use होता था, जो कि <body> tag की जगह आता था। इसके अंदर अलग-अलग <frame> tags होते थे, जो अलग-अलग webpages को load करते थे।

<frameset cols="50%,50%">
  <frame src="left.html">
  <frame src="right.html">
</frameset>

उपर दिए गए code में browser को दो equal vertical हिस्सों में divide किया गया है। एक हिस्से में left.html और दूसरे में right.html load होगा।

Frames vertical और horizontal दोनों layout में बनाए जा सकते हैं। cols attribute से vertical और rows attribute से horizontal division किया जाता है।

हालांकि, आज के समय में <frame> और <frameset> tags deprecated (पुराने और बंद हो चुके) माने जाते हैं। Modern HTML5 में इनका इस्तेमाल नहीं किया जाता।

इसके बजाय, आजकल developers CSS layouts, flexbox, grid, या iframes का उपयोग करते हैं जो ज़्यादा flexible और responsive होते हैं।

Frames SEO और accessibility के लिए भी अच्छे नहीं माने जाते थे क्योंकि search engines और screen readers को अलग-अलग frames को समझने में दिक्कत होती थी।

इसलिए, अगर आप modern और responsive website बनाना चाहते हैं तो frames के बजाय iframe या CSS-based layout का इस्तेमाल करें।

IFrame in HTML

IFrame का मतलब है Inline Frame। इसका इस्तेमाल किसी दूसरे webpage, video, map, या external content को आपके current HTML page के अंदर दिखाने के लिए किया जाता है।

IFrame को HTML में <iframe> tag से लिखा जाता है। इस टैग का सबसे जरूरी attribute होता है src, जिसमें उस content या page का URL दिया जाता है जिसे आप iframe में load करना चाहते हैं।

<iframe src="https://example.com" width="600" height="400"></iframe>

ऊपर दिए गए code में, https://example.com को 600px चौड़ाई और 400px ऊंचाई के एक छोटे से window (iframe) में load किया जाएगा।

आप iframe में YouTube videos, Google Maps, या कोई भी external website embed कर सकते हैं। जैसे:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
title="YouTube video" frameborder="0" allowfullscreen>
</iframe>

IFrame का फायदा यह है कि आप किसी और वेबसाइट या source को अपनी वेबसाइट में include कर सकते हैं बिना user को redirect किए।

लेकिन ध्यान रखना जरूरी है कि कुछ websites security के कारण अपने content को iframe में load होने से रोकती हैं। इसलिए हर link iframe में open नहीं होता।

IFrames को CSS की मदद से responsive भी बनाया जा सकता है ताकि वो mobile और desktop दोनों में सही से दिखाई दें।

आज भी iframe का इस्तेमाल कई जगह किया जाता है, खासकर जब कोई external content जैसे कि ads, videos या maps को किसी page में directly दिखाना हो।

HTML tables का structure rigid होता है। अगर आप किसी content को redesign करना चाहें तो table-based layout में flexibility की कमी होती है।

Tables का use अगर layout design के लिए किया जाए, तो वेबसाइट की loading speed slow हो सकती है, क्योंकि table render करना browser के लिए ज्यादा complex होता है।

अगर कोई table बहुत बड़ी हो, तो उसमें से content ढूंढना या समझना user के लिए confusing हो सकता है।

Search engines के लिए भी complex nested tables को समझना थोड़ा मुश्किल हो सकता है, जिससे SEO negatively affect हो सकता है।

Accessibility के मामले में भी tables सीमित हैं। Screen readers और assistive tools के लिए tables को navigate करना मुश्किल होता है, खासकर अगर proper , और ना use किया गया हो।

Layout purpose के लिए tables का use अब outdated माना जाता है। Modern websites में हम CSS Flexbox या CSS Grid का इस्तेमाल करते हैं।

अगर table में बहुत सारे rows और columns हों, तो वो छोटे स्क्रीन पर scroll करने में मुश्किल पैदा करते हैं, जिससे user experience खराब हो सकता है।

Tables को style करने में भी परेशानी होती है। हर browser में table elements को थोड़े अलग तरीके से show किया जाता है, जिससे design consistency टूट सकती है।

इसलिए जरूरी है कि tables का इस्तेमाल सिर्फ वहीं करें जहां data को tabular format में दिखाना हो — layout design के लिए नहीं।




Request

अगर आपको यह article useful या interesting लगा हो, तो please इसे अपने dosto aur family ke साथ जरूर share करें। आपका एक छोटा सा कदम हमें और अच्छा content बनाने के लिए motivate करता है। Thank you!

ध्यान दें कि इस page पर आपको कुछ ads भी देखने को मिल सकते हैं। इसके लिए हम आपसे माफी चाहते हैं। हम इस content को तैयार करने में काफी मेहनत और time लगाते हैं, ताकि आपको valuable जानकारी मिल सके। इन्हीं ads की मदद से हम ये काम continue कर पाते हैं।

आपके support और understanding के लिए दिल से धन्यवाद।




Follow Us

Facebook Logo    Instagram Logo