Inline Frames (iframes)

Video:

• E05 - (12:07)

The <iframe> tag is used to insert one web page inside a part of another. An iframe provides a kind of viewer through which the other page is seen. By default (meaning, automatically) scrollbars are provided if needed to enable viewing of the entire inserted page.

The advantage of using iframes is that the viewer does not need to scroll down the page or go to another page to see the information contained in the iframe. Information is presented in a manner that invites investigation but does not require it. It is as if the viewer is told: Here is more information that is immediately available if you are interested.

The iframe tag

There is an opening and closing tag. Curiously, nothing needs to go between the opening and closing tags.

• Here is the basic syntax:
  • <iframe src=anotherFile.html></iframe>

An iframe is sometimes referred to as inline frame. This is because it can be inserted between the letters or words of a sentence if desired. The img (image) tag is also an inline tag allowing an image to be inserted between words or letters.

Note that iframes are related to html framesets which have fallen into disfavor due to issues with search engines, printing, bookmarking, and other things. They are not used much anymore by the vast majority of web developers.

iframe tag attributes

Main attributes

• In order to see a web page inside the iframe, the src attribute is needed to provide the path to the html page that will be loaded into the iframe. Example:
  • <iframe src=pathto/anyfile.html></iframe>
  • Note that you can also source a file from an external web site, but you must be very careful when doing this as it may easily result in a web page that conveys the impression that the content within the iframe belongs to your site when it does not, raising the specter of potential copyright infringement issues.
• The height and width attributes can be used to specify its dimensions. Like all other html attributes, a value that is just a number is pixels. Example:
  • <iframe src=anyfile.html height=200 width=500></iframe>
• A border will appear automatically on the sides of an iframe unless you deliberately turn off borders using this attribute:
  • frameborder=0

Targeting an iframe

As you know, when used in the link <a> tag, the target=_blank attribute and value will open the linked-to page in a new browser window. In a similar way, the target attribute can be used to cause a link to open within an iframe. This is done by adding the name attribute to the iframe tag and the target attribute to the link tag as follows:

• The name attribute defines a location for the link to open in and replace the file specified by the src:
  • <iframe src=anyfile.html name=demo></iframe>
• The link that will open in the iframe must include the target where the page ought to open:
  • <a href=anotherfile.html target=demo>

Targeting an iframe The links below will open in the iframe at right because: The iframe tag has the attribute: name=quote The a tags (links) include the attribute: target=quote Example: Click on the following and they will open in the iframe to the right: Romeo from Romeo and Juliet Puck from A Midsummer Night's Dream The King from All's Well That Ends Well Links within an iframe If there is a link within a file displayed inside an iframe, the linked-to page will open within the iframe. If you want that link that is within the iframe to open and replace the web page containing the iframe, use this attribute: target=_top Please click on the links at the top of the Romeo page for a demonstration of this.

iframe Assignment:

1. Use the code from this page to assist you in determining how to write the code for what is requested below.
• You can see the source code using the View menu of your browser or right-click in the browser window and select Source, View Source, or Page Source depending on the browser.
2. Create a folder named yourlastname_E05_iframe
3. Inside of it create a file named yourlastname_E05_iframe.html
4. Give it the html title of:
   An Eye For An Iframe
5. Create a table with one row and two cells.
6. Put an iframe into the left cell with the following specifications:
   1. height 300 pixels
   2. width 425 pixels
7. Create a file named yourlastname_E05_srcFile.html and save it in the same folder.
1. At the top of that file, put in opening and closing <h3> tags. Then put in them:
   1. Your LastName's Iframe File
      (example: <h3>Dan Vaughan's Iframe File</h3>)
   2. Add underneath it one paragraph of Lorem Ipsum text.
2. Use that file for the src attribute of your iframe.
8. Put three links into the right cell in a bulleted list, one each going to the following urls using the text shown as the text for the links:
   • Azaleas
     • http://www.gottheknack.com/a_htmlCss/weeks/week5/e/iframe/iframeExercise/azaleas.html
   • Orange Rose
     • http://www.gottheknack.com/a_htmlCss/weeks/week5/e/iframe/iframeExercise/roseOrange.html
   • Pink Rose
     • http://www.gottheknack.com/a_htmlCss/weeks/week5/e/iframe/iframeExercise/rosePink.html
9. Use the necessary attributes to open the three links inside of the iframe. You will need to add a name attribute to the iframe tag and use that name for the target attribute.
10. Test that it all works properly.
11. Include the folder in the zip file you send to me.

© 2014 Dan Hitchcock Vaughan and licensors