A Smarter Way To Learn HTML & CSS(2015)

78
iframes

An iframe is like your TV’s picture-in-picture. It’s an HTML page within an HTML page. For example, suppose I want to run the Metropolitan Opera's page inside my page. This is the HTML.

<iframe src="http://metopera.org/" width=”700" height="450"></iframe><p>The Metropolitan Opera, commonly referred to as the "Met", is a company based in New York City, resident at the Metropolitan Opera House at the Lincoln Center for the Performing Arts. The company is operated by the non-profit Metropolitan Opera Association, with Peter Gelb as etc.

Things to notice:

· There’s an opening <iframe> tag and a closing </iframe> tag.

· src="[URL]" specifies the location of the HTML file that’s to be imbedded, the same way src="[URL]" specifies the location of an image file. I’ve shortened the URL so you can focus on the syntax.

· You specify width and height in pixels. Scrollbars allow the user to explore the whole embedded page.

You can wrap text around an iframe. This is the CSS.

iframe {
float: left;
margin: 0 2em 0 0;
}

In your HTML, create an iframe that embeds an online webpage of your choice. Save the file. Display the page. Adjust the dimensions of the iframe until you’re happy with the result.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-78-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/78.html