Maureen Smith
Professor, Saddleback College
Tutorial 3


Review

Tutorial 3 - Designing a Web Page
• Session 3.1
• Session 3.2
• Session 3.3

Review


Learn how HTML handles colors and how to use colors effectively

Create foreground and background colors using styles

Select different font styles and designs using styles

Align text with surrounding content using styles


Control spacing between letters, words, and lines using styles

Learn about the different graphic formats supported on the Web and how to use them effectively

Understand how to use transparent images and animated graphics


Apply a background image to an element

Float an image on the right or left page margin

Set the margin size around an element

Understand image maps and how to use them

Create image map hotspots and link them to destination documents


Apply an image map to an inline image

Remove the border from a linked image


In this session you will create pages with color and a variety of images, along with animation


You are going to create a page for an amusement park
• Six pages
• Index page contains an introduction and acts as a splash screen , displaying park logo and an animation, but no real content
• Links to the About page—info about park
• Karts, Water, and Rides pages describe attractions

• Map page contains map
• All are linked to each other (except Index)
• See Figure 3-1
• See tutorial3/about.htm

Let’s add more color and use different fonts
• Add photos—all with intent to draw users into site and give a good impression

Let’s create an overall color scheme


When working with color in graphics or dtp programs, can select and identify colors without much difficulty because those packages have graphical interfaces
• When working with color in HTML, however, have to create color schemes using text-based
HTML tags
• Trying to describe a color in textual terms can be a challenge

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


A color value is a numerical expression that exactly describes a color’s appearance
• To understand how HTML uses numbers to represent colors, must examine basic principles of color theory and how they relate to the colors your monitor displays

In classical theory, any color is a combination of three primary colors:

• Red
• Green
• Blue

Figure 3-3 shows the colors yellow, magenta, cyan, and white that are produced by combining the three primary colors
• By varying intensity of each primary color, can create any color and any shade of color that you want

• This principle allows your monitor to combine pixels of red, green, and blue light to create the array of colors you see on your screen

Software programs, such as your browser, use a mathematical approach to define color
• Intensity of each of the three primary colors is assigned a number from 0 (absence of color) to 255 (highest intensity)

• In this way, 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 its
Red, Green, and Blue components
• White is 255,255,255
• Gray is 192,192,192
• Yellow is 255,255,0 (no blue)

• In most programs, you are not aware of the underlying triplet when you make a color choice

It is these RGB triplets that you have to enter into your HTML code if you want to express the exact appearance of a color
• HTML requires that these color values be entered as hexadecimals

• A hexadecimal is a number that is represented using 16 as a base rather than 10

Do you need to be a math wizard?
• In practice, Web authors rely on several tools to generate hexadecimals
• Could also use a converter program and look at the code generated


The number of colors the browser displays depends on monitor
• Some can only show 256 and these computers are limited to a smaller palette , or selection
• When it encounters a color not in its palette, will attempt to render it using dithering , in which the browser combines similar colors to approximate the original color’s appearance

• Dithering can result in a fuzzy image when compared to the original

To avoid this, stick to colors from the safety palette —216 colors known as Web-safe colors
• Guaranteed not to be dithered
• See demo page from data files


Assured your images will appear the same to all regardless of monitor resolution
• Most monitors now support higher color resolution, so the need for the safety palette is diminishing


There are 16 color names recognized by all versions of HTML and XHTML
• See Figure 3-7

The list is fairly basic
• As long as you keep to these simple colors, you can rely solely upon these color names to set up color schemes
• Will be understood by all browsers

• Great advantage is that you can be sure the colors you specify will be the colors viewers see on their computers

However, 16 colors is limiting
• So most browsers support an extension of an additional 140 color names to this list
• Figure 3-8 shows a partial list of additional color names
• Gives greater color variation

• Appendix A, “Extended Color Names,” is a fuller list

When you want more control and more choices, must use a color value


Can define foreground and background color for each element
• Foreground is usually color of the text and part of a line’s color
• To define foreground color, use the style color: color
• To define background color, use the style background-color: color


When you don’t define an element’s color, it takes the color of the element that contains it
• Red text, gray background—all elements inherit that color combination unless you specify different styles for specific elements

Let’s change text color on About page to a shade of brown

• Will use a safe color value and will also set background color of white
• Most browsers assume a white background, but good to make it explicit
– This is an inline style added to the body element
• See tutorial3/about1.htm

Can apply fore/background colors to any page element


Tom suggests “Welcome” might look better in white on medium brown background
• Also wants you to change color of the horizontal line at bottom of page to match page’s new color scheme
• See tutorial3/about2.htm
• Add inline style to h1 element


Deprecated approach to changing background and text color for page:
<body bgcolor=“yellow” text=“#99CCFF”>
• To color text in a section, can enclose text within a two-sided <font> tag


Now Tom would like you to work with the appearance of the text
• Right now is all in the same typeface
• Let’s add variety
Variety
Variety
Variety
Variety


Default is a single font, usually
Times New
Roman
• To change—use the style font-family: fonts
• where fonts is a comma-separated list of fonts that the browser can use
• Font names are specific or generic
• A specific font is actually installed on the user’s computer

• A generic font is a name for a general description of a font’s appearance
• Browsers recognize 5 generic fonts: serif, sans-serif, monospace, cursive, fantasy
• See Figure 3-12

Cannot be sure which font a given user’s browser will use
• So you specify a list of fonts, in order of preference

• If the browser cannot find any of the specific fonts, it goes with the generic font-family: Arial, Helvetica, sans-serif
• See a demo page on text styles in your Data files

Not good practice to use more than 2 different font faces on a page
• Serif fonts are best for large blocks of text

• Sans-serif for headings and subheads
• Let’s change font for h1 heading and list of links in the About page
• See tutorial3/about3.htm

Can also use deprecated <font> tag


Tom feels the sizes of Welcome heading and list are too large
• Let’s reduce them using the style font-size: length
• where length is a measurement
– with a unit of measurement
– with a keyword description
– as a percentage of the size of the containing element

– with a keyword expressing the size relative to the size of the containing element

With measurement units, can use absolute units or relative units
• Absolute units define a font size using one of five units of measurement: mm, cm, in, pt, and pc
• 72 points in an inch, 12 points in a pica, 6 picas in an inch

• For text to be ½ inch, can use any of the following styles (no space between value and unit abbreviation) font-size: 0.5in
font-size: 36pt font-size: 3pc

Most useful when you know monitor size and resolution


To retain consistency, instead use relative units
• Expresses font size relative to size of a standard character on monitor
• Two most common standards are “em” and “ex”
• The “ em unit ” is equal to the width of the capital letter “M”
• “ ex unit ” is equal to height of lowercase “x”


Can use relative units to make page scalable
• Allows page to be rendered same way no matter how monitor is configured
– Large monitor with default size of 18t; smaller monitor with default size of 12pt and you want heading to be about 50% larger than body text for either user
– Use 1.5em

• Can achieve same effect by expressing font size as percentage of default font size font-size: 150%

Final unit of measurement is the pixel , a single dot on screen
• If no unit is specified, browser assumes value is expressed in pixels
• Can use either:

font-size: 20px or font-size: 20

Exact size of a pixel depends on output device
• Different resolutions are expressed in terms of dots per inch or dpi and not all pixels are equal

Finally, can express font sizes using 7 descriptive keywords:

• xx-small, x-small, small, medium, large, x-large, xx-large
• Each browser is configured to display text at a particular size for each of these keywords font-size: medium

Now let’s set the font size of the list to
0.8em (80% of body text) and h1 heading to
1.5em (50% larger than body text)

• See tutorial3/about4.htm


Tom feels the Welcome text looks too crowded and wants it spread out more across width of the page
• And wants more space between the first letter
“W” and left edge of brown background

Can do some kerning and tracking in HTML and XHTML

• Amount of space between pairs of letters is called kerning
• Amount of space between words and phrases is called tracking letter-spacing: value word-spacing: value
• where value is size of space using same units used for font sizing

• Default unit is 0 pixels for both, so a positive value increases and a negative value reduces
• See demo file in Data files

Another typographic feature you can set is leading , the space between lines of text line-height: length
• where length is a specific length or percentage of font size of the text on those lines

• If no is specified, browser uses a ratio of 1.2:1, which means the line height is 1.2 times the font size
• For double spacing use: line-height: 2

For more impact for multi-line titles, use large fonts and small line heights
• See demo in Data files


Another way to control text spacing is to set the indentation for first line text-indent: value
• where value is either a length expressed in absolute or relative units, or a percentage of the width of the text block
• Can also be a negative, extending first line to left of text block to create a hanging indent

– Not well supported or used much

Let’s increase kerning of Welcome heading to 1em
• Has effect of putting one blank space between each letter
• And will set indentation to 1em, moving text one space to the left
• See tutorial3/about5.htm


You can specify font styles font-style: type
• where type is normal, italic, oblique (like italics, but may differ depending on font)

You can control font weight font-weight: weight
• where weight is level of bold, expressed from
100 to 900 in increments of 100

• Most browsers cannot render 9 different weights, so 400 represents normal (unbolded),
700 is bold, 900 is extra-bold
• Can also use keywords “normal” or “bold” in place of weight value
• Can also express weight relative to containing element using keywords “bolder” or “lighter”

Can also change appearance with

text-decoration: type
• where type is none, underline, overline, linethrough, or blink, and can use more than one text-decoration: underline overline
• which would place a line under and a line over

To control case, use text-transform: type
• where type is capitalize, uppercase, lowercase, or none

• Capitalize would capitalize first letter of each word in the element

Can display text in uppercase and small font with font-variant: type
• where type is normal or small caps
• See demo in Data files


Can vertically align inline elements with the surrounding block with vertical-align: type
• where type is one of Figure 3-24

Can use keywords or specify a length or percentage
• Positive value moves up; negative moves down

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


Can combine text formatting into a single style declaration font: italic small-caps bold 16pt/24pt Arial, sansserif
• The only required properties are size and fontfamily, but must be in order indicated
• Browser assumes default value for any omitted property

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


Let’s change “Arcadium” in first paragraph so it is prominently displayed in bold, Arial, to set it off from the rest
• To mark a single word, use the span element
<span style=“font-family: Arial, Helvetica, sansserif”>Arcadium</span>
• Span element is just a marker; browsers do not format the content unless you also add a style


Span is an inline element and must be placed within a block-level element like paragraph or heading
• See tutorial3/about7.htm

Tom is pleased—you’ve worked with colors and text
• Now it’s on to graphics!


Let’s begin working with graphics
• Most browsers support two image file formats:
GIF and JPEG
• Choosing which one is an important part of design; must balance goal of creating an interesting/attractive page with need to keep size and its supporting files small and easy to open

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


GIF (Graphics Interchange Format) is the most commonly used image format on Web
• Should be compatible with any graphical browser
• GIF files are limited to displaying 256 colors so are more often used for graphics requiring fewer colors
– Clip art, line art, logos, icons

• Images that require more color depth, such as photographs, often appear grainy when saved as GIFs
• There are actually two GIF file formats:
– GIF87 and GIF89a
• GIF89a, newer standard, includes enhancements such as interlacing, transparent colors, and animation


Interlacing refers to the way the GIF file is saved by the graphics software
• Normally, with a noninterlaced GIF the image is saved one line at a time, starting from top and moving downward
• Image is retrieved as it was saved: starting from top and moving down
• See Figure 3-29

• If the graphic is large, might take several minutes for entire image to appear
– People might find this annoying if the part of the image that interests them is at the bottom

With interlaced GIFs , the image is saved and retrieved “stepwise”
• For example, every fifth line might appear first, followed by every sixth line, etc

• Starts out as a blurry representation of the final image, and then gradually comes into focus--unlike noninterlaced which is always sharp as it’s being retrieved, although incomplete

Interlacing is an effective format if you have a large graphic and want to give a preview
• Users can decide if they want to wait

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


Another enhancement of GIF89a format is ability to use transparent colors
• A transparent color is a color from the image that is not displayed when image appears in browser
• In place of that color, the browser will display whatever is on the background, whether that is white, a background color, or a background image

• This effect integrates inline images with page background

Process by which you create a transparent color depends on your graphics software
• Many include extra options when saving images in GIF89a format
• One is to designate a particular color as transparent

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


Popular use of GIFs has been to create animated images
• Compared to video clips, are easier to create and smaller in size
• An animated GIF is composed of several graphic images, each one slightly different
• When displayed, the images are displayed one after another, rapidly, creating animated effect

• To create animated GIFs, need special software
• Or can find animated GIFs on the Web

The software allows you to control the rate at which the animation plays (number of frames per second) and to determine the number of times the animation will be repeated
• Can also set it to loop continually


Because an animated GIF is larger than a static GIF, overusing them can greatly increase size of your page
• Be careful not to overwhelm your user
• Can be irritating because there is no way to turn them off
• Are limited to 256 colors which makes them ideal for small icons and logos, but not for larger images


One of our pages is a splash screen
• Let’s include some visual effects to draw users into the site; perhaps an animated GIF
• See tutorial3/index.htm


Another important image format supported by most browsers is JPEG format
• Stands for Joint Photographic Experts Group
• Can create graphics that use the full 16.7 million colors available in color palette
• So are most often used for photographs and images that cover wide spectrum of color

Another feature is that they can be compressed

• Yield image files that are usually (though not always) smaller than their GIF counterparts

Unlike GIFs, JPEGs allow you to control the amount of compression used
• Increasing compression reduces file size, but might be at the expense of image quality
• See Figure 3-33


By testing different compression levels with your graphics software, can reduce size of JPEG file while maintaining attractive image
• A smaller size does not always mean that your page will load faster
• Browser has to decompress image when it retrieves it

• For a heavily compressed image this can take more time than retrieving and displaying a less-compressed file

Cannot use transparent colors or animation with JPEG files
• Standard JPEG files are not interlaced
• A new format called Progressive JPEG has been introduced

• Similar to interlacing, the JPEG fades in from a low resolution to a high resolution
• And are larger than nonprogressive JPEGs


Third graphic format starting to gain wide acceptance is the Portable Network
Graphics or PNG
• Include most of features as GIFs, but also provide file compression available with JPEGs
• Supports full 16.7 million colors
• Can designate several transparent colors, rather than a single one that GIFs support


Older browsers, however, do not support PNGs
• See Figure 3-34 for comparisons


Other image formats are available
• W3C is promoting Scalable Vector Graphics
( SVG ) specs
• Written with XML; can be used to create line art with straight lines and curves
• Flash can be used to add animated graphics

Let’s add a photo to the About page
• See tutorial3/about8.htm


Tom doesn’t like how the image is positioned
• Too much blank space between Welcome heading and first paragraph
• Let’s wrap the paragraph around the image

Floating an Element
• One way is with the float style

float: position
• Where position is none (default), left, right
• Browser places element on specified margin and wraps content around it

Clearing an Element
• Use the clear style to prevent other content from wrapping around a floating element clear: position

• where position is none, left, right
• Setting the clear value to “right” prevents an element from being displayed until the right margin is clear of floating elements
• See Figure 3-38
• Used to prevent a footer from moving up and wrapping around another element

Let’s float the photo
• See tutorial3/about9.htm


May need to use align attribute for older browsers
• Now deprecated
<img align=“position” />
• where position indicates how you want image aligned
• See Figure 3-41 for align values


Wrapping content around image solved problem of white space
• But text crowds photo
• Let’s increase margin between photo and text margin-top: length margin-right: length margin-bottom: length margin-left: length

• where length is one of the units of length or a percentage of the width of the containing element
• Can also use keyword “auto” which enables browser to determine margin size
• Default unit is pixel margin-top: 1; margin-right: 2; margin-bottom: 1; margin-left: 2


Margin value can also be negative
• Creates interesting overlay effects
• Some browsers do not support this with unpredictable results!

Four margin styles can be combined margin: top right bottom left
• Think of moving clockwise around element

• If you include only 3 values, applied to top, right, bottom
• Specify two, first is applied to top/bottom, and second to right/left
• Specify single value, applied to all four margins

Let’s change margins
• See tutorial3/about10.htm


Can also set margins for other elements
• Even entire page
• Let’s change page margin so it is further down the page by increasing the page’s top margin
• See tutorial3/about11.htm

Older browsers can use deprecated attributes vspace and hspace


By default, browsers display an image at its saved size
• Can specify a different size by adding attributes to the image tag width=“value” height=“value”

Changing the size within the browser does not affect the file size

• Use image-editing software
• But specifying height and width is good idea even if you are not trying to change dimensions because of way browsers work with inline images
• When a browser encounters an inline image, has to calculate size and use that info to format page

• If you include dimensions, the browser does not have to perform that calculation
– Page will be displayed faster
• To determine size of an image, use graphics software and record dimension of each graphic in pixels

See tutorial3/about12.htm


Let’s use an image file as a background for the splash screen page

Can set a background image for any element background-image: url(url)
• where url is name/location of image file
• When browser loads background image, repeats it until entire element is filled

• This is known as tiling
• See tutorial3/index1.htm

Background Image Options
• Can also specify direction in which the tiling should take place background-repeat: type
• where type is repeat (default), repeat-x, repeaty, or no-repeat

• See Figure 3-49 for examples

Initially, browsers place image in upperleft corner and repeat from there
• Can change that with background-position: horizontal vertical
• Can specify position as distance from top-left corner, percentage of element’s width or height, or by using a keyword

• Keyword options are top, center, bottom for vertical position, and left, center, right for horizontal background-position: 10% 20%
• would set initial position 10% to right and 20% down from upper-left corner background-position: right bottom
• places image at bottom-right corner

• If you include only one position value, browser applies that value to horizontal position and vertically centers image background-position: 30px
• places image 30 pixels to right of element’s left margin and centers it vertically

By default, background image moves with element as user scrolls

• Can change that by using background-attachment: type
• where type is either scroll (default) or fixed
• Fixed will not move and are used for watermarks—a translucent graphic impressed into the very fabric of the paper

The Background Style
• Can combine various background styles

• background: yellow url(logo.gif) no-repeat fixed center center
• creates yellow background on which image is not tiled but fixed in horizontal and vertical center

Let’s add “DRAFT” as a watermark to designate that this page is still undergoing review

• See tutorial3/about13.htm

Older browsers do not support background images for any page element
• Can be added to <body> tag to create a background for entire page
• No attributes available to control tiling or placement of background image

Let’s learn about image maps!


In this session you will learn about different types of image maps, and you’ll create an image map and test it for the
Maps page


Tom wants the park map to be interactive
• When a user clicks on an area of the park, browser opens a page describing features of that area: water, rides, karts
• See Figure 3-52 for the relationships between these pages


To link a single image to multiple destinations, must set up hotspots within the image
• A hotspot is a specific area of the image that acts as a hypertext link

You define hotspots through the use of image maps
• Image maps list coordinates that define the boundaries of the hotspots on the image

• Any time a user clicks inside those boundaries, the hyperlink is activated

Two types of image maps: server-side and client-side


In a server-side image map , the server, which is the computer that stores the Web page, controls the image map
• Web author includes the coordinates of the hotspots within the Web page
– Whenever a user clicks the inline image, the appropriate coordinates are sent to a program running on the server and the program uses them to activate the appropriate hyperlink


Supported by most, if not all, browsers
• Limitations, however
• Because a program on the server must process the image map, you cannot test your code using local files
• Can be slow to operate because click request has to be processed by the server
• On most browsers the target of a hyperlink is indicated in the status bar

• But this is not done with server-side image maps
• These limitations can be overcome by using client-side image maps


In a client-side image map, you insert the image map into the HTML file
• User’s browser processes the image map locally
• Can easily test it
• They tend to be more responsive because the information does not have to be sent over the network or dial-up connection

• When a user moves pointer over the image, the status bar will display the target of hotspot
• But older browsers don’t support them

First step is to add the map element
<map name=“map” id=“map”>hotspots</map>
• where map is the name of the map and hotspots are the locations of the hotspots within the map

• Can place a map element anywhere in the body because the browser uses it for reference and doesn’t actually render it
• See tutorial3/map.htm

Open watertxt, kartstxt, and ridestxt and rename them
• Will not edit them

Let’s enter the hotspots of the map


To create the image map, could open the image in a graphics program and record the coordinates of the points corresponding to the hotspot boundaries
• Difficult and time-consuming
• Typically will use a special program to create image map coordinates for you


Most image map programs generate the coordinates for hotspots as well as the necessary HTML tags

General syntax for defining hotspots is:
<area shape=“shape” coords=“coordinates” href=“url” alt=“text” />
• The alt tag is required

Shape has three possible values:

• rect for a rectangular hotspot
• circle for a circular hotspot
• poly for hotspots shaped like irregular polygons

In the COORDS property, you enter coordinates to specify the hotspot’s location
• Values you enter depend on shape of hotspot

• Coordinates are expressed as a point’s distance in pixels from left and top edges
– Coordinates 123,45 refer to a point 123 pixels from left edge and 45 pixels from top
• If the coordinates overlap, the browser uses the first tag in the list

Let’s add three hotspots: one of each shape


Two points define a rectangular hotspot: upper-left corner and lower-right corner shape=“rect” coords=“350, 38, 582, 200”
• Let’s add this hotspot to parkmap image map and link it to the water.htm file
• Remember alt text
• See tutorial3/map1.htm


The coordinates required for a circular hotspot differ from those of a rectangular hotspot
• Defined by the locations of its center and its radius
• shape=“circle” “coords=“255,133,74”
• See tutorial3/map1.htm


When you want to specify an irregular shape, must use the poly value for the shape attribute
• Enter the coordinates for each vertex in the shape
• See Figure 3-55
• See tutorial3/map1.htm


Have finished defining image map
• Now instruct browser to use it with the inline image and TEST


Final step in adding an image map is to add the usemap attribute to the <img> tag for the image map graphic
• Tells the browser the name of the image map to associate with the inline image
<usemap=“file#map”
• See tutorial3/map2.htm


Notice the map is surrounded by a colored border
• Can be distracting and ruin visual appearance
• Remove it by using border-width style to set width of border to 0 pixels
• See tutorial3/map3.htm


View your color and images under different color resolutions
• Use Web-safe colors to prevent dithering on browsers with 256-color palettes

Use foreground colors that contrast well with the background

When specifying a font face, list the specific and most desirable ones first

• Conclude with the generic font

Keep your font choices simple
• Too many font styles within a single page can distract users
• In general, you should not use more than two font faces
• Large blocks of bold or italicized text can be difficult to read

• Keep your fonts to about 3 or 4 basic sizes

Use relative units (such as the em unit) when you want your fonts to be scalable under different monitor sizes and resolutions

Make your code easier to read and more compact by combining the various font styles into a single style


Use GIFs for illustrations and line art that involve a few basic colors
• Use JPEGs for photographs and illustrations that involve more than 256 colors

Do not overload a Web page with images
• The more images you include, the longer a page take to load
• Generally a Web page should contain no more than 40 to 50k of inline images


Once a browser downloads an image, it keeps a copy of it on the user’s computer
• Therefore, you can make a Web site load faster by reusing images whenever possible throughout the site
• Use a single background image or logo on every page in order to give your Web site a consistent look and feel


Include the width and height attributes for each of your inline images to make the page load more quickly

Use miniature versions of images (known as thumbnails ) to let users preview large image files
• Link each thumbnail to the corresponding larger image so that interested users can view the image in greater detail

• You should create thumbnails in a separate graphics program, rather than simply reducing the full-size image using the width and height attributes
• Changing the width and height attributes decreases an image’s dimensions, but not the file size


View your Web page in a browser without graphical capability (or with the graphic support turned off) to verify that users with non-graphical browsers can still effectively use your site

Avoid large areas of white space surrounded by page content

• Use the float and margin styles to move white space to the outside margins of the page

If you use an image map, provide text link alternatives for users with non-graphical browsers