September 30

posted Sep 30, 2011, 5:07 AM by Peter Knowles   [ updated Oct 3, 2011, 1:17 PM ]
Let's begin with a QUIZ to see what you remember about the reading and discussion on images from yesterday.

After the quiz, it's time to start working with images. First, find a few to work with:

1. Go to Creative Commons at
2.Look at the bottom right of your screen for the section titled "Explore" and click on the button called "Find CC-Licensed Works".
3. You'll get a screen with a search box and a number of buttons underneath. Choose one of these topics to type in the search box:
Puppies, Convertible, Italy, Cheese, Winter, or Hat

then click on one of the buttons below your search term to find a photograph of your searched item. (note: results from Google and Google Images are a little tougher to decipher, so you might want to start with Flick'r or Photopedia) 

4. When you find a photograph you want to work with, copy its URL.

Open HTML Instant or ShiftEdit (or a Google Doc if you want to challenge yourself!) and create an image link for the photograph you just chose in the body of your document.
 Here's what your code should look like:


You'll notice that there are not height or width attributes in this code. We'll add that later. For now, let the browser use the original size of the image.

5. Save your work and preview it. Does the photograph show up? Does it look right (or is the color, size, or anything else about it significantly different than the original)? If it looks right, you've done the first step right. 

6. Now, copy and paste your code three times, so if you preview the page you'll have four copies of the image showing on your page. 

7. Find the original size of your original image by returning to where you found it (back in step 4 above) and looking for that information. It's provided in different places at different sites (Flick'r vs. Photopedia, etc.) but you can find it if you try. Once you know the original size, it's time to do some math!

8. Add height and width attributes to the SECOND img element (from step 4 above) Your code should look like this:

<img src="URL" alt="TOPIC" height=" " width=" "/>

Now, divide the original height of your image by 2, and put the result in the height tag. Do the same for the width. Each number should be 1/2 the original number (if a number is odd, round up or down 1) 

9. Repeat step 8 for the THIRD line of code, but this time divide the SECOND set of numbers by 2. Each number should be 1/4 of the original number (again, round up or down by 1 if necessary)

10. Repeat one more time. This time divide the THIRD set of numbers and put the results in the FOURTH line of code. Each number should now be 1/8 of the original. 

11. Save and preview your page. You should see 4 copies of the image, each one being half as small as the one before it. The first one should be the original size.

12. That's all that's required, but maybe you'll have time to play around with some optional tags to add to some of your image elements to make them more interesting. Try these if you have time. 

13. Share your code with Mr. Knowles when you're all done using Google Docs. 

Peter Knowles,
Sep 30, 2011, 1:36 PM