HTML Iframes



HTML Iframes क्या हैं।

HTML Iframe वह होता हैं जिसका उपयोग एक ही पेज में किसी दूसरे वेबपेज को add करने के लिए किया जाता हैं अर्थात आप किसी दूसरी या दूसरे की site को भी Iframe के जरिये अपने वेबपेज में show करवा सकते हैं।

सबसे बड़ी बात यह है कि वेबसाइट में menu bar और footer bar भी Iframe से भी बन सकती हैं।

HTML Iframe को <iframe> टैग दवरा define किया जाता हैं।

HTML <iframe> टैग एक "inline frame" Specify करता हैं।

यानि की Iframe की मदद से Current HTML डॉक्यूमेंट पर दूसरा HTML डॉक्यूमेंट को Embed किया जाता हैं।

Syntax of HTML Iframe:

<iframe src="url" title="description"></iframe>

जैसे कि अपने ऊपर दिए हुए Syntax को देखा ही होगा कि इसमें <iframe> टैग से सुरु होता हैं और src के अंदर आप url or कोई ओर फाइल का path दे सकते हो।

Iframe हमेशा body टैग के अंदर ही आता हैं।


Table of Contents:

  1. Set Height and Width Attribute - iframe tag
  2. Remove Border from iframe tag
  3. Change Border color from iframe tag
  4. Name Attribute from iframe tag
इसमें दिए गए Contents को One by one देखेंगे।


1. Set Height and Width Attribute - iframe tag

HTML iframe tag में height and width atrribute को सेट कर सकते हैं। 

अर्थात height and width attribute से frame की height and width की साइज को सेट या specify कर सकते हैं।

उदाहरण :

<!DOCTYPE html>
<html>
<head>
     <title>Set height and width - iframe</title>
</head>
<body>
     <h2>HTML Iframe</h2>
     <p>
          height and width attribute से frame की height and width की साइज को सेट या specify कर सकते हैं
     </p>
     <iframe  src="https://techbyantimshinde.blogspot.com/" height="200px;" width="300px;" title="Example Iframe"></iframe>
</body>
</html>

Output:

HTML Iframe

height and width attribute से frame की height and width की साइज को सेट या specify कर सकते हैं


<iframe> tag में style attribute का उपयोग करने से ओर भी बेहतर रहेगा।

उदाहरण :

<!DOCTYPE html>
<html>
<head>
     <title>Set height and width - iframe</title>
</head>
<body>
     <h2>Use of style Attribute - Iframe</h2>
     <p>
          style attribute का उपयोग करके भी height and width की साइज को सेट या specify कर सकते हैं।
     </p>
     <iframe  src="https://techbyantimshinde.blogspot.com/" style="height: 200px; width: 300px;" title="Example Iframe"></iframe>
</body>
</html>

Output:

Use of style Attribute - iframe:

style attribute का उपयोग करके भी height and width की साइज को सेट या specify कर सकते हैं।



2. Remove Border from iframe tag

एक iframe के चारों ओर एक border होती हैं, जो कि by default होती हैं।

उदाहरण :

<!DOCTYPE html>
<html>
<head>
     <title>Remove border - iframe</title>
</head>
<body>
     <h2>Remove border - iframe</h2>
     <p>
          border: none; attribute से frame की border को remove कर सकते हैं।
     </p>
     <iframe  src="https://techbyantimshinde.blogspot.com/" style="border: none;" title="Example Iframe"></iframe>
</body>
</html>

Output:

Remove border - iframe

border: none; attribute से frame की border को remove कर सकते हैं।



3. Change Border color from iframe tag

हम frame की border का color भी चेंज कर सकते हैं।

उदाहरण :

<!DOCTYPE html>
<html>
<head>
     <title>Change border color - iframe</title>
</head>
<body>
     <h2>Change border color - iframe</h2>
     <p>
         border: 2px solid red; attribute से frame की border color cahnge कर सकते हैं।
     </p>
     <iframe  src="https://techbyantimshinde.blogspot.com/" style="border: none;" title="Example Iframe"></iframe>
</body>
</html>

Output:

Change border color - iframe

border: 2px solid red; attribute से frame की border color cahnge कर सकते हैं।



4. name attribute (link target) from iframe tag

जब आप वेबपेज पर दी गयी link पर click करें तब iframe के अंदर result show हो। इसके लिए आपको link generate करना होगा और फिर उसे iframe से connect करना होगा।

name attribute से iframe को एंकर टैग (<a>) से target किया जाता हैं।

उदाहरण (Example) :

<!DOCTYPE html>
<html>
<head>
     <title>name attribute - link target</title>
</head>
<body>
     <h2>name attribute - link target - Iframe</h2>
     <iframe  src="" name="a_iframe" title="Example Iframe"></iframe>
     <p><a href="https://techbyantimshinde.blogspot.com/" target="a_iframe"></a></p>
</body>
</html>

Output

name attribute - link target - Iframe

click - TechByAntimShinde