Dear friends Nabin here again its a long time i was absent because of little busyness now here is my next lesson for you.
Lecture 4: Adding Image, Audio and video
In order to show rich media on your pages, you will need to learn a new element, the <object> element. You need to know that the <object> element can tell the browser several things, including:
The name of the file and where to find it
The format of the file
The type of plug - in used to play the file
Inside the <object> element, you can use the <param> element to pass extra information to the player. The <param> element is not the only markup you are likely to see inside the <object> element. But any other markup you see inside the <object> element is only likely to be shown if the browser cannot render the object (and the most common reason is that the required player is not installed). We will learn these things in this session.
4.1 Adding Image
Images are added to a site using the <img> element, which has to carry at least two attributes: the src attribute, indicating the source of the image, and an alt attribute, which provides a description of the image. For example, the following line would add the image called logo.gif into the page.
<img src=”image/banana.jpg” alt=”banana” />
4.1.1 Setting Height and Width
The height and width attributes specify the height and width of the image, and the values for these attributes are almost always shown in pixels.
<img src=”image/banana.jpg” alt=”banana” height=”120” width=”180” />
4.1.2 Setting alignment
The align attribute was created to align an image within the page (or if the image is inside an element that is smaller than the full page, it aligns the image within that element). The align attribute can take one of the values from top, middle, left, right and bottom.
<img src=”image/apple.jpg” alt=”apple” align=”left” />
4.1.3 Setting boarder
A border is a line that can appear around an image or other element. By default, images do not have borders, so you would only have used this attribute if you wanted to create a border round an image.
<img src=”image/apple.jpg” alt=”apple” align=”left” border=”2” />
4.1.4 Setting vertical and horizontal space
The hspace and vspace attributes can be used to control the amount of white space around an image. The value is the amount in pixels of white space that should be left around the edge of the image.
<img src=”images/apple.jpeg” alt=”class” align=”left” border=”2” hspace=”10” vspace=”12”/>
4.1.5 Using images as links
It i s easy to turn an image into a link; rather than putting text between the opening <a> tag and the closing </a> tag, you simply place an image inside these tags. Images are often used to create graphical buttons or links to other pages.
<a href=”page.html” title=”Click here to return to the home page”>
< img src=”image/apple.jpg” width=”100” height=”70” alt=”apple” />
</a>
4.1.6 Image map
Image maps allow you to add multiple links to the same image, with each link pointing to a different page. There are actually two types of image maps, both of which do the same job. The difference is how they work out which hotspot you clicked on.
Client - side image maps: The web browser works out which part of the image the user has clicked on and takes the user to the appropriate page.
Server - side image maps: The browser sends the server the coordinates, saying which part of the image the user clicked on, and these are processed by a script file on the server that determines which page the user should be sent to.
4.1.6.1 Client side image map
Client - side image maps use XHTML code to tell the browser how the image will be divided up; then the browser can tell what part of the image someone clicks on and can send the user to the appropriate link.
There are two methods to create a client - side image map:
Using the <map> and <area> elements inside an <img> element
Using the <map> element inside the <object> element
Client - Side Image Maps using <map> and <area>
An attribute called usemap is then added to the <img> element to indicate that this image needs to use the information held in the corresponding <map> element to turn the image into an image map. The <map> element then contains the information used to tell the browser how to split up the image so that it can send the user to the correct page.
The <map> element usually follows directly after the <img> element. It needs to carry only the name attribute to identify itself. The <map> element then contains two or more <area> elements, and it is these <area> elements that actually define the clickable hotspots. The <area> element does this by specifying the shape and the coordinates that define the boundaries of each clickable hotspot.
<body>
<p>
<img src="image/map.gif" alt="Map" width="500" height="300" border="0" usemap="#cafe" />
<map name="cafe">
<area shape="circle" coords="154,150,59" href="Cafe.html" target="_self" alt="Cafe">
<area shape="poly" coords="272,79,351,79,351,15,486,15,486,218,272,218,292,166,292,136,270,76" href="courtyard.html" target="_self" alt="Courtyard">
<area shape="rect" coords="325,224,488,286" href="Kitchens.html" target="_self" alt="Kitchens">
</map>
</p>
</body>
The value of the shape attribute actually affects how the browser will use the coordinates specified in the coords attribute, and is therefore required. If you do not specify a shape attribute, the default value is a rectangle.
The coords attribute specifies the area that is the clickable hotspot. The number of coordinates you specify depends on the shape you are creating (and have specified in the shape attribute).
A rectangle contains four coordinates. The first two coordinates represent the top left of the rectangle, and the second two the bottom right.
A circle contains three coordinates; the first two are the center of the circle, while the third is the radius in pixels.
A polygon contains two coordinates for each point of the polygon. So a triangle would contain six coordinates, a pentagon would contain ten, and so on. You do not need to specify the first coordinates again at the end because the shape is automatically closed.
Client - Side Image Maps using the <object> Element
The technique is very similar to the one you just met, but this time it is the <object> element that carries the usemap attribute. Inside the <object> element, you use the familiar < map > element with the name attribute. Then inside the <map> element are standard <a> elements rather than <area> elements.
<object data="image/map.gif" type="image/gif" alt="Map" width="500"
height="300" border="0" usemap="#cafe" />
<map name="cafe">
<a shape="circle" coords="154,150,59" href="cafe.html" target="_self" > Cafe </a>
<a shape="poly" coords="272,79,351,79,351,15,486,15,486,218,272,218,292,166,292,136,270,76"
href="courtyard.html" target="_self" > Courtyard </a>
<a shape="rect" coords="325,224,488,286" href="kitchens.html" target="_self">Kitchens </a>
</map >
</object>
4.2 Adding Audio
Audio can be added in many different ways in a web page. Here we explain some of them.
4.2.1 Using a Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. The following code fragment displays a link to an MP3 file. If a user clicks on the link, the browser will launch a helper application to play the file.
<a href="audio/mela.mp3">Play Song</a>
4.2.2 Using <audio> ELement
Please note that the <audio> element is an HTML 5 element, unknown to HTML 4, but it works in all new browsers.
<body>
<audio controls="controls">
<source src=" audio/problem.ogg" type="audio/ogg" />
<source src=" audio/problem.mp3" type="audio/mpeg" />
Your browser does not support this audio
</audio>
</body>
4.2.3 Using <object> element
The purpose of the <object> tag is to embed multimedia elements in HTML pages. The following code fragment displays an MP3 file embedded in a web page.
<object height="50px" width="100px" data=" audio/problem.ogg" />
4.2.4 Using the <embed> element
Please note that the <embed> element is an HTML 5 element, unknown to HTML 4 and it might require plug-in in some browsers.
<embed height="50px" width="100px" src=" audio/mela.mp3" />
4.3 Adding video
When you want to play a video on the web there are two things you need to consider:
File format: You need to choose the format of the video, and there are lots of different formats to choose from, including SWF, AVI, FLV, MPEG, QuickTime, and Windows Media. Which format you choose can influence the size of the file that users have to download and the quality of the picture they get to watch (because the formats use different compression techniques to create smaller files).
Plug - in needed to play that type of file: Different formats require different plug-ins to play the movie. Some plug-ins are more popular than others (and are installed on a greater percentage of computers). Examples include Flash Player, QuickTime Player, RealPlayer, and Windows Media Player.
4.3.1 Using a hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. The following code fragment displays a link to an swf file. If a user clicks on the link, the browser will launch a helper application to play the file.
<a href="video/perform.swf">Play Video</a>
4.3.2 Using <object> and <embed>
Here is how to add video using <object> element.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="200" codebabse="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value=" video/sample.swf">
<param name="play" value="true">
<param name="loop" value="false">
<embed src=" video/sample.swf" width="300" height="200" play="true" loop="false" quality="best" menu="false" type="application/x-shockwave-flash" pluginpage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>
The classid attribute is there to specify which application should play the file (in this case the classid attribute identifies the Flash Player, but if you wanted to play a file using the Windows Media plug - in, you would use a different value of 6BF52A52 - 394A - 11D3 - B153 - 00C04F79FAA6 ). The codebase attribute specifies where the plug - in or program required to play this file can be found if the user does not have it installed.
4.3.3 Using <video> tag
The <video> element is new in HTML 5. The purpose of the <video> tag is to embed video elements in HTML pages. The following HTML fragment displays a video in ogg, mp4, or webm format embedded in a web page:
<video width="320" height="240" controls="controls">
<source src="video/sea.mp4" type="video/mp4" />
<source src=" video/sea.ogg" type="video/ogg" />
<source src=" video/sea.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
4.3.4 Embedding you tube video
One of the easiest ways to feature video on your site is to upload your video to a site such as YouTube, and then embed the YouTube player in your page using the code YouTube provides.
<body>
<h1>Embedding a YouTube Video</h1>
<object width="300" height="200">
<param name="movie" value="http://www.youtube.com/v/dMH0bHeiRNg&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/dMH0bHeiRNg&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="200"></embed>
</object>
</body>
Lecture 4: Adding Image, Audio and video
In order to show rich media on your pages, you will need to learn a new element, the <object> element. You need to know that the <object> element can tell the browser several things, including:
The name of the file and where to find it
The format of the file
The type of plug - in used to play the file
Inside the <object> element, you can use the <param> element to pass extra information to the player. The <param> element is not the only markup you are likely to see inside the <object> element. But any other markup you see inside the <object> element is only likely to be shown if the browser cannot render the object (and the most common reason is that the required player is not installed). We will learn these things in this session.
4.1 Adding Image
Images are added to a site using the <img> element, which has to carry at least two attributes: the src attribute, indicating the source of the image, and an alt attribute, which provides a description of the image. For example, the following line would add the image called logo.gif into the page.
<img src=”image/banana.jpg” alt=”banana” />
4.1.1 Setting Height and Width
The height and width attributes specify the height and width of the image, and the values for these attributes are almost always shown in pixels.
<img src=”image/banana.jpg” alt=”banana” height=”120” width=”180” />
4.1.2 Setting alignment
The align attribute was created to align an image within the page (or if the image is inside an element that is smaller than the full page, it aligns the image within that element). The align attribute can take one of the values from top, middle, left, right and bottom.
<img src=”image/apple.jpg” alt=”apple” align=”left” />
4.1.3 Setting boarder
A border is a line that can appear around an image or other element. By default, images do not have borders, so you would only have used this attribute if you wanted to create a border round an image.
<img src=”image/apple.jpg” alt=”apple” align=”left” border=”2” />
4.1.4 Setting vertical and horizontal space
The hspace and vspace attributes can be used to control the amount of white space around an image. The value is the amount in pixels of white space that should be left around the edge of the image.
<img src=”images/apple.jpeg” alt=”class” align=”left” border=”2” hspace=”10” vspace=”12”/>
4.1.5 Using images as links
It i s easy to turn an image into a link; rather than putting text between the opening <a> tag and the closing </a> tag, you simply place an image inside these tags. Images are often used to create graphical buttons or links to other pages.
<a href=”page.html” title=”Click here to return to the home page”>
< img src=”image/apple.jpg” width=”100” height=”70” alt=”apple” />
</a>
4.1.6 Image map
Image maps allow you to add multiple links to the same image, with each link pointing to a different page. There are actually two types of image maps, both of which do the same job. The difference is how they work out which hotspot you clicked on.
Client - side image maps: The web browser works out which part of the image the user has clicked on and takes the user to the appropriate page.
Server - side image maps: The browser sends the server the coordinates, saying which part of the image the user clicked on, and these are processed by a script file on the server that determines which page the user should be sent to.
4.1.6.1 Client side image map
Client - side image maps use XHTML code to tell the browser how the image will be divided up; then the browser can tell what part of the image someone clicks on and can send the user to the appropriate link.
There are two methods to create a client - side image map:
Using the <map> and <area> elements inside an <img> element
Using the <map> element inside the <object> element
Client - Side Image Maps using <map> and <area>
An attribute called usemap is then added to the <img> element to indicate that this image needs to use the information held in the corresponding <map> element to turn the image into an image map. The <map> element then contains the information used to tell the browser how to split up the image so that it can send the user to the correct page.
The <map> element usually follows directly after the <img> element. It needs to carry only the name attribute to identify itself. The <map> element then contains two or more <area> elements, and it is these <area> elements that actually define the clickable hotspots. The <area> element does this by specifying the shape and the coordinates that define the boundaries of each clickable hotspot.
<body>
<p>
<img src="image/map.gif" alt="Map" width="500" height="300" border="0" usemap="#cafe" />
<map name="cafe">
<area shape="circle" coords="154,150,59" href="Cafe.html" target="_self" alt="Cafe">
<area shape="poly" coords="272,79,351,79,351,15,486,15,486,218,272,218,292,166,292,136,270,76" href="courtyard.html" target="_self" alt="Courtyard">
<area shape="rect" coords="325,224,488,286" href="Kitchens.html" target="_self" alt="Kitchens">
</map>
</p>
</body>
The value of the shape attribute actually affects how the browser will use the coordinates specified in the coords attribute, and is therefore required. If you do not specify a shape attribute, the default value is a rectangle.
The coords attribute specifies the area that is the clickable hotspot. The number of coordinates you specify depends on the shape you are creating (and have specified in the shape attribute).
A rectangle contains four coordinates. The first two coordinates represent the top left of the rectangle, and the second two the bottom right.
A circle contains three coordinates; the first two are the center of the circle, while the third is the radius in pixels.
A polygon contains two coordinates for each point of the polygon. So a triangle would contain six coordinates, a pentagon would contain ten, and so on. You do not need to specify the first coordinates again at the end because the shape is automatically closed.
Client - Side Image Maps using the <object> Element
The technique is very similar to the one you just met, but this time it is the <object> element that carries the usemap attribute. Inside the <object> element, you use the familiar < map > element with the name attribute. Then inside the <map> element are standard <a> elements rather than <area> elements.
<object data="image/map.gif" type="image/gif" alt="Map" width="500"
height="300" border="0" usemap="#cafe" />
<map name="cafe">
<a shape="circle" coords="154,150,59" href="cafe.html" target="_self" > Cafe </a>
<a shape="poly" coords="272,79,351,79,351,15,486,15,486,218,272,218,292,166,292,136,270,76"
href="courtyard.html" target="_self" > Courtyard </a>
<a shape="rect" coords="325,224,488,286" href="kitchens.html" target="_self">Kitchens </a>
</map >
</object>
4.2 Adding Audio
Audio can be added in many different ways in a web page. Here we explain some of them.
4.2.1 Using a Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. The following code fragment displays a link to an MP3 file. If a user clicks on the link, the browser will launch a helper application to play the file.
<a href="audio/mela.mp3">Play Song</a>
4.2.2 Using <audio> ELement
Please note that the <audio> element is an HTML 5 element, unknown to HTML 4, but it works in all new browsers.
<body>
<audio controls="controls">
<source src=" audio/problem.ogg" type="audio/ogg" />
<source src=" audio/problem.mp3" type="audio/mpeg" />
Your browser does not support this audio
</audio>
</body>
4.2.3 Using <object> element
The purpose of the <object> tag is to embed multimedia elements in HTML pages. The following code fragment displays an MP3 file embedded in a web page.
<object height="50px" width="100px" data=" audio/problem.ogg" />
4.2.4 Using the <embed> element
Please note that the <embed> element is an HTML 5 element, unknown to HTML 4 and it might require plug-in in some browsers.
<embed height="50px" width="100px" src=" audio/mela.mp3" />
4.3 Adding video
When you want to play a video on the web there are two things you need to consider:
File format: You need to choose the format of the video, and there are lots of different formats to choose from, including SWF, AVI, FLV, MPEG, QuickTime, and Windows Media. Which format you choose can influence the size of the file that users have to download and the quality of the picture they get to watch (because the formats use different compression techniques to create smaller files).
Plug - in needed to play that type of file: Different formats require different plug-ins to play the movie. Some plug-ins are more popular than others (and are installed on a greater percentage of computers). Examples include Flash Player, QuickTime Player, RealPlayer, and Windows Media Player.
4.3.1 Using a hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. The following code fragment displays a link to an swf file. If a user clicks on the link, the browser will launch a helper application to play the file.
<a href="video/perform.swf">Play Video</a>
4.3.2 Using <object> and <embed>
Here is how to add video using <object> element.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="200" codebabse="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value=" video/sample.swf">
<param name="play" value="true">
<param name="loop" value="false">
<embed src=" video/sample.swf" width="300" height="200" play="true" loop="false" quality="best" menu="false" type="application/x-shockwave-flash" pluginpage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>
The classid attribute is there to specify which application should play the file (in this case the classid attribute identifies the Flash Player, but if you wanted to play a file using the Windows Media plug - in, you would use a different value of 6BF52A52 - 394A - 11D3 - B153 - 00C04F79FAA6 ). The codebase attribute specifies where the plug - in or program required to play this file can be found if the user does not have it installed.
4.3.3 Using <video> tag
The <video> element is new in HTML 5. The purpose of the <video> tag is to embed video elements in HTML pages. The following HTML fragment displays a video in ogg, mp4, or webm format embedded in a web page:
<video width="320" height="240" controls="controls">
<source src="video/sea.mp4" type="video/mp4" />
<source src=" video/sea.ogg" type="video/ogg" />
<source src=" video/sea.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
4.3.4 Embedding you tube video
One of the easiest ways to feature video on your site is to upload your video to a site such as YouTube, and then embed the YouTube player in your page using the code YouTube provides.
<body>
<h1>Embedding a YouTube Video</h1>
<object width="300" height="200">
<param name="movie" value="http://www.youtube.com/v/dMH0bHeiRNg&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/dMH0bHeiRNg&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="200"></embed>
</object>
</body>
