Lesson 23: Embedding pages within pages: iframes

 Signed in as:    
      Sign out



Your home page

Creating Websites home

   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends


Here we explore the intriguing world of imbedded frames: iframes. Topics include:


Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.


Lesson 23: Inline frames

Click here for the video transcript


Hands on exercise - part 1

This exercise brings together our work with cookies and iframes. The question is: can cookie values be passed between pages in iframes?

We'll have you build three web pages. First, setValue.html, which accepts input from the user and puts the input into a cookie; the user is then encouraged to click on a link to invoke our second page, showValue.html, which will display the cookie value.

So open html_skel and add the following pieces to the body:


Next, open html_skel again and add the following pieces:

Note: you could test this much by launching setValue.html.


Finally, open html_skel again and add

Test this out by launching iframeAndCookies.html.


Hands on exercise - part 2

This exercise brings together our work with select and iframes. Build a select / option list with some of your sample solutions and show them in an iframe.

Here, there's just one web page to build:, iframeDisplay.html, which has a list of page names in a select list; when selected, the page is displayed in a frame.

Start by opening html_skel and add these pieces:

Test this out by launching iframeDisplay.html.

Note that by testing the last entry you will be testing iframes embedded in an iframe

Note also that within an iframe, there is no "back arrow": you can't go back to an earlier page in the frame unless you've built in navigation links on that page


Supplemental materials

    A cumulative summary of the contents of the course so far: Click here for the cumulative technical summary



 Lesson navigation 



Email us if you would like additional information. We would love to see your comments and recommendations for our site.