3. Primaries: magenta, yellow, and cyan This color system is called subtractive because: each primary color absorbs (subtracts) a certain part of the color spectrum. every time a color is added, less light is reflected. When you mix all three primaries together, the entire spectrum of color is absorbed, and we’re left with black.

4. Primaries: Red, Blue, Green Additive color systems start without light (black). Light sources combine to make a color. As colors are added, the resulting color is brighter.

5. We’ll be working with the additive color system Mix various amounts of red, green, and blue to create a color. Colors can be represented by name an rgb (dec, dec, dec) value hexadecimal (# hx hx hx) value.

6. For RGB, each color is indicated by a number from 0-255 (0,0,0) = black (255,255,255) = white For Hexadecimal (hex), each color is indicated by 6 values from 0 – F #000000 = black #FFFFFF = white

7. Each two letters/numbers represent red, green, or blue in that order. Examples: #FF0000 = red #00FF00 = green #0000FF = blue #0F6480 #ADFAA5 #E01B4C

8.  How do computers store information?  Bits 1 and 0  Binary numbers are too hard to use  Group them together in groups of 4  That’s hexademical!

9.  Sometimes you will see colors as #123  This is the same as #112233  Why? Still a pretty broad range of colors http://www.december.com/html/spec/color3hex1.html

10. A list of color names colorpicker.com

11.  Eyedropper for Chrome Eyedropper for Chrome  Colorzilla for Firefox Colorzilla for Firefox  Colorpic Colorpic

12.  Paletton Paletton  Adobe Adobe

15. Pictures are stored as pixels Monochrome: BLACK or WHITE

16.  Different levels of black and white › Shades of gray › Percentage of black

17.  Instead of pixels, use characters

18. ONLINE http://picascii.com/ DOWNLOAD http://photoediting.dphotojournal.com/ascii- art-generator-3242/

20.  Red Green and Blue  Each has a value from 0 to 255  Sound familiar?

22.  jpeg or jpg, png, tif, gif, …  Different encodings, different sizes but they all will work › Actually different ways to COMPRESS them  Why compression? 1000 red pixels in a row… › That’s why they are different sizes  But you MUST use the correct extension name and capitalization

23.  Big difference in size is how many pixels were used (dpi) › Isis WILL run out of space  Don’t use more than you need! › Common dpi: 96, 300, Dimensions in pixels (700, 2000, 4000, …) › Little pictures don’t need that much detail › Don’t always need HD!  Tools to change the fidelity › Use any program › Can do it on the web: phixrphixr

25.  Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate

26.  Pictures  Backgrounds  Link displays  List markers

27.  Can be any where on the web › src has full url  Problems › Pictures change or disappear › You’re poaching on their resources  NOT PERMITTED FOR THIS CLASS

28.  If you only have one or two, just another file › src just needs the file name › › REMEMBER: case matters  If you have a lot, keep them in their own folder › src needs the path ›  Either is specific to this website

29.  Examples › Company logo › Your picture  Put it in the top level › e.g., comp101 for this class › (same place as your course page)  Reference as ›

30.  In my folder file.ext  In a subfolder subfolder/file.ext  In a higher folder../file.ext  On the web http://www. …

31.  Your own  Publicly available › Flickr and the Creative Commons Flickr › Google and labeled for reuse Google  IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT

33.  All the box-related characteristics in CSS  Add class in HTML

34.  Resize and crop before you put it in the folder  Why? › Size on page › Size of file › More control

35.  HTML permits you to put size on an img, but NOT in this class.  ALWAYS do it in css.  Only size ONE dimension. Deductions for using both: funny house effect  Why not always resize picture to wanted size? › May want to use image multiple times › Simpler to make multiple pictures consistent in CSS

36. caption

38.  Default: window size › Advantage: grows and shrinks easily › Disadvantage: harder to design  Making body fixed width › Advantage: easier to control › Disadvantage: scroll bars and unused space  Using fixed width section in default body › Combines advantage of fixed width without scroll bar › Allows complex backgrounds

39.  Body background › Need to assure readability › Simple images (see resources) › For busier images: use overlay  Use div or section or …  Opacity (0 to 1) to let it show through › Background-image  Background-size  Background-repeat