A beginner's guide to website creation.

A text-only page isn't going to catch anyone's eye. After all, the World Wide Web is all about color and pictures. Maybe you spent some bucks on a cool new logo; why not show it off on your Web page?

Adding graphics to your page first requires you to put that snazzy logo into a digital format. If you already have an electronic version, then you're already set. If not, you need to request one from the logo's designer, scan it yourself, or take your printed copy to a local copy shop and have them scan it.

But that's only the beginning. High-quality electronic images tend to be stored as TIFF files, and the TIFF format doesn't work on the Web. You need to convert the image into a JPEG or a GIF. JPEG and GIF are the two image formats supported by today's browsers. JPEG works best for photographs, GIF for drawings and line art. You can make this conversion in most graphics editors, such as Adobe ImageStyler.

Once you have your electronic image in the right format, you're ready for the image tag. <IMG> is similar to the anchor tag in that it points to a resource that's not actually on the page. In this case, <IMG> uses the SRC (source) attribute to point to the digital image. The code looks something like this: <IMG SRC="logo.gif">. When you place the image file in the same directory as your pages, this tag will find the image and display it in the browser.

We'll add the logo to our page, below the headings and above the text:

<IMG SRC="logo.gif">


Before you start peppering your pages with pictures, keep a couple of things in mind. Images, even small ones, take a long time to download compared to text. Always keep the image as small as possible, both in physical size and in file size, while still allowing it to get its message across. You can also speed up downloads by using the <IMG> tag's WIDTH and HEIGHT attributes. If, for instance, an image is 100 pixels wide by 150 pixels high, you'd use the following tag:

<IMG SRC="logo.gif" WIDTH=100 HEIGHT=150>

When a browser sees the attributes' values, it creates the correct image space automatically rather than having to scan the image first.

Finally, you'll want to place your images using the ALIGN attribute of the <IMG> tag. As with the <P> tag, the <IMG> alignment options are ALIGN=LEFT, RIGHT, or CENTER. For our example page, let's place the logo on the right side of the first paragraph:

<IMG SRC="logo.gif" ALIGN=RIGHT WIDTH=100 HEIGHT=150>


Now our example is beginning to look like a real Web page.

Questions?
Please E-mail them to:info@20watts.com