Computer Science 101 Color, Fonts, Links, Design

Computer Science 101

Color, Fonts, Links, Design

Body Attributes

• Govern the entire body of the page

• BGCOLOR - the background color

• TEXT - the text color

• LINK - the color of all links

• VLINK - the color of a link after it’s been selected

Examples

<BODY> (uses defaults)

<BODY BGCOLOR="blue" TEXT="white">

<HR VLINK="#990000"> (hexadecimal number)

Hexadecimal Number System

• Digits 0..9 and A..F

• base 16

• A16 = 1010, etc.

• Can say more with less - AA is 170 (10 * 16) + (10 * 1)

Representing Colors

• Almost 17 million colors on most computers

• Use a six-digit hexadecimal number

• #000000 is black, #FFFFFF is white

RGB Color System

• Mixes three color components (red, green, blue)

• Each component is given two hex digits

#2C45F2 = 2C 45 F2 red green blue

Saturation Values

• 00 is minimum saturation

• FF is maximum saturation

• In general, lower saturation produces darker shades, whereas higher saturation produces brighter shades

Web-Safe Colors

• Only 216 colors are guaranteed on all browsers

• 6 * 6 * 6 = 216, so only 6 different values per component

• 00, 33, 66, 99, CC, and FF

Examples

#666666 medium gray

#660066 medium purple

#FF0000 brightest red

RGB on Most Monitors

• 256 * 256 * 256 = 16,777,216 colors

• If the browser does not support all these, then the nearest color among the Web-safe ones is used

The FONT Tag

• <FONT> some text </FONT>

• It’s deprecated, meaning it’s probably supported by most browsers but may not be in future releases

Font Attributes

• SIZE – 3 (10 or 12 pt) is default

• COLOR – as usual

• FACE – Arial, Courier, Times, etc.

• Relative size - +2, -2, etc.

Example

Linking to Other Pages

• The Web is a hyperspace

• One navigates to various items by following links

• The navigation path can be linear or non-linear

Basic Principles of Web Site Design

• Distribute topics into a set of pages

• Connect the pages with links

• Each topic should be self-contained and contain links to related topics, allowing users to form a cognitive map easily

The Top-Level Page

• Serves as a platform for browsing the entire site

• Many ways to lay it out, but the most simple is to provide – an introductory paragraph– a set of links to the main topics

Example: A Simple Site

• Top-level page (index.html) has links to my hobbies and my career information

• Hobbies are discussed in hobbies.html

• Career stuff is in career.html

Organization of Files

index.htmlhobbies.html career.html

public_html

= a directory

= a file

A Better Organization

index.html

public_html

hobbies career

index.html index.htmlgolf.html books.html

Why Design?

• Helps to divide up the work into manageable parts

• Reduces cognitive overload on viewers of pages

• Facilitates the construction of links

The Anchor Element

• Supports links to other pages or to places within the same page

<A> … </A>

• A required attribute is either HREF (link to another page) or NAME (link to same page)

The HREF Anchor

<A HREF="http://www.wlu.edu/~lambertk">Lambert page</A>

<A HREF="a URL">The displayed text of the link</A>

Absolute URLs

• An absolute URL contains the complete address, including the server name– Example: http://www.wlu.edu/~lambertk

• Causes a linking request to the server for a page, which involves some overhead (ie, time)

Relative URLs

• A relative URL contains just a path name (a file name or directory name and zero or more directory names)– Example: hobbies.html– Example: hobbies/golf.html

• Link to server is already there, so this way is faster than with absolute URLs

How to Construct a Pathname

index.html

public_html

hobbies career


If you’re in hobbies/index.html,you get to golf.html withgolf.html


index.html

public_html

hobbies career


If you’re in public_html/index.html,you get to golf.html withhobbies/golf.html


index.html

public_html

hobbies career


If you’re in hobbies/index.html,you get to the top-levelindex.html with../index.html

Relative vs Absolute

<A HREF ="../index.html">Back to index</A>

<A HREF="http://www.wlu.edu/~lambertk"> Back to index</A>

An absolute link causes a relink to the server, which can slow downnavigation.

Relative links are shorter and easier to remember and use.

Absolute links can change, relative links are (relatively) stable

More Basic Principles

• Restrict content of each page to avoid cognitive overload (3-7 rule)

• Avoid superfluous links, such as back to previous page (the browser has a button for this already)

Other Design Tips

• Draw a diagram of the file/directory system

• Show also how the files are linked

The File/Directory Structure

index.html

public_html

hobbies career


The Link Map

index.html

public_html

hobbies career


Documents

Computer Science 101 Color, Fonts, Links, Design