The Web Wizards Guide to XML by Cheryl

CHAPTER 4 Bringing Web Pages to Life with Images and Multimedia Copyright © 2003

Images and Multimedia on the Web n n The ability to include images and other forms of multimedia has helped the Web grow in popularity Images and multimedia files are much larger in size than XHTML files and take longer to download to a user’s browser Higher speed Internet connections, like Cable and DSL, are becoming more accessible and affordable for home users. These faster connections allow for faster downloads of large files Before adding numerous image and/or multimedia files to a website, you must know who the audience of the site will be and how they access the Internet. For example, a site that is geared towards wireless device users, like cell phones and pagers, should not contain a lot of large graphic files because of the slow connection speed and the small size of the viewing space on the screens Copyright © 2003 Pearson Education, Inc. 3

Image File Formats n n Three primary formats for Web images: n GIF – Graphics Interchange Format n The GIF format supports 256 colors and is a good format for small non-photographic images like icons and buttons n JPEG - Joint Photographic Experts Group n JPEG is a compression technique that is used to reduce large file sizes for high quality images, like photographs n PNG - Portable Network Graphics n PNG was originally developed to replace the GIF format. The biggest difference between PNG and GIF is that PNG supports more than 256 colors The next slide will demonstrate the differences in image quality and file sizes for these 3 formats. Notice that the GIF file is much more grainy than the JPEG and PNG files. This is due to the restriction to only 256 colors. Copyright © 2003 Pearson Education, Inc. 4

Image File Formats Example Original file – Windows Bitmap file – Stage. bmp GIF Format Stage. gif File size – 13 k Copyright © 2003 Pearson Education, Inc. JPEG Format Stage. jpg File size – 28 k File Size – 351 k PNG Format Stage. png File size – 164 k 5

The <img> element n The <img> element in XHTML is used to include links to images in XHTML documents n The <img> element is an empty element n The two required attributes are: n src – Defines the path to the image file - can be an absolute or relative path n alt – Defines alternate text for the image file that will display in place of the image if the client can not display images <img src="myimage. gif" alt="Alternate text for my image" /> Copyright © 2003 Pearson Education, Inc. 6

Linking With the <img> Element n To use the <img> element as a link: n Embed the <img> element within an <a> element <a href=”newpage. html”><img src=”myimage. gif” alt=”Click on this image” /></a> n n By default, web browsers place a blue border around the image to identify it as a clickable object To remove the blue border around the image, use a style definition: <style type="text/css"> img { border: none; } </style> Copyright © 2003 Pearson Education, Inc. 7

Image Example – XHTML code 1 <? xml version="1. 0"? > 2 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" 3 "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> 4 <html xmlns="http: //www. w 3. org/1999/xhtml"> 5 <head> 6 <title>Sample Image as a Link</title> 7 </head> 8 <body> 9 <p> 10 This Web page contains a linked image file: 11 </p> 12 <p> 13 <a href=”newpage. html”><img src=”myimage. gif” alt=”Click here” /></a> 14 </p> 15 <p> 16 Isn't this fun? 17 </p> 18 </body> 19 </html> Copyright © 2003 Pearson Education, Inc. 8

Image Example – Web Browser Copyright © 2003 Pearson Education, Inc. 9

Image Maps n n Two types of Image maps: n Server-side – The image map files are stored on the Web server and the Web server was responsible for interpreting clicks n Client-side – The image map files are stored inside the XHTML file and are executed on the client, usually a Web browser n Client-side image maps are more commonly used today Four shapes that can be defined as image areas: n circle, circ n rectangle, rect n polygon, poly n default Copyright © 2003 Pearson Education, Inc. 10

Image Map Example - Image Element with Map Reference: <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="balloons. gif" alt="Click on

Image Map Example - Image Element with Map Reference: <img src="balloons. gif" alt="Click on this image" usemap="#myimage" /> Map File for “myimage” map: 1 <map name="myimage" id="myimage"> 2  3 <area shape="circle" alt="Red Balloon" coords="155, 123, 34" href="red. html" title="Red Balloon" /> 1. 4 <!– Rectangle --> 2. 5 <area shape="rect" alt="Blue Balloon" 3. coords="68, 185, 130, 242" href="blue. html" title="Blue 4. Balloon" /> 6  7 <area shape="poly" alt="Yellow Balloon" coords="227, 114, 227, 113, 171, 224, 208, 267, 264, 209, 267, 141" href="yellow. html" title="Yellow Balloon" /> 8 <!– Default --> 9 <area shape="rect" alt="Default Area" href="default. html" coords="0, 0, 307, 411" /> 10 </map> Copyright © 2003 Pearson Education, Inc. 11

Audio and Video Files n n n Audio and Video files are usually large files and require a fast connection to the Internet in order to view the files without having to wait long periods of time Popular Multimedia file formats: n pdf – Portable Document Format n avi – Audio Video Inerleave n mpg, mpeg, mp 3 – Moving Picture Expert Group n rm, ram – Real Video n swf – Shockwave or Flash n qt, mov – Quicktime n wav – Waveform Most modern browsers have support for many of the popular formats Copyright © 2003 Pearson Education, Inc. 12

Linking Audio and Video Files n Multimedia files can be linked using either the <a> element or the <object> element n Using the <a> element to link a multimedia file will allow you to create a link to a multimedia file, but will not add the file to the page: <a href="christmas. qt">Movie in Quick. Time format</a> n In this example, the movie file is displayed as a link on the page. When the link is activated, the Quicktime Movie player is launched to play the file Using the <object> element will embed the multimedia file into the page. To use this method, the MIME type of the file must be known (the MIME type in this example is video/quicktime): <object data="baby. jpg" type="video/quicktime" /> Copyright © 2003 Pearson Education, Inc. 13