molecularsciences.org

Internet is full of graphics and pictures. You will also want to add pictures to your website. In this lesson, you will learn how to add pictures and  graphics to your webpages and how to do different things with them.

Image Formats:

There are many image formats but only three are commonly used on the web. These three are bmp, jpg, and gif. Most pictures or graphics that you post on your page would have one of these three in it. Now let me give you the syntax before you get confused.

<img src="xyz.gif">

To post an image you have to use the <img> tag. <img> tag is never used alone and there is no </img> tag. It is always used with an attribute. Src stands for source (source of the image). Inside the quotation marks, you have to input the source (or location) of the image file. In this case, the image file is in the same directory as this html file, so I just type the name of the file. If the file is in a subdirectory, then you have to type the name of the subdirectory / name of the file. If you do not understand the previous sentence, follow the example below:

Suppose you saved your files in a directory by the name of main directory and the image is in a subdirectory by the name of images then  you should do the following:

<img src="images/xyz.gif">

If the images are in a very remote directory, then you would have to type the entire address into into the source field. Your computer probably has hundreds of pictures and images which you do not know about. Let me show you how to find them. If you have windows 95/98/NT/2000, go to start--find--my computer. Now type *.jpg and click on find. You will see a bunch of files accumultating below. Retry this with *.gif and *.bmp. To view these images, just doubleclick on them. You can post them on your web page.

Now suppose you come across a really nice picture or a very neat graphic on the someone else's site and you want to post it on your website. If you have Netscape or Internet Explorer, take you mouse pointer over the image and click the right button on your mouse. I will refer to this maneuver as right clicking on the image. When you right click on it, you will see a list appear on the window. One of them should be Save image as. Try it on the image above. Click on this menu and it will open a window. In the window you can specify the name of the file and where you want to save it on your computer. You can leave this image on the computer, set it up as a wallpaper or use it on your website. This neat little trick is a copyright nightmare. An image that a person places on his/her website is his/her property. No one can legally take it without permission. Luckily most things on the web are free and anyone can take them. 

Pictures align to the left of the page by default. Suppose you want it to be on the right or center side of the page. Well, you can use align and center.

<img align="right" src="images/logo.jpg">

<center> <img src="images/logo.jpg"> </center>

<img scr="images/logo.jpg">

So far all you have seen are either text or image, one at a time. If text occupies a line, image couldn't vice versa. Suppose you want to have both at on the same line and want to align it the just the right way. Here is how you do it.

<img align="top" src="images/logo.jpg"> This text is on the top right side of the picture.

<img align="middle" src="images/logo.jpg"> This text is on the middle right side of the picture.

<img align="bottom" src="images/logo.jpg"> This text is on  the bottom right side of the picture.

This text is on the top right side of the picture.

This text is at the middle right side of the picture.

This text is on the bottom right side of the picture.

I am using what we learned in this lesson. Let's see if you can figure out how I did these.

Text here and finally

    

Did you know that you can also change sizes of your images and can show only a chosen piece of a picture. On the web if you make post a reduced-size image or show a piece of an image, it is called a thumbnail. Thumbnailing is a very useful tool. You might have noticed that while surfing the net, if you ever come across a website with lots of nice graphics and pictures, it takes forever to download. The reason is that images require a lot of memory and therefore take more time to download. Usually the first thing to appear on your screen is text. Now if you reduce the size of your image, or show only a piece of it, you are reducing the amount of memory it requires and also the amount of time to download. Remember, if your site takes too long to download, most people will just move on to a different site. Waiting is the most undesirable part of websurfing. Now let me show you how to change sizes of your images. Here is the syntax:

<img src="images/logo.jpg" height=200 width=100>

<img src="images/logo.jpg" height=100 width=200>

<img src="images/logo.jpg" height=200 width=200>

You can put in any positive value for width and height. No negative value are allowed. Why? Because a physical object can not have a negative size, which means that its image can not have a negative size. What if someone decides to defy the laws of physics and put in a negative value anyway? Try it and find out! It will be a good learning experience. You can see below what the code above did the the picture.

As you can see changing sizes can make the picture look very different. I specifically chose this picture to magnify the difference. In most pictures you would not see that much of a difference. 

Image take a lot a memory, but suppose you want to make a website which would offer all kinds of pictures and graphics for free or for a charge. In this situation you still have some hope. The following are some simple techniques that you can apply.

• Spread the images over a lot of pages
• Minimize the images considerably to display them on one page and link them to the real picture
• Post a piece of the each image and then link it to the real image.