ptg16476052564 LESSON 20: Working with Frames and Linked Windows
into other websites. For example, sites like Twitter and Facebook offer widgets that you
can incorporate into your own site that are implemented using inline frames. The embed
code that YouTube provides uses an iframe for the movie.
Here’s a brief run-through of how to create inline frames. First, you define them using
the <iframe> tag. Like images, these frames appear within the normal flow of an HTML
document (hence the i for inline). The <iframe> tag supports attributes like src, which
contains the URL of the document to be displayed in the frame, and height and width,
which control the size of the frame.
Table 20.2 lists the attributes of the <iframe> element.TABLE 20.2 Key Attributes
Attribute Description
width Specifies the width, in pixels, of the floating frame that will hold the HTML docu-
ment.
height Specifies the height, in pixels, of the floating frame that will hold the HTML
document.
src Specifies the URL of the HTML document to be displayed in the frame.
srcdoc Specifies HTML content to be displayed in the frame. This is new in HTML5.
name Specifies the name of the frame for the purpose of linking and targeting.
sandbox Enables extra restrictions for the content of an iframe. This is new in HTML5.Because you know how to use inline images, using the <iframe> tag is fairly easy. The
following code displays one way to use the Away from My Desk pages in conjunction
with an inline frame. In this example, you begin by creating a page with a red back-
ground. The links that the user clicks appear on a single line, centered above the iframe.
For clarity, I’ve placed each of the links on a separate line of code.
Following the links (which target the inline frame named reason), the code for the frame
appears within a centered <div> element. As you can see in the following HTML, the
floating frame will be centered on the page and will measure 450 pixels wide by 105 pix-
els high:Input ▼
<!DOCTYPE html>
<html>
<head>
<title>I'm Away From My Desk</title>