3.  Komodo Edit Project › Helping you find your folder  Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder  Isis › Delete what you don’t need

4.  First page of every site is to be index.html  Works fine if you have then in different folders  Remember › Formatting of HTML and CSS › Validation of HTML and CSS

5.  Do NOT spread items across multiple pages. More work for us.  Will send you notes about problems I found  NEW REQUIREMENT for link Project 1: short name (author names)

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

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

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

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

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

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

13.  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

14. A list of color names colorpicker.com

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

16.  Paletton Paletton  Adobe Adobe

17.  Any place that you have a color  Lots of different types  Google it!

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

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

22.  Instead of pixels, use characters

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

26.  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

27.  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

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

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

31.  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

32.  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

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

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

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

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

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

39.  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

40. caption

42.  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

43.  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