2.  Pictures  Page backgrounds  Element backgrounds (list items!)  Link displays (arrows)  List markers

3. Formats and Fidelity

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

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

6.  Changing › Fidelity › Formats › Cropping  Tools › Programs › Web: Phixr Phixr

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

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

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

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

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

14. caption

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

17.  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: url(“file name”);  Background-size  Background-repeat

18.  1 is fully opaque : can’t see through  0 is fully transparent: background disappears  Biggest issue: Everything inside inherits the opacity Figures problematic

19.  Any place that you have a background  Lots of different types  Google it!  Not supported consistently on browsers

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

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

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

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