XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 1 New Perspectives on...

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

1

XP

New Perspectives on Creating Web Pages with HTML

Tutorial 3: Designing a Web Page

Working with Fonts, Colors, and Graphics


2

XPTutorial 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

XPTutorial 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

XPWorking 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

XPThe 16 Basic Color Names

This figure shows the 16 basic color names that are recognized by all versions of HTML.


6

XPUsing 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

XPPartial 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

XPUsing 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

XPBasic 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

XPAdding the Three Primary Colors

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


11

XPRGB (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

XPRGB 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

XPA 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

XPHexadecimal 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

XPHexadecimal 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

XPColor 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

XPColor 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

XPHTML 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

XP

– 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

XPHTML Code for using Color in a Web Page Continued

background color

text color

hyperlink color

previously followed hyperlink color

active hyperlink color

21

XPThe 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

XPModifying 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

XPUsing 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

XPExamples of Different Font Sizes

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


25

XPExamples of Heading Tagsand Font Sizes

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

26

XPChanging 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

XPChanging 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

XPExamples of Generic Fonts

This figure shows some of the possible ways each of these generic fonts could be displayed.

29

XPFonts 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

XPApplying 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

XPExample of Headings in a Sans-Serif Font

32

XPUsing the Tag to Specify Color

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

33

XPUsing the Tag to Create Spot Color

text will appear in red

subtitle appears in red

34

XPInserting 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

XPThe 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

XPBackground 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

XPWeb 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

XPSource 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

XPEntering 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

XPResults of the Web Pagewith the Clouds.jpg Background

41

XPExtensions 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

XPExtensions 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

XPDeprecated 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

XPImages

• 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

XPWorking 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

XPInterlaced 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

XPInterlaced 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

XPNoninterlaced 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


49

XPInterlaced 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


50

XPTransparent 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

XPA Transparent Image File

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


52

XPAnimated 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

XPAnimated GIF Programs

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


54

XPAnimated GIF Collections

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.


55

XPAnimated 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

XPPortable 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

XPBMP, 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

XPWorking 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

XPWorking 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

XPThe 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

XPAn Inline Image

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.


62

XPControlling Image Placement and Size

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

63

XPControlling 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

XPAlignment Options

This 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

XPEffects 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

XPControlling 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

XPUsing the hspace and vspace Attributes

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

68

XPControlling 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

XPControlling 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

XPUsing 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

XPSpecifying 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

XPGeneral 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

XPReduce 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

XPManage 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

XPDithering

• 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

XPImage Dithering

This figure shows dithered images can sometimes appear grainy.


77

XPCreating Image Maps in HTML

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


78

XPAn 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

XPUnderstanding 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

XPLinking an Image to Different Web Pages

This figure shows how links will work.

rides.htm water.htm

karts.htm


81

XPServer-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

XPServer-Side Image Maps

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.


83

XPClient-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

XPDefining 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

XPDefining 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

XPPrograms 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

XPCreating 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

XPUsing 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

XPInserting an Image with the Tag

the tag creates a line

break


90

XPDefining 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

XPDefining 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

XPThe 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

XPThe 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

XPThe 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

XPPrograms for Creating Image Maps

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

96

XPCreating 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

XPCreating 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

XPCreating 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

XPAn Example of a Polygonal Hotspot

roller coaster rides

(13 , 60)

(13 , 270) (370 , 270)

(370 , 225)(230 , 225)

(230 , 60)


100

XPAn Example of thePolygonal Hotspot Code

image map name

polygonal hotspot

circular hotspot

rectangular hotspot

101

XPThe 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

XPImage Map and Hotspots

name of image to use

properties of image

map

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


103

XPImage Map and Hotspots Continued

pointer changes to a hand as it

passes over a hot spot

104

XPUsing 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

XPSummary

• 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

XPSummary

• 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 1 New Perspectives on...

Documents

Transcript of XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3 1 New Perspectives on...