Inserting iframes into sites

If you search iframes across the web, it remains a discussion amongst web programmers and designers whether they are good practice or not. Iframes are inline HTML elements that contain the contents of another site, document, etc.

The finished result will look similar to this. To go to the live link, visit http://www.weeklypub.com/final/tutorial.html.

In this tutorial, you will learn how to insert an iframe element into a simple HTML/CSS design.

For this tutorial, you don’t need the exact same elements, but choose a photo to use as the background and a website URL, which will be used in the iframe element.

For this one, I used a photo from my trip to Portland, Maine, as my background and thought it was appropriate to iframe a Portland tourism website.

*A note before we start – save early and save often. And check your work frequently in the browser.

Step 1: HTML

As you can see, this simple layout has some styling with it. I do my styling through a style sheet instead of inline styles. So – first and foremost, as always, determine the elements of your page.

I’ve decided to wrap a div tag around my entire body, but that is not necessary. There are only two major components here: the headline section and the iframe (we’ll bring the photo background in during styling). I like to wrap divs around those to make styling easier.

Notice the iframe section: First thing to recognize – it has both an open and close tag. Content does not go between the tags but rather within the open tag’s brackets. Always remember to close the iframe element with the closing tag (</iframe>).

I address six attributes of the element – name, width, height, source, scrolling and frameborder. There are other attributes you can consider in your iframe if you like. The width and height, of course, can be adjusted and won’t affect the look of the website in the framing box. That is why there is an auto scrolling function. And, of course, you can see that we’ve inserted our source in which we’re framing – http://www.visitportland.com/.

Place headers in there – if you like – and then it’s on to the next step.

Step 2: CSS – Styling the body

It’s habit for me to immediately set my margins and padding to 0 pixels before starting any styling. That way, I can manipulate them the way I want. That is what you see in the first step of this CSS.

The next step styles the body. As you can see, I’ve selected my photo as my background, and have linked to it by (keeping it where my HTML and CSS files are) and typing “url(photoname.jpg).

Because I want the photo to be the entire background, I had to resize it. Let’s go into Photoshop to see how that’s done.

Once your photo is open in Photoshop – or whatever photo editing application you use – find where you resize the photo. In Photoshop, you go to “Image” in the menu options, then click on “Image Size.” I start with the width of the photo – setting it at 1300 pixels. Now, notice on the bottom left corner of this menu that you have three check boxes. Make sure the “Constrain Proportions” one is check – that way your height is automatically set as you choose your width, and your photo is not distorted.

Important: (I found this out while I was troubleshooting) Make sure the extension of the photo you link to matches up in the styling. If it is a png, jpeg, tif, use those extensions. If the extensions are capitalized, make sure it is capitalized in your stylesheet.

(Don’t forget to save.)

Now – back to the stylesheet…

In case the proportions of my resizing of the photo weren’t enough, I’ve set my body at a width of 960 pixels.

Step 3: Styling the body

Now, as far as styling the rest of it goes, it’s basically looking at your own personal preference. I messed around with margins and padding for all of the elements so they were no longer bumped right up against the side. For the iframe itself, I set the top and left margins (because remember – when you write all four margin measurements inline, the order is top, right, bottom, left) at 30 pixels. I wanted to keep it off to the left under the headline so users could still see the main part of the background – the Portland Lighthouse.

Typeface, colors and sizing on the headlines are also personal preference. I picked a color similar to the red in the Visit Portland site to bring the page and iframe together and decided a nice script under a stronger font would be pleasing to the eye.

For this tutorial, we took an external site and embedded it on the page. But you’re probably most familiar with iframes through YouTube and Soundslide embed codes.

I hope you enjoyed this tutorial.

Disclosure: W3 Schools iframe section, which I have linked to a couple of times, assisted me in the making of this tutorial.