CSci 220 - Lecture 3
Web Page Design
© Morris Firebaugh
A. Chapter 3: Web Design Principles for Print Designers
B. Philosophy of HTML
C. HTML Document Structure
D. HTML Tag Syntax
E. Elements of the <HEAD> Element
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)
Hexadecimal Representation of True Color
- 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
|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
|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
- 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
- The three variables are
- Hue --> color or wavelength
- Saturation --> ratio of pure color to hue + white
- Value --> intensity or brightness
|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
|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 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
- 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:
- 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
- <HEAD>...</HEAD> 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:
- With 6 additional tags, we can create great Web pages!
<H1>...</H1> to <H6>...</H6> for headings
<P> for new paragraph
<UL>...</UL> for unordered lists, with elements <LI>
<A HREF="somefile.html">...</A> for hyperlinks
<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
The following elements and their function are legitimate for the <HEAD> element
- 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.
- Used to specify the files used in an HTML Frame
- 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
- An example is the link to a cascaded style sheet
<LINK REL="STYLESHEET" HREF="CS220Style.css" TYPE="text/css">
- "...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
- Accomodates and identifies the language of SCRIPTS (e.g., JAVA, VBASIC)
- Should be enclosed in a comment (for older, non_SCRIPT enable browsers)
- Local definition of style sheet
- Should be enclosed in a comment (for older, non_STYLE enable browsers)
- "...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