HTML iframe Tutorial | Learn All about Tags and Element
HTML iframe Tutorial ACTE

HTML iframe Tutorial | Learn All about Tags and Element

Last updated on 26th Jan 2022, Blog, Tutorials

About author

Deji saman (Html Developer )

Deji Saman is an Html Developer with 6+ years of experience in a reputed company. He has expertise in HTML & CSS, PHP & MySQL, Javascript, and Node JS. He spends most of his time researching technology and startups.

(5.0) | 18496 Ratings 2466
    • Introduction to HTML iframe
    • HTML document
    • iframe syntax
    • Link Iframe target
    • Intelligent recommendation
    • IFRAME Father communication
    • Implementation of <'iframe> on a Web Page Iframe Example
    • What is mailto hyperlink
    • How to create mailto hyperlink in HTML
    • Conclusion

    Subscribe For Free Demo

    [custom_views_post_title]

      Introduction to HTML iframe:

      You can create an inline frame using the HTML tag & lt; iframe & gt ;. Definition. The & lt; iframe & gt; tag is independent of & lt; frameset & gt; and can be displayed anywhere in the document instead of the tag. Inline frames are used to embed another document in the current.


      HTML document

    • Lt; Iframe & gt; tag attribute.
    • Tags containing most of the & lt; iframe & gt; attributes name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, title behave the same as the corresponding attributes of & lt; frame & gt ;. shield.
    • Note-Attributes frameborder, marginwidth, longdesc, scrolling, marginheight have been deprecated in HTML5. Do not use these attributes.

    • Senior No. Attribute and Description

      1 src

      This attribute is used to specify the filename to load into the frame. Its value can be any URL. For example, src = “/ html / top_frame.htm” loads the HTML files available in the HTML directory.


      2 name

      This attribute allows you to name the frame. This is used to indicate the frame to load the document. This is especially important if you want to create a link in one frame that loads the page into another frame. In this case, the second frame needs a name to identify itself as the target of the link.


      3 frameborder

      This attribute indicates whether the border of this frame is visible. Overrides the value specified by the frameborder attribute of & lt; frameset & gt ;. Tag (if specified). It can take a value of 1 (yes) or 0 (no).


      4 marginwidth

      This attribute allows you to specify the width of the space between the left and right edges of the frame and the content of the frame. Values ​​are shown in pixels. For example, marginwidth = “10”.


      5 marginheight

      This attribute allows you to specify the amount of space between the top and bottom of the frame and its contents. Values ​​are shown in pixels. For example, marginheight = “10”.


      6 height

      This attribute specifies the height of & lt; iframe & gt ;. upon.


      7 scroll

      This attribute controls the appearance of the scroll bar displayed in the frame. It can take either a “yes”, “no”, or “auto” value. For example, Scrolling = “no” means there is no scroll bar.


      8 longdesc

      This attribute can be used to provide a link to another page that contains a long description of the frame’s content. For example, longdesc = “framedescription.html”


      9 width

      This attribute specifies the width of & lt; iframe & gt ;. upon.


      Following is the example to show how to use the <'iframe> −

      The HTML & lt; iframe & gt; tag defines an inline frame, so it is also called an inline frame. Web page content and iframe content can interact with each other using JavaScript.


      Course Curriculum

      Learn Advanced HTML Certification Training Course to Build Your Skills

      Weekday / Weekend BatchesSee Batch Details

      iframe syntax

    • HTML iframes are created using & lt; iframe & gt ;.where the “src” attribute specifies the web address (URL) of the inline frame page.
    • Set the width and height of the iframe.You can use the width and height attributes to set the width and height of the iframe. By default, attribute values ​​are in pixels, but can be set as a percentage. That is, 50%, 60%, and so on.

    • Example: (pixels)

      • & Lt ;! DOCTYPE html>
      • & lt; html & gt;
      • & lt; body & gt;

      HTML iframe example. Use the height and width attributes to specify the size of the iframe.

      • & lt; iframe src = “https://www.ACTE.com/” height = “300” width = “400” & gt; & lt; / iframe & gt;
      • & lt; / body & gt;
      • & lt; / html & gt;

      Example: (percent)

      • & Lt ;! DOCTYPE html>
      • & lt; html & gt;
      • & lt; body & gt;

      HTML Iframe. You can specify the size of the iframe using the height and width attributes.

      • & lt; iframe src = “https://www.ACTE.com/” height = “50%” width = “70%” & gt; & lt; / iframe & gt;
      • & lt; / body & gt;
      • & lt; / html & gt; Use
      • CSS You can also set the height and width of the iframe.

      Example: HTML Iframe

      • & Lt ;! DOCTYPE html>
      • & lt; html & gt;
      • & lt; body & gt;

      HTML Iframe. Use the CSS height and width properties to specify the size of the iframe.

      • & lt; iframe src = “https://www.ACTE.com/” style = “height: 300px; width: 400px” & gt; & lt; / iframe & gt;
      • & lt; / body & gt;
      • & lt; / html & gt; Delete

      By default, the iframe contains a border around it. You can remove the border by selecting & lt; style & gt ;. Attributes and CSS border properties.


      Example: Remove the border

      • & Lt ;! DOCTYPE html>
      • & lt; html & gt;
      • & lt; body & gt;

      Remove the border of the iframe. There is no border in this iframe example

      • & lt; iframe src = “https://www.ACTE.com/” style = “border: none;” & gt; & lt; / iframe & gt;
      • & lt; / body & gt;
      • & lt; / html & gt; You can also change the size, color and style of the iframe border.

      Example: custom iframe border

      • & Lt ;! DOCTYPE html>
      • & lt; html & gt;
      • & lt; body & gt;

      custom iframe border

      • & lt; iframe src = “https://www.ACTE.com/” style = “border: 2px solid tomato;” & gt; & lt; / iframe & gt;
      • & lt / body & gt;
      • & lt; / html & gt;

      Link Iframe target

      You can use an iframe to set the target frame for the link. The link target attribute you specify must refer to the iframe’s name attribute.

      Example:

      • & Lt ;! DOCTYPE html>
      • & lt; html & gt;
      • & lt; body & gt; Iframe target of link
      • & lt; iframe height = “300px” width = “100%” src = “new.html” name = “iframe_a” & gt; & lt; / iframe & gt;

      The iframe and the link target name must have the same value. If you do not specify the same value, the link will not open as a frame.

      • & lt; / body & gt;
      • & lt; / html & gt;

      Embed YouTube video in iframe

    • You can also use & lt; iframe & gt; to add YouTube videos to your website. shield. The attached video will be played on the website and you can also set the height, width, autoplay and many other properties of the video. Below are some steps to add YouTube videos to your website.
    • Go to the YouTube video you want to embed. Click Share ➦ at the bottom of the video. Click the Eiframe introduction page.
    • Loading video player.
    • Play quietly
    • full screen
    • VDO.AI
    • Save the outer CSS frames individually in a CSS file and write the iframe’s CSS to a CSS file to avoid style conflicts in HTML, text, and other common parts of the iframe.

    • Course Curriculum

      Get JOB Oriented HTML Training for Beginners By MNC Experts

      • Instructor-led Sessions
      • Real-life Case Studies
      • Assignments
      Explore Curriculum

      External frames are written in a single CSS like this:

      frame.css

      The CSS for the imported page is written individually to a file like this:

      content.css

      frame.html is as follows, only frame import. .css-


      • html>
      • & Lt; html & gt;
      • & lt; Head & gt;
      • & lt; meta charset = “UTF8” & gt;
      • & lt; title & gt; This is the frame Html & lt; / title & gt ;.
      • & lt; link rel = “stylesheet” href = “frame.css” / & gt;
      • & lt; / head & gt;
      • & lt; body & gt;
      • & lt; iframe src = “content.html” width = “100%” height = “100%” & gt ; & Lt; / iframe & gt;
      • & lt; / body & gt;
      • & Lt; / html & gt;

      You don’t need to import the frame.css file into your content page.

      • html>
      • & Lt; html & gt;
      • & lt; Head & gt;
      • & lt; meta charset = “UTF8” & gt;
      • & lt; title & gt; This is contentHtml & lt; / title & gt ;.
      • & lt; link rel = “stylesheet” href = “content.css” / & gt;
      • & lt; / head & gt;
      • & lt; body & gt;
      • & lt ;!
      • Created by: acte@.com
      • Hours: 20170516
      • Description: Content Area
      • & gt;
      • & lt; / body & gt;
      • & Lt; / html & gt;

      Intelligent recommendation

      [iframe] Frame the page horizontally. Resolves an issue where MindMaster shares embedded web pages so that the iframe is centered and the mind map is embedded.


      IFRAME Father communication

    • Since the company’s service background is the front end, it’s another project nested by the iFrame, and it’s always impossible to avoid IFRAME Display error page.

    • If the system looks abnormal, the content displayed in IFRME is a fake page rather than a criminal image, and the solution is to join the error page or the associated login page. Switch to a nested IFRAME page.

    • Talk about the scene. There are four JSP pages, a, b, c, d, where D is nested in C, c is nested in B by IFRAME, and B is nested in A by an iframe. Next, write a JavaScript code jump page.

    • The decision page is in the IFRAME. The decision page is in the iframe, jump from the iframe box and place this code on the page that decides each time you log in to the login page.

    • One such tag is & lt; iframe & gt ;. Shield; This tag is used to embed a document in a document. For example, embed a map on a web page or a YouTube video on a website.

    • This is an important HTML tag because many web applications require embedded elements such as maps and web ads.

    • HTML is essential for web development, and if you’ve ever considered choosing web development as your career path, you’ve definitely come across this language. And that’s probably why you’re here in the first place. The important topics covered in this article are:

    • What is the HTMLiframe tag?

      On the & lt; iframe & gt; implementation website. HTML is nothing but the tag it represents. HTML has tags for almost every element you can add to a web page.


      Implementation of <'iframe> on a Web Page Iframe Example

      Having understood what the <'iframe> tag exactly is. So, let`s dive into the practical aspect of this HTML tag and code a simple web page that displays some text and another document within that same page. Here is how it goes.


      Let’s have a look at every HTML tag that we have used in creating this web page:

      This tag is kind of a wrapper for the whole web application, everything goes within this tag and finishes before this tag closes.

      • & lt; head & gt;

      This tag is used to store metadata about the web application. The title of the web application, importing javascript or css into the web application, etc. Are done within this tag.


      • & lt; body & gt;

      This tag is used to display content on the screen when rendered in a web browser. Therefore, this tag contains everything that the user needs to see on the screen. There are some tags provided by HTML for , text formats. and are the two of those tags. These tags mean “heading 1” and “heading 2” respectively. There are several other tags like “heading 3” and “paragraph” that are abbreviated as and respectively. This tag is used for giving a line break between HTML elements. <'iframe>


      This HTML tag is the main focus of this article. As discussed above, it is used to embed other documents within a web page. The attributes are essential for defining and editing the region created by <'iframe> tag. The attributes used here are:

      width: sets the width of the iframe region.

      height: sets the height of the iframe region.

      src: contains the URL of the document that is to be embedded in the web page.

      frameborder: Defines the boundaries of the iframe area.

      allow: A set of attributes for setting values ​​for options such as automatic rotation.

      allowfullscreen: Defines whether the iframe can be extended to fill the entire screen.

      output: When coded correctly as above, the web page looks like this: Congratulations. I coded the first web application with embedded documentation.


      HTML Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

      Conclusion

      An IFrame (Inline Frame) is a HTML archive inserted inside one more HTML report on a site. The IFrame HTML component is regularly used to embed content from another source, like a notice, into a Web page. Outlines are inline outlines that are some of the time alluded to as drifting casings. One of the primary benefits of the iframe tag is that it tends to be utilized to stack outer html or xhtml pages into the current archive without distrubing the first page.

    Are you looking training with Right Jobs?

    Contact Us
    Get Training Quote for Free