In this tutorial, you'll learn how to use iframes to display one web page within another web page.
What is iframe
Iframes are also called inline frames. Using HTML iframes, you can embed one or more external HTML documents or web pages on your web page. HTML documents or web pages on your web page.
The initial syntax for adding an iframe
The URL laid out in the Src attribute indicates the location of an external object or page.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML iFrame</title>
</head>
<body>
<iframe src="https://coderwell.com/article-rewriter/"></iframe>
</body>
</html>Height and Width attributes
Height & Width attributes & used to specify the length & width of an iframe. Although the value of the attribute is set in pixels by default, you can also set it in percentages such as 70%, 80%, etc.
See an example below –
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Height and Width attributes</title>
</head>
<body>
<iframe src="https://coderwell.com/article-rewriter/" width="400" height="500"></iframe>
<iframe src="https://coderwell.com/article-rewriter/" style="width:400px;height:400px; "></iframe>
</body>
</html> Removing Default Frameborder
The iframe is automatically bordered. Use the style attribute and border property to remove the border on the iframe. For this, you need to set the value of Border Property to 0. See an example below –
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Removing Default Frameborder</title>
</head>
<body>
<iframe src="https://coderwell.com/article-rewriter/" style="border:none;"></iframe>
</body>
</html> Used as a link target
Iframes can also be used as a target for any link. The target attribute of a link must support or refer to the iframe’s name attribute.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Used as a link target</title>
</head>
<body>
<iframe src="https://coderwell.com" name="iframe-a"> </iframe>
<p><a href="https://coderwell.com/html/" target="iframe-a">coderwell.com</a></p>
</body>
</html>