copyright © 2003 pearson education, inc. slide 4-1 created by cheryl m. hughes the web wizards...

Copyright © 2003 Pearson Education, Inc. Slide 4-1

Created by Cheryl M. Hughes

The Web Wizard’s Guide to XML by Cheryl M. Hughes


CHAPTER 4Bringing Web Pages to Life with

Images and Multimedia


Images and Multimedia on the Web

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


Image File Formats

Three primary formats for Web images: GIF – Graphics Interchange Format

The GIF format supports 256 colors and is a good format for small non-photographic images like icons and buttons

JPEG - Joint Photographic Experts Group JPEG is a compression technique that is used to reduce

large file sizes for high quality images, like photographs PNG - Portable Network Graphics

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.


Image File Formats Example

JPEG FormatStage.jpgFile size – 28k

GIF FormatStage.gifFile size – 13k

PNG FormatStage.pngFile size –164k

Original file – Windows Bitmap file – Stage.bmp File Size – 351k


The <img> element

The <img> element in XHTML is used to include links to images in XHTML documents The <img> element is an empty element The two required attributes are:

src – Defines the path to the image file - can be an absolute or relative path

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


Linking With the <img> Element

To use the <img> element as a link: Embed the <img> element within an <a> element

<a href=”newpage.html”><img src=”myimage.gif” alt=”Click on this image” /></a>

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>


Image Example – XHTML code

1 <?xml version="1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 <html xmlns="http://www.w3.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>


Image Example – Web Browser


Image Maps

Two types of Image maps: Server-side – The image map files are stored on the Web

server and the Web server was responsible for interpreting clicks

Client-side – The image map files are stored inside the XHTML file and are executed on the client, usually a Web browser

Client-side image maps are more commonly used today Four shapes that can be defined as image areas:

circle, circ rectangle, rect polygon, poly default

Image Map Example - Image

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" />4 <!– Rectangle -->5 <area shape="rect" alt="Blue Balloon" coords="68,185,130,242" href="blue.html" title="Blue Balloon" />6 7 <area shape="poly" alt="Yellow Balloon"

coords="227,114,227,114,227,113,171,224,208,267,264, 209,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>

Image Element with Map Reference:

<img src="balloons.gif" alt="Click on this image" usemap="#myimage" />


Audio and Video Files

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: pdf – Portable Document Format avi – Audio Video Inerleave mpg, mpeg, mp3 – Moving Picture Expert Group rm, ram – Real Video swf – Shockwave or Flash qt, mov – Quicktime wav – Waveform

Most modern browsers have support for many of the popular formats


Linking Audio and Video Files

Multimedia files can be linked using either the <a> element or the <object> element

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 QuickTime format</a>

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. slide 4-1 created by cheryl m. hughes the web wizards...

Documents

image element

multimedia slide

images slide

linked image file

image map files

gif file

hughes slide

movie file