HTML Tutorial for Beginners: 12 Displaying Pages in an iFrame

Hey this is Sasha and thanks for joining me here for another video lesson where I share with you some HTML tips in running and upgrading your online business and on the web.

In today’s video, I wanted to share with you some insights on iFrames.

iFrame Overview

iFrames are not used as often or as frequently regarding your website content these days as much. But it’s still good to know how the iFrames are structured because, in rare circumstances, you still may want to use them.

Here’s basically what they do. An iFrame is a frame within your website. Think of it like a little picture content that you can now look at on the wall. If the whole wall is your website, and iFrame is a picture that now you can show other content or other data in there.

You can also think of it like a video that you embed on your website from YouTube or another source. This is kind of like an iFrame that really works in a similar fashion. Let me share with you an example of how you can kind of use this.

How to Use iFrames

So here if we take a look at what I’ve done, and what I’ve set up here for the iFrame is basically, the iFrame code — the way that it starts is — I’ll just show you the quick run down here so that way we can get into this code.

If you look at iFrame and the iFrame right there, it starts out with the code being kind of like this.

Now initially, when you first start this code out, you basically get a blank box because there is nothing in there. What it does is it shows external content.

I could type in let’s just say Google right here and I’ll go ahead and save it. If I hit refresh, you’ll see that Google is populated in there. It’s a little bit small right there. And what we can actually do as to width — let’s just say, 500 pixels, and for height, we’ll do 500 pixels. As we go ahead and now we hit refresh, you can see it’s kind of within my website.

You’ll see the URL at the top. It’s actually my page there that I set up, but now you’re viewing Google. As you continue to do this, what you could do is go ahead and put other forms of content in there, whether that’s other pages that you have, and you just link it into there, you could do it that way.

Now I’ve created a quick little bit of code that you can see. There’s a frame border that we named it, and added an ID and if you take a look also, there’s the width, there’s the height, and I’ve linked to my website right there.

Let me just get rid of this remaining code right here and just to show what that looks like with the iFrame. So what you’ll see is that it’s pulling up the backstage income website on that size in that width, at least the homepage.

It gives you an idea of how it looks in a phone browser which there are a few issues. In either case, what you can actually do is, since you have this kind of set up, you could go ahead and add a little bit of a link which I’ve done there earlier.

	
			
	

	
		
		

		


		Click Here
	
	

I’ve added a few breaking spaces right here. And here’s a link that’s outside of this iFrame, because the whole iFrame is right there. There are a few breaking spaces and there is a link in — what I’ve done is hit the target to the ID. I have matched that up so now when I click it, it’ll actually pull up my other website rise2learn.com.

So what we can do is — let me just stop the auto refresher right here — so you’ll see the link is right here. Here’s our iFrame that’s our initial page that we’re displaying right there in the iFrame, and if I click here, what you’ll notice is that page — the Rise 2 Learn page, will load up right there right away. That’s kind of how the iFrame works.

It’s great for additional content that you want to add in. It could be from other pages that you have. You want to pull content in there. You could do it that way. For me personally, I like to use the PHP code. And as you get more advanced, you’ll pull in other content like PHP include files.

That may be a little bit better, but iFrame is still one of the older ways to do this and pull in a content feed from another source. That way, you’re looking at it from a third party, I guess.

Thanks for joining me in this training video. I hope you found it helpful.

Don’t forget to hit the subscribe button over on this side, or get on my newsletter list so that way you can join me on a live class, get one of my books, or even see my in-depth premium courses. Get on the newsletter list because that;s where the action is.

Thanks again, and I hope to see you in my next video.

Resources & Helpful Tools

Sublime Text
Rise2learn.com