1 / 21

Images

Images. 28 January 2014. Follow Ups. Corrections and Tips. Can use width on body Word spacing Centering without a width. Images. Pictures are stored as pixels. Monochrome: BLACK or WHITE. What is a Color Pixel?. Red Green and Blue Each has a value between 0 and 255.

mendel
Download Presentation

Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Images 28 January 2014

  2. Follow Ups

  3. Corrections and Tips • Can use width on body • Word spacing • Centering without a width

  4. Images

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

  6. What is a Color Pixel? • Red Green and Blue • Each has a value between 0 and 255

  7. [SIDEBAR] ASCII Images • Instead of pixels, use characters

  8. ASCII Image Web Sites ONLINE http://picascii.com/ DOWNLOAD http://photoediting.dphotojournal.com/ascii-art-generator-3242/

  9. Many Formats • jpeg or jpg, png, tif, gif, … • Different encodings, different sizes but they all will work • But you MUST use the correct extension name and capitalization

  10. Images in HTML • Remember that HTML is just text • Need to point to pictures • Use the img tag <imgsrc=“where” alt=“what”> • alt: for screen reader and when pictures aren’t downloading • REQUIRED for this class

  11. Review: Viewing a Web Page SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions 2 1 3 Server Client Web Server Images Browser

  12. Where are pictures stored? • Can be any where on the web • src has full url <imgsrc=“http://www.cs.unc.edu/cms/about-us/sittersonsmall.jpg” alt=“Sitterson”> • Problems • Pictures change or disappear • You’re poaching on their resources • NOT PERMITTED FOR THIS CLASS

  13. Preferable: IN THE FOLDER • If you only have one or two, just another file • src just needs the file name • <imgsrc=“sittersonsmall.jpg” alt=“Sitterson”> • REMEMBER: case matters • If you have a lot, keep them in their own folder • srcneeds the path • <imgsrc=“images/sittersonsmall.jpg” alt=“Sitterson”> • BUT ALWAYS WITHIN YOUR FOLDER

  14. Picture Sources • Your own • Publicly available • Flickr and the Creative Commons • Google and labeled for reuse

  15. References Summary • In my folder file.ext • In a subfolder subfolder/file.ext • On the web http://www. …

  16. What about Resizing? • Resize and crop before you put it in the folder • Why? • Size • More control • May also want to reduce quality • isis will run out of space • Use any program • Can do it on the web: phixr

  17. Sizing Pictures • When using a SINGLE picture (not a page of photos), okay to place size in tag • Why? Typically unique • http://www.w3schools.com/tags/tag_img.asp • No other attributes allowed • Only size ONE dimension. Deductions for using both. • Borders, padding, margin, … or multiple pictures: use CSS

  18. Adding a caption <figure> <img …> <figcaption>caption</figcaption> </figure>

  19. Where else can images be used? • Body background • background textures • List marker

  20. Overall page design • 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

  21. Background Image • Body background • Works nicely when content is overlayed • Use div or section or … • Opacity to let it show through • Background-image • Background-size • Background-repeat

More Related