1 new perspectives on creating web pages with html tutorial 3: designing a web page working with...

1

New Perspectives on Creating Web Pages with HTML

Tutorial 3: Designing a Web Page

Working with Fonts, Colors, and Graphics

2

Tutorial Objectives Learn how HTML handles color Create a color scheme for a Web page Work with font sizes, colors, and types Place a background image on a Web

page Define colors for a Web page and for

specific characters

3

Tutorial Objectives Continued Learn about different image

formats Control the placement and

appearance of images on a Web page

Work with client-side image maps

4

Working with Color in HTML Using color will make your web pages:

visually interesting eye-catching for the reader

HTML is a text-based language, requiring you to define your colors in textual terms.

HTML identifies a color in one of two ways: by the color’s name by the color values

5

The 16 Basic Color NamesThis figure shows the 16 basic color names that are recognized by all versions of HTML.

6

Using Color Names Using the basic color names allows

you to accurately display them across different browsers and operating systems.

The list of only 16 colors is limiting to Web designers. in response, Netscape and Internet

Explorer began to support an extended list of color names

7

Partial List of Extended Color Names

This figure shows a partial list of these additional color names. The extended color name list allows you to create color schemes with greater color variation. A more

complete list is provided in Appendix A, “Extended Color Names.”

8

Using Color Values To have more control and more

choices, specify colors using color values.

A color value is a numerical expression that precisely describes a color.

9

Basic Principles of Color Theory Any color can be thought of as a

combination of three primary colors: red, green, and blue.

By varying the intensity of each primary color, you can create almost any color and any shade of color.

This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen.

10

Adding the Three Primary Colors

This figure shows the colors yellow, magenta, cyan, and white are produced by adding the three primary colors.

11

RGB (Red, Green, and Blue) Triplets

Software programs, such as your Web browser, define color mathematically.

The intensity of each of three colors (RGB) is assigned a number from 0 (absence of color) to 255 (highest intensity).

In this way, 2553, or more than 16.7 million, distinct colors can be defined.

Each color is represented by a triplet of numbers, called an RGB triplet, based on the strength of its Red, Green, and Blue components.

12

RGB Triplets Examples White has a triplet of (255,255,255),

indicating that red, green, and blue are equally mixed at the highest intensity.

Yellow has the triplet (255,255,0) because it is an equal mixture of red and green with no presence of blue.

13

A Typical Colors Dialog Box

In most programs, you make your color choices with visual clues, usually without being aware of the underlying RGB triplet.

This figure shows a typical dialog box in which you would make color selections based on the appearance of the color, rather than on the RGB values.

14

Hexadecimal Values HTML requires color values be entered as hexadecimals. A hexadecimal is a number based on base-16

mathematics rather than base-10 mathematics that we use every day.

in base 10 counting, you use combination of 10 characters (0 through 9) to represent numerical values.

hexadecimals include six extra characters: A (for 10), B (for 11), C (for 12), D (for 13), E (for 14), and F (for 15).

for values above 15, you use a combination of the 16 characters; 16 is expressed as “10”, 17 is expressed as “11”, and so forth.

Because of the popularity of the Web, most graphics programs will now display the hexadecimal value of the colors in their color selection dialog boxes.

15

Hexadecimal Values Continued To represent a number in hexadecimal terms, you

convert the value to multiples of 16 plus a remainder. For example: 21 is equal to (16 x 1) + 5, so its hexadecimal

representation is 15. the number 255 is equal to (16 x 15) + 15, or FF in

hexadecimal format (remember that F = 15 in hexadecimal).

in the case of the number 255, the first F represents the number of times 16 goes into 255 (which is 15), and the second F represents the remainder of 15.

Once you know the RGB triplet of a color, the color needs to be converted to the hexadecimal format.

16

Color Names, RGB Triplets, and Hexadecimal Values

The color yellow has the RGB triplet (255,255,0) and is represented by the hexadecimal string FFFF00. This figure shows the RGB triplets and

hexadecimal equivalents for the 16 basic color names presented earlier.

17

Color Selection Resources Available on the Web

This figure shows color selection resources available on the Web.

However you decide to work with color in your Web pages, it’s important to understand how HTML handles color, if for no other reason than to be able to

interpret the HTML source code of the pages you explore on the Web.

Title URL

ColorMix http://www.colormix.com/

Palette Man http://www.paletteman.com/

Two4U’s Color Page http://www.two4u.com/color/

ZSPC Super Color Chart http://www.zspc.com/color/index-e.html

18

HTML Code for using Color in a Web Page

In most cases, the default browser scheme involves: black text on a white or gray background hypertext links highlighted in purple and blue

To use different colors than these, modify the attributes of the page, defined within the <body> tag.

The <body> tag can be used to indicate the colors on a Web page.

The syntax for controlling a page’s color scheme through the <body> tag is: <body bgcolor=“color” text=“color” link=“color” vlink=“color” alink=“color”>

19

bgcolor attribute sets the background color the value of color will be either one of the accepted color

names or the color’s hexadecimal value if you use the hexadecimal value, you must preface the

hexadecimal string with the pound symbol (#) and enclose the string in double or single quotation marks i.e. <body bgcolor=“#FFC088”>

text attribute controls text color link attribute defines the color of hypertext links vlink attribute defines the color of links that have

been visited by the user alink attribute determines the color of an active

hyperlink (the color of the link as it is clicked by the user)

HTML Code for using Color in a Web Page Continued

20

HTML Code for using Color in a Web Page Continued

background color

text color

hyperlink color

previously followed hyperlink color

active hyperlink color

21

The Page with the New Color Scheme

The Arcadium Web page now has dark blue text on a light blue background.

Hypertext links are red and dark blue.

By adding the color scheme to the <body> tag of the HTML file, you’ve superseded the browser’s default color scheme with one of your own.

22

Modifying Text Specifying the text color in the <body>

tag of a Web page changes the color of all the text on the Web page.

Occasionally, you may want to change the color of individual words or characters.

Changing the color of text is an effective way to make specific sections of text stand out.

23

Using the Tag The tag allows you to specify the

color, the size, and the font to be used for text on a Web page.

The syntax for the tag is: text 

size attribute allows you to specify the font size of the text

color attribute allows you to change the color of individual characters or words

face attribute specifies a particular font for a section of text

24

Examples of Different Font Sizes

This figure shows a representation of the various font sizes for a typical browser.

25

Examples of Heading Tagsand Font Sizes

This figure shows a complete comparison of header tags and font sizes.

26

Changing the Font Color The color attribute of the tag allows you

to change the color of individual characters or words.

Specify the color in the tag by using either a color name or color value. for example, to change the color of the word

“Aracadium” to the hexadecimal color value 8000C0, you would enter the following HTML tag: Arcadium

If there is no color specified in the <body> tag, the default colors of the Web browser is used.

27

Changing the Font Face The face attribute is used to specify a particular

font for a section of text. The face attribute overrides the browser’s font

choice. You must specify a font that is installed on the

user’s computer or use one of the following five generic font names: serif sans-serif monospace cursive fantasy

28

Examples of Generic FontsThis figure shows some of the possible ways each of these generic fonts could be displayed.

29

Fonts and Browsers The face attribute allows you to specify a list of

potential font names. the browser tries to use the first font in the list;

if it fails, it will try the second font, and so on. A generic font name should be listed last for

the browser to fall back on. for example to display the word “Arcadium” in

a sans-serif, enter the following HTML tag: Arcadium

30

Applying a Sans-Serif Font to a Section of Text

text will appear in a sans-serif font

This figure shows an example of applying a sans-serif font to a section of text.

31

Example of Headings in a Sans-Serif Font

32

Using the Tag to Specify Color

The tag gives you significant control over the appearance of individual blocks of text.

33

Using the Tag to Create Spot Color

text will appear in red

subtitle appears in red

34

Inserting a Background Image The background attribute allows an image

file for the background of a Web page. The syntax for inserting a background

image is: <body background=“URL”>. URL is the location and filename of the

graphic file you want to use for the background of the Web page.

for example, to use an image named “bricks.gif” as a background image, you would use the tag: <body background=“brick.gif”>

35

The Process of Tiling the Background Image

This figure shows that when a browser retrieves your image file, it repeatedly inserts the image into the background, in a process called tiling, until the entire display window is filled up.

36

Background Image In choosing a background image, you

should remember the following: use an image that will not detract from the

text on the Web page, making it hard to read do not use a large image file (more than 20

kilobytes) large and complicated backgrounds will increase the

time it takes a page to load be sure to take into consideration how an

image file looks when it is tiled in the background

37

Web Page Backgrounds

Background overwhelms the foreground text

Background shows distracting seams between image tiles

Background doesn’t overwhelm the foreground text and seams are not evident

This figure shows some examples of well-designed and poorly designed Web page backgrounds.

38

Source of Web Backgrounds

There are many collections of background images available on the Web. The only restriction is that you cannot sell or distribute the images in a commercial product.

This figure shows a list of some of these collections.

http://www.ip.pt/webground/WebGround

http://www.nepthys.com/textures/Texture Station

http://www.free-backgrounds.com/Free Backgrounds

http://www.grsites.com/textures/Absolute Backgrounds Textures Archive

URLTitle

39

Entering Clouds.jpg as the Background

setting the image file for the page’s background

Finding the right background image is a process of trial and error.

You won’t know for certain whether a background image works well until you actually view it in a browser.

40

Results of the Web Pagewith the Clouds.jpg Background

41

Extensions to the and <body> Tags

Both Netscape and Internet Explorer support some attributes for the and <body> tags.

Netscape supports the following two extension to the tag: size is the point size of the font boldness is a measure of the weight or boldness

of the font for example, to display text in a 12 point font with a

weight of 700, the following tag would be used:

42

Extensions to the and <body> Tags Continued

Internet Explorer does not support any extensions for the tag.

Internet Explorer does support the following additional attributes of the <body> tag: <body bgproperties=“properties” bottommargin=“value” leftmargin=“value” rightmargin=“value” topmargin=“value”> bgproperties attribute is used whether the

background image can scroll along with the page the bottommargin, leftmargin, rightmargin,

and topmargin attributes specify the size of the margin

43

Deprecated Tags The tag and the attributes of the <body> 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.

44

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.

45

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.

46

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

47

Interlaced and Noninterlaced GIFs Continued

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.

48

Noninterlaced GraphicThis 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

49

Interlaced GraphicThis 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

50

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.

51

A Transparent Image FileThis figure shows a transparent image file.

the green background will be transparent

when displayed in the browser

logo background is transparent in the

browser

52

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.

53

Animated GIF ProgramsThis figure shows a list of programs available on the Web that you can

use to create your own animated GIFs.

54

Animated GIF CollectionsIf 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.

55

Animated GIFs Continued 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.

56

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.

57

BMP, XPM, and XBMImages 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.

58

Working with JPEG Files 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.

59

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.

60

The Effects of Compression onJPEG File Size and Quality

minimal compression: file size = 84.3 KB

medium compression: file size = 14.2 KB

moderate compression: file size = 20.7 KB

heavy compression: file size = 8.6 KB

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.

61

An Inline ImageIf 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.

62

Controlling Image Placement and Size

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

63

Controlling Image Alignment The align attribute can control the

alignment of an image with the <img> tag.

The syntax for the align attribute is: <img src=“URL” align=“alignment”> URL is the location and filename of the

graphic file alignment indicates how you want the

graphic aligned in relation to the surrounding text

64

Alignment OptionsThis figure describes the possible values of the align attribute.

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.

top

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.

texttop

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

Aligns the middle of the object with the surrounding text.middle

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

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.

bottom

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

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.

absmiddle

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.

absbottom

Descriptionalign=

65

Effects of the Align Attribute

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

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

align = “left” align = “right”

66

Controlling Vertical and Horizontal Space

To increase the horizontal and vertical space around an image use the hspace and vspace attributes.

The syntax is: <img src=“URL” vspace=“value” hspace=“value”> 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

67

Using the hspace and vspace Attributes

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

68

Controlling Image Size Another set of attributes for the <img> 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: <img src=“URL” height=“value” width=“value”> value is the height and width of the image either in

pixels or as a percentage of the page’s height and width

69

Controlling Image Size Continued

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 <img> 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.

70

Using the alt Attribute The alt attribute specifies text to

display in place of an inline image. The syntax for specifying alternate text

is: <img src=“URL” alt=“alternate text”>

71

Specifying Alternative Text for an Inline Image

specifying alternative text for

an inline image

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.

72

General Tips for Workingwith Color and Images

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.

73

Reduce the Size of Web Pages 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

74

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

75

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.

76

Image DitheringThis figure shows dithered images can sometimes appear grainy.

77

Creating Image Maps in HTML When designing a Web page, you

may want to create an image that links to other Web pages.

78

An Example of a Image Map

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.

79

Understanding Image Maps 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.

80

Linking an Image to Different Web Pages

This figure shows how links will work.

rides.htm water.htm

karts.htm

81

Server-Side Image Maps 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.

82

Server-Side Image MapsWhen 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.

83

Client-Side Image Maps 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.

84

Defining a Client-Side Image Map Create the <map> tag that defines the different hotspots on

the image as follows:<map name=“mapname”><area shape=“shape” coords=“coordinates” href=“URL” target=“window”>

. . .</map> mapname is the name you give the image map shape is the type of hotspot (rectangle, circle, or

polygon) coordinates are the locations of points that define the

shape URL is the location of the linked page window is the name of a secondary browser window

85

Defining a Client-Side Image Map Continued

If you want to open the linked page in a different window. You can have multiple <area> tags within each <map> tag, enabling you to have several hotspots for each image map.

Once the image map is created, add the usemap attribute to the <img> tag for the inline image, as follows:<img src=“URL” usemap=“#mapname”> mapname is the name you give the image

map defined in the <map> tag

86

Programs for Creating Image Maps

Title URL

CompuPic Pro http://www.photodex.com/products/pro/

Image Mapper http://www.coffeecup.com/mapper/

LiveImage http://www.mediatec.com/

MapEdit http://www.boutell.com/mapedit/

Visual Imagemapper

http://www.sofasitters.net/imagemap/

This figure lists programs available for creating image maps.

87

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.

88

Using the Tagand 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

89

Inserting an Image with the Tag

the tag creates a line

break

90

Defining Image Map Hotspots 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.

91

Defining Image MapHotspots Continued

Within the <map> tag, enter the code for the type of hotspot(s) and the coordinates.

The syntax for a rectangular hotspot is:<area shape=“rect” coords=“x_left, y_upper, x_right, y_lower” href=“URL” target=“window”>

x_left, y_upper are the coordinates of the upper-left corner of the rectangle

x_right, y_lower are the coordinates of the lower-right corner

92

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

93

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

94

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

95

Programs for Creating Image Maps

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

96

Creating a Rectangular Hotspot Two points define a rectangular hotspot:

the upper-left corner the lower-right corner

A sample code for a rectangular hotspot is:<area shape=“rect” coords=“384,61,499,271” href=“water.htm”>

coordinates are entered as a series of four numbers separated by commas

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

97

Creating a Circular Hotspot A circular hotspot is defined by the

location of its center and its radius. A sample code for a circular hotspot is:

<area shape=“circle” coords=“307,137,66” href=“karts.htm”>

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

the hotspot is a hypertext link to karts.htm

98

Creating a Polygonal Hotspot

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

A sample code for a polygonal hotspot is:<area shape=“polygon” coords=“13,60,13,270,370,270,370,225,230,225,230,60” href=“rides.htm”>

coordinates are for each vertex in the shape. the hotspot is a hypertext link to rides.htm

99

An Example of a Polygonal Hotspot

roller coaster rides

(13 , 60)

(13 , 270) (370 , 270)

(370 , 225)(230 , 225)

(230 , 60)

100

An Example of thePolygonal Hotspot Code

image map name

polygonal hotspot

circular hotspot

rectangular hotspot

101

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: <img src=“URL” usemap=“#mapname”> mapname is the name assigned to the

name attribute in the <map> tag

102

Image Map and Hotspots

name of image to use

properties of image

map

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

103

Image Map and Hotspots Continued

pointer changes to a hand as it

passes over a hot spot

104

Using the border Attribute The border attribute specifies the size of

the border surrounding an inline image. The syntax for setting the border width is: <img src=“URL” border=“value”> 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.

105

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.

106

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.”