Web Host Directory: The best free source of web hosting services in a searchable web host directory. Powerful web host search engines, reviewed web hosts, awards, news and much more!

Hosting Guides

HTML Explained

Images

Images may be embedded within a page easily through using the <IMG> tag with at least the SRC attribute which specifies the location of the image file. The location can be absolute or relative as mentioned in 'Hyperlinks' above.There is no end tag (</IMG>) as everything related to the image is specified in the attributes. Note, currently the only popular graphics formats supported by most browsers are GIF and JPG. Recent browsers also support the animated GIF which is just a series of GIF format images stored within the same GIF image file. Note that both image formats are compressed, but remember that JPG images are optimized for photographic images, and GIF images are optimized for diagrams, and you will gain the smallest file sizes accordingly, and hence the fastest download times.

The following is an example use of the <IMG> tag:

Notice the additional attributes WIDTH, HEIGHT, and ALT. They are optional, and specify the width and height of the image so the browser can format the page correctly before the image is loaded. The ALT attribute specifies the Alternate Text which is normally displayed whilest the browser is waiting for the image to load, and in some browsers is also used as 'hints' which 'pop-up' when the mouse hovers over the image.

You may already have guessed that the WIDTH, and HEIGHT attributes can be used to stretch the image, for example, double size:

Now of course, as the image suggests, you may want to attach a hyperlink to an image so when people 'click' on an image the linked page is displayed. This is just as easy as before, recall that you must place the <A> tag, then the text to highlight the link over, then the end tag </A>. In this case, just replace the text with the <IMG> tag as follows:

Note that you do not need to place all the tags on the same line, recall that any number of white space (spaces, tabs and carriage returns etc) count only as one space. Placing the tags on separate lines as above makes it easier to review the HTML in future when you need to update it.

You may notice that when placing the hyperlink over the image a border was added to it. This is default behaviour, but you can easily remove the border by adding the BORDER="0" attribute and value to the <IMG> tag as follows:

Also you can increase the size of the border by substituting the 0 with the desired size.

One more useful attribute of the <IMG> tag is the ALIGN attribute. This states where the image is placed in relation to the surrounding text. It is used as <IMG ALIGN="n"> where n should be substituted with TOP, MIDDLE, BOTTOM (the default value), LEFT, or RIGHT. Examples follow:

Top Aligned

Middle Aligned

Bottom Aligned

Left Aligned

Right Aligned

When an image is left or right aligned, and the text is too long to fit on one line, or many lines must be placed along side, it will wrap around below the image.