“Media”

Topic Overview

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

Images

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

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

Adding Audio in HTML

Like with video, there are two ways to approach adding audio to your site: self-hosted (within your own directory and repository), or via an audio-sharing service, like SoundCloud or BandCamp.

Self-Hosted Audio

The <audio> element allows developers to add an audio player to webpages. This is a new element to HTML5, and offers three supported audio formats: .mp3, .wav, and .ogg.

The audio element can be used to add a self-hosted audio file to your site, and allows for both single-instances and fallback files to be referenced in the element.

Service-Hosted Audio

To embed an audio sample from an audio-sharing service, use their provided embed code, which often utilizes the <iframe> element.

The following is an example for SoundCloud:

animation of finding the embed code of a SoundCloud song

Note Some services will limit the number of ‘plays’ that you can have for a certain period of time on the “free-tiers.”