HTML Iframe (Inline Frame) full tutorial with examples.
HTML TUTORIAL NO: 16
HTML Iframe (Inline Frame)
The HTML Iframe (Inline Frame) is an inline frame, it is used to embed other documents with the current HTML documents. It is also known as the HTML Inline Frame element represents nested browsing context as it embeds another HTML page into the current page.
It can be defined using the <iframe> element.
Embedded browsing content created by the <iframe> element is itself a complete document environment therefore it has its own session history.
HTML Iframe Attributes
- height: It specific the height of the frame in pixels.
- name: It specific a mane for the target attribute of elements like <a></a> and <frame></frame>.
- width: It specific the width of the frame in pixels.
- src: It specific the URL or file path of the pages to embed.
Now we see the Examples of all Attributes of Iframe one by one.
Example of height and width Attribute of Iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Iframe</title>
</head>
<body>
<iframe
src="image.html" frameborder="2"
height="100" width="170"></iframe>
</body>
</html>
|
Output of above Example
 |
Example of name Attribute in HTML Iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Iframe</title>
</head>
<body>
<p style="text-align: center;">Instant
of redirecting the current page, sbmitted
to the Iframe.</p>
<form action="action.html"
target="demo">
<input type="submit">
</form>
<iframe
name="demo" height="80"
width="200"></iframe>
</body>
</html>
|
Output of above Example
 |
Example of Embedding External Website in Iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Iframe</title>
</head>
<body>
<iframe
src="https://www.studymuch.in"
height="200" width="400"></iframe>
</body>
</html>
|
Output of above Example
 |
Example of Removing HTML Iframe Border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Iframe</title>
</head>
<body>
<iframe
src="image.html" height="100"
width="200" style="border: 0px;"></iframe>
</body>
</html>
|
Output of above Example
 |
As you can see in the above output of example there were no any border of Iframe, because we use here style=”border: 0px, so that above example has no any border.
In this tutorial we learned the HTML Iframe (HTML Internal Frame), I hope you understand this this Iframe tutorial, and in next tutorial we will be learn a new topic of HTML.
Also Learn This-
- Learn HTML Video Tag with examples.
- Learn HTML Audio Tag full tutorial.
- HTML Table full tutorial with programming examples.
- Learn HTML Description list with examples.
- Learn HTML Dropdown list.
- Learn HTML Button full tutorial with examples.
1 Comment
zoritoler imol · July 4, 2022 at 1:42 am
I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz answer back as I’m looking to construct my own blog and would like to know where u got this from. cheers