Designing a Web Page

Designing a Web Page Maureen Smith Professor, Saddleback College Tutorial 3

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

Objectives • 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

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

Working with color in HTML • 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

Using color values • 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

Using color names • 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

Defining Foreground and Background Colors • 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

How are you doing? • 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

Working with Fonts and Text Styles • 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

Choosing a Font • 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

Setting the Font Size • 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

Controlling Spacing and Indentation • 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 Picky, picky, picky!

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

Setting Font Styles, Weights, and other Decorative Features • 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

Designing a Web Page