Web Publishing II Exercise 3 University of Oregon Libraries

Web Publishing II
Exercise 3

Images from the Web

Images, like other original content on the web, are protected by copyright. However, there are a number of "public domain" sites on the web that offer collections of clip art, icons, buttons, bars, and other images for non-commercial use. Some have strings attached, such as the artists requesting a link back to their site, but many are string-free.

If you already have an idea of what you are looking for in an image, you can also use a web search engine to find images. Read the copyright information on the image's web site before you use these images.

  1. Find an image you'd like to include on your web page. The following sites are good places to browse:

    Caveats:

    • Some clip art sites have ironically poor entrance pages; spend a couple minutes looking around the screen to find the most likely access to the image collection itself rather than to other clipart sites.
    • Clip art sites use pop-over and pop-under advertising to an annoyingly high degree; if you have too many browser windows open your computer will start to slow down.
  2. Once you've found an image, save it in the same folder as your HTML file(s). Make sure you note the filename of the image, and whether it is a GIF or JPG image. To save an image:
    • Windows users: point to the image with your mouse, then right-click, select "Save Picture As..." or "Save Image As...," navigate to the directory, and click "Save."
    • Mac users: point to the image with your mouse, hold down the mouse button, select "Save Image As...," navigate to the directory where you want to save it, and click "Save."
  3. Add the image to your web page. Be sure to include the alt, width and height attributes. The border and align attributes are optional, but you should try them just to see how they work. Finding the width and height of an image depends on the browser you use:
    • Internet Explorer: point to the image with your mouse, right-click (Windows) or hold down the mouse button (Mac), then select "Properties." The size will be shown as width x height (e.g., 214 x 78).
    • Netscape: point to the image with your mouse, right-click (Windows) or hold down the mouse button (Mac), then select "View Image (filename)" The size will be shown in the title bar of your browser window as width x height (e.g., 214 x 78).

    Save your file and view it in your browser.

  4. Publish your web page to the server, then test it in your web browser. Don't forget to transfer your image file to the server as well.

You're done – return to the workshop outline.

Created by not on Jun 18, 2012 Last updated Jun 28, 2012