Download Chapter 4

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts
no text concepts found
Transcript
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