Designing a Web PageDesigning a Web Page

Maureen SmithMaureen SmithProfessor, Saddleback CollegeProfessor, Saddleback CollegeTutorial 3Tutorial 3

Lesson PlanLesson Plan ReviewReview Tutorial 3 - Designing a Web PageTutorial 3 - Designing a Web Page

• Session 3.1Session 3.1• Session 3.2Session 3.2• Session 3.3Session 3.3

ReviewReview

ObjectivesObjectives Learn how HTML handles colors Learn how HTML handles colors

and how to use colors effectivelyand how to use colors effectively Create foreground and background Create foreground and background

colors using stylescolors using styles Select different font styles and Select different font styles and

designs using stylesdesigns using styles Align text with surrounding content Align text with surrounding content

using stylesusing styles

Control spacing between letters, Control spacing between letters, words, and lines using styleswords, and lines using styles

Learn about the different graphic Learn about the different graphic formats supported on the Web and formats supported on the Web and how to use them effectivelyhow to use them effectively

Understand how to use transparent Understand how to use transparent images and animated graphicsimages and animated graphics

Apply a background image to an Apply a background image to an elementelement

Float an image on the right or left page Float an image on the right or left page marginmargin

Set the margin size around an elementSet the margin size around an element Understand image maps and how to Understand image maps and how to

use themuse them Create image map hotspots and link Create image map hotspots and link

them to destination documentsthem to destination documents

Apply an image map to an inline Apply an image map to an inline imageimage

Remove the border from a linked Remove the border from a linked imageimage

Session 3.1Session 3.1 In this session you will create In this session you will create

pages with color and a variety of pages with color and a variety of images, along with animationimages, along with animation

Working with color in Working with color in HTMLHTML You are going to create a page for an You are going to create a page for an

amusement parkamusement park• Six pagesSix pages• Index page contains an introduction and Index page contains an introduction and

acts as a acts as a splash screensplash screen, displaying park , displaying park logo and an animation, but no real logo and an animation, but no real contentcontent

• Links to the About page—info about parkLinks to the About page—info about park• Karts, Water, and Rides pages describe Karts, Water, and Rides pages describe

attractionsattractions

• Map page contains mapMap page contains map• All are linked to each other (except Index)All are linked to each other (except Index)• See Figure 3-1See Figure 3-1• See tutorial3/about.htmSee tutorial3/about.htm

Let’s add more color and use different Let’s add more color and use different fontsfonts• Add photos—all with intent to draw users Add photos—all with intent to draw users

into site and give a good impressioninto site and give a good impression Let’s create an overall color schemeLet’s create an overall color scheme

When working with color in graphics or When working with color in graphics or dtp programs, can select and identify dtp programs, can select and identify colors without much difficulty because colors without much difficulty because those packages have graphical interfacesthose packages have graphical interfaces• When working with color in HTML, however, When working with color in HTML, however,

have to create color schemes using text-have to create color schemes using text-based HTML tagsbased HTML tags

• Trying to describe a color in textual terms Trying to describe a color in textual terms can be a challengecan be a challenge

HTML identifies a color in one of HTML identifies a color in one of two ways:two ways:• By the color’s nameBy the color’s name• By the color valuesBy the color values• Advantages and disadvantages to Advantages and disadvantages to

bothboth

Using color valuesUsing color values A A color valuecolor value is a numerical is a numerical

expression that exactly describes a expression that exactly describes a color’s appearancecolor’s appearance• To understand how HTML uses numbers To understand how HTML uses numbers

to represent colors, must examine basic to represent colors, must examine basic principles of color theory and how they principles of color theory and how they relate to the colors your monitor relate to the colors your monitor displaysdisplays

In classical theory, any color is a In classical theory, any color is a combination of three primary colors:combination of three primary colors:

• RedRed• GreenGreen• BlueBlue

Figure 3-3Figure 3-3 shows the colors yellow, shows the colors yellow, magenta, cyan, and white that are magenta, cyan, and white that are produced by combining the three produced by combining the three primary colorsprimary colors• By varying intensity of each primary color, By varying intensity of each primary color,

can create any color and any shade of can create any color and any shade of color that you wantcolor that you want

• This principle allows your monitor to combine This principle allows your monitor to combine pixels of red, green, and blue light to create pixels of red, green, and blue light to create the array of colors you see on your screenthe array of colors you see on your screen

Software programs, such as your browser, Software programs, such as your browser, use a mathematical approach to define use a mathematical approach to define colorcolor• Intensity of each of the three primary colors is Intensity of each of the three primary colors is

assigned a number from 0 (absence of color) assigned a number from 0 (absence of color) to 255 (highest intensity)to 255 (highest intensity)

• In this way, more than 16.7 million distinct In this way, more than 16.7 million distinct colors can be definedcolors can be defined

Each color is represented by a triplet of Each color is represented by a triplet of numbers, called an numbers, called an RGB tripletRGB triplet, based , based on its Red, Green, and Blue on its Red, Green, and Blue componentscomponents• White is 255,255,255White is 255,255,255• Gray is 192,192,192Gray is 192,192,192• Yellow is 255,255,0 (no blue)Yellow is 255,255,0 (no blue)

• In most programs, you are not aware of In most programs, you are not aware of the underlying triplet when you make a the underlying triplet when you make a color choicecolor choice

It is these RGB triplets that you have It is these RGB triplets that you have to enter into your HTML code if you to enter into your HTML code if you want to express the exact want to express the exact appearance of a colorappearance of a color• HTML requires that these color values be HTML requires that these color values be

entered as entered as hexadecimalshexadecimals

• A A hexadecimalhexadecimal is a number that is is a number that is represented using 16 as a base rather represented using 16 as a base rather than 10than 10

Do you need to be a math wizard?Do you need to be a math wizard?• In practice, Web authors rely on In practice, Web authors rely on

several tools to generate hexadecimalsseveral tools to generate hexadecimals• Could also use a converter program Could also use a converter program

and look at the code generatedand look at the code generated

The number of colors the browser The number of colors the browser displays depends on monitordisplays depends on monitor• Some can only show 256 and these Some can only show 256 and these

computers are limited to a smaller computers are limited to a smaller palettepalette, , or selectionor selection

• When it encounters a color not in its When it encounters a color not in its palette, will attempt to render it using palette, will attempt to render it using ditheringdithering, in which the browser combines , in which the browser combines similar colors to approximate the original similar colors to approximate the original color’s appearancecolor’s appearance

• Dithering can result in a fuzzy image Dithering can result in a fuzzy image when compared to the originalwhen compared to the original

To avoid this, stick to colors from To avoid this, stick to colors from the the safety palettesafety palette—216 colors —216 colors known as known as Web-safe colorsWeb-safe colors• Guaranteed not to be ditheredGuaranteed not to be dithered• See demo page from data filesSee demo page from data files

Assured your images will appear Assured your images will appear the same to all regardless of the same to all regardless of monitor resolutionmonitor resolution• Most monitors now support higher Most monitors now support higher

color resolution, so the need for the color resolution, so the need for the safety palette is diminishingsafety palette is diminishing

Using color namesUsing color names There are 16 There are 16 color namescolor names recognized recognized

by all versions of HTML and XHTMLby all versions of HTML and XHTML• See Figure 3-7See Figure 3-7

The list is fairly basicThe list is fairly basic• As long as you keep to these simple As long as you keep to these simple

colors, you can rely solely upon these colors, you can rely solely upon these color names to set up color schemescolor names to set up color schemes

• Will be understood by all browsersWill be understood by all browsers

• Great advantage is that you can be sure Great advantage is that you can be sure the colors you specify will be the colors the colors you specify will be the colors viewers see on their computersviewers see on their computers

However, 16 colors is limitingHowever, 16 colors is limiting• So most browsers support an extension So most browsers support an extension

of an additional 140 color names to this of an additional 140 color names to this listlist

• Figure 3-8Figure 3-8 shows a partial list of shows a partial list of additional color namesadditional color names

• Gives greater color variationGives greater color variation

• Appendix A, “Extended Color Names,” Appendix A, “Extended Color Names,” is a fuller listis a fuller list

When you want more control and When you want more control and more choices, must use a color more choices, must use a color valuevalue

Defining Foreground and Defining Foreground and Background ColorsBackground Colors Can define foreground and Can define foreground and

background color for each elementbackground color for each element• Foreground is usually color of the text Foreground is usually color of the text

and part of a line’s colorand part of a line’s color• To define foreground color, use the To define foreground color, use the

style style color: colorcolor: color• To define background color, use the To define background color, use the

style style background-color: colorbackground-color: color

When you don’t define an element’s When you don’t define an element’s color, it takes the color of the element color, it takes the color of the element that contains itthat contains it• Red text, gray background—all elements Red text, gray background—all elements

inherit that color combination unless you inherit that color combination unless you specify different styles for specific specify different styles for specific elementselements

Let’s change text color on About page Let’s change text color on About page to a shade of brownto a shade of brown

• Will use a safe color value and will also Will use a safe color value and will also set background color of whiteset background color of white

• Most browsers assume a white Most browsers assume a white background, but good to make it explicitbackground, but good to make it explicit– This is an inline style added to the body This is an inline style added to the body

elementelement• See tutorial3/about1.htmSee tutorial3/about1.htm

Can apply fore/background colors to Can apply fore/background colors to any page elementany page element

Tom suggests “Welcome” might Tom suggests “Welcome” might look better in white on medium look better in white on medium brown backgroundbrown background• Also wants you to change color of the Also wants you to change color of the

horizontal line at bottom of page to horizontal line at bottom of page to match page’s new color schemematch page’s new color scheme

• See tutorial3/about2.htmSee tutorial3/about2.htm• Add inline style to h1 elementAdd inline style to h1 element

Deprecated approach to changing Deprecated approach to changing background and text color for background and text color for page:page:<body bgcolor=“yellow” <body bgcolor=“yellow”

text=“#99CCFF”>text=“#99CCFF”>• To color text in a section, can enclose To color text in a section, can enclose

text within a two-sided <font> tagtext within a two-sided <font> tag

How are you doing?

Working with Fonts and Working with Fonts and Text StylesText Styles Now Tom would like you to work Now Tom would like you to work

with the appearance of the textwith the appearance of the text• Right now is all in the same typefaceRight now is all in the same typeface• Let’s add varietyLet’s add variety Variety

VarietyVarietyVariety

Choosing a FontChoosing a Font Default is a single font, usually Default is a single font, usually

Times New RomanTimes New Roman• To change—use the styleTo change—use the stylefont-family: fontsfont-family: fonts• where fonts is a comma-separated list where fonts is a comma-separated list

of fonts that the browser can useof fonts that the browser can use• Font names are specific or genericFont names are specific or generic• A A specific fontspecific font is actually installed on is actually installed on

the user’s computerthe user’s computer

• A A generic fontgeneric font is a name for a general is a name for a general description of a font’s appearancedescription of a font’s appearance

• Browsers recognize 5 generic fonts: Browsers recognize 5 generic fonts: serif, sans-serif, monospace, cursive, serif, sans-serif, monospace, cursive, fantasyfantasy

• See Figure 3-12See Figure 3-12 Cannot be sure which font a given Cannot be sure which font a given

user’s browser will useuser’s browser will use• So you specify a list of fonts, in order of So you specify a list of fonts, in order of

preferencepreference

• If the browser cannot find any of the If the browser cannot find any of the specific fonts, it goes with the genericspecific fonts, it goes with the generic

font-family: Arial, Helvetica, sans-seriffont-family: Arial, Helvetica, sans-serif• See a demo page on text styles in your See a demo page on text styles in your

Data filesData files Not good practice to use more than 2 Not good practice to use more than 2

different font faces on a pagedifferent font faces on a page• Serif fonts are best for large blocks of Serif fonts are best for large blocks of

texttext

• Sans-serif for headings and subheadsSans-serif for headings and subheads• Let’s change font for h1 heading and Let’s change font for h1 heading and

list of links in the About pagelist of links in the About page• See tutorial3/about3.htmSee tutorial3/about3.htm

Can also use deprecated <font> Can also use deprecated <font> tagtag

Setting the Font SizeSetting the Font Size Tom feels the sizes of Welcome Tom feels the sizes of Welcome

heading and list are too largeheading and list are too large• Let’s reduce them using the styleLet’s reduce them using the stylefont-size: lengthfont-size: length• where length is a measurementwhere length is a measurement

– with a unit of measurementwith a unit of measurement– with a keyword descriptionwith a keyword description– as a percentage of the size of the as a percentage of the size of the

containing elementcontaining element

– with a keyword expressing the size with a keyword expressing the size relative to the size of the containing relative to the size of the containing elementelement

With measurement units, can use With measurement units, can use absolute units or relative unitsabsolute units or relative units• Absolute unitsAbsolute units define a font size using define a font size using

one of five units of measurement: one of five units of measurement: mm, cm, in, pt, and pcmm, cm, in, pt, and pc

• 72 points in an inch, 12 points in a 72 points in an inch, 12 points in a pica, 6 picas in an inchpica, 6 picas in an inch

• For text to be ½ inch, can use any of For text to be ½ inch, can use any of the following styles (no space the following styles (no space between value and unit abbreviation)between value and unit abbreviation)font-size: 0.5infont-size: 0.5infont-size: 36ptfont-size: 36ptfont-size: 3pcfont-size: 3pc

Most useful when you know Most useful when you know monitor size and resolutionmonitor size and resolution

To retain consistency, instead use To retain consistency, instead use relative unitsrelative units• Expresses font size relative to size of a Expresses font size relative to size of a

standard character on monitorstandard character on monitor• Two most common standards are “em” and Two most common standards are “em” and

“ex”“ex”• The “The “em unitem unit” is equal to the width of the ” is equal to the width of the

capital letter “M”capital letter “M”• ““ex unitex unit” is equal to height of lowercase “x”” is equal to height of lowercase “x”

Can use relative units to make Can use relative units to make page page scalablescalable• Allows page to be rendered same way Allows page to be rendered same way

no matter how monitor is configuredno matter how monitor is configured– Large monitor with default size of 18t; Large monitor with default size of 18t;

smaller monitor with default size of 12pt smaller monitor with default size of 12pt and you want heading to be about 50% and you want heading to be about 50% larger than body text for either userlarger than body text for either user

– Use 1.5emUse 1.5em

• Can achieve same effect by expressing Can achieve same effect by expressing font size as percentage of default font font size as percentage of default font sizesize

font-size: 150%font-size: 150% Final unit of measurement is the Final unit of measurement is the

pixelpixel, a single dot on screen, a single dot on screen• If no unit is specified, browser assumes If no unit is specified, browser assumes

value is expressed in pixelsvalue is expressed in pixels• Can use either:Can use either:

font-size: 20px orfont-size: 20px orfont-size: 20font-size: 20

Exact size of a pixel depends on output Exact size of a pixel depends on output devicedevice• Different resolutions are expressed in Different resolutions are expressed in

terms of terms of dots per inchdots per inch or or dpidpi and not all and not all pixels are equalpixels are equal

Finally, can express font sizes using 7 Finally, can express font sizes using 7 descriptive keywords:descriptive keywords:

• xx-small, x-small, small, medium, large, x-xx-small, x-small, small, medium, large, x-large, xx-largelarge, xx-large

• Each browser is configured to display text at Each browser is configured to display text at a particular size for each of these keywordsa particular size for each of these keywords

font-size: mediumfont-size: medium Now let’s set the font size of the list to Now let’s set the font size of the list to

0.8em (80% of body text) and h1 0.8em (80% of body text) and h1 heading to 1.5em (50% larger than body heading to 1.5em (50% larger than body text)text)

• See tutorial3/about4.htmSee tutorial3/about4.htm

Controlling Spacing and Controlling Spacing and IndentationIndentation Tom feels the Welcome text looks Tom feels the Welcome text looks

too crowded and wants it spread too crowded and wants it spread out more across width of the pageout more across width of the page• And wants more space between the And wants more space between the

first letter “W” and left edge of brown first letter “W” and left edge of brown backgroundbackground

Can do some kerning and tracking Can do some kerning and tracking in HTML and XHTMLin HTML and XHTML

• Amount of space between pairs of Amount of space between pairs of letters is called letters is called kerningkerning

• Amount of space between words and Amount of space between words and phrases is called phrases is called trackingtracking

letter-spacing: valueletter-spacing: valueword-spacing: valueword-spacing: value• where value is size of space using where value is size of space using

same units used for font sizingsame units used for font sizing

• Default unit is 0 pixels for both, so a positive Default unit is 0 pixels for both, so a positive value increases and a negative value reducesvalue increases and a negative value reduces

• See demo file in Data filesSee demo file in Data files Another typographic feature you can set Another typographic feature you can set

is is leadingleading, the space between lines of text, the space between lines of textline-height: lengthline-height: length• where length is a specific length or where length is a specific length or

percentage of font size of the text on those percentage of font size of the text on those lineslines

• If no is specified, browser uses a ratio of If no is specified, browser uses a ratio of 1.2:1, which means the line height is 1.2 1.2:1, which means the line height is 1.2 times the font sizetimes the font size

• For double spacing use:For double spacing use:line-height: 2line-height: 2

For more impact for multi-line titles, For more impact for multi-line titles, use large fonts and small line heightsuse large fonts and small line heights• See demo in Data filesSee demo in Data files

Another way to control text spacing Another way to control text spacing is to set the indentation for first lineis to set the indentation for first linetext-indent: valuetext-indent: value• where value is either a length expressed where value is either a length expressed

in absolute or relative units, or a in absolute or relative units, or a percentage of the width of the text blockpercentage of the width of the text block

• Can also be a negative, extending first Can also be a negative, extending first line to left of text block to create a line to left of text block to create a hanging indenthanging indent

– Not well supported or used muchNot well supported or used much Let’s increase kerning of Welcome Let’s increase kerning of Welcome

heading to 1emheading to 1em• Has effect of putting one blank space Has effect of putting one blank space

between each letterbetween each letter• And will set indentation to 1em, And will set indentation to 1em,

moving text one space to the leftmoving text one space to the left• See tutorial3/about5.htmSee tutorial3/about5.htm

Setting Font Styles, Setting Font Styles, Weights, and other Weights, and other Decorative FeaturesDecorative Features You can specify font stylesYou can specify font styles

font-style: typefont-style: type• where type is normal, italic, oblique (like where type is normal, italic, oblique (like

italics, but may differ depending on font)italics, but may differ depending on font) You can control font weightYou can control font weight

font-weight: weightfont-weight: weight• where weight is level of bold, expressed where weight is level of bold, expressed

from 100 to 900 in increments of 100from 100 to 900 in increments of 100

• Most browsers cannot render 9 different Most browsers cannot render 9 different weights, so 400 represents normal weights, so 400 represents normal (unbolded), 700 is bold, 900 is extra-bold(unbolded), 700 is bold, 900 is extra-bold

• Can also use keywords “normal” or Can also use keywords “normal” or “bold” in place of weight value“bold” in place of weight value

• Can also express weight relative to Can also express weight relative to containing element using keywords containing element using keywords “bolder” or “lighter”“bolder” or “lighter”

Can also change appearance withCan also change appearance with

text-decoration: typetext-decoration: type• where type is none, underline, overline, line-where type is none, underline, overline, line-

through, or blink, and can use more than onethrough, or blink, and can use more than onetext-decoration: underline overlinetext-decoration: underline overline• which would place a line under and a line which would place a line under and a line

overover To control case, useTo control case, use

text-transform: typetext-transform: type• where type is capitalize, uppercase, where type is capitalize, uppercase,

lowercase, or nonelowercase, or none

• Capitalize would capitalize first letter Capitalize would capitalize first letter of each word in the elementof each word in the element

Can display text in uppercase and Can display text in uppercase and small font withsmall font withfont-variant: typefont-variant: type• where type is normal or small capswhere type is normal or small caps• See demo in Data filesSee demo in Data files

Aligning Text VerticallyAligning Text Vertically Can vertically align inline elements Can vertically align inline elements

with the surrounding block withwith the surrounding block withvertical-align: typevertical-align: type• where type is one of where type is one of Figure 3-24Figure 3-24

Can use keywords or specify a Can use keywords or specify a length or percentagelength or percentage• Positive value moves up; negative Positive value moves up; negative

moves downmoves down

vertical-align: 50%vertical-align: 50%• raises half of line heightraises half of line heightvertical-align: -100%vertical-align: -100%• drops entire line height below drops entire line height below

baseline of current linebaseline of current line

Combining all Text Combining all Text Formatting in a Single Formatting in a Single StyleStyle Can combine text formatting into a Can combine text formatting into a

single style declarationsingle style declarationfont: italic small-caps bold 16pt/24pt font: italic small-caps bold 16pt/24pt

Arial, sans-serifArial, sans-serif• The only required properties are size The only required properties are size

and font-family, and font-family, but must be in order but must be in order indicatedindicated

• Browser assumes default value for any Browser assumes default value for any omitted propertyomitted property

Let’s change the size and font of Let’s change the size and font of the address text at the bottomthe address text at the bottom• See tutorial3/about6.htmSee tutorial3/about6.htm

Using the Span ElementUsing the Span Element Let’s change “Arcadium” in first Let’s change “Arcadium” in first

paragraph so it is prominently displayed paragraph so it is prominently displayed in bold, Arial, to set it off from the restin bold, Arial, to set it off from the rest• To mark a single word, use the span elementTo mark a single word, use the span element<span style=“font-family: Arial, Helvetica, <span style=“font-family: Arial, Helvetica,

sans-serif”>Arcadium</span>sans-serif”>Arcadium</span>• Span element is just a marker; browsers do Span element is just a marker; browsers do

not format the content unless you also add a not format the content unless you also add a stylestyle

Span is an inline element and must Span is an inline element and must be placed within a block-level be placed within a block-level element like paragraph or headingelement like paragraph or heading• See tutorial3/about7.htmSee tutorial3/about7.htm

Tom is pleased—you’ve worked Tom is pleased—you’ve worked with colors and textwith colors and text• Now it’s on to graphics!Now it’s on to graphics!

Session 3.2Session 3.2 Let’s begin working with graphicsLet’s begin working with graphics

• Most browsers support two image file Most browsers support two image file formats: GIF and JPEGformats: GIF and JPEG

• Choosing which one is an important Choosing which one is an important part of design; must balance goal of part of design; must balance goal of creating an interesting/attractive page creating an interesting/attractive page with need to keep size and its with need to keep size and its supporting files small and easy to opensupporting files small and easy to open

• Each graphic format has advantages Each graphic format has advantages and disadvantages, and you will and disadvantages, and you will probably use both format in your probably use both format in your designsdesigns

Working with GIF ImagesWorking with GIF Images GIF (Graphics Interchange Format)GIF (Graphics Interchange Format) is is

the most commonly used image the most commonly used image format on Webformat on Web• Should be compatible with any graphical Should be compatible with any graphical

browserbrowser• GIF files are limited to displaying 256 GIF files are limited to displaying 256

colors so are more often used for colors so are more often used for graphics requiring fewer colorsgraphics requiring fewer colors– Clip art, line art, logos, iconsClip art, line art, logos, icons

• Images that require more color depth, Images that require more color depth, such as photographs, often appear such as photographs, often appear grainy when saved as GIFsgrainy when saved as GIFs

• There are actually two GIF file There are actually two GIF file formats:formats:– GIF87 and GIF89aGIF87 and GIF89a

• GIF89a, newer standard, includes GIF89a, newer standard, includes enhancements such as interlacing, enhancements such as interlacing, transparent colors, and animationtransparent colors, and animation

InterlacingInterlacing refers to the way the GIF refers to the way the GIF file is saved by the graphics softwarefile is saved by the graphics software• Normally, with a Normally, with a noninterlaced GIFnoninterlaced GIF the the

image is saved one line at a time, starting image is saved one line at a time, starting from top and moving downwardfrom top and moving downward

• Image is retrieved as it was saved: Image is retrieved as it was saved: starting from top and moving downstarting from top and moving down

• See Figure 3-29See Figure 3-29

• If the graphic is large, might take several If the graphic is large, might take several minutes for entire image to appearminutes for entire image to appear– People might find this annoying if the part of People might find this annoying if the part of

the image that interests them is at the bottomthe image that interests them is at the bottom With With interlaced GIFsinterlaced GIFs, the image is , the image is

saved and retrieved “stepwise”saved and retrieved “stepwise”• For example, every fifth line might appear For example, every fifth line might appear

first, followed by every sixth line, etcfirst, followed by every sixth line, etc

• Starts out as a blurry representation of Starts out as a blurry representation of the final image, and then gradually the final image, and then gradually comes into focus--unlike noninterlaced comes into focus--unlike noninterlaced which is always sharp as it’s being which is always sharp as it’s being retrieved, although incompleteretrieved, although incomplete

Interlacing is an effective format if Interlacing is an effective format if you have a large graphic and want to you have a large graphic and want to give a previewgive a preview• Users can decide if they want to waitUsers can decide if they want to wait

• Downside is that it increases size Downside is that it increases size anywhere from 3 to 20 Kb, depending anywhere from 3 to 20 Kb, depending on imageon image

Working with Transparent Working with Transparent ColorsColors Another enhancement of GIF89a format Another enhancement of GIF89a format

is ability to use transparent colorsis ability to use transparent colors• A A transparent colortransparent color is a color from the is a color from the

image that is not displayed when image image that is not displayed when image appears in browserappears in browser

• In place of that color, the browser will In place of that color, the browser will display whatever is on the background, display whatever is on the background, whether that is white, a background color, whether that is white, a background color, or a background imageor a background image

• This effect integrates inline images with This effect integrates inline images with page backgroundpage background

Process by which you create a Process by which you create a transparent color depends on your transparent color depends on your graphics softwaregraphics software• Many include extra options when saving Many include extra options when saving

images in GIF89a formatimages in GIF89a format• One is to designate a particular color as One is to designate a particular color as

transparenttransparent

• Other packages include a transparent Other packages include a transparent color tool which you use to click the color tool which you use to click the color from the imagecolor from the image

Using Animated GIFsUsing Animated GIFs Popular use of GIFs has been to create Popular use of GIFs has been to create

animated imagesanimated images• Compared to video clips, are easier to Compared to video clips, are easier to

create and smaller in sizecreate and smaller in size• An An animated GIFanimated GIF is composed of several is composed of several

graphic images, each one slightly differentgraphic images, each one slightly different• When displayed, the images are displayed When displayed, the images are displayed

one after another, rapidly, creating one after another, rapidly, creating animated effectanimated effect

• To create animated GIFs, need special To create animated GIFs, need special softwaresoftware

• Or can find animated GIFs on the WebOr can find animated GIFs on the Web The software allows you to control the The software allows you to control the

rate at which the animation plays rate at which the animation plays (number of frames per second) and to (number of frames per second) and to determine the number of times the determine the number of times the animation will be repeatedanimation will be repeated• Can also set it to loop continuallyCan also set it to loop continually

Because an animated GIF is larger Because an animated GIF is larger than a static GIF, overusing them can than a static GIF, overusing them can greatly increase size of your pagegreatly increase size of your page• Be careful not to overwhelm your userBe careful not to overwhelm your user• Can be irritating because there is no way Can be irritating because there is no way

to turn them offto turn them off• Are limited to 256 colors which makes Are limited to 256 colors which makes

them ideal for small icons and logos, but them ideal for small icons and logos, but not for larger imagesnot for larger images

One of our pages is a splash One of our pages is a splash screenscreen• Let’s include some visual effects to Let’s include some visual effects to

draw users into the site; perhaps an draw users into the site; perhaps an animated GIFanimated GIF

• See tutorial3/index.htmSee tutorial3/index.htm

Working with JPEG ImagesWorking with JPEG Images Another important image format supported Another important image format supported

by most browsers is by most browsers is JPEGJPEG format format• Stands for Joint Photographic Experts GroupStands for Joint Photographic Experts Group• Can create graphics that use the full 16.7 Can create graphics that use the full 16.7

million colors available in color palettemillion colors available in color palette• So are most often used for photographs and So are most often used for photographs and

images that cover wide spectrum of colorimages that cover wide spectrum of color Another feature is that they can be Another feature is that they can be

compressedcompressed

• Yield image files that are usually (though Yield image files that are usually (though not always) smaller than their GIF not always) smaller than their GIF counterpartscounterparts

Unlike GIFs, JPEGs allow you to control Unlike GIFs, JPEGs allow you to control the amount of compression usedthe amount of compression used• Increasing compression reduces file size, Increasing compression reduces file size,

but might be at the expense of image but might be at the expense of image qualityquality

• See Figure 3-33See Figure 3-33

By testing different compression By testing different compression levels with your graphics software, levels with your graphics software, can reduce size of JPEG file while can reduce size of JPEG file while maintaining attractive imagemaintaining attractive image• A smaller size does not always mean A smaller size does not always mean

that your page will load fasterthat your page will load faster• Browser has to decompress image Browser has to decompress image

when it retrieves itwhen it retrieves it

• For a heavily compressed image this For a heavily compressed image this can take more time than retrieving can take more time than retrieving and displaying a less-compressed fileand displaying a less-compressed file

Cannot use transparent colors or Cannot use transparent colors or animation with JPEG filesanimation with JPEG files• Standard JPEG files are not interlacedStandard JPEG files are not interlaced• A new format called A new format called Progressive JPEGProgressive JPEG

has been introducedhas been introduced

• Similar to interlacing, the JPEG fades Similar to interlacing, the JPEG fades in from a low resolution to a high in from a low resolution to a high resolutionresolution

• And are larger than nonprogressive And are larger than nonprogressive JPEGsJPEGs

Working with PNG ImagesWorking with PNG Images Third graphic format starting to gain Third graphic format starting to gain

wide acceptance is the wide acceptance is the Portable Portable Network GraphicsNetwork Graphics or or PNGPNG• Include most of features as GIFs, but also Include most of features as GIFs, but also

provide file compression available with provide file compression available with JPEGsJPEGs

• Supports full 16.7 million colorsSupports full 16.7 million colors• Can designate several transparent colors, Can designate several transparent colors,

rather than a single one that GIFs supportrather than a single one that GIFs support

Older browsers, Older browsers, however, do not however, do not support PNGssupport PNGs• See Figure 3-34 See Figure 3-34

for comparisonsfor comparisons

Other Image FormatsOther Image Formats Other image formats are availableOther image formats are available

• W3C is promoting W3C is promoting Scalable Vector Scalable Vector GraphicsGraphics ( (SVGSVG) specs) specs

• Written with XML; can be used to create Written with XML; can be used to create line art with straight lines and curvesline art with straight lines and curves

• Flash can be used to add animated Flash can be used to add animated graphicsgraphics

Let’s add a photo to the About pageLet’s add a photo to the About page• See tutorial3/about8.htmSee tutorial3/about8.htm

Aligning an ImageAligning an Image Tom doesn’t like how the image is Tom doesn’t like how the image is

positionedpositioned• Too much blank space between Too much blank space between

Welcome heading and first paragraphWelcome heading and first paragraph• Let’s wrap the paragraph around the Let’s wrap the paragraph around the

imageimage Floating an ElementFloating an Element

• One way is with the float styleOne way is with the float style

float: positionfloat: position• Where position is none (default), left, rightWhere position is none (default), left, right• Browser places element on specified Browser places element on specified

margin and wraps content around itmargin and wraps content around it Clearing an ElementClearing an Element

• Use the clear style to prevent other Use the clear style to prevent other content from wrapping around a floating content from wrapping around a floating elementelement

clear: positionclear: position

• where position is none, left, rightwhere position is none, left, right• Setting the clear value to “right” Setting the clear value to “right”

prevents an element from being prevents an element from being displayed until the right margin is clear displayed until the right margin is clear of floating elementsof floating elements

• See Figure 3-38See Figure 3-38• Used to prevent a footer from moving up Used to prevent a footer from moving up

and wrapping around another elementand wrapping around another element Let’s float the photoLet’s float the photo

• See tutorial3/about9.htmSee tutorial3/about9.htm

Using the Align AttributeUsing the Align Attribute May need to use align attribute for May need to use align attribute for

older browsersolder browsers• Now deprecatedNow deprecated<img align=“position” /><img align=“position” />• where position indicates how you where position indicates how you

want image alignedwant image aligned• See Figure 3-41 for align valuesSee Figure 3-41 for align values

Setting MarginsSetting Margins Wrapping content around image Wrapping content around image

solved problem of white spacesolved problem of white space• But text crowds photoBut text crowds photo• Let’s increase margin between photo Let’s increase margin between photo

and textand textmargin-top: lengthmargin-top: lengthmargin-right: lengthmargin-right: lengthmargin-bottom: lengthmargin-bottom: lengthmargin-left: lengthmargin-left: length

• where length is one of the units of where length is one of the units of length or a percentage of the width of length or a percentage of the width of the containing elementthe containing element

• Can also use keyword “auto” which Can also use keyword “auto” which enables browser to determine margin enables browser to determine margin sizesize

• Default unit is pixelDefault unit is pixelmargin-top: 1; margin-right: 2; margin-margin-top: 1; margin-right: 2; margin-

bottom: 1; margin-left: 2bottom: 1; margin-left: 2

Margin value can also be negativeMargin value can also be negative• Creates interesting overlay effectsCreates interesting overlay effects• Some browsers do not support this Some browsers do not support this

with unpredictable results!with unpredictable results! Four margin styles can be combinedFour margin styles can be combined

margin: top right bottom leftmargin: top right bottom left• Think of moving clockwise around Think of moving clockwise around

elementelement

• If you include only 3 values, applied If you include only 3 values, applied to top, right, bottomto top, right, bottom

• Specify two, first is applied to Specify two, first is applied to top/bottom, and second to right/lefttop/bottom, and second to right/left

• Specify single value, applied to all Specify single value, applied to all four marginsfour margins

Let’s change marginsLet’s change margins• See tutorial3/about10.htmSee tutorial3/about10.htm

Can also set margins for other Can also set margins for other elementselements• Even entire pageEven entire page• Let’s change page margin so it is further Let’s change page margin so it is further

down the page by increasing the page’s down the page by increasing the page’s top margintop margin

• See tutorial3/about11.htmSee tutorial3/about11.htm Older browsers can use deprecated Older browsers can use deprecated

attributes vspace and hspaceattributes vspace and hspace

Setting the Image SizeSetting the Image Size By default, browsers display an By default, browsers display an

image at its saved sizeimage at its saved size• Can specify a different size by adding Can specify a different size by adding

attributes to the image tagattributes to the image tagwidth=“value” height=“value”width=“value” height=“value”

Changing the size within the Changing the size within the browser does not affect the file browser does not affect the file sizesize

• Use image-editing software Use image-editing software • But specifying height and width is But specifying height and width is

good idea even if you are not trying good idea even if you are not trying to change dimensions because of way to change dimensions because of way browsers work with inline imagesbrowsers work with inline images

• When a browser encounters an inline When a browser encounters an inline image, has to calculate size and use image, has to calculate size and use that info to format pagethat info to format page

• If you include dimensions, the If you include dimensions, the browser does not have to perform browser does not have to perform that calculationthat calculation– Page will be displayed fasterPage will be displayed faster

• To determine size of an image, use To determine size of an image, use graphics software and record graphics software and record dimension of each graphic in pixelsdimension of each graphic in pixels

See tutorial3/about12.htmSee tutorial3/about12.htm

Inserting a Background Inserting a Background ImageImage Let’s use an image file as a Let’s use an image file as a

background for the splash screen pagebackground for the splash screen page Can set a background image for any Can set a background image for any

elementelementbackground-image: url(url)background-image: url(url)• where url is name/location of image filewhere url is name/location of image file• When browser loads background image, When browser loads background image,

repeats it until entire element is filledrepeats it until entire element is filled

• This is known as This is known as tilingtiling• See tutorial3/index1.htmSee tutorial3/index1.htm

Background Image OptionsBackground Image Options• Can also specify direction in which Can also specify direction in which

the tiling should take placethe tiling should take placebackground-repeat: typebackground-repeat: type• where type is repeat (default), repeat-where type is repeat (default), repeat-

x, repeat-y, or no-repeatx, repeat-y, or no-repeat

• See Figure 3-49 for examplesSee Figure 3-49 for examples Initially, browsers place image in Initially, browsers place image in

upper-left corner and repeat from upper-left corner and repeat from therethere• Can change that withCan change that withbackground-position: horizontal verticalbackground-position: horizontal vertical• Can specify position as distance from top-Can specify position as distance from top-

left corner, percentage of element’s width left corner, percentage of element’s width or height, or by using a keywordor height, or by using a keyword

• Keyword options are top, center, Keyword options are top, center, bottom for vertical position, and left, bottom for vertical position, and left, center, right for horizontalcenter, right for horizontal

background-position: 10% 20%background-position: 10% 20%• would set initial position 10% to right would set initial position 10% to right

and 20% down from upper-left cornerand 20% down from upper-left cornerbackground-position: right bottombackground-position: right bottom• places image at bottom-right cornerplaces image at bottom-right corner

• If you include only one position value, If you include only one position value, browser applies that value to horizontal browser applies that value to horizontal position and vertically centers imageposition and vertically centers image

background-position: 30pxbackground-position: 30px• places image 30 pixels to right of places image 30 pixels to right of

element’s left margin and centers it element’s left margin and centers it verticallyvertically

By default, background image moves By default, background image moves with element as user scrollswith element as user scrolls

• Can change that by usingCan change that by usingbackground-attachment: typebackground-attachment: type• where type is either scroll (default) or fixedwhere type is either scroll (default) or fixed• Fixed will not move and are used for Fixed will not move and are used for

watermarks—a translucent graphic watermarks—a translucent graphic impressed into the very fabric of the paperimpressed into the very fabric of the paper

The Background StyleThe Background Style• Can combine various background stylesCan combine various background styles

• background: yellow url(logo.gif) no-background: yellow url(logo.gif) no-repeat fixed center centerrepeat fixed center center

• creates yellow background on which creates yellow background on which image is not tiled but fixed in image is not tiled but fixed in horizontal and vertical centerhorizontal and vertical center

Let’s add “DRAFT” as a watermark Let’s add “DRAFT” as a watermark to designate that this page is still to designate that this page is still undergoing reviewundergoing review

• See tutorial3/about13.htmSee tutorial3/about13.htm Older browsers do not support Older browsers do not support

background images for any page background images for any page elementelement• Can be added to <body> tag to create a Can be added to <body> tag to create a

background for entire pagebackground for entire page• No attributes available to control tiling or No attributes available to control tiling or

placement of background imageplacement of background image Let’s learn about image maps!Let’s learn about image maps!

Session 3.3Session 3.3 In this session you will learn about In this session you will learn about

different types of image maps, and different types of image maps, and you’ll create an image map and you’ll create an image map and test it for the Maps pagetest it for the Maps page

Understanding image Understanding image mapsmaps Tom wants the park map to be Tom wants the park map to be

interactiveinteractive• When a user clicks on an area of the When a user clicks on an area of the

park, browser opens a page park, browser opens a page describing features of that area: describing features of that area: water, rides, kartswater, rides, karts

• See See Figure 3-52Figure 3-52 for the relationships for the relationships between these pagesbetween these pages

To link a single image to multiple To link a single image to multiple destinations, must set up hotspots destinations, must set up hotspots within the imagewithin the image• A A hotspothotspot is a specific area of the image is a specific area of the image

that acts as a hypertext linkthat acts as a hypertext link You define hotspots through the use of You define hotspots through the use of

image mapsimage maps• Image mapsImage maps list coordinates that define the list coordinates that define the

boundaries of the hotspots on the imageboundaries of the hotspots on the image

• Any time a user clicks inside those Any time a user clicks inside those boundaries, the hyperlink is activatedboundaries, the hyperlink is activated

Two types of image maps: server-Two types of image maps: server-side and client-sideside and client-side

Server-side image mapsServer-side image maps In a In a server-side image mapserver-side image map, the server, , the server,

which is the computer that stores the which is the computer that stores the Web page, controls the image mapWeb page, controls the image map• Web author includes the coordinates of Web author includes the coordinates of

the hotspots within the Web pagethe hotspots within the Web page– Whenever a user clicks the inline image, the Whenever a user clicks the inline image, the

appropriate coordinates are sent to a program appropriate coordinates are sent to a program running on the server and the program uses running on the server and the program uses them to activate the appropriate hyperlinkthem to activate the appropriate hyperlink

Supported by most, if not all, browsersSupported by most, if not all, browsers• Limitations, howeverLimitations, however• Because a program on the server must Because a program on the server must

process the image map, you cannot test process the image map, you cannot test your code using local filesyour code using local files

• Can be slow to operate because click Can be slow to operate because click request has to be processed by the serverrequest has to be processed by the server

• On most browsers the target of a On most browsers the target of a hyperlink is indicated in the status barhyperlink is indicated in the status bar

• But this is not done with server-side But this is not done with server-side image mapsimage maps

• These limitations can be overcome by These limitations can be overcome by using client-side image mapsusing client-side image maps

Client-side image mapsClient-side image maps In a client-side image map, you insert In a client-side image map, you insert

the image map into the HTML filethe image map into the HTML file• User’s browser processes the image map User’s browser processes the image map

locallylocally• Can easily test itCan easily test it• They tend to be more responsive because They tend to be more responsive because

the information does not have to be sent the information does not have to be sent over the network or dial-up connectionover the network or dial-up connection

• When a user moves pointer over the When a user moves pointer over the image, the status bar will display the target image, the status bar will display the target of hotspotof hotspot

• But older browsers don’t support themBut older browsers don’t support them First step is to add the map elementFirst step is to add the map element

<map name=“map” <map name=“map” id=“map”>hotspots</map>id=“map”>hotspots</map>

• where map is the name of the map and where map is the name of the map and hotspots are the locations of the hotspots hotspots are the locations of the hotspots within the mapwithin the map

• Can place a map element anywhere in Can place a map element anywhere in the body because the browser uses it for the body because the browser uses it for reference and doesn’t actually render itreference and doesn’t actually render it

• See tutorial3/map.htmSee tutorial3/map.htm Open watertxt, kartstxt, and ridestxt Open watertxt, kartstxt, and ridestxt

and rename themand rename them• Will not edit themWill not edit them

Let’s enter the hotspots of the mapLet’s enter the hotspots of the map

Defining Image Map Defining Image Map HotspotsHotspots To create the image map, could open To create the image map, could open

the image in a graphics program and the image in a graphics program and record the coordinates of the points record the coordinates of the points corresponding to the hotspot corresponding to the hotspot boundariesboundaries• Difficult and time-consumingDifficult and time-consuming• Typically will use a special program to Typically will use a special program to

create image map coordinates for youcreate image map coordinates for you

Most image map programs generate the Most image map programs generate the coordinates for hotspots as well as the coordinates for hotspots as well as the necessary HTML tagsnecessary HTML tags

General syntax for defining hotspots is:General syntax for defining hotspots is:<area shape=“shape” coords=“coordinates” <area shape=“shape” coords=“coordinates”

href=“url” alt=“text” />href=“url” alt=“text” />• The alt tag is requiredThe alt tag is required

Shape has three possible values:Shape has three possible values:

• rect for a rectangular hotspotrect for a rectangular hotspot• circle for a circular hotspotcircle for a circular hotspot• poly for hotspots shaped like irregular poly for hotspots shaped like irregular

polygonspolygons In the COORDS property, you enter In the COORDS property, you enter

coordinates to specify the hotspot’s coordinates to specify the hotspot’s locationlocation• Values you enter depend on shape of Values you enter depend on shape of

hotspothotspot

• Coordinates are expressed as a point’s Coordinates are expressed as a point’s distance in pixels from left and top distance in pixels from left and top edgesedges– Coordinates 123,45 refer to a point 123 Coordinates 123,45 refer to a point 123

pixels from left edge and 45 pixels from toppixels from left edge and 45 pixels from top• If the coordinates overlap, the browser If the coordinates overlap, the browser

uses the first tag in the listuses the first tag in the list Let’s add three hotspots: one of Let’s add three hotspots: one of

each shapeeach shape

Creating a Rectangular Creating a Rectangular HotspotHotspot Two points define a rectangular Two points define a rectangular

hotspot: upper-left corner and lower-hotspot: upper-left corner and lower-right cornerright cornershape=“rect” coords=“350, 38, 582, 200”shape=“rect” coords=“350, 38, 582, 200”• Let’s add this hotspot to parkmap image Let’s add this hotspot to parkmap image

map and link it to the water.htm filemap and link it to the water.htm file• Remember alt textRemember alt text• See tutorial3/map1.htmSee tutorial3/map1.htm

Creating a Circular Creating a Circular HotspotHotspot The coordinates required for a The coordinates required for a

circular hotspot differ from those circular hotspot differ from those of a rectangular hotspotof a rectangular hotspot• Defined by the locations of its center Defined by the locations of its center

and its radiusand its radius• shape=“circle” shape=“circle”

“coords=“255,133,74”“coords=“255,133,74”• See tutorial3/map1.htmSee tutorial3/map1.htm

Creating a polygonal Creating a polygonal hotspothotspot When you want to specify an When you want to specify an

irregular shape, must use the poly irregular shape, must use the poly value for the shape attributevalue for the shape attribute• Enter the coordinates for each vertex Enter the coordinates for each vertex

in the shapein the shape• See Figure 3-55See Figure 3-55• See tutorial3/map1.htmSee tutorial3/map1.htm

Have finished defining image mapHave finished defining image map• Now instruct browser to use it with Now instruct browser to use it with

the inline image and TESTthe inline image and TEST

Using an Image MapUsing an Image Map Final step in adding an image map is Final step in adding an image map is

to add the usemap attribute to the to add the usemap attribute to the <img><img> tag for the image map tag for the image map graphicgraphic• Tells the browser the name of the image Tells the browser the name of the image

map to associate with the inline imagemap to associate with the inline image<usemap=“file#map”<usemap=“file#map”• See tutorial3/map2.htmSee tutorial3/map2.htm

Notice the map is surrounded by a Notice the map is surrounded by a colored bordercolored border• Can be distracting and ruin visual Can be distracting and ruin visual

appearanceappearance• Remove it by using border-width style Remove it by using border-width style

to set width of border to 0 pixelsto set width of border to 0 pixels• See tutorial3/map3.htmSee tutorial3/map3.htm

Tips for Web Page DesignTips for Web Page Design View your color and images under View your color and images under

different color resolutionsdifferent color resolutions• Use Web-safe colors to prevent dithering Use Web-safe colors to prevent dithering

on browsers with 256-color paletteson browsers with 256-color palettes Use foreground colors that contrast Use foreground colors that contrast

well with the backgroundwell with the background When specifying a font face, list the When specifying a font face, list the

specific and most desirable ones firstspecific and most desirable ones first

• Conclude with the generic fontConclude with the generic font Keep your font choices simpleKeep your font choices simple

• Too many font styles within a single Too many font styles within a single page can distract userspage can distract users

• In general, you should not use more In general, you should not use more than two font facesthan two font faces

• Large blocks of bold or italicized text Large blocks of bold or italicized text can be difficult to readcan be difficult to read

• Keep your fonts to about 3 or 4 basic Keep your fonts to about 3 or 4 basic sizessizes

Use relative units (such as the em Use relative units (such as the em unit) when you want your fonts to be unit) when you want your fonts to be scalable under different monitor sizes scalable under different monitor sizes and resolutionsand resolutions

Make your code easier to read and Make your code easier to read and more compact by combining the more compact by combining the various font styles into a single stylevarious font styles into a single style

Use GIFs for illustrations and line art that Use GIFs for illustrations and line art that involve a few basic colorsinvolve a few basic colors• Use JPEGs for photographs and illustrations Use JPEGs for photographs and illustrations

that involve more than 256 colorsthat involve more than 256 colors Do not overload a Web page with imagesDo not overload a Web page with images

• The more images you include, the longer a The more images you include, the longer a page take to loadpage take to load

• Generally a Web page should contain no more Generally a Web page should contain no more than 40 to 50k of inline imagesthan 40 to 50k of inline images

Once a browser downloads an image, Once a browser downloads an image, it keeps a copy of it on the user’s it keeps a copy of it on the user’s computercomputer• Therefore, you can make a Web site load Therefore, you can make a Web site load

faster by reusing images whenever faster by reusing images whenever possible throughout the sitepossible throughout the site

• Use a single background image or logo Use a single background image or logo on every page in order to give your Web on every page in order to give your Web site a consistent look and feelsite a consistent look and feel

Include the width and height attributes Include the width and height attributes for each of your inline images to make for each of your inline images to make the page load more quicklythe page load more quickly

Use miniature versions of images Use miniature versions of images (known as (known as thumbnailsthumbnails) to let users ) to let users preview large image filespreview large image files• Link each thumbnail to the corresponding Link each thumbnail to the corresponding

larger image so that interested users can larger image so that interested users can view the image in greater detailview the image in greater detail

• You should create thumbnails in a You should create thumbnails in a separate graphics program, rather separate graphics program, rather than simply reducing the full-size than simply reducing the full-size image using the width and height image using the width and height attributesattributes

• Changing the width and height Changing the width and height attributes decreases an image’s attributes decreases an image’s dimensions, but not the file sizedimensions, but not the file size

View your Web page in a browser View your Web page in a browser without graphical capability (or without graphical capability (or with the graphic support turned with the graphic support turned off) to verify that users with non-off) to verify that users with non-graphical browsers can still graphical browsers can still effectively use your siteeffectively use your site

Avoid large areas of white space Avoid large areas of white space surrounded by page contentsurrounded by page content

• Use the float and margin styles to Use the float and margin styles to move white space to the outside move white space to the outside margins of the pagemargins of the page

If you use an image map, provide If you use an image map, provide text link alternatives for users with text link alternatives for users with non-graphical browsersnon-graphical browsers