How to Create an IFrame - IFrame Generator

Hi, guys! For the past few weeks, I have taken up an interest in the basic world of coding. I noticed a few all-purpose and open source sites with quite a lot of free resources, but the thing was that some of those resources didn't have an option for us to take it and use even though it was open-source. But since I found it somewhat useful as a resource, I remembered something my dad mentioned to me because he is a programmer. He once taught me about Iframes and what they can do, but sadly I did not know how to make one. So after doing a bit of research, I easily learned this through a basic tutorial with my dad. 

And that is why, for all those people who have just entered the coding world, I am here to tell you that you must cover the basics first. And one of the basics is when you want to display another site or at least a portion of it in a different web page. That is when you have to learn about the term 'IFrame'.

What is an IFrame? 

So, before you can learn anything here, you need to know that an IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.


For example, if you have a blog and you also have a Facebook video. You can use the Facebook Developer's API where they offer pre-generated code snippets for you to add buttons, videos, pages, groups, etc. Since you (as an example) have a video, you can get the code for adding the video to your blog. But did you ever wonder how things like that are possible? That is because Facebook allows you to embed that object using a method where they also use Iframes! So that means that you might've already seen an Iframe in action and probably didn't even know about it.

The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

The syntax for adding an iframe is: <iframe src="URL"></iframe>  For example, go ahead and try this code out <iframe src="http://genius-itsgoodtoknow.blogspot.com"></iframe>

This is the result that you would get

Well, that covers most of the need-to-know basics. If you need more knowledge about all this, then I would advise you to go to W3Schools.com

TIME FOR ACTION!

Here is the generator that you have been looking for. This generator will be you best friend when you have to create an IFrame and you can tweak around with the generated code so you can show just a specific portion of the site you want to embed

Note - If the generator is not visible, then you should remove the 's' from the 'https' in the web address.

 How to Use this IFrame Generator

If you found this generator interesting and want to use it but don't know how then you can follow this tutorial on how to do so.

1. In the first section, you can decide on the name you want to give your IFrame but it is not important, and you can also decide the height and width of the IFrame which is important. You have to decide on the height and width of the IFrame based on the number of pixels or % of the page that the area you want to put it in allows.

Tip - You can use a great tool provided as a google chrome extension called Page Ruler. This Chrome extension allows you to measure the entire page or selected portions of it in pixels if we ever need measurements. I use it all the time and also recommend it to you guys.

 2. In the second section, there are multiple options out of which, one is for whether you want the IFrame to have a scrollbar which allows the viewer to view the entire page by scrolling, and for this, you can select yes or no.

3. The next two boxes are for optional margin-width and margin-height. If you want to add some margins then you can enter the amount in pixels in the boxes.

4. The next four boxes are also optional for whether you want a border or not and how you want to design it including your preferred pattern, border width, and border color.

5. The main thing for creating the Iframe is the thing you want to put inside the frame which is the URL of the site. And the next box is where you have to input the URL of the site.

6. When you have inputted everything necessary, you have to click the Generate button. You will get a code for the Iframe, which you can use wherever you want. And if you want to make sure it is right and exactly how you want it to be before you do any other work, you can click on the preview button which will open a blank page showing the preview of the Iframe. 

And that's all you have to do to easily create your Iframe. If you found this post and tool useful then bookmark this page so whenever you need an Iframe, you can conveniently make one here. Check back again for more great posts.