Images

Putting Images up on web sites can be a little difficult. You must coordinate the web page file and the image files. Links can similarly be difficult, because the addresses of pages are relative--that is, they change depending on where you are located.

This is one of the reasons why you should create web pages in one folder, and keep your images in the same place. It makes it simpler to find things. It is of course possible to use many folders, but when you do that, it becomes more difficult to give the address to connect pages and images.

When you make a link or place an image in a web page, you must give the address of the target file. If all of your files are in the same, single folder, then the address is easy: just give the name of the file. If you have more folders and need to link between different folders, the address system becomes a little more complex.

For this class, I ask that you keep only a single folder, to keep things easier. If you want to learn about the more complex address system, please look at this page.

You can also make links to pages in other web sites, on different domains. To do this, you need to use "global" addresses, which begin with "http://".

You can also make a "global" link to an image file--however, this is considered very bad manners if you do not own the web site where the image is located. It is called "Hotlinking." You should avoid it unless you are sure that it is OK.

Image Types

There are many types of images with different color schemes, features, and compression techniques. For a web page, the best two image types are JPG (or JPEG) and GIF. The JPG image type is best for high-quality photographs; the GIF image type is best for simple drawings or animated images.

Sometimes web pages use a file type called PNG, but I would suggest that you wait until you are more advanced before using this.

One image type to avoid is BMP, or "BitMap" images. These are very, VERY large in KB or MB, and make it difficult for visitors to view the page. ALWAYS check your images to see if they have the BMP filename extension. If they do, then either throw away the image and find a new one, or convert the BMP into a JPG. DO NOT TRY TO CHANGE THE IMAGE TYPE BY CHANGING THE EXTENSION! That does not change the image type, it only affects the program which is used to open the image.

Instead, use a program like Picasa, Gimp, Photoshop, or any other image editing program. Open the image in the program, then SAVE AS, and choose "JPEG" from the file type menu. DO NOT JUST TYPE "JPG" to replace "BMP." You must let the program make the change for you.

If you need to know more detail about this, see Mr. Poza.

Finding Images

You can use a variety of images on your web site. You can take photos with a regular camera, then scan them into a computer; you can take photos with a digital camera, and download them into a computer; or you can download images from web sites.

If you download images from a web site, you should make sure about who owns the image. Usually, people use other people's images, and nobody minds too much. However, you should make sure that the images you take are free. Otherwise, always be sure to give credit for the image, showing where the image came from.

Some free image sites:

Or you can use Google's Image Search, and download images from there. However, again, please be sure to give credit to the original web site where you got the image. For example:

from petwebsite.com

Where to Put Images, What Names to Use

You must save your images INSIDE your web page folder, along with your web pages. They should be in the SAME folder.

If you found your images from a web site, make sure the file names are correct!!!

Remember:

• No upper-case
• No spaces
• No symbols or punctuation, except for - or _ (also you can use a period . but only before the filename extension)

Image HTML

Now that you understand more about images and where to get them, how do you write the HTML?

It's not really too hard. The basic tag is IMG. You need at least one attribute: SRC, which tells the location of the image. Since your image will be in the same folder as the web page, you just need to type the file name. So here is a sample:

And that's it. No end tage is necessary.

There are some other attributes, however:

• BORDER=0 (creates a border using the main text color)
• WIDTH=300 (re-sizes the image so it is x-number of pixels wide)
• HEIGHT=300 (re-sizes the image so it is x-number of pixels tall)
• ALIGN="left" (changes the alignment)
• HSPACE=10 (adds ten pixels of blank space to the left and right of the picture; like a "margin")
• VSPACE=10 (adds ten pixels of blank space to the top and bottom of the picture; like a "margin")

Some points: about WIDTH and HEIGHT, if you just use one, the other will change automatically by the same amount. In other words, if you have an image which is 300x200 in size, and you change the WIDTH from 300 to 150, the height will automatically change to 100; you don't need to use both attributes unless you want a crazy size change.

HOWEVER: be careful! The WIDTH and HEIGHT commands only change how the image looks on the web page! They DO NOT CHANGE the actual image or the image size! Don't use this command attribute to make a big image "smaller."

About the ALIGN attribute: the main types are "left" and "right". With "left," the image will appear along the left side of the page and the text will wrap around it. With "right," the same thing happens, on the opposite side. If you do not have an ALIGN attribute, then the photo will appear at the left BUT only one line of text will appear beside the photo!

The A Command (making links)

When you want to link to another page, use the "A" command.

There are two types of links:

1. a link to another page in your web site
2. a link to a different web site

The first kind, a link to another page in your web site, is easy. The page you are linking to will probably be in the same folder as the web page you are working on. (Advanced web designers will use many folders, but for beginners, let's just use one folder.)

If the other web page is in the same folder (local address), then the link is easy: just give the filename only. Use the HREF attribute:

HREF="filename.html"

Here is the whole command:

<a href="filename.html">This is a link.</a>

This will create a link which will take the visitor to the other page.

For the second kind of link, you must use the entire URL (global address), beginning with "http://". The attribute would look like this:

HREF="http://www.blogd.com/"

Here is the whole command:

<a href="http://www.blogd.com/">This is a link to my blog.</a>

Please visit <a href="http://www.blogd.com/" target="_blank">this page</a> sometime.

That code will look like this:

Please visit this page sometime.

Now You Know

Now you know the basic facts about adding images and links to your web page. On the next page, you'll see a list of commonly-used HTML commands and their attributes.