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  tag. The  tag has many attributes such as ,  ,  , and. 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  attribute would be the URL of the image. The value of the  or   attribute would be the number of pixels high or wide you want the image to be. Unlike other tags in HTML, the  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 Attribute
The  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.

The 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  attribute. You use the  attribute in the manner displayed below.

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 Attribute
The  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.

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

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

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  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


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

For example:

Before the html5 standard, audio may use, which is really an attribute of the   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.

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 - and
There are mainly two HTML tags for video embeddng,  and. The code below is an example of how to embed a flv player (a SWF file) onto a web page using these two tags:

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.