Learn Basic HTML Complete Course part 18

HTML iframes


HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame.

Iframe Syntax

An HTML iframe is defined with the <iframe> tag:

<iframe src="URL"></iframe>  

Here, "src" attribute specifies the web address (URL) of the inline frame page.


Set Width and Height of iframe

You can set the width and height of iframe by using "width" and "height" attributes. By default, the attribute?s values are specified in pixels but you can also set them in percent. i.e. 50%, 60% etc.

Remove the border of iframe

By default, an iframe contains a border around it. You can remove the border by using <style> attribute and CSS border property.


Iframe Target for a link

You can set a target frame for a link by using iframe. Your specified target attribute of the link must refer to the name attribute of the iframe.


Example

<!DOCTYPE html> 
<html> 
  <body> 
<h2>You need to make Internet connection for output : </h2><br>
    <h4>HTML Iframes example By Pixels</h4><br>
    <iframe src="https://touchtogain.blogspot.com" height="400" width="300"></iframe><br><hr> 

 
<h4>HTML Iframes example By Percentage</h4><br>
<iframe src="https://quizdoor.blogspot.com" height="50%" width="70%"></iframe><br><hr> 
 
<h4>Remove the Iframe Border</h4><br>
<p>This iframe example doesn't have any border</p><br>
<iframe src="https://touchtogain.blogspot.com"
style="border:none;"></iframe><br/><hr>
 
<h4>Iframe - Target for a Link</h4><br>
<iframe height="300px" width="250px"
src="new.html" name="iframe_a"></iframe>
<p><a href="https://topblogpk.blogspot.com"
  target="iframe_a">TopBlog Pk</a></p>
<p>The name of iframe and link target must have
same value else link will not open as frame. </p>

  </body> 
</html>  


outputs are:


You need to make Internet connection for output :


HTML Iframes example By Pixels




HTML Iframes example By Percentage




Remove the Iframe Border


This iframe example doesn't have any border




Iframe - Target for a Link


TopBlog Pk

The name of iframe and link target must have same value else link will not open as frame.


Post a Comment

© Top Blog Pk. All rights reserved. Developed by Jago Desain