Pictures, Imagine That!

[ Top Of Page ]

Now we get to the part we have all been waiting for, images and graphics. What would a web page be without some graphcs sprinkled around? Why it would be just another text document. That won't do in the fast paced world of web page design. We can have lots of fancy HTML tags placed all over our pages. We can manipulate our text in any number of ways, but graphics speak much louder than mere words do. We have dealt with pure text so far and that is what a web page is comprised of. No, graphics aren't text but that is okay. We can still use them in our pages with a simple little <img> tag.

To save a lot of time and technical mumbo-jumbo we will just keep to the two main image types that are used on web pages. You will have to do a little research of your own to delve deeper into the graphics world. The two main image types are GIF and JPEG.

GIF

This was the original web page format. It uses only 256 colors and is best suited for simple images such as clip art, text, line art and so on. It can also be used for creating basic animations.

JPEG

This format is more modern and handles millions of colors. The JPEG format can compress images into much smaller files which in turn are faster to download. This may not seem like much now, but when dealing with digital photos and scanned pictures and other high quality images, which can be very large files, the high compression ability of the JPEG format makes them much easier to deal with-not to mention faster.

I do want to point out that BMP images created with your Windows Paint Program are not a good source or choice for your graphics. Internet Explorer is very willing to work with the BMP images (go figure), but Netscape is not. It is best to avoid the BMP format and stick to GIF and JPEG's. That said, where then do I get my images? You can use your favorite graphics program if you are artistically inclined and save it in GIF or JPEG format. If you are like me and can't draw a straight line with a ruler, then you will have to go elsewhere to get your graphics. Here are a few suggestions, but just bear in mind that getting images from web sources and other web sites may infringe on someones copyright. Make sure that the image you intend to use is public domain or that you have the artists (copyright holders) written permission.

• Most computer stores have software that contain clip art. Some of the programs contain thousands of clip art and line art images and can be used by you on your web site. Some may require permission to use in commercial sites. You can also go to many web sites that have clip art archives you can browse and use. Just follow any rules they may have for commercial use. You can even purchase clip art and other graphics on line. Here is a self extracting zip file that contains some clip art that I downloaded to get you started and give you something to play with. Surf a little, find a lot.
• 
  
  
• You can get images from other web site by right clicking on them and from the resulting menu chose save picture or image as and place where you'd like on your hard drive or on a floppy disk.
• 
  
  
• If you have a scanner or access to one, then you can scan your photo's, kids drawing's, your own doodles and scribbles. You get the picture.

At Last!

[ Top Of Page ]

Are you ready for this? Of course you are. Here is the HTML code that tells your browser to display an image on your page:

Using the above format requires that the graphics file and the HTML file be in the same directory on your computer or on your web host depending on where you're testing out your pages. I test all mine on my PC. If you have a lot of images you are going to use then it might be easier to create a folder to hold them all. I have all my images in a folder named graphics. The tag for retrieving your images from a folder such as this would be:

Before we get too far along on this image thing I want to point out that file names on a server (web host) are case sensitive. To make life easy name all your files in lower case and use no spaces in the file name. If you must seperate words in an image name use the "underscore" to seperate the words. You will have fewer headaches if you follow this procedure, I know from experience. Try to keep file names short but descriptive enough so that you will know what the image is by its name. Rename downloaded images in order to make them follow these suggestions.

I think here in this section I will handle all the attributesfor the image tag in a list type format. Here is a list of all the attributes and how they can be defined. also incuded will be a brief explanation of the definitions:

width="x"

You define the width of your image in pixels (ex. "120px"). This helps your browser display the image faster by allocating that space for the image even though the image may not have completely materialized yet. If you right click on a displayed image and choose properties it will give you the width x height in pixels.

height="x"

Everything that applies to the width of an image also applies to the height.

align="?"

The align attribute can have several different values:

• "top"-the text is aligned with the top of the image.
• "middle"-the text is aligned with the middle of the image.
• "bottom"-the text is aligned with the bottow of the image.
• "left"-this places the image on the left side of the page and the text wraps around on the right side of the image.
• "right"-this places the image on the right side of the page and the text wraps around the left side of the image

hspace="x"

This stands for horizontal space. Set this to a numder of pixels and it keeps your text from being right up tight to your image (ex. "10px"). Sort of like breathing space

vspace="x"

This stands for vertical space. The same holds true for vspace as it does for hspace

alt="?"

The alternate tag is used to define what your image is for text only browers or for those who have their graphics display turned off. It is the text that appears when you hover over an image. It will tell surfers what the image is, or about, or some information about the image. Always include this tag inside you "img" tag.

border="?"

This attribute is used when your image is a link or part of a link. Your image will have a blue border around it such as the color of link text. Some folks don't mind it but I preffer not to have it around my images. To remove the border around your image set this value to "0".

A Few Extras

[ Top Of Page ]

There are just a few more tags that are related to images. When you have an image on a page and you have text there also, you may want to start a new line or paragraph before your text has wraped around the image or just start a new line after your image when no text is present. This is done with an attribute added to the line break tag <br> tag. Here is how they work:

<br clear="left">

When aligning your image on the left side of the page, this command tells the browser to start a new line when the left margin is clear.

<br clear="right">

When aligning your image on the right side of the page, this command tells the browser to start a new line when the right margin is clear.

<br clear="all">

This command tells the browser to start a new line when both the right and left margins are clear

It all may seem a bit confusing at first, and it is, but once you've positioned an image or two and added some text aound them it will all fall into place. Working with images will be one of the harder things you will have to do in desiging a web page. Remember, I said one of the hardest. Just like anything you do, the more you do it the easier it becomes.

Now what can we do with these images since we know a little about how to use them? Very good question. We could show pictures of ourselves, family, pets, vacation, etc. But there are many more uses for images:

Backgrounds

[ Top Of Page ]

On the page Fonts And Color we learned how to change the background color of our web page using the bgcolor="rgb color here" attribute in our body tag. That was fairly plain and simple. But what about some of those fancy-shmancy backgrounds that you see like stars, lightnimg bolts, or water droplets? Those are background images. If it is the same pattern on the whole page the image is really one small image that has been "tiled" across and down the screen. This makes it appear as if the image is one large image. An example of this is on the Webmasters intro Page. That background has been tiled. Here is how you add a background image to your web page:

This command will cause the image to tile across and down the page covering it completely. Just bear in mind the color you choose for your text. You may find it easy to read but your surfers might not. Have someone else look at it and tell you what they think. To help you along a little I have included some background images that I downloaded from the internet in a background zip file that is self opening.

You now have just about everything you will need to work with images and graphics except the all important pixel shim or spacer. I use the term spacer but no matter what you call it, it will do the same thing. The spacer is an image that is transparent and measures one pixel by one pixel. Yeah I know that is mighty small but remember we can specify the height and width of an image. That is how we use the spacer. We use it to help us position our images and/or space our images. There ore other ways that we can do this, but let's not get ahead of ourselves. Play and experiment with the spacer and see what you can do with it. Here is a spacer to download. I put in a seperate zip file becaues you can't see it once you click on the image icon. The file is self extracting to make life easier.

One last and final thought, even though images look great and can be really cool they load real slow. Most of the surfers going to your site will still be on a dial up connection. The image may lod quickly on your computer but it will not be so on the internet. If your page takes too long to load the surfer will probably go some place else.

Downloads

[ Top Of Page ]

• Clip Art
• Backgrounds
• Spacer