XP
New Perspectives on Creating Web Pages
with HTML
Tutorial 3: Designing a Web Page
Working with Fonts, Colors, and Graphics
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
1
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
2
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
3
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
4
XP
The 16 Basic Color Names
This figure shows the 16 basic color names that are recognized by all versions of HTML.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
5
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
6
XP
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.”
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
7
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
8
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
9
XP
Adding the Three Primary Colors
This figure shows the colors yellow, magenta, cyan, and white
are produced by adding the three primary colors.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
10
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
11
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
12
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
13
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
14
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
15
Color Names, RGB Triplets, andXP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
16
Color Selection Resources
Available on the Web
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
17
HTML Code for using
Color in a Web Page
XP
• 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”>
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
18
XP
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)
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
19
XP
HTML Code for using
Color in a Web Page Continued
active hyperlink color
text color
background color
previously followed hyperlink color
hyperlink color
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
20
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
21
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
22
Using the <font> Tag
XP
• 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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
23
XP
Examples of Different Font Sizes
This figure shows a representation of the various font sizes for a typical browser.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
24
Examples of Heading Tags
and Font Sizes
XP
This figure shows a complete comparison of header tags and font sizes.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
25
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
26
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
27
XP
Examples of Generic Fonts
This figure shows some of the possible ways each of these generic fonts could be displayed.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
28
XP
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: <font face=“Arial,
Helvetica, sans-serif”> Arcadium</font>
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
29
Applying a Sans-Serif Font to a XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
30
Example of Headings
in a Sans-Serif Font
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
XP
31
Using the <font> Tag
to Specify Color
XP
• The <font> tag gives you significant control
over the appearance of individual blocks of text.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
32
Using the <font> Tag
to Create Spot Color
XP
text will
appear in red
subtitle
appears in red
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
33
XP
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”>
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
34
The Process of Tiling
the Background Image
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
35
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
36
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
37
XP
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/
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
38
Entering Clouds.jpg
as the Background
Finding the right
background image is
a process of trial and
error.
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
39
XP
Results of the Web Page
with the Clouds.jpg Background
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
40
Extensions to the
<font> and <body> Tags
XP
• 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 pointsize=“12” weight=“700”>
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
41
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
42
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
43
XP
Images
• The two image file formats supported by most Web
browsers are GIF and JPEG.
• Choosing the appropriate image format is an important part
of Web page design.
• Balance the goal of creating an interesting and attractive
page against the need to keep the size of your page small
and easy to receive.
• Each file format has its advantages and disadvantages, and
you will probably use a combination of both formats in
your Web page designs.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
44
XP
Working with GIF Files
• GIF (Graphics Interchange Format) is the most
commonly used image format on the Web.
• Compatible with virtually all browsers.
• GIF files are limited to displaying 256 colors.
• Often used for graphics requiring fewer colors,
such as clip art images, line art, logos, and icons.
• Images that require more color depth, such as
photographs, can appear grainy when saved as
GIF files.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
45
XP
Interlaced and Noninterlaced GIFs
• Interlacing refers to the way the GIF is saved by the
graphics software.
• Normally, with a noninterlaced GIF the image is saved
one line at a time, starting from the top of the graphic and
moving downward.
• With interlaced GIFs, the image is saved and retrieved
“stepwise.”
– for example, every fifth line of the image might appear first,
followed by every sixth line, and so forth through the remaining
rows
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
46
Interlaced and
Noninterlaced GIFs Continued
XP
• Interlacing is an effective format if you have a
large graphic and want to give users a preview of
the final image as it loads.
• Interlacing can increase the size of a GIF file by
anywhere from 3 to 20 kilobytes, depending on
the image.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
47
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
48
XP
Interlaced Graphic
This figure shows the
effect of interlacing,
which is when the
graphic starts out as a
blurry representation of
the final image, then
gradually comes into
focus-unlike the
noninterlaced graphic,
which is always a sharp
image as it’s being
retrieved, although an
incomplete one.
a rough image
appears first
image starts
to show more
detail
final image is
crisp and
detailed
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
49
XP
Transparent GIFs
• A transparent color is a color from the image that is
not displayed when the image is viewed in an
application.
• In place of a transparent color, the browser will
display whatever is on the page background.
• Creating a transparent color depends on the graphic
software used.
• Many applications include the option to designate
transparent color when saving the image i.e.
PhotoShop.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
50
XP
A Transparent Image File
This figure shows a transparent image file.
the green background
will be transparent
when displayed in the
browser
logo background is
transparent in the
browser
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
51
XP
Animated GIFs
• One of the most popular uses of GIFs is to create
animated images.
• Animated GIFs are easy to create and smaller in size.
• An animated GIF is composed of several images that
are displayed one after the other in rapid succession.
• Animated GIFs are an effective way to compose slide
shows or to simulate motion.
• The newer standard includes enhancements such as
interlacing, transparent colors, and animation.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
52
XP
Animated GIF Programs
This figure shows a list of programs available on the Web that you can
use to create your own animated GIFs.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
53
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
54
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
55
XP
Portable Network Graphics (PNG)
• A new file format called PNG (Portable Network
Graphics) has been created.
• PNG files use a free and open file format and can
display more colors than GIFs.
• PNGs cannot be used for animated graphics.
• PNGs do allow transparent colors, but not all browsers
support this feature.
• The PNG format may eventually replace GIFs,
however GIFs are still the preferred standard.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
56
BMP, XPM, and XBM
Images and Browsers
XP
• 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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
57
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
58
XP
Working with JPEG Files Continued
• You cannot use transparent colors or animation
with JPEG files.
• A JPEG format called progressive JPEG does
now allow JPEG files to be interlaced.
• Not all design applications and Web browsers
support progressive JPEGs.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
59
The Effects of Compression on
JPEG File Size and Quality
XP
This figure shows
the effect of
compression on a
JPEG file.
The increased
compression cuts
the file size to 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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
60
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
61
XP
Controlling Image Placement and Size
• When designing a Web page, you may want to
control the image placement and size.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
62
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
63
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
64
Effects of the Align Attribute
XP
This figure shows the effect of each alignment options on text surrounding the image.
align = “middle”
align = “bottom”
align = “left”
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
align = “top”
align = “right”
65
Controlling Vertical
and Horizontal Space
XP
• 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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
66
Using the hspace
and vspace Attributes
XP
set the horizontal space
around the graphic to 15
pixels and the vertical
space to 5 pixels
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
67
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
68
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
69
Using the alt Attribute
XP
• The alt attribute specifies text to display in place of an
inline image.
• The syntax for specifying alternate text is: <img
src=“URL” alt=“alternate text”>
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
70
Specifying Alternative Text
for an Inline Image
XP
Alternate image text is important because it allows users who have nongraphical
browsers to know the content of your graphics. Alternate image text also appears as a
placeholder for the graphic while the page is loading. This can be particularly
important for users accessing your page through a slow dial up connection.
specifying
alternative text for
an inline image
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
71
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
72
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
73
XP
Manage Your Colors
• Color can add a lot to a Web page, it can also
detract from it.
• Make sure to have enough contrast between the
text and background.
– do not place dark text on a dark background
– do not place light text on a light background
• Color is handled differently on different browsers
– test Web pages on different browsers and monitors
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
74
XP
Dithering
• Dithering is when the colors in an image are converted to a
fixed palette.
• To completely eliminate dithering, use the Safety Palette.
– the Safety Palette, also referred to as the browser-safe palette,
web palette, or 216 color palette, is a collection of 216 colors that
display consistently on different browsers and operating systems.
• Using the Safety Palette, images will appear the same to all
users regardless of the browser being used.
• Given the growth of 24-bit (millions of colors) color systems,
this is rapidly becoming less of an issue.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
75
XP
Image Dithering
This figure shows dithered images can sometimes appear grainy.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
76
XP
Creating Image Maps in HTML
• When designing a Web page, you may want to
create an image that links to other Web pages.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
77
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
78
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
79
Linking an Image to
Different Web Pages
XP
This figure shows how links will work.
karts.htm
water.htm
rides.htm
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
80
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
81
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
82
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
83
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
84
Defining a Client-Side
Image Map Continued
XP
• 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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
85
XP
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/
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
86
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
87
Using the <br> Tag
and clear Attribute
XP
• 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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
88
XP
Inserting an Image with the <br> Tag
the <br> tag
creates a line
break
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
89
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
90
XP
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 upper-left
corner of the rectangle
– x_right, y_lower are the coordinates of the lower-right
corner
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
91
The shape Attribute
XP
• 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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
92
The coords Attribute
XP
• 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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
93
The href Attribute
XP
• 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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
94
XP
Programs for Creating Image Maps
This figure shows several programs available for determining
the image map coordinates.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
95
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
96
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
97
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
98
XP
An Example of a Polygonal Hotspot
(13 , 60)
(230 , 60)
roller coaster rides
(230 , 225)
(370 , 225)
(370 , 270)
(13 , 270)
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
99
An Example of the
Polygonal Hotspot Code
XP
image map
name
polygonal
hotspot
circular
hotspot
rectangular
hotspot
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
100
XP
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
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
101
XP
Image Map and Hotspots
This figure shows an example of an image map and hotspots.
name of
image to use
properties
of image
map
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
102
XP
Image Map and Hotspots Continued
pointer changes
to a hand as it
passes over a hot
spot
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
103
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
104
XP
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.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
105
XP
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.”
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 3
106