Transcript color value

Tutorial 3
Working with Fonts, Colors, and Graphics
1
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
Learn about different image formats
Control the placement and appearance of images on a
Web page
Work with client-side image maps
2
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
3
The 16 Basic Color Names
This figure shows the 16 basic color names that are recognized by all versions of HTML.
4
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
5
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.”
6
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.
7
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.
8
Adding the Three Primary Colors
This figure shows the colors yellow, magenta, cyan, and white
are produced by adding the three primary colors.
9
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.
10
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.
11
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.
12
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.
13
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.
14
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.
15
Color Selection Resources
Available on the Web
This figure shows color selection resources available 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
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.
16
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”>
17
HTML Code for using
Color in a Web Page Continued

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)
18
HTML Code for using
Color in a Web Page Continued
active hyperlink color
text color
background color
previously followed hyperlink color
hyperlink color
19
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.
20
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.
21
Using the <font> Tag


The <font> 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 <font> tag is:
<font size=“size” color=“color” face=“face”>
text </font>



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
22
Examples of Different Font Sizes
This figure shows a representation of the various font sizes for a typical browser.
23
Examples of Heading Tags
and Font Sizes
This figure shows a complete comparison of header tags and font sizes.
24
Changing the Font Color


The color attribute of the <font> tag allows you to
change the color of individual characters or words.
Specify the color in the <font> 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: <font
color=“#8000C0”> Arcadium</font>
If there is no color specified in the <body> tag,
the default colors of the Web browser is used.
25
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
26
Examples of Generic Fonts
This figure shows some of the possible ways each of these generic fonts could be displayed.
27
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 sansserif, enter the following HTML tag: <font
face=“Arial, Helvetica, sans-serif”>
Arcadium</font>
28
Applying a Sans-Serif Font to a
Section of Text
This figure shows an example of applying a sans-serif font to a section of text.
text will appear in a
sans-serif font
29
Example of Headings
in a Sans-Serif Font
30
Using the <font> Tag
to Specify Color

The <font> tag gives you significant control
over the appearance of individual blocks of text.
31
Using the <font> Tag
to Create Spot Color
text will
appear in red
subtitle
appears in red
32
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”>
33
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.
34
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
35
Web Page Backgrounds
This figure shows
some examples of
well-designed and
poorly designed 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
36
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.
Title
URL
Absolute Backgrounds
Textures Archive
http://www.grsites.com/textures/
Free Backgrounds
http://www.free-backgrounds.com/
Texture Station
http://www.nepthys.com/textures/
WebGround
http://www.ip.pt/webground/
37
Entering Clouds.jpg
as the Background
Finding the right
background image is
a process of trial and
error.
setting the image file
for the page’s
background
You won’t know for
certain whether a
background image
works well until you
actually view it in a
browser.
38
Results of the Web Page
with the Clouds.jpg Background
39
Extensions to the
<font> and <body> Tags


Both Netscape and Internet Explorer support some
attributes for the <font> and <body> tags.
Netscape supports the following two extension to the
<font> tag:
<font point-size=“size” weight=“boldness”>
 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 <font> tag would be used:
<font point-size=“12” weight=“700”>
40
Extensions to the <font>
and <body> Tags Continued


Internet Explorer does not support any extensions for
the <font> 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
41
Deprecated Tags

The <font> 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.
42
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.
43
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.
44
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
45
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.
46
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
47
Interlaced Graphic
This figure shows the
effect of interlacing,
a rough image
which is when the
appears first
graphic starts out as a
blurry representation of
the final image, then
image starts
gradually comes into
to show more
focus-unlike the
detail
noninterlaced graphic,
which is always a sharp
final image is
image as it’s being
crisp and
retrieved, although an
detailed
incomplete one.
48
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.
49
A 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
50
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.
51
Animated GIF Programs
This figure shows a list of programs available on the Web that you can
use to create your own animated GIFs.
52
Animated 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.
53
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.
54
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.
55
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.
56
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.
57
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.
58
The Effects of Compression on
JPEG File Size and Quality
This figure shows
the effect of
compression on a
JPEG file.
The increased
compression cuts
the file size to onetenth 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
heavy compression: file size = 8.6 KB
59
An 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.
60
Controlling Image Placement and
Size

When designing a Web page, you may want to
control the image placement and size.
61
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
62
Alignment Options
This figure describes the possible values of the align attribute.
align=
Description
absbottom
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.
baseline
Aligns the bottom of the object with the baseline of the surrounding text.
bottom
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.
left
Aligns the object to the left of the surrounding text. All preceding and subsequent text flows to the right of the
object.
middle
Aligns the middle of the object with the surrounding text.
right
Aligns the object to the right of the surrounding text. All subsequent text flows to the left of the object.
texttop
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.
top
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.
63
Effects of the Align Attribute
This figure shows the effect of each alignment options on text surrounding the image.
align = “middle”
align = “bottom”
align = “left”
align = “top”
align = “right”
64
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
65
Using the hspace
and vspace Attributes
set the horizontal space
around the graphic to 15
pixels and the vertical
space to 5 pixels
66
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
67
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.
68
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”>
69
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.
specifying
alternative text for
an inline image
70
General Tips for Working
with 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.
71
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
72
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
73
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.
74
Image Dithering
This figure shows dithered images can sometimes appear grainy.
75
Creating Image Maps in HTML

When designing a Web page, you may want to
create an image that links to other Web pages.
76
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.
77
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.
78
Linking an Image to
Different Web Pages
This figure shows how links will work.
karts.htm
rides.htm
water.htm
79
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.
80
Server-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.
81
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.
82
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
83
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
84
Programs for Creating Image Maps
This figure lists programs available 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/
85
Creating Image Maps in HTML

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.
86
Using the <br> Tag and clear
Attribute



Use the <br> 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 <br> 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 <br clear=“left”> starts the next line
when the left page margin is clear
87
Inserting an Image with the <br>
Tag
the <br> tag
creates a line
break
88
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.
89
Defining Image Map
Hotspots 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 upperleft corner of the rectangle
x_right, y_lower are the coordinates of the
lower-right corner
90
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
91
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
92
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
93
Programs for Creating Image Maps
This figure shows several programs available for determining
the image map coordinates.
94
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
95
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
96
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
97
An Example of a Polygonal Hotspot
(13 , 60)
(230 , 60)
roller coaster rides
(230 , 225)
(370 , 225)
(13 , 270)
(370 , 270)
98
An Example of the
Polygonal Hotspot Code
image map
name
polygonal
hotspot
circular
hotspot
rectangular
hotspot
99
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
100
Image Map and Hotspots
This figure shows an example of an image map and hotspots.
name of
image to use
properties
of image
map
101
Image Map and Hotspots Continued
pointer changes
to a hand as it
passes over a hot
spot
102
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.
103
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.
104
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.”
105