Graphical Content and Multimedia
From Wikiversity
This lesson will teach you how to display images and embed video and audio using HTML. You should already have basic understanding of HTML, try less advanced courses before this one.
Contents |
[edit] Images
This section will teach you how to display images.
[edit] 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 things about the image and the way it behaves 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.
I will now explain the multiple attributes and the values you can assign them.
[edit] 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.gif"/>
[edit] The alt Attribute
If you're taking this course, you've probably been surfing the Internet for sometime. I'm sure you've 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. I'm also sure you've 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.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.
[edit] 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 interchangable. You may use either of them to change the number of pixels on the y-axis of the image.
[edit] 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"/>
[edit] Audio
This section will teach you how to include audio on your webpages.
[edit] Audio Attributes and Values
Audio has tags and attributes, the same as images do. 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, only Internet Explorer supports it. People using any other browser will be unable to hear any audio.
[edit] Headline text
[edit] Video
[edit] The best Internet video format
Currently, FLV is the best video format for Internet video stream.
FLV stands for "Flash video". It is a media stream format used to deliver video the Internet using Adobe Flash Player, which is widely used by the Internet users.
To add FLV to website, you need a web-based FLV player(which is a SWF file) that control the playback of the FLV movie, code for embedding(either HTML tags or SWFObject) and a web host server that host the FLV movie.
[edit] HTML tags for Internet video embedding - object and embed
There are mainly two HTML tags for video embeddng, they are object and embed. Below code is an example about how to embed a flv player(a SWF file) onto 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
[edit] SWFObject
You can just regard SWFObject as a piece of code for embedding flash file to web page. It is more stable and supports more web browsers than using object / embed tags for embedding video.
Detail information of SWFObject
[edit] Web-based FLV player
FLV is just a video and it needs web-based FLV player to display on web page. We can either make FLV player by ourselves with Adobe Flash CS3, or just use pre-designed FLV player. Currently, FLV player created by playerdiy.com is good. Users have questions can check its tutorial here.
[edit] FLV encoders
If video is not FLV (e.g. AVI, WMV..) and needs to be added to web page, FLV encoder sure come in handy at times like this. FLV encoder can convert video to FLV so that people can add the resulting FLV to their website, blog, etc. Free and good FLV encoder is 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.
