ALL ABOUT LINKS - HTML5 - page 140

You may wonder why you would want one Web page inside another one. Why not just open a
new window or tab? One reason is to allow users to get an idea of what may be in the pages
and then link to whichever the user i nds most interesting, relevant, or appropriate.

Other uses of iframes include placing thumbnail images on a page, and then allowing the user
to select dif erent thumbnails to bring up the full-size image. h is allows you to build a single
Web page where the user can view several dif erent images by selecting image links that bring
up the image in the same page — all without having to use JavaScript or Ajax.

NESTING WEB PAGES
h e HTML5 iframe element has several attributes; some of which are new to HTML5.
However, to get started, all you need to know is the basic tag and how it's implemented. h e
following is the bare bones <iframe> tag with a Web page embedded:

< iframe src = ”http://www.w3.org” ></ iframe >

h at tag simply places the source Web page in the upper-let corner of the calling page. To
better see the options and control over the iframe, the following program ( iframeWeb.
html in this chapter's folder at www.wiley.com/go/smashinghtml5 ) embeds two
dif erent Web pages inside itself and add several attributes that you can see.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
/*657BA6,F2EDA2,F2EFBD,F2DCC2,D99379*/
body {
background - color : #F2EDA2;
}
h1 {
font - family : Verdana , Geneva , sans - serif ;
color : #657BA6;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Iframe Web </ title >
</ head >
< body >
<! DOCTYPE HTML >
< html >
< body >
< article >
< header >
< h1 > Before iframes </ h1 >
</ header >
< section >
< iframe name = ”info” width = ”480” , height = ”320” sandbox = ”allow-same-origin”
seamless src = ”http://www.smashingmagazine.com” ></ iframe >

144