Infotech

Hi and welcome to lesson number 4 of the HTML Basics series. Images or picture files are used as illustrations on a page, as background, or as links, adding style to a site. A well-used graphic image makes the site more interesting, adds information, and also makes navigation easier and visually more appealing. By now you know enough to write a very nice, text-based home page, but it is the ability of the World Wide Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this lesson, you'll learn how place an image on your page and also how to turn an image into a link to another page.

<IMG SRC = “FILENAME.GIF” ALIGN = LEFT/RIGHT WIDTH = XXX HEIGHT = XXX ALT = “TEXT”>

Add an image with the image tag. The location of the image is described by its URL. The other switches in an image tag describe placement of image on a page:

The image tag has six basic switches:

SRC (Source)
This is the location and name of the image to be used. Use full URL if the image is on another server. Use relative URL’s if it is within own site. The URL reference must begin and end with quotes.
ALIGN
Align the image to the right or left side of the page, cannot center it. To center it put a center aligned paragraph tag <CENTER> before the image.
WIDTH
Width of the image in pixels.
HEIGHT
Height of the image in pixels.
BORDER
Width of the border around the image in pixels. Use the border command only when the image is an anchor for a link.
ALT (Alternate Text)
This is the text that appears in a browser when the image loading property of the browser is turned off or if the browser doesn’t display graphics. The text must be surrounded with quotation marks.

Using Width and Height Switches
Specifying image width and height lets the browser layout the page and begin displaying the text while it is still downloading the image. So, the user can start using the page immediately instead of waiting for all images. This increases perceived speed and makes the users feel that the site is fast and loads quickly.

Using An Image As A Link
You have just learnt how to link one page to another using a hypertext link. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here we're going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on blue words, to make the hypertext link.

Look at it again. See what happened? I placed an image tag where I would normally have placed words. Ideally when you write the code in notepad and execute it you'll see the entire image is active:

Which means that the homepage gif used as an example above would have a border around the image when you put your pointer over it. That would mean the image is active or clickable and ready to link to whichever URL you would have specified.

Now that we have seen the image tag and how to use images as links we shall discuss attributes that would allow you to manipulate your images with more freedom.

Placement On The Page
First let's worry about placing the image somewhere on the page. The default is justified to the left. If you write an image tag on a page, the image will pop up hard left.

If you want to have an image placed in the center of the page, you might be able to guess at this point that you'd use the <CENTER> and </CENTER> commands.

But how do we get the image to the right of the page? Well, how did we get text to the right? By adding the attribute ALIGN="--" to the <P> command, right? Could it be we do the same thing here? Yes, it could.

Aligning Text With Images
Images don't always stand-alone. You will often want text alongside them. Here you will ALIGN text along the top, the middle, or the bottom. Again, you'll use the ALIGN="--" attribute with one of these three: "top", "middle", or "bottom".

You may notice that using the top, middle, and bottom attributes only allows for one line of text and then the rest jumps down below the image.

Here's the trick to solving that. Don't use the top, middle, or bottom attribute unless you only want one line of text. If you want text to wrap around the image, use ALIGN="left" and ALIGN="right".

Even if the image is already to the left, use the ALIGN="left" attribute anyway. It allows the text to wrap around the image fully. Try it.

Two At Once?
But what if you want only one line of text to come out of the middle of the image, and you want the image aligned to the right? Can you use two ALIGN="--" attributes in the same image? No.

You set the text coming out of the middle using the ALIGN="middle" attribute in the IMG tag. Then you set the image and its text to the right by surrounding the two items with the <P ALIGN="right"> and </P> commands.

Are you starting to see how a tag does only one thing? If you want two effects placed on one item, you're going to have to use two different sets of tags.

Changing Image Size
To begin this discussion, let me state that images on a computer are not like photographs. Computer images are made up of a lot of little colored dots. They're known as picture elements or "pixels" for short. So, just remember that numbers refer to pixels rather than inches, or centimeters, or whatever. When I say pixels, I'm talking little colored dots.

Every image is made up of pixels. The more pixels per inch the image has the better, and more detailed, the image will appear. Of course, that also means the image will take up a whole lot more bytes on your hard drive. You're going to find that most images on the Web are 72 and 100 pixels per inch. Yes, there are other settings, but 72-100 is a good trade-off between loss of detail and bytes required.

Okay, so every image is made of pixels. This means that you can also denote an image by number of pixels. For example, the "light.gif" image is 97 pixels high by 64 pixels wide. How do I know that? I have an expensive graphics program that tells me so. How would you know? Without a specific program, you wouldn't. You'll have to play around with the numbers in these commands a little bit, but it's easy to do.

Of course, you can also go out onto the Web and surf around for a shareware graphics program. My personal favorite is PaintShop Pro. You could browse through the selection at http://www.download.com

Here's what you do. Denote to the image command how many pixels high by how many pixels wide you want. The "light.gif" image is 64X97 pixels. If I want the image to appear smaller, I will ask for the pixels to be smaller, say 30X55. If I want it bigger, I would set the pixels larger, say 100X250. Just remember form. If you make the image smaller or larger, you must keep the same general square, rectangle, or whatever, form.

Notice the HEIGHT and WIDTH attributes nestled right where the ALIGN command went before. You will replace the "##" with a number of pixels for height and width. Here are the three examples:

Optimizing Graphics To Reduce Page Load Time And Increase Apparent Bandwidth
The starting point for any design is graphics. Grahics can make a page more attractive and easier to use, but they also dramatically increase the size of the file and the time it takes readers to download it. Striking a balance between load time and graphic design has been the success of many a web designer. Fortunately, there are ways to find that balance:

Image Optimization – A few rules of thumb:

If the image is photo realistic, use a .jpeg or .jpg format.
If it has large areas of solid colours, then the .gif format is best.
If in a combination try both and see which gives a better fit in terms of size vs. quality.

When creating a .gif file, the final image size and quality are determined by how the conversion is done – the process of changing the image from a 24-bit (16.7 million colour) into an indexed (256 colour) palette. A .jpg file compromises with the quality of the image to the extent one specifies. It finally produces ‘best quality – big file size’ and ‘poor quality – small file size’ images.

For instant online crunching of your .gif and .jpg files you could visit http://www.spinwave.com It’s quite interesting.

Finally, find the best compromise of quality versus file size for incorporating an image in the page being created for the users.

Now start your text editor - Notepad - and practice. Play around with what you have learnt. Get the feel of it. This was your last HTML Basics lesson and in the next article we shall have a look at how you can expand your HTML knowledge as well as all the resources out there on the Internet that could prove useful in your quest to master HTML.