1. Computer Science 101 Color, Fonts, Links, Design

2. 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

3. Examples (uses defaults) (hexadecimal number)

4. Hexadecimal Number System Digits 0..9 and A..F base 16 A 16 = 10 10, etc. Can say more with less - AA is 170 (10 * 16) + (10 * 1)

5. Representing Colors Almost 17 million colors on most computers Use a six-digit hexadecimal number #000000 is black, #FFFFFF is white

6. RGB Color System Mixes three color components (red, green, blue) Each component is given two hex digits #2C45F2 = 2C 45 F2 red green blue

7. Saturation Values 00 is minimum saturation FF is maximum saturation In general, lower saturation produces darker shades, whereas higher saturation produces brighter shades

8. 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

9. Examples #666666 medium gray #660066 medium purple #FF0000 brightest red

10. 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

11. The FONT Tag some text It’s deprecated, meaning it’s probably supported by most browsers but may not be in future releases

12. Font Attributes SIZE – 3 (10 or 12 pt) is default COLOR – as usual FACE – Arial, Courier, Times, etc. Relative size - +2, -2, etc.

13. Example

14. 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

15. 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

16. 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

17. 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

18. Organization of Files index.htmlhobbies.htmlcareer.html public_html = a directory = a file

19. A Better Organization index.html public_html hobbiescareer index.html golf.htmlbooks.html

20. Why Design? Helps to divide up the work into manageable parts Reduces cognitive overload on viewers of pages Facilitates the construction of links

21. The Anchor Element Supports links to other pages or to places within the same page … A required attribute is either HREF (link to another page) or NAME (link to same page)

22. The HREF Anchor Lambert page The displayed text of the link

23. 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)

24. 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

25. How to Construct a Pathname index.html public_html hobbiescareer index.html golf.htmlbooks.html If you’re in hobbies/index.html, you get to golf.html with golf.html

26. How to Construct a Pathname index.html public_html hobbiescareer index.html golf.htmlbooks.html If you’re in public_html/index.html, you get to golf.html with hobbies/golf.html

27. How to Construct a Pathname index.html public_html hobbiescareer index.html golf.htmlbooks.html If you’re in hobbies/index.html, you get to the top-level index.html with../index.html

28. Relative vs Absolute Back to index An absolute link causes a relink to the server, which can slow down navigation. Relative links are shorter and easier to remember and use. Absolute links can change, relative links are (relatively) stable

29. 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)

30. Other Design Tips Draw a diagram of the file/directory system Show also how the files are linked

31. The File/Directory Structure index.html public_html hobbiescareer index.html golf.htmlbooks.html

32. The Link Map index.html public_html hobbiescareer index.html golf.htmlbooks.html