Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   
JAVA SPRING SPRINGBOOT HIBERNATE HADOOP HIVE ALGORITHMS PYTHON GO KOTLIN C# RUBY C++ HTML CSS JAVA SCRIPT JQUERY


❮❮ PREV NEXT ❯❯


HTML - Iframe


Let us say you want to place another webpage inside your webpage. It could be a HTML page or even a webpage like www.learnerslesson.com.


And iframe in HTML gives you the flexibility to do so.


Let us understand iframe with the below example.


Understanding iframe with HTML page


Example : 



<html>
	<body>
		<iframe src="test.htm">
		</iframe>
	</body>        
</html>


Output :



 

So, in the above example we have created a page named test.htm. Now, to place the HTML page test.htm, we have used the src attribute of the <iframe> element.


<iframe src="test.htm">

In the src attribute we have placed the HTML page test.htm and the contents of test.htm would be displayed here.


Understanding iframe with webpage


Example : 



<html>
	<body>
		<iframe src="https://www.learnerslesson.com">
		</iframe>
	</body>        
</html>


Output :



 

Similarly, in the above example we have used the the src attribute of the <iframe> element.


<iframe src="https://www.learnerslesson.com">

And the contents of www.learnerslesson.com would be displayed as output.


Using height and width attributes with iframe


To specify the size of the iframe, height and width attributes are used.


Example : 



<html>
	<body>
		<iframe src="test.htm" height="300" width="500">
		</iframe>
	</body>        
</html>


Output :



 

So, in the above example we have set the height to 300 and width to 500 to specify the size of the iframe.


Also, you can use the style attribute to specify the height and width of the iframe.


Using style attribute to set the height and width of iframe


Example : 



<html>
	<body>
		<iframe src="test.htm" style="height:300px;width:500px;">
		</iframe>
	</body>        
</html>


Output :



 

Title attribute of iframe


A title is used in an iframe to provide a meaningful information for the users. It tells the users what the iframe would be used for.


Example : 



<html>
	<body>
		<iframe src="test.htm" title="Test iframe">
		</iframe>
	</body>        
</html>


Output :



 

Use of border in iframe


Iframe by default has a border.


Example : 



<html>
	<body>
		<iframe src="test.htm" title="Test iframe">
		</iframe>
	</body>        
</html>


Output :



 

If you look at the above output, there is a border around the contents of test.htm. We haven't defined any borders for it.


Removing border from iframe


However, iframe gives you the flexibility to remove the border.


Let us see in the below example.


Example : 



<html>
	<body>
		<iframe src="test.htm" title="Test iframe" frameborder="0">
		</iframe>
	</body>        
</html>


Output :



 

So, if you look at the above output, there is no border around the contents of test.htm. This is because iframe has an attribute called frameborder. And we have set its value to 0.

HTML Iframe

Link iframe with anchor tag


The iframe element can be linked with anchor tag(i.e. <a>) using the name attribute of iframe and target attribute of anchor tag.


Let us see them in action with the below example.


Example : 



<html>
	<body>
		<iframe src="test.htm" name="mylink" height="300" width="700">
		</iframe>

		<p>
			<a href="https://www.learnerslesson.com" target="mylink">LearnersLesson.com</a>
		</p>
	</body>        
</html>


Output :



 

So, if you look at the above output, at first we get the contents of test.htm as defined in the iframe.


Just below that we can find the text LearnersLesson.com with a hyperlink on it. On clicking that the contents of iframe gets changed with the contents of https://www.learnerslesson.com.


Now, let us understand the above code with the following steps :

  1. We define the iframe with a name attribute. 



    <iframe src="test.htm" name="mylink" height="300" width="700">

  2. Then define the anchor tag with the target attribute. 



    <a href="https://www.learnerslesson.com" target="mylink">LearnersLesson.com</a>

  3. We just have make sure that the name attribute of the iframe element and target attribute of the anchor tag have the same value(In this case the value is 'mylink'). And we are all set.



❮❮ PREV NEXT ❯❯