HTML/Graphical Content and Multimedia

This lesson will teach you how to insert images, embed video and audio via HTML. You should already have a basic understanding of HTML.

Images

This section will teach you how to display images.

Attributes and Values

To display images we use the <img> tag. The <img> tag has many attributes such as src, alt, width, and height. We use these attributes to display and change the image display behaviors in people's browsers. Each attribute is assigned a value. The value for the src attribute would be the URL of the image. The value of the height or width attribute would be the number of pixels high or wide you want the image to be. Unlike other tags in HTML, the <img> tag is not followed by its tag with a slash before the name. Once the stricter, cleaner version of HTML, XHTML, becomes the standard set by the W3C instead of HTML 4.1, a slash will be required after the value of the final attribute.

The following sub-sections will explain the multiple attributes and the values you can assign.

The `src` Attribute

The src attribute actually displays the image. You write the image's URL in quotation marks after the attribute name and an equal sign, as shown in the example below.

<img src="image/background.gif"/>

The `alt` Attribute

If you're taking this course, you've probably been surfing the Internet for sometime. You've quite possibly seen an image that hasn't loaded correctly, and an X has been displayed in place of it. You may have seen text next to or under it. You've also possibly hovered your mouse over an image and seen text inside of a yellow box show up. This is the purpose of the alt attribute. You use the alt attribute in the manner displayed below.

<img src="image/background.gif" alt="This is an image"/>

If you were to hover over the image or if the image didn't load correctly in the case you say, misspelled the URL, then that text would be displayed.

The `height` Attribute

The height attribute is used to change the number of pixels on the y-axis of the image. This way you can adjust the size of the image to your needs. It is used in the manner displayed below.

<img src="image.gif" height="100"/>

Note: The height and length attributes are interchangeable. You may use either of them to change the number of pixels on the y-axis of the image.

The `width` Attribute

The width attribute is used to change the number of pixels on the x-axis of the image. You use it the same way the height/length attribute is used, only change the name and it edits the x-axis, not the y-axis, like so.

<img src="image.gif" width="100"/>

Audio

This section will teach you how to include audio on your webpages.

Audio Attributes and Values

Audio has tags and attributes, the same as images do using the <audio> tag to define. This is a new feature in html5; most modern Web Browsers (except Internet Explorer version 8 and under) support it, but in various codecs, the most common they all supported is the ones with the extension .oga/ogg.

'attributes': autoplay, controls, preload, src

preload: means a video loads without asking user
autoplay: as the page loads the video starts, corporate with preload
controls: enables control panel
src: same like image, a URL to the specific file

For example: <audio autoplay controls preload src="audio/2-13 Fallen Ascent (Tower of Zot) [Children of the Monkey Machine].mp3"> your browser does not support this modern feature, you may consider a switch</audio>

Before the html5 standard, audio may use <bgsound>, which is really an attribute of the <body> tag rather than a tag itself. This is meant to support MIDI sound files, and is not a W3C standard, as only Internet Explorer supports it. People using any other browsers will be unable to hear anything for that.

Video

The best Internet video format

Currently, Flash Video (FLV) is the video format which can be viewed on the most computers and mobile devices.

FLV is a media stream format used to deliver video over the Internet to Adobe Flash Player, which is available on more than 90% of internet-connected computers.

To add FLV to a website, you need a web-based FLV player (which is a SWF file) that controls the playback of the FLV movie, code for embedding (either HTML tags or SWFObject) and a web host server that hosts the FLV movie.

Mobile phones (such as the iPhone and Android) have limited support for Flash video.

'attributes': autoplay, controls, preload, src

preload: means a video loads without asking user,
autoplay: as the page loads the video starts, corporate with preload
controls: enables control panel
src: same like audio, a URL to the specific file

HTML tags for Internet video embedding - `object` and `embed`

There are mainly two HTML tags for video embeddng, object and embed. The code below is an example of how to embed a flv player (a SWF file) onto a web page using these two tags:
<object classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="432" height="330" id="myMovieName" > <param name="movie" value="myMovieName.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF"> <embed src="myMovieName.swf" quality="high" bgcolor="#FFFFFF" width="432" height="330" name="myMovieName" align="" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer"> </embed> </object>

More information about the attributes of these tags

SWFObject

You can just regard SWFObject as a piece of code for embedding a flash file to a web page. It is more stable and supports more web browsers than using object / embed tags for embedding video.
Detail information of SWFObject

Web-based FLV player

An FLV file is just a video and it needs a web-based FLV player to be displayed on web pages. We can either create an FLV player by ourselves with Adobe Flash CS3, or use a pre-designed FLV player. Currently, the FLV player created by playerdiy.com is good. Users that have questions can check its tutorial here.

FLV encoders

If a video is not FLV (e.g. AVI, WMV..) and needs to be added to the web page, FLV encoders can be useful. FLV encoders can convert videos to FLV so that people can add the resulting FLV to their website, blog, etc. Free and good FLV encoders are available on the market, like Moyea Video4Web Converter. There are also a lot of other FLV encoders on the market which convert all kinds of video formats to FLV and offer different features.