Wednesday, February 21, 2007

a picture's worth 1024 words

Our brains are wired to react to the things we see - as opposed to that what we read. As you will probably notice in this little experiment...

Tigers (Panthera tigris) are mammals of the Felidae family and one of four "big cats" in the Panthera genus. They are apex predators and the largest feline species in the world, comparable in size to the biggest fossil felids. The Royal Bengal Tiger is the most common subspecies of tiger, constituting approximately 80% of the entire tiger population, and is found in the Indian subcontinent. An endangered species, the majority of the world's tigers now live in captivity

What did you see first? The picture or the text? What left a lasting impression? I'm betting it was the picture that grabbed your attention, and that no matter how much information I put into the description, you'd have a much better idea of what a tiger's all about from that little 9k picture.

So how do we go about tapping into all that pictorial goodness? By using the IMG tag, mais oui!

Try this gentle introduction to the subject on HTMLdog. For a more in-depth exploration, see w3schools - including the various examples at the bottom of the page (but don't worry too much about the image maps just yet, we'll cover these in a seperate post).

After you finish reading the words - plug some images into a page of your own: find a copyright free image on flickr using flickrCC. Download the pic into an images directory and then write up a page that includes the image on the left hand side, along with a heading and some descriptive text (perhaps from wikipedia) which appears to the right and wraps around the picture. For bonus marks:

  • have the picture link to the original image on flickr
  • prevent the blue/purple border from appearing around the hyperlink
  • add a 15 pixel margin around the picture using CSS
  • add a drop shadow to the image using CSS (this is distinction level stuff)
  • add the correct attribution to your image and text
Save as images.html and link to your new page from your index page - upload the lot (don't forget the images directory and its contents) and then sit back and enjoy the view.



Image: 'Tiger'
Wikipedia article: 'Tiger'

No comments: