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

Optimizing for the Web

The process of optimizing files compresses or rewrites them to be as efficient as possible for their desired platform. For the web, this means optimizing media for screens and screen resolution, in order to keep file sizes as small and accessible as possible.

On your own, it is easiest to optimize images. This can be done cheaply and quickly, and doing so will drastically improve the efficiency of your site. For video and audio, it is generally recommended to use a service to do the heavy-lifting for you.

Images

If you recall from the last topic, images should be less-than 1,000 KB in size (under 1 megabyte), screens only need 72 ppi for proper resolution, and the larger your files, the longer it will take your page to load.

Don’t forget to optimize images for the web by using image editors’ “Save for Web and Devices” or “Export As” in their save options.

Image of 'Save for Web' dialogue in Photoshop CC

Again, here is the original dog image, which clocks in at an enormous 23.9 mB, and 5597px by 3148px. Watch how long that loads in another tab.

In contrast the one you see below was optimized for web, sized and cropped to 1000px by 500px. It’s much more manageable at 110 kB, and is hardly distinguishable from the original (at least on the web).

An image dogs laying in a field while the sun sets

Video

It is recommend you use a service to host videos. We will not discuss optimization in-depth here.

A 10-minute YouTube video is often near 100 MB in size. Full-length movies can reach up-to 25GB - this is beyond the capacity of most web hosting companies.

If these files come from other sources, you likely will not have access to the original file, and therefore will not be able to correctly re-format or compress it. If you do, however, certain plugins can be downloaded for video editors like Adobe Premiere so that you can export .webm and other filetypes without having to resort to an online conversion site like CloudConvert.

Audio

It is recommend you use a service to host audio. We will not discuss optimization in-depth here.

A single MP3 song is approximately 3-4 MB.

While this is not particularly large, you will need multiple versions of the song for the site, as well as a higher-quality format. This can add up quickly, and it can be a process to accomplish.

For example, with audio, to export an .ogg file (whether it’s a song you own or have recently sourced), you may need to use an online converter like Convertio or Zamzar. Again, this is only a band-aid; ideally, you’re providing your own created audio (music, recordings, sound effects, etc) which you can export as an .ogg legally.

Most websites that primarily host audio files like <a href=https://soundcloud.com>SoundCloud</a> and Bandcamp also allow you to embed audio files using HTML iframes, so that is an option too.