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.

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.

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.

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

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

 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!

 Sometimes you will see colors as #123  This is the same as #  Why? Still a pretty broad range of colors

A list of color names colorpicker.com

 Eyedropper for Chrome Eyedropper for Chrome  Colorzilla for Firefox Colorzilla for Firefox  Colorpic Colorpic

 Paletton Paletton  Adobe Adobe

Pictures are stored as pixels Monochrome: BLACK or WHITE

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

 Instead of pixels, use characters

ONLINE DOWNLOAD art-generator-3242/

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

 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

 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

 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

 Pictures  Backgrounds  Link displays  List markers

 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

 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

 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 ›

 In my folder file.ext  In a subfolder subfolder/file.ext  In a higher folder../file.ext  On the web …

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

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

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

 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

caption

 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

 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