Images are graphics or pictures. That was easy, wasn't it? 

     Images on a Web page can give it that little bit of zing it needs to make it a really fantastic Web page. It is so true that a picture is worth a 1000 words!  And, according to statistics, most people prefer seeing a picture than reading a description.  I know that certainly holds true for me!

     How does a browser display an image on a Web page? Well, the browser actually reads the tag for the image name and then that tag tells the browser where the file of the image is specifically located. The browser simply opens that file and displays the image. Usually. Most of the common browsers today (Netscape, Internet Explorer) can handle images. Some can't. For example, Lynx is a text-display-only browser. 

     If a browser can handle images without any problems, the images, or graphics/pictures, are called INLINE IMAGES. If a browser can't handle images, then the graphics would have to be viewed via some other source other than the browser in another window. These are called EXTERNAL IMAGES. Obviously, inline images are preferred.

It is good practice to remember that the size of images is important.  The larger an image, the longer it takes to download to a computer.  Although high-speed Internet access is more readily available now, not all viewers are going to have it, and even if they do, they may not want to take the extra time.  These are important aspects to take into consideration when you place images on your Web page.  If needed, edit the image to an appropriate size for the Web page.

The size of the image is not only important because of the time needed to download it, but also in appearance.  When creating a Web page, the more proportionate to the content of the Web page the image is, the more attractive/appealing the page is to those viewing it.

02) IMAGE FORMATS

     There are many different formats that are used when saving images, such as:  GIF, JPG, TIFF, PCX, BMP, and so forth. Out of all the different formats, however, only three (3) of them can assuredly be used in a Web page without the browser going nuts. Which three? BMP, GIF and JPG. 

     Please make sure that the image you use in your Web page has either the .gif or .jpg extension on the end. GIF's seem to be more popular than JPG's, but JPG's have advantages. Advantage one: If you have two IDENTICAL images, one in .jpg and one in .gif, the .jpg will be smaller in file size than the .gif. Advantage two: JPG's take less time to download (come up on your screen) than GIF's.  Why? Because of advantage one above; they are smaller in file size!  GIF's have an advantage over JPG's, however, in that they can be "transparent".  In other words, you can save an image as a GIF and the background of the page show through.  Notice the "TOP" links beneath each of these sections?  They're in GIF format and they're transparent; you can see my textured background behind each one.  The "Note" and other images on this page are not transparent.  Each of them are JPGs.

     That leaves the BMP images unaddressed.  These are usually not ideal for using as an image because they are usually extremely large files.  It is best to convert .bmp files to either .jpg (preferred, unless you need a transparent image) or .gif.

     Images can come from a large variety of different sources. The easiest way to come up with an image, is to have a regular photograph scanned and saved in a .jpg or .gif format.  Scanners are becoming very commonplace these days, even to the point of being combined with the printer.  Another easy way to come up with an image is to use a digital camera.  This is probably the most common method used today of acquiring images.  A third option is with the retailer that develops your film.  You should be able to have the option to put your images on CD, as well as prints.  This is usually a nominal fee, and worth it, in my opinion, if I develop photographs of people/places that are of high-interest (I'm an amateur photographer, so many times I take pictures of things most people wouldn't even dream of taking, so I typically don't have these rolls of film printed to CD).

     Another option is clip art. Clip art is professional, quality artwork done by someone else that can be used in your own creations. Clip art can be purchased at any retail store selling software.  Please adhere to the copyright that is set forth by each individual software package.

     Yet another option is to grab an image from another Web page. It's easy to save any image on a Web page onto a hard drive. How? If using Netscape, right click on the image and choose 'Save this Image as' from the menu. If using Internet Explorer, right click on the image and select 'Save Picture As' from the menu. Please be careful of copyrights here, though.  It is unethical and/or even illegal to copy images without the Web site's owner's permission.  I do not allow this option on any of my graphics (unless they sneak past me!).

     The next option is simply to take advantage of the many Web sites on the Internet that do nothing but store graphical images for people who need them.  Many of these sites are free.  Again, please make sure that you are upholding the site's copyright.

     Now, down to the nitty-gritty.  The image tag is <IMG>.

<IMG SRC="imagefilename.ext">

     IMG stands for 'image', SRC stands for 'source', "imagefilename.ext" gives the exact location and name of the image file you want to display (where ".ext" is usually either .jpg or .gif). 

The file name IS case sensitive. For instance, the line of code that displays the image located at the top of this Web page is as follows:

<IMG border="0" SRC="images/htmltut.jpg" width="517" height="173">

     If I had this next line as the code, it would fail to load the image.  Can you see why?

<IMG border="0" SRC="images/Htmltut.jpg" width="517" height="173">

     Because the file name is htmltut.jpg and not Htmltut.jpg.  The capitalization in a file name is very important!

     If that image is in the same directory we are working in, all we would have to put would be this:

<IMG SRC="htmltut2.jpg">

     Why?  Because the "images/" indicates a directory change, and since it is before the file name, it indicates that the file will be found in the directory above/before the current location.

Curious as to what the "border="0"" does?  It allows your image to appear exactly as it is.  If the border is set to any number other than 0, it causes the image to have a border surround it.  The "width" and "height" segments of the line of code above simply give the dimensions of the image.  If you arbitrarily change these values without regard to one another, the image will be distorted.  The "Note:" image appearing at the beginning of this paragraph has a tag of <img border="0" src="../../images/note.jpg" width="77" height="33">.  Here are examples of altering the border, width and height settings.

The code for this not-so-pretty image is:

 <img border="0" src="../../images/note.jpg" width="44" height="61">

  The code for this image is:

<img border="5" src="../../images/note.jpg" width="77" height="33">

05) ALIGNING IMAGES AND TEXT

     If an image is inserted into the regular text, the browser will display the text and the image on the same line. The text will usually be displayed at the bottom part of the image. This could be a problem if the image is tall and/or if you are trying to "balance" your text with the picture by wanting it centered. 

     The browser can be told in the <IMG> tag where the text is to be displayed. The choices are either at the top of the image, in the middle, or at the bottom. Here are the tags:

<IMG SRC="imagefilename.ext" ALIGN=TOP>
<IMG SRC="imagefilename.ext" ALIGN=MIDDLE>
<IMG SRC="imagefilename.ext" ALIGN=BOTTOM>

     Simply use one of the above <IMG> tags, choosing the appropriate one, dependent on where the text will be viewed beside the image (top, middle, or bottom). Here are examples of the above options:

<IMG SRC=/graphics/psycho.jpg">

<IMG SRC=/graphics/psycho.jpg">

<IMG SRC=/graphics/psycho.jpg">

     Notice how the text appears beside the three (3) images I have for "Example:" above?  It is all appearing at the bottom of the image because it is not being told to go to the top or middle.  Compare these examples and notice the position of the text with the "Example:" images:

<IMG SRC=/graphics/psycho.jpg" ALIGN=TOP>

<IMG SRC=/graphics/psycho.jpg" ALIGN=MIDDLE>

<IMG SRC=/graphics/psycho.jpg" ALIGN=BOTTOM>

Different browsers display text, images, and so forth, in different ways, so the examples above may not appear exactly as stated, especially the "ALIGN=MIDDLE" example.  It also sometimes depends on the size of the image.  There has to be "room" for the text to appear where it is being told.

     What if there isn't any text shown along with the image? Insert a <P> tag after it or a <BR> tag to skip a paragraph or a line, respectively.

06) USING AN IMAGE AS A LINK

     Just like text can be clicked on to go to another link, so can an image be clicked on to go to another link. Designating an image as a link is not much different than using text as a link. In fact, the image at the top of each of these chapters in this tutorial is clickable (at least, they should be!).  If you run your mouse over the image, then click it, it should take you back to the home page for this tutorial.  

     How is this done?  Still use the same <A> tag (which, if you remember, is the anchor tag to send your browser to another location), but insert an <IMG> tag between the <A> and </A>. 

<A HREF="http://whatever.com"><IMG SRC="imagefilename.ext"></A>

     The above tag automatically surrounds an image with a border if it is being used as a link. The image at the top of this page does NOT have a border.  If a border around the image isn't wanted, then add "BORDER=0" to the tag.  <A HREF tells where you want the "click" to go and <IMG SRC is the image that you "click" to get there.

<A HREF="http://whatever.com"><IMG SRC="imagefilename.ext" BORDER=0></A>

Many people like to use images to be able to click to other Web pages that he/she has, especially their home page.

07) GETTING YOUR IMAGE TO QUILTING PASSION!

HTML TUTORIAL