Save this page to your DEL.ICIO.US account and TAG it there
Vance's e-Zguide to creating simple HTML files (in Notepad, or any text editor)
Using pictures on the Internet

Navigate this site
Start over | Browse Index

Concept:

Image manipulations are essential to Web page design. Here are some things you should know about finding and using pictures on the Internet.

Here's how to locate pictures:

1. Use Google Image Search to find an image of your choice: http://images.google.com/
2. Right click on the image and select its Properties. You will see its URL and dimensions (in pixels)
3. Place your cursor at the start of the URL and scroll down and right until you have highlighted the entire URL.
4. Use Ctrl-C (or right click / copy) to copy the URL to your computer’s memory or pasteboard.
5. In your HTML document, where the code says <IMG SRC="something"> paste the URL in between the quote marks

What if the picture is too big for your web page? What if you are trying to fit the picture into a narrow frame in a blog or some other web page? You can resize it on your page. BUT if you want the picture to look good, you must follow two rules:

• You can make the picture smaller, but not larger
• You have to keep the picture's width and height in proportion
  (that is, you must divide width and height by a constant number when resizing your pictures)

Here's how to resize the picture:

1. Browse to a page on the Internet containg the BIG picture you want to use.
2. Right click on the image and select its Properties. You will see its URL and dimensions (in pixels)
3. Divide width and heigth by the same number. For example if you see that the dimensions are given as 320 x 240, you can divide each dimension by 2 (160 x 120)
4. In your HTML document, where the code says (for example) <IMG SRC="http://www.something.com/pics/image.jpg"> add a WIDTH="www" HEIGHT="hhh" where www and hhh are the new width and height you want the picture to be.

In the above example: <IMG SRC="http://www.something.com/pics/image.jpg" WIDTH="160" HEIGHT="120">

The picture will now appear smaller on your web page than on the web page you are linking from.
There is more information here: http://www.vancestevens.com/papers/evonline2002/week6.htm#crop_resize

Navigate this site
Start over | Browse Index

Copyright 2008 by Vance Stevens
under Creative Commons License: http://creativecommons.org/licenses/by-nc-sa/2.5/