Site hosted by Angelfire.com: Build your free website today!
Contents

* Getting started
* DOCTYPE declaration
* META & TITLE tags
* Colour & layout
* Text organization
- Images
* Tables
* Validation

[Home]
Well, here we are. The <IMG> tag. First let me stress that this tag does not need closing, in fact, you're not allowed to close this tag [just like the META tag, in case you've forgotten].

The <IMG> tag on its own will not do very much, though. You have to specify a source [SRC] for it - this source will be:
  • A filename for your image [if it is in the same directory as the HTML file you're putting it on]
  • A filename for your image preceded by the directory path for it [Example: images/yourpic.gif]
    make sure you do not include a leading slash before the directory name if your site is hosted on a free webspace provider's server. The browser will try to download your picture from your host's /images/ directory, and my guess is, your picture will not be there.
  • An URL for an image [do this only if the image's owner permits you to do so. It's extremely bad netiquette to use others' pictures off their sites. If you really want the damned picture, save it to your hard disk then upload to your own host. Not only is this bad netiquette, but it makes your page load slower due to multiple server connections.
Once you have specified the source for the <IMG> tag, you have to define some ALT text. ALT text simply describes the picture [if it needs description] or the picture's function [if it's a picture used in navigation, such as a BACK or NEXT button]. ALT text is required to validate for HTML 4.0 Transitional, because it ensures easier browsing for blind people.

No, you don't get to see any pictures yet. If you want your page to look presentable on browsers that have graphics turned off, you have to specify a WIDTH and HEIGHT for your image, in pixels. This also speeds up your page's load time. [I don't have any fancy schmancy programs that measure picture size and I'm no graphics guru, so I just do everything by trial and error :)]

Another important thing that I must mention is the BORDER attribute. If you do not specify no border, your pictures will default to displaying with a border around them. Some people like the look of that, some don't. It's up to you if you want the border or not.. Now that you've heard all about the attributes, see them in action:

<IMG SRC="images/ttr32.jpg" ALT="[Carrie-Anne Moss is Trinity in The Matrix]" HEIGHT=110 WIDTH=100 BORDER=0>
[Carrie-Anne Moss is Trinity in The Matrix]

Note how I have my ALT text enclosed in square brackets - this is useful for blind visitors to my site and to non-graphic browser [such as Lynx] users, who only see my ALT text and a number in square brackets beside it. If I did not have the square brackets and my image was surrounded by text, it would look a little confusing.

I guess I should talk about image alignment here. You can use <IMG ALIGN="left/right"> to align the image to the left or right margin, and use the <CENTER> tag separately to align the image in the middle of the page. Pretty easy, huh?

To align text to an image, you have to use the IMG ALIGN attribute. Demonstration:
<IMG SRC="images/tmo1.gif" ALT="[Laurence Fishburne is Morpheus in The Matrix]" HEIGHT=75 WIDTH=100 BORDER=0 ALIGN="top">
[Laurence Fishburne is Morpheus in The Matrix]This image will align all text following it to the top and jump straight to the bottom after the first line wraps.
<IMG SRC="images/tne40.jpg" ALT="[Keanu Reeves is Neo in The Matrix]" HEIGHT=100 WIDTH=100 BORDER=0 ALIGN="middle">
[Keanu Reeves is Neo in The Matrix]This image will align all text following it to the middle and jump straight to the bottom after the first line wraps.
<IMG SRC="images/ttr32.jpg" ALT="[Carrie-Anne Moss is Trinity in The Matrix]" HEIGHT=110 WIDTH=100 BORDER=0 ALIGN="bottom">
[Carrie-Anne Moss is Trinity in The Matrix]This image will align all text to its bottom line and then jump to the bottom [useful for those starting-letter images]

Before we move on to tables, let me say another thing about ALT text. You have to have ALT text, even if it's a bullet. The most appropriate ALT text for a bullet is "*" - this will show up nicely in non-graphical browsers and will be most helpful to blind persons. Okay, let's go on to tables now.

[Previous page] [Next page]