HTML TUTORIAL by Geoff McCausland


Almost all webpages have some graphics. You can have your company logo, a picture of your family, a back button or an E-mail icon. You name it, someone has it.

Your graphics must be either GIF's or JPG's. Most browsers will not recognize Bitmaps, PCX files, WordPerfect Graphics (WPG's) or any other formats. If you don't have PhotoShop you can download shareware programs that can convert those formats. I would recommend Paint Shop Pro from JASC, you can get it at (or pick from the wide variety of choices from the internet).

The basic format to put an image on your page (and I do mean BASIC) is:

<img src="whatever.gif"> or <img src="whatever.jpg">

(img src is an abbreviation for "image source")

But you will probably want to define some of the images properties such has height and width. You will also want to assign alternate text (for those people who have show graphics disabled).

Have you ever gone to a webpage and sat starring at a blank screen for what seems like an eternity? If you don't define the height and width of the images the page will take forever to load up.

Your browser will read the HTML file first, if it know the dimensions of the image it will reserve the required space and display everything else on the page while it retrieves the actual image. If you don't, the browser has no idea how the images will fit in, so your browser will wait until it receives the complete image before it shows you anything.

To define those properties is real simple. Some HTML editors make it even more simple by doing it automatically. All you need is the following format:

<IMG SRC="whatever.gif" HEIGHT=### WIDTH=### ALT="Short Title">

<IMG SRC="images/webpro.gif" WIDTH=200 HEIGHT=60 ALT="WebPro">

note: I like to keep all of my graphics in a separate directory. I use "images" for all of my logos, buttons, etc. and in some cases I may even have a "photos" directory for pictures.

Previous Page 1 | 2 | 3 | 4 | 5 | 6 Next Page