Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create inline frame using HTML5
Overview
An inline frame is a HTML iframe which shows another HTML document embedded inside an iframe to the current web page. The iframe tag is an inline frame which shows the other web content inside a frame. The iframe has various attributes also these are: width, height, title and src. The src attribute is the main attribute of the iframe tag as it specifies what content should be displayed in the iframe. Inside a one frame we can scroll the whole content whose link is specified in the src attribute.
Syntax
The below is the simple basic syntax to create a HTML inline frame. The syntax also shows the two attributes src and frameborder, the src is used to get the link of an HTML document and frame border is used to put the border to the iframe.
<iframe src="" frameborder="0"></iframe>
Algorithm
Step 1 − Create a HTML file in a text editor such as Notepad++, sublime editor or VS Code. Add the HTML boilerplate to the HTML file.
Step 2 − Now create a parent div container.
Step 3 − Create an <iframe> tag inside the container.
<iframe></iframe>
Step 4 − Add certain attributes to the iframe tag such as src, width and height. Set the width and height of the iframe HTML tag.
<iframe src=”” width=”” height=””></iframe>
Step 5 − Now add any link to the src attribute to display the HTML document inside the frame.
Step 6 − Use the inline css to make the styling for the frame.
Step 7 − The inline frame is created successfully.
Example
In the given example we will be creating the inline frame using the HTML. So the basic HTML iframe will be used to build the inline frame. The inline frame is a normal default iframe.
<html>
<head>
<title>inline frame HTML5</title>
</head>
<body style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
<h2>tutorialspoint.com</h3>
<iframe src="http://tutorialspoint.com/" height="300" width="200"
style="border-radius: 5px;border-top: 2rem solid black;border-bottom: 2rem solid black;border-right: 0.5rem solid black;border-left: 0.5rem solid black;">
</iframe>
</body>
</html>
The given below image shows the output of the above example, in which we have used the “tutorialspoint.com” official web link which would be displayed in the iframe inline frame.
Conclusion
The iframe acts as a frame which embeds the other HTML document to the current web page in which we are using the iframe. In the websites or mobile applications iframe is mostly used to embed the google maps to the application, as in many applications it requires the map to be used in some of its products. In some of the websites the developers use the iframe to make the graphics vector of the current website to display in any responsive screen. If we are embedding any video to the iframe then it supports an attribute “allowfullscreen” which allows the user to watch the video in full screen.
277 Views
To Continue Learning Please Login