tag and the attributes of the

tag have both been

deprecated

by the W3C.

– deprecated means that they are considered to be outdated by newer methods • Web page authors are encouraged to use other approaches, such as cascading style sheets, to format the appearance of Web pages.

• Most of the deprecated tags and attributes are still supported by the major browsers.

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 43

Images

• The two image file formats supported by most Web browsers are

GIF

and

JPEG

.

• Choosing the appropriate image format is an important part of Web page design.

• Balance the goal of creating an interesting and attractive page against the need to keep the size of your page small and easy to receive.

• Each file format has its advantages and disadvantages, and you will probably use a combination of both formats in your Web page designs.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 44

XP

Working with GIF Files

•

GIF (Graphics Interchange Format)

is the most commonly used image format on the Web.

• Compatible with virtually all browsers.

• GIF files are limited to displaying 256 colors.

• Often used for graphics requiring fewer colors, such as clip art images, line art, logos, and icons.

• Images that require more color depth, such as photographs, can appear grainy when saved as GIF files.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 45

XP

XP

Interlaced and Noninterlaced GIFs

•

Interlacing

refers to the way the GIF is saved by the graphics software.

• Normally, with a

noninterlaced

GIF the image is saved one line at a time, starting from the top of the graphic and moving downward.

• With interlaced GIFs, the image is saved and retrieved “

stepwise

.” – for example, every fifth line of the image might appear first, followed by every sixth line, and so forth through the remaining rows Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 46

Interlaced and Noninterlaced GIFs Continued

XP

• Interlacing is an effective format if you have a large graphic and want to give users a preview of the final image as it loads.

• Interlacing can increase the size of a GIF file by anywhere from 3 to 20 kilobytes, depending on the image.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 47

Noninterlaced Graphic

This figure shows how a noninterlaced GIF appears as it is slowly retrieved by the Web browser.

If the graphic is large, it might take several minutes for the entire image to appear, which can frustrate the visitors to your Web page.

top appears first Image appears one line at a time entire image is retrieved XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 48

Interlaced Graphic

This figure shows the effect of interlacing, which is when the graphic starts out as a blurry representation of the final image, then gradually comes into focus-unlike the noninterlaced graphic, which is always a sharp image as it’s being retrieved, although an incomplete one.

a rough image appears first image starts to show more detail final image is crisp and detailed

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 49

XP

Transparent GIFs

• A

transparent color

is a color from the image that is not displayed when the image is viewed in an application.

• In place of a transparent color, the browser will display whatever is on the page background.

• Creating a transparent color depends on the graphic software used.

• Many applications include the option to designate transparent color when saving the image i.e. PhotoShop.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 50

XP

A Transparent Image File

XP This figure shows a transparent image file.

the green background will be transparent when displayed in the browser logo background is transparent in the browser

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 51

Animated GIFs

• One of the most popular uses of GIFs is to create animated images.

• Animated GIFs are easy to create and smaller in size.

• An

animated GIF

is composed of several images that are displayed one after the other in rapid succession.

• Animated GIFs are an effective way to compose slide shows or to simulate motion.

• The newer standard includes enhancements such as interlacing, transparent colors, and animation.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 52

XP

Animated GIF Programs

XP This figure shows a list of programs available on the Web that you can use to create your own animated GIFs.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 53

Animated GIF Collections

XP If you don’t want to take the time to create your own animated GIFs, many animated GIF collections are available on the Web. This figure shows a list of a few of them.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 54

Animated GIFs Continued

XP

• Animated GIF files are typically larger than static GIF images.

• The use of animated GIFs can greatly increase the size of a Web page.

• Be careful not to overwhelm the user with animated images.

• Animated GIFs are limited to 256 colors and can use transparent colors.

• Early browser versions may not support animated GIFs.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 55

XP

Portable Network Graphics (PNG)

• A new file format called

PNG (Portable Network Graphics)

has been created.

• PNG files use a free and open file format and can display more colors than GIFs.

• PNGs cannot be used for animated graphics.

• PNGs do allow transparent colors, but not all browsers support this feature.

• The PNG format may eventually replace GIFs, however GIFs are still the preferred standard.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 56

BMP, XPM, and XBM Images and Browsers

• Internet Explorer can display graphic files in the BMP format.

• Netscape can display XPM and XBM files.

• Be aware when using these formats, the image might not be viewable in all browsers or browser versions.

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 57

Working with JPEG Files

XP

• The

JPEG (Joint Photographic Experts Group)

format creates graphics that use the full 16.7 million colors available in the color palette.

• JPEG files are most often used for photographs and images that cover a wide spectrum of color.

• JPEG files usually are smaller than GIF files.

• A JPEG file size can by controlled by the degree of image compression applied to the file.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 58

XP

Working with JPEG Files Continued

• You cannot use transparent colors or animation with JPEG files.

• A JPEG format called

progressive JPEG

does now allow JPEG files to be interlaced.

• Not all design applications and Web browsers support progressive JPEGs.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 59

The Effects of Compression on JPEG File Size and Quality

XP This figure shows the effect of compression on a JPEG file.

The increased compression cuts the file size to one tenth that of the original. The resulting image is less well-defined than the image with low compression.

minimal compression: file size = 84.3 KB moderate compression: file size = 20.7 KB medium compression: file size = 14.2 KB

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

heavy compression: file size = 8.6 KB

60

If an image appears blurry or grainy, it could be because your monitor is capable of displaying only 256 colors, and not the full palette of 16.7 million colors.

An Inline Image

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 61

XP

Controlling Image Placement and Size

• When designing a Web page, you may want to control the image placement and size.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 62

Controlling Image Alignment

XP

• The

align

attribute can control the alignment of an image with the

tag.

• The syntax for the align attribute is:

– –

URL

is the location and filename of the graphic file

alignment

indicates how you want the graphic aligned in relation to the surrounding text Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 63

XP

Alignment Options

baseline bottom left middle right texttop top

align=

absbottom

This figure describes the possible values of the align attribute.

Description

Aligns the bottom of the object with the absolute bottom of the surrounding text. The absolute bottom is equal to the baseline of the text minus the height of the largest descender in the text.

absmiddle Aligns the middle of the object with the middle of the surrounding text. The absolute middle is the midpoint between the absolute bottom and text top of the surrounding text.

Aligns the bottom of the object with the baseline of the surrounding text.

Aligns the bottom of the object with the bottom of the surrounding text. The bottom is equal to the baseline minus the standard height of a descender in the text.

Aligns the object to the left of the surrounding text. All preceding and subsequent text flows to the right of the object.

Aligns the middle of the object with the surrounding text.

Aligns the object to the right of the surrounding text. All subsequent text flows to the left of the object.

Aligns the top of the object with the absolute top of the surrounding text. The absolute top is the baseline plus the height of the largest ascender in the text.

Aligns the top of the object with the top of the text. The top of the text is the baseline plus the standard height of an ascender in the text.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 64

Effects of the Align Attribute

XP This figure shows the effect of each alignment options on text surrounding the image.

align = “bottom” align = “middle” align = “top” align = “left”

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

align = “right”

65

Controlling Vertical and Horizontal Space

• To increase the horizontal and vertical space around an image use the

hspace

and

vspace

attributes.

• The syntax is:

–

hspace

(horizontal space) attribute indicates the amount of space to the left and right of the image.

–

vspace

(vertical space) attribute controls the amount of space above and below the image

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 66

set the horizontal space around the graphic to 15 pixels and the vertical space to 5 pixels

Using the hspace and vspace Attributes

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 67

XP

Controlling Image Size

• Another set of attributes for the

tag are the

height

and

width

attributes.

• Height and width attributes instruct the browser to display an image at a specific size.

• The height and width attributes can be used to increase or decrease the size of the image on a Web page.

• The syntax for setting the height and width attributes is:

–

value

is the height and width of the image either in pixels or as a percentage of the page’s height and width Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 68

Controlling Image Size Continued

XP

• To decrease the size of an image, use an image editing application to reduce the file size and dimensions of the image.

• Changing the size of the image within the

tag does not affect the file size, it makes the image look smaller improving the performance of the Web page.

• When a browser encounters an inline image, it calculates the image size and then uses this information to format the page.

• If the dimension is included with an image, the browser displays the image faster.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 69

Using the alt Attribute

XP

• The

alt

attribute specifies text to display in place of an inline image.

• The syntax for specifying alternate text is:

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 70

Specifying Alternative Text for an Inline Image

XP Alternate image text is important because it allows users who have nongraphical browsers to know the content of your graphics. Alternate image text also appears as a placeholder for the graphic while the page is loading. This can be particularly important for users accessing your page through a slow dial up connection.

specifying alternative text for an inline image

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 71

General Tips for Working with Color and Images

XP

• The primary purpose of a Web page is to convey information.

• If an image adds visual interest to the Web page, include it.

• Be aware that overusing graphics can make a Web page difficult to read and cumbersome to display.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 72

Reduce the Size of Web Pages

XP

• Strive to make your Web page quick and easy to retrieve.

• The total size of an image on a Web page should be no more than 40 to 50 kilobyte. There are several ways to achieve this: – use an image editing application – experiment with different graphic format types – use thumbnails-reduced versions of your images – reuse images – provide an alternate, text-only version of the Web page Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 73

Manage Your Colors

• Color can add a lot to a Web page, it can also detract from it.

• Make sure to have enough contrast between the text and background.

– do not place dark text on a dark background – do not place light text on a light background • Color is handled differently on different browsers – test Web pages on different browsers and monitors Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 74

XP

Dithering

•

Dithering

is when the colors in an image are converted to a fixed palette.

• To completely eliminate dithering, use the Safety Palette.

– the

Safety Palette

, also referred to as the

browser-safe palette

,

web palette

, or

216 color palette

, is a collection of 216 colors that display consistently on different browsers and operating systems.

• Using the Safety Palette, images will appear the same to all users regardless of the browser being used.

• Given the growth of 24-bit (millions of colors) color systems, this is rapidly becoming less of an issue.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 75

XP

Image Dithering

This figure shows dithered images can sometimes appear grainy.

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 76

Creating Image Maps in HTML

XP

• When designing a Web page, you may want to create an image that links to other Web pages.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 77

This figure is an example of a park map that visitors can easily find their way to all of the different attractions by clicking on the image.

For example, when a user clicks the section of the map on roller coaster rides a page describing the roller coaster ride is displayed.

An Example of a Image Map

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 78

Understanding Image Maps

XP

• To use a single image to access multiple targets, you must set up hotspots within the image.

• A

hotspot

is a defined area of the image that acts as a hypertext link.

• When a user clicks within a hotspot, the hyperlink is activated.

• Hotspots are defined through the use of image maps, which list the positions of all hotspots within an image.

• There are two types of image maps:

server-side image maps

and

client-side image maps

.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 79

Linking an Image to Different Web Pages

This figure shows how links will work.

karts.htm

XP rides.htm

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

water.htm

80

Server-Side Image Maps

XP

• In a

server-side image map

, the image map is stored on the Web server.

• Server-side image maps are supported by most graphical browsers.

• Server-side image maps can be slow to operate.

• The browser’s status bar does not display the target of each hotspot.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 81

Server-Side Image Maps

XP When a user clicks a hotspot, the coordinates where the user clicked are sent to a program running on the server.

The program uses the coordinates to determine which hotspot was clicked and then activates the corresponding hyperlink.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 82

Client-Side Image Maps

XP

• A

client-side image map

is inserted in an image map into the HTML file.

• The browser locally processes the image map.

• Because all of the processing is done locally, you can easily test Web pages.

• More responsive than server-side maps.

• The browser’s status bar displays the target of each hotspot.

• Older browsers do not support client-side images.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 83

Defining a Client-Side Image Map

XP

• Create the

tag that defines the different hotspots on the image as follows:

– – – – –

mapname shape

is the type of hotspot (rectangle, circle, or polygon)

coordinates URL

is the location of the linked page

window

is the name you give the image map are the locations of points that define the shape is the name of a secondary browser window Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 84

Defining a Client-Side Image Map Continued

• If you want to open the linked page in a different window. You can have multiple

tags within each

tag, enabling you to have several hotspots for each image map.

• Once the image map is created, add the

usemap

attribute to the

tag for the inline image, as follows:

–

mapname

tag is the name you give the image map defined in the Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 85

XP

XP

Programs for Creating Image Maps

This figure lists programs available for creating image maps.

Title

CompuPic Pro Image Mapper LiveImage MapEdit Visual Imagemapper

URL

http://www.photodex.com/products/pro/ http://www.coffeecup.com/mapper/ http://www.mediatec.com/ http://www.boutell.com/mapedit/ http://www.sofasitters.net/imagemap/ Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 86

Creating Image Maps in HTML Continued

• When creating a image map you may also want to add a note that describes what the user should do to activate hyperlinks within the image map.

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 87

Using the
Tag and clear Attribute

• Use the

tag to create a line break and force the following image or text to appear on its own line.

• The

clear

attribute is often used within the

tag to create the effect of starting a paragraph below the inline image.

• The clear attribute starts the next line at the first point at which the page margin is clear of text or images.

– for example, using

starts the next line when the left page margin is clear

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 88

Inserting an Image with the

XP

Tag

the
tag creates a line break

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 89

Defining Image Map Hotspots

XP

• Use a special program that determines the image map coordinates.

• Most image map programs generate the coordinates for hotspots, as well as, the necessary HTML code.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 90

Defining Image Map Hotspots Continued

• Within the

tag, enter the code for the type of hotspot(s) and the coordinates.

• The syntax for a

rectangular hotspot

is:

–

x_left

,

y_upper

are the coordinates of the upper-left corner of the rectangle –

x_right

corner ,

y_lower

are the coordinates of the lower-right

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 91

The shape Attribute

• The

shape

attribute refers to the shape of a hotspot. There are three possible values: – – –

“rect”

for a rectangular hotspot

“circle”

for a circular hotspot

“poly”

or “Polygon” for irregularly shaped polygon hotspots

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 92

The coords Attribute

• The

coords

attribute specifies the location of the hotspot.

• The values entered depend on the shape of the hotspot.

• Coordinates are expressed as a point’s distance in pixels from the left and the top edges of the image.

– for example, the coordinates (123,45) refer to a point 123 pixels from the left edge and 45 pixels down from the top

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 93

The href Attribute

• Use the

href

attribute to enter the location of the page opened by the hotspot.

• The

target

attribute can specify the name of a secondary browser window in which to open the linked page.

• Use the value “

nohref

” in place of a URL to prevent the hotspot from activating a hypertext link.

– this is a useful technique when first developing image maps, without hypertext links in place

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 94

XP

Programs for Creating Image Maps

This figure shows several programs available for determining the image map coordinates.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 95

Creating a Rectangular Hotspot

XP

• Two points define a

rectangular hotspot

: – the upper-left corner – the lower-right corner • A sample code for a

rectangular hotspot

is:

–

coordinates

commas are entered as a series of four numbers separated by – HTML expects that the first two numbers represent the coordinates for the upper-left corner of the rectangle, and the second two numbers indicate the location of the lower-right corner – the

hotspot

is a hypertext link to water.htm

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 96

Creating a Circular Hotspot

XP

• A

circular hotspot

is defined by the location of its center and its radius.

• A sample code for a

circular hotspot

is:

–

coordinates

are (307, 137), and it has a radius of 66 pixels.

– the

hotspot

is a hypertext link to karts.htm

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 97

Creating a Polygonal Hotspot

XP

• To create a polygonal hotspot, you enter the coordinates for each vertex in the shape.

• A sample code for a

polygonal hotspot

is:

–

coordinates

are for each vertex in the shape.

– the

hotspot

is a hypertext link to rides.htm

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 98

(13 , 60) XP

An Example of a Polygonal Hotspot

(230 , 60) roller coaster rides (13 , 270) (230 , 225)

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

(370 , 225) (370 , 270)

99

An Example of the Polygonal Hotspot Code

image map name polygonal hotspot XP circular hotspot rectangular hotspot

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 100

The usemap attribute

• The

usemap

attribute tells the browser the name of the image map to associate with the inline image.

• The syntax for adding the

usemap

attribute is:

–

mapname

the

is the name assigned to the name attribute in tag

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 101

Image Map and Hotspots

XP This figure shows an example of an image map and hotspots.

name of image to use properties of image map

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 102

pointer changes to a hand as it passes over a hot spot XP

Image Map and Hotspots Continued

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 103

Using the border Attribute

XP

• The

border

attribute specifies the size of the border surrounding an inline image.

• The syntax for setting the border width is:

–

value

is the width of the border in pixels • An inline image that does not contain hyperlinks to other documents will, by default, not have a border.

• If the image does contain hyperlinks, some browsers create a two-pixel-wide border.

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 104

Summary

• Used color and inline images in HTML.

• Discussed how Web browsers use color (palette).

• Learned how to use color names and color values.

• Learned how to use “safety color palettes” and safe colors.

• Defined GIF, JPEG, and PNG image formats.

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 105

Summary

• Learned how to control the size and placement of images.

• Aligned text with images and images in tables.

• Created a client-side image map and “clickable image.”

XP

Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 106