Please refer to previous entries in the "Creating a Web Page" series:

• I: Getting Started
• II: Learning HTML
• III: Text
• IV: Links
• V: Formatting Text and Lists
• VI: Tables
• VII: Colour

I know, I know: I forgot an entry, OK?

Along with color, images are an integral part of webpages. You can download them from databases, scan them in, take pictures with a digital camera and load them directly into your computer through it, or create art directly on the computer. Images come in many different formats. GIF is one of the most common, used for cartoons or other pictures with few colors and sharp lines. JPEG is often used for scans of photographs. There are many others (TIFF, PNG, etc) that each have their advantages and drawbacks. When you put in the filename of your image in the tag, be sure to include the extension- the dot and the three letters that come after it, and to pay attention to capital letters. This tells the browser what type of image it's about to display. If you don't include the extension and don't type it exactly the same in the HTML as it appears in the file name, the browser won't be able to find the image in your files.

Sample HTML:

Result:

The width and height of the image are in pixels. You can find out the size of an image by opening it in something like Photoeditor or Photoshop. Many download databases will also give you the dimensions with the description of it. ALT stands for "alternate text". If the image doesn't load correctly for some reason, or if your viewer prefers to surf with images off to save time, the text will show up instead. It's not absolutely necessary but it's a good backup to have.

If you want text to flow around an image, there are a few more attributes you can add.

HSPACE and VSPACE are how much space to leave around the image, horizontally and vertically. ALIGN can be TOP, CENTER, or BOTTOM. This is how the text lines up with the image. Due to the limits of GuideML, I cannot demonstrate these attributes but I can demonstrate alignment:

Sample HTML:

• VIII: Sound
• IX: Promoting Your Website
• X: Design Tips