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

Media Hosting and Storage

In the next two sections, we will be looking at the <img> <video> and <audio> elements. With the latter two in particular, you need to be careful when using these elements, as older browsers might not support them and the presentation of the associated media. To create pages viewable by all, you should use a variety of approaches to account for multiple ages of browsers.

Self-Hosting

Self-hosting simply refers to content you’ve hosted from your site’s server. Pages, images, videos, games, you name it. The benefit of this is you have complete control of the site, and can maintain the content yourself. This means you only have to worry about your site failing, not an external source’s.

A major con, however, is that web hosting companies often charge extra if you use a lot of bandwidth, and due to the size of most movie files in particular, this can occur easily when self-hosting.

Ideal for image files.
Keeps your content with you, rather than an external server.
Provides easy access to content at all times - does not depend on the reliability of another site.
Not ideal for video or audio files.
Quickly takes up storage space and can slow down your site and bandwidth.
Can require extensive markup and additional file formats to make sure the content is available to all visitors.

Third-Party Hosting or Service

Third-party options and services provide you affordable solutions to the potential problem of exhausted bandwidth. It is often preferable and encouraged for you to host your media - particularly audio and video - on sites such as ,YouTube, Vimeo, SoundCloud, or Bandcamp.

Ideal for video and audio files.
Can host large, high-quality versions of files.
Will handle compatibility, encoding, and the other details necessary for the media to play on a variety of browsers, without any work from you.
Not ideal for image files.
Any unlicenced materials used without permission can be crawled and reported.
Can become costly to upgrade storage and/or services.

Hosting Arguments

There are several things to consider when deciding to host your media on your own site or through a third-party:

Affordability

As discussed on the previous pages, hosting your own media can take up bandwidth. Increasing bandwidth with service providers and hosting companies usually comes at a hefty price.

Converting Files

Third-party hosting converts files for you, and increases the compatibility of the media across browsers. This is not to say that you can’t provide your own alternative media and conversions, but it can take time. As stated, always test your site across as many browsers and devices as possible to ensure the page is rendering as intended.

In terms of downloading files from other sources, you likely will not have access to the original file. 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-aide; ideally, you’re providing your own created audio (music, recordings, sound effects, etc) which you can export as an .ogg legally.

A similar process is needed to create .webm video files. Certain plugins can be downloaded for video editors like Adobe Premiere so that you can export .webm files without a band-aide conversion.

Content Protection

You saw how easy it is to download files from <video> and <audio> elements on the previous page.

If content protection is important, you should use a third party service, such as Bandcamp. These services have a vested interest in protecting the content on their servers.

The use of these services may also increase browser compatibility, as they want to ensure their content is available to everyone. This means you don’t have to worry about browser compatibility issues as much!

Exclusion Rules

If the content needs to be exclusive to your site, and not available through a third-party site such as YouTube, then you must host the file. You will need to research current best-practices for self-hosting protected content.

Final Decision

You will need to be aware of all of these options and potential problems and weight all of the requirements of your project to determine the most appropriate route.