Transcript Chapter 4
The Web Wizard’s Guide to XML
by Cheryl M. Hughes
Created by Cheryl M. Hughes
Copyright © 2003 Pearson Education, Inc.
Slide 4-1
CHAPTER 4
Bringing Web Pages to Life with
Images and Multimedia
Copyright © 2003 Pearson Education, Inc.
Slide 4-2
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
Copyright © 2003 Pearson Education, Inc.
Slide 4-3
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.
Copyright © 2003 Pearson Education, Inc.
Slide 4-4
Image File Formats Example
Original file – Windows Bitmap file – Stage.bmp
GIF Format
Stage.gif
File size – 13k
Copyright © 2003 Pearson Education, Inc.
JPEG Format
Stage.jpg
File size – 28k
File Size – 351k
PNG Format
Stage.png
File size –164k
Slide 4-5
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" />
Copyright © 2003 Pearson Education, Inc.
Slide 4-6
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>
Copyright © 2003 Pearson Education, Inc.
Slide 4-7
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>
Copyright © 2003 Pearson Education, Inc.
Slide 4-8
Image Example – Web Browser
Copyright © 2003 Pearson Education, Inc.
Slide 4-9
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
Copyright © 2003 Pearson Education, Inc.
Slide 4-10
Image Map Example - Image
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
<!-- Circle -->
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
<!-- Polygon -->
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>
Copyright © 2003 Pearson Education, Inc.
Slide 4-11
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
Copyright © 2003 Pearson Education, Inc.
Slide 4-12
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-13