1. Create a file called graphics.html based off of the HTML 5 template we used in class and place it in your cis233da folder on lampbusters.com
    1. Find a nice large "busy" (lots of items in it) image
    2. Put a thumbnail link to that "Big image" using two methods
      • Just scale the image down to 100pixels wide and rename it (I usually do something like bigimage.jpg goes to bigimage_th.jpg)
      • Use the fixed width selection in gimp, select a 100 pixel wide "crop" to use as a thumbnail
      • For both, use an actual width/height when you put the thumbnails into the img tag
    3. using the intelligent scissors and quick mask selections, copy one item FROM that big image (don't just use a circle or square to cut it out, but follow along the contours) and make it it's own separate file with a transparent background (so needs to be a png) and put that image into your page
    4. Using an appropriate image (which your first one may or may not qualify) Make a simple image map using at least one rectangle, polygon and circle. Put that image map onto graphics.html
      Note: Make sure you have scaled the image to the exact size you want to use it. Altering the size after it is mapped will make the mapped areas not line up properly.
  2. Using the <img> tag, embed a svg file that you created (remember inkscape is a free program for creating svg files if you don't have adobe illustrator). If you add a bitmapped image (png, jpg, gif) as a layer to create your svg file, remember to DELETE that image layer before you do your final save. Example Page
  3. Link the page graphics.html onto your index.html page IF YOU WANT, but you must post the link on the Canvas discussion when you are done
Resources:
W3C Button to test XHTML validation