Topic Overview

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

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 Character Set Attribute Description Attribute Author Attribute Keywords Attribute Viewport Element Review: Meta Elements TODO

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

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

Adding Images in HTML The 5-Part Image Element 1. The <img> Tag 2. Source 3. Alternative Text 4. Title 5. Width and Height Review: The Image Element Formats and Browser Support TODO

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

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

The 5-Part Video Element

If you have your own video files, the video element allows you to add a functioning player to your website.

The 5 attributes the video element should include are:

Note As there are two ways to approach this, the following pages with showcase both:

Single-Source

Use this set-up if you only have one version of the video file, like an MP4.

movie.mp4

Use this set-up if you have multiple versions of the video file, like MP4, WebM, OGG, etc.

movie.mp4

movie.webm

movie.ogg