October 3

posted Oct 3, 2011, 1:17 PM by Peter Knowles
IF you did not finish Friday's assignment, here are the instructions again. If you did, jump to the bottom of this page to see what you can do next.

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

1. Go to Creative Commons at creativecommons.org
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:

<img src="THE URL YOU JUST COPIED" alt="THE SEARCH TOPIC YOU USED TO FIND IT" />

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. 

Try out these apps

Go to the Chrome Web Store and download 
Sumo Paint 
and 
iScribe Tools
Once you've downloaded them, try one of them out. See what you can do with them, using images from Creative Commons. 

Comments