The Building Blocks of Pages

Page Structure and Extra Markup Identifying with ids Styling with Classes Grouping with Divs Sectioning with Spans Building a Page (Step-by-Step) TODO

Iframes

The 3-Part iframe Element 1. The <iframe> Tags 2. Source 3. Width and Height Review: The iframe Element Websites in the iframe Element Maps in the iframe Element Media in the iframe Element TODO

The Meta Element

The Meta Element Character Set Attribute Description Attribute Author Attribute Keywords Attribute Viewport Element Review: Meta Elements TODO

Escape Characters

Solving Conflicts with Escape Characters Escape Character Names Escape Character Codes Common Escape Characters TODO

Media Management

Media on the Web Sourcing Images Sourcing Video Sourcing Audio Optimizing for the Web Media Hosting and Storage TODO

Video

Adding Video in HTML The 5-Part Video Element 1. The <video> Tags 2. Source 3. Poster 4. Width and Height 5. Other Attributes Review: The Video Element Formats and Browser Support TODO

Audio

Adding Audio in HTML The 3-Part Audio Element 1. The <audio> Tags 2. Source 3. Other Attributes Review: The Audio Element Formats and Browser Support TODO

Websites in the iframe Element

Some websites allow their pages to be loaded on other sites using iframes.

Depending on the size of the iframe, you may see different layouts for versions of the site. For example, in the NASA site below you should see a “mobile view” or “compressed view” optimized for smaller portals (in this case, for windows less than ~1025px.)

HTML

<iframe src="https://solarsystem.nasa.gov/planets/dwarf-planets/pluto/overview/" width="600px" height="500px"></iframe>

NASA Science: Solor System Exploration - the Dwarf Planet Pluto

How-To:

To embed an external site to your page, simply build the <iframe> element, and include the site’s absolute URL.

Important For a variety of reasons, not all sites will work in an iframe. Including a hyperlink to the site below the iframe is a good idea. You can test a site using an iframe checker.