Home » Web programming/HTML

HTML Iframes

In HTML, iframes are important and are used to display a webpage within a webpage. In this tutorial, we will learn about iframes and their properties in HTML.
Submitted by Shivang Yadav, on December 15, 2019

Iframes

In HTML, iframes are used to display a webpage inside another webpage.

Syntax:

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

The <iframe> tag is used to define an iframe. And the src attribute is used to specify the location (URL) of the webpage that is to be included.

Iframe Tag properties

Some of the common properties of the iframe are,

i) height and width properties

The size of the iframe is defined in HTML using height and width properties.

Method 1: In HTML using height and width attribute, the default unit to define the values in pixels.

<!DOCTYPE html>

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to define height and width in iframe</p>
    <iframe src="https://www.includehelp.com/" width="500" heigth="200"></iframe>
</body>

</html>

Output

HTML iframe example 1

Method 2: In CSS using height and width of iframe.

<!DOCTYPE html>

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to define height and width in iframe</p>
    <iframe src="https://www.includehelp.com/" style="height:400px; width:500px"></iframe>
</body>

</html>

Output

HTML iframe example 2

ii) Iframe borders (The border property)

In iFrames, there is a default border around it. You can define the border for the iframe in HTML using CSS border property.

<!DOCTYPE html>

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to define height and width in iframe</p>
    <iframe src="https://www.includehelp.com/" style="border: 2px dotted green"></iframe>
</body>

</html>

Output

HTML iframe example 3

<!DOCTYPE html>

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to define height and width in iframe</p>
    <iframe src="https://www.includehelp.com/" style="border: none;"></iframe>
</body>

</html>

Output

HTML iframe example 4

iii) Changing link in iframe

In the iframe, the link can be changed for the iframe to the next link in an event. The attribute target and name are required.

The name attribute defines the name iframe whose link is to be redefined.

The target attribute is defined in another tag with the same value as the name of the iframe and will be used to replace the src of the iframe.

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to replace link in iframe</p>
    <iframe src="https://www.includehelp.com/" name="iframe1" width="500" height="450"></iframe>
    <br>
    <a href="https://www.includehelp.com/scala/" target="iframe1">Lets see my new article</a>
</body>

</html>

Output

HTML iframe example 5

After cliking on the link...


HTML iframe example 6







Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.