computer science 101 color, fonts, links, design
TRANSCRIPT
![Page 1: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/1.jpg)
Computer Science 101
Color, Fonts, Links, Design
![Page 2: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/2.jpg)
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
![Page 3: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/3.jpg)
Examples
<BODY> (uses defaults)
<BODY BGCOLOR="blue" TEXT="white">
<HR VLINK="#990000"> (hexadecimal number)
![Page 4: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/4.jpg)
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)
![Page 5: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/5.jpg)
Representing Colors
• Almost 17 million colors on most computers
• Use a six-digit hexadecimal number
• #000000 is black, #FFFFFF is white
![Page 6: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/6.jpg)
RGB Color System
• Mixes three color components (red, green, blue)
• Each component is given two hex digits
#2C45F2 = 2C 45 F2 red green blue
![Page 7: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/7.jpg)
Saturation Values
• 00 is minimum saturation
• FF is maximum saturation
• In general, lower saturation produces darker shades, whereas higher saturation produces brighter shades
![Page 8: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/8.jpg)
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
![Page 9: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/9.jpg)
Examples
#666666 medium gray
#660066 medium purple
#FF0000 brightest red
![Page 10: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/10.jpg)
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
![Page 11: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/11.jpg)
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
![Page 12: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/12.jpg)
Font Attributes
• SIZE – 3 (10 or 12 pt) is default
• COLOR – as usual
• FACE – Arial, Courier, Times, etc.
• Relative size - +2, -2, etc.
![Page 13: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/13.jpg)
Example
![Page 14: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/14.jpg)
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
![Page 15: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/15.jpg)
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
![Page 16: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/16.jpg)
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
![Page 17: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/17.jpg)
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
![Page 18: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/18.jpg)
Organization of Files
index.htmlhobbies.html career.html
public_html
= a directory
= a file
![Page 19: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/19.jpg)
A Better Organization
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
![Page 20: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/20.jpg)
Why Design?
• Helps to divide up the work into manageable parts
• Reduces cognitive overload on viewers of pages
• Facilitates the construction of links
![Page 21: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/21.jpg)
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)
![Page 22: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/22.jpg)
The HREF Anchor
<A HREF="http://www.wlu.edu/~lambertk">Lambert page</A>
<A HREF="a URL">The displayed text of the link</A>
![Page 23: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/23.jpg)
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)
![Page 24: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/24.jpg)
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
![Page 25: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/25.jpg)
How to Construct a Pathname
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
If you’re in hobbies/index.html,you get to golf.html withgolf.html
![Page 26: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/26.jpg)
How to Construct a Pathname
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
If you’re in public_html/index.html,you get to golf.html withhobbies/golf.html
![Page 27: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/27.jpg)
How to Construct a Pathname
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
If you’re in hobbies/index.html,you get to the top-levelindex.html with../index.html
![Page 28: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/28.jpg)
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
![Page 29: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/29.jpg)
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)
![Page 30: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/30.jpg)
Other Design Tips
• Draw a diagram of the file/directory system
• Show also how the files are linked
![Page 31: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/31.jpg)
The File/Directory Structure
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
![Page 32: Computer Science 101 Color, Fonts, Links, Design](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f325503460f94c4ee14/html5/thumbnails/32.jpg)
The Link Map
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html