What would a Web page look like without graphics? Pretty boring to say the least! But not so long ago, thats just what the Web was likejust plain, boring text. Remember, in those early days the Webs sole purpose was to exchange information. The real change came when designers added graphics. Nowadays, weve become used to seeing bright and colorful pages.
Two file formats have been developed to help keep files small, while maintain a high level of quality:
.gif files: graphic interchange format (pronounced like Jif peanut butter)
.jpg files: joint photographic experts group (pronounced jay-peg)
There are some advantages particular to both. The gif format is the oldest, created by CompuServe to provide a way to show graphics no matter what computer you are using (its called cross-platform). Later, the "gif89" format was created so that the image background becomes transparent. Thats a good thing when working with colored page backgrounds. The gif format is also better for line art.
On the other hand, the jpg format was originally created to store photographs. Files formatted in jpg are larger than those in gif, and they do not have transparent backgrounds.
If you have images that are not in one of these two formats, you will need an image editor to convert them. Two such programs are Adobe® PhotoShop or Paint Shop Pro (a shareware program that you can download at Jasc Software).
The Image tag
The image tag <img> has several attributes:
src--identifies the image and tells the browser where to get the image
altgives alternative text for those who are not viewing their pages as images.
height & widthtells the browser the size of the graphic (speeds up the downloading process
Lets go through each one of the attributes in more detail.
Id like to cover a couple of important things here. While the name of the file is important, it is equally important to direct the browsers to where the file is located. The browser will not show your image if it cant find it.
Lets see if I can demonstrate this process through the following diagram.
Notice that all the files are in the same folder or what is also called a directory. So the browser will first look into the main folder (Mikes Bike Shop), find the HTML file (shop.html), load the text and then load the graphic files (horn.gif and bike.gif). Thats why you see those funny little boxes when a page is loading. The browser downloads all the easy stuff first (the text) and then the larger and more complex graphic files last.
The alt attribute lets the user know whats in the picture by providing descriptive text. It also has an added feature with the latest versions of Internet Explorer and Netscape Navigator. When the cursor arrow passes over artwork or a photo, a little rectangular box pops up that contains the alt copy. Its a great way to add interest to your page or even give instructions to the user.
Heres an example. Place your arrow (cursor) over the image below. If you have the latest version of IE or Navigator, you will see a pop-up box that says, "When things go wrong with your code, you need to do some detective work!"
The image tag for this graphic looks like this:
Height & Width
Height and width are listed in pixels--those little dots that make up an image on a computer screen. If you want to know the size of your image, open it up in Netscape Navigator. The pixel size appears in the title bar. Here's an example using the following image that measures out at 149 pixels by 140 pixels.
The code for this image is
And the code looks like this:
Centering an image
And here's the code:
Here's the code for a link to
the Blast-Off page:
Notice that there is an extra attribute: border. And I've given it a value of "0". You must add the border attribute if you do not want a border. If you do not list a border, the browser will go to the default, which looks like this:
You can use an image to serve as an internal link within your own Web site. Another way is to use image maps. To learn more about image maps, go to HTML Goodies.