Web Page Design

I. Color on the Web

• There are three main color models
• RGB = Red Green Blue

• CYM[K] - Cyan Yellow Magenta [Black]

• HSV = Hue Saturation Brightness [Value]

• RGB Color Model
• This is an additive model which is the basis for Color Monitors

• Any color may be represented by its RGB coordinates on a RGB color cube

Figure 9.20 RGB color cube. Note how the primary colors define unit vectors along the axes.The three corners opposite R, G, and B are cyan (C), magenta (M), and yellow (Y), the basis of the CMY model. The line connecting black (0,0,0) and white (1,1,1) is the gray scale line.

• We can explore the regions of the RGB color cube with the Macintosh color wheel.
• Path to the color wheel is available in most graphics programs
```MacHelp --> Color Accuracy --> Measuring Onscreen Color
```

Representing RBG Color Numerically

• True Color = 24-bit color = 16,777,216 colors, 8 bit red, 8 bit green, and 8 bit blue
• 16-bit color = 65,536 colors
• 8-bit color = 256 colors (chosen from a palette of 16 million)

• e.g., color="#e710de"
• General Form: color = "#RRGGBB"
• where RR, GG, and BB = 0-25510 = 00-FFH
• So, for instance,
• color = "#FFFFFF" produces white
• color = "#000000" produces black
• color = "#FF0000" produces red
• color = "#FF00FF" produces magenta

The Web Palette ("Web-safe Colors")

• Algorithm: Divide each color up into 6 equal Hex values, 00,33,66,99,CC,FF
• The resulting 6 x 6 x 6 = 216 colors are "web-safe", i.e. will not be shifted or dithered
• In GoLive, some of these are shown as:

• Next, consider the CYMK Model
• This is primarily a subtractive model
• It is the most important model for color printers
• Based on color absorption properties of inks and paints
• Think of a beam of white light shining on C, M, and Y filters

Figure 9.22 Filtering of white light by cyan, magenta, and yellow filters. In this subtractive process, the magenta filter subtracts green light out of the white beam, leaving only its complement, magenta. Subtracting all three colors leaves no light at all,-black.

• In addition to the filter picture, there is a color cube representation

Figure 9.24 The CMY color cube. Each corner is labeled with its (c,m,y) coor-dinates. Note that the RGB color cube is transformed int a CMY color cube by interchanging colors across the major diagonals.

• A final, valuable color model is the HSV model
• Model proposed by Alva Ray Smith of Pixar
• HSV an intuitive approach for artists, since it explains
• Tints
• Tones
• The three variables are
• Hue --> color or wavelength
• Saturation --> ratio of pure color to hue + white
• Value --> intensity or brightness

Figure 9.27 HSV color hex-cone. The color space of the hue, saturation, brightness (value) system is a hexagonal-sided cone using a cylindrical coordinate in which hue is measured by the angle, f. Value ranges from 0 (black) to 1 (white), and saturation ranges from 0 on the axis to 1 along the perimeter.

• Note that slicing through the hex-cone gives a nice interpretation of tints, tones, and shades

 Figure 9.28 Half-plane slice through the HSVhex-cone showing the locationsof tints, tones, shades and grays.

III. Philosophy of HTML as a Structured Language

• HTML Documents are Platform Independent
• Platform independence requires adherence to HTML standards
• Purists have real problems with proprietary browser extensions
• Example: Netscape's notorious <BLINK> element
• Example: Older, pre-<FRAME> browsers

• HTML means Hyper Text Markup Language

• It is a particular implementation of a SGML (Standard Generalized Markup Language)

• HTML is the result of SGML + the HTML DTD (Document Type Definition)

• SGML has recently been implemented as XGL ( eXtensible Markup Language  )

• To follow developments in this area, see the W3 Consortium

• There are two approaches to markup languages

1) Physical markup

2) Logical markup (also called semantic markup)

• Sections of text and graphics are marked as logical entities
• e.g., Titles, paragraphs, lists, quotations, references, etc.
• Interpretations is left up to the browser
• This approach provides enormous flexibility - platform independence

• Philosophy of HTML

1. HTML is an extensible language

2. HTML is an evolving language

3. HTML is an forgiving language

• Recall the following features of HTML
• Language is a stream of HTML ELEMENTS
• Elements are important contents of a page
• Elements are delimited by <TAG>s - i.e. "containers"
• Case insensitive tags
• Tags in general come in pairs
• White space, spaces, paragraphs, etc. are ignored in HTML

• Current Status of HTML standardization
• HTML 2.0 has been adopted as a standard
• Next HTML 3.2 was proposed
• HTML 4.0 has been adopted as the latest standard

"Developed throughout 1997 (first public working draft issued July 1997) by the W3C HTML Working Group, HTML 4.0 makes the Web more appealing, more accessible, and more international. The W3C HTML Working Group includes key industry players such as Adobe Systems, Hewlett Packard, IBM, Microsoft, Netscape Communications, Novell, Reuters, SoftQuad, Spyglass and Sun Microsystems; content specialists at HotWired, PathFinder and Verso, and experts in the fields of accessibility and internationalization.

HTML 4.0 improves the look and functionality of Web pages, offering several key improvements over the current HTML 3.2 Recommendation. "HTML 4.0 gives Web designers the ability to create dynamic visually exciting pages that are accessible to all,",said Dr. Dave Raggett, lead architect of W3C's HTML activity. "It includes improvements to forms and tables as well as frames, scripts and support for style sheets. We are really pleased with the features for accessibility and internationalization."

IV. HTML Document Structure

Recall general structure of an HTML document shown in HTML Editor "skeleton"

• The top-level document is contained in the tags <HTML>...</HTML>

• The next level down contains the two structure elements:
• <BODY>...</BODY>

• The only exception to this structure is in the case of FRAMEs

V. HTML Tag Syntax

• The general syntax of tags is:

<TAG  Attribute1=value1  Attribute2=value2  ...  >  . . . </TAG>

• Consider the syntax of the 4 tags above:

• <HTML>...</HTML> stands alone (no attributes) as container tags
• <TITLE> Lect3.html </TITLE> stands alone (no attributes) as container tags
• However, <BODY>...</BODY> may have several useful attributes:
• BACKGROUND="image.gif"
• BGCOLOR="#rrggbb"
• TEXT="#rrggbb"

• With 6 additional tags, we can create great Web pages!

<P> for new paragraph

<UL>...</UL> for unordered lists, with elements <LI>

<IMG  SRC="someimage.gif"> inserts a graphic

<PRE>...</PRE> defines preformatted text

• One last, usefull tag - the COMMENT tag
• Syntax is:

`<!--   This is the comment    -->`

VI. Elements of the <HEAD> Element

<BASE>

• The attribute HREF identifies the base URL for the page. Recommended NOT to use it.
• Browsers automatically resolve relative addresses correctly
• Interferes with portability of encapsulated folders.

<FRAMESET>

• Used to specify the files used in an HTML Frame

<ISINDEX>

• Proposed to make documents searchable
• Has been superceeded by content searching search engines
• Has been replaced by the use of forms and CGI
• Recommended NOT to use it.

• Provides a reference to a related document

`<LINK REL="STYLESHEET" HREF="CS220Style.css" TYPE="text/css">`

<META>

• "...an extensible container for use in identifying specialized document meta-information"
• Information included and its uses include:
• Expiration date of a page
• Keywords for search engines
• Indication of the language in which the page is written
• Scheme for indexing documents (e.g., ISBN #s)
• System for REFRESHing screen by linking to new documents

<SCRIPT>

• Accomodates and identifies the language of SCRIPTS (e.g., JAVA, VBASIC)
• Should be enclosed in a comment (for older, non_SCRIPT enable browsers)

<STYLE>

• Local definition of style sheet
• Should be enclosed in a comment (for older, non_STYLE enable browsers)

<TITLE>

• "...current standards of HTML require a TITLE for your file."
• Browsers display TITLE in Title.Bar of window
• TITLE is listed as BOOKMARK of web page

VII. Homework Assignment #2

Updated January 21, 2001