iFrames Part 1


An inline frame is an HTML element used to embed another document within the current HTML document. This page content based on http://www.w3schools.com/tags/tag_iframe.asp. WordPress has several plugins that help you work with iframes, however this page just discusses the HTML tag iframe. An inline iframe is marked up in HTML like this:

 <iframe src="http://www.w3schools.com"></iframe> 

An iframe with a specified height and width of 300 pixels would be marked up like this:

<iframe src="http://www.w3schools.com" width="300" height="300"><iframe>

It did not like my width setting of 300 pixels and only displayed 200 pixels wide. Perhaps I need to install a WordPress plugin to get all the options and flexibility I want.

Other Sites

Can other sites use iframes and load your site into their iframe on their web site? Would you want to block them from doing so? First we can run a test using w3Schools. This web site allows you to test code. The HTML code that makes this test possible is shown below:

<iframe src="demo_iframe.htm" name="iframe_a">
Your browser does not support iframes.
</iframe>
<a href="http://begincodingnow.com" target="iframe_a">Begin Coding Now</a>

See it Live!

  1. Go to www.w3Schools.com
  2. Change the code to match the code shown above
  3. Click the See Result>> button at the top right side of the left code window and then click the link in the right side window which will read “Begin Coding Now”, provided that you changed it from W3Schools.com to Begin Coding Now.
  4. You now should be able to view this site in a small window and navigate through the site using the links. This is one way to test the “responsive” ability of a web site (to be easily viewed on smaller screens such as mobile devices)