HTML 5 Introduction

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Multimedia

Three main types of multimedia exist on the web images, audio, and video. HTML5 has three tags to include, or embed, these elements into a web page:

  • <img>
  • <audio>
  • <video>

Images

The image tag <img> has one required attribute and several optional attributes. The image tag requires an image source attribute to be present. It is also important that images also provide alternate text so that all users can be aware of the image content.

<img src="http://example.com/image.webp" alt="Example image." />

Images can be given additional attributes including width, height, and a couple of attributes relating to image maps (images with specific interactive areas).

Open image formats include PNG, JPEG, and WebP.

The GIMP is a free photo manipulation tool that you can use to create and edit images for your web pages and even create web layouts. Inkscape is a vector graphics (i.e. SVG) illustrator that can be used to create images, web pages, layouts, and other vector based projects.

Audio

The <audio> tag is new  in HTML5. It gives designers a standard way to include audio in a page. The <audio> tag has several parameters the most important of which is source:

<audio src="file.ogg">Text for browsers that do not support the audio tag.</audio>

Other  attributes for the <audio> tag include autoplay, controls, loop, and preload.

Ogg Vorbis is an open format for web audio and is supported by Mozilla Firefox, Google Chrome, and Opera.

Several free tools exist with support for Ogg Vorbis audio:

Video

The <video> tag is also new in HTML5. We can now insert video into a web page without the need for third party plugins! The source attribute is key to the video tag:

<video src="video.ogv">Text for browsers without support for the video tag.</video>

Additional attributes for the <video> tag include audio, autoplay, controls, height, loop, poster, preload, and width.

Ogg Theora and WebM are open formats for Internet video both of which work on Mozilla Firefox, Google Chrome, Chromium, Konqueror, and Opera. Several free tools exist to convert new and existing video to Ogg Theora and/or WebM including:

It is possible to offer alternative formats for browsers that do not support Ogg Theora or WebM. To do this, you nest multiple <source> tags within a <video> tag as such:

<video>
  <source src="file.ogv" type="video/ogg" />
  <source src="file.webm" type="video/webm" />
  <source src="file.mp4" type="video/mp4" />
  Text or markup to display if the video does not play.
</video>

There are also several video hosting/streaming communities that support open formats:

Further information:

Task Discussion