ACOM: Web Design Tutorial Site

The <IMG> tag

As this lesson has already made clear, there are numerous issues involved with the use of images beyond just the tag itself. This page therefore restricts itself only to the tag and the attributes. I've also omitted any discussion of some attributes which are only supported by very new browser versions, or only certain browsers (such as DYNSRC, an attribute supported only by IE). Browser-specific tags are against the spirit of the Web, and I've tried to reflect that throughout this whole site.

The <IMG> tag places an object on the page, rather than formatting text, so it doesn't need a closing tag. The following attributes are available for use: note that most of these have their own pages and have been linked accordingly.

• SRC: specifies the source file of the image. For obvious reasons, this is an obligatory attribute. Store your image files in the same directory as the rest of your site (indeed, image files should be considered an integral part of the site, on an equal basis to HTML files). That way, the SRC attribute doesn't need to contain drive letters or other directory-related bumph. Putting drive letters (M:, etc.) in your SRC attribute is the commonest reason that images break, so don't do it! All you need is SRC="image.jpg", not SRC="M:/mysite/image.jpg".
• ALT: see the ALT attribute page for information on this very important attribute.
• BORDER: takes a numeric value representing the width, in pixels, of the image border. BORDER=0 turns off the border and this is quite commonly included: it's rare to see a border around an image.
• HEIGHT and WIDTH: see the HEIGHT and WIDTH attribute pages.
• ISMAP and USEMAP: these turn the image into what is called an image map. This intermediate technique, as well as other image-related tricks such as rollovers, have a lesson to themselves: this link will take you to the relevant lesson 7. For simple images, you wouldn't use these attributes.
• ALIGN: theoretically, can take several values which allow you to align your images with your text, such as left, right and center. However, these are rather shakily handled by browsers, even newer ones: center particularly. In my opinion you're much better off using tables to arrange your text and images horizontally across the page: see below. More simple techniques for aligning images on the page are discussed on the page about alignment from lesson 2, which you might like to review at this point.

Do note that <IMG> is not a block-level tag. Unless you separate the image from the text with text formatting tags such as <P>, you will run the image and surrounding text together in rather unattractive ways, as this example shows:

<P>BRAZIL is the largest country in South America and the largest Portuguese-speaking nation on Earth, with some 120 million inhabitants. Brasilia is the capital. <IMG SRC= "brazil.gif"> The flag shows a blue globe on a yellow diamond, set upon a green field.</P>	BRAZIL is the largest country in South America and the largest Portuguese-speaking nation on Earth, with some 120 million inhabitants. Brasilia is the capital. The flag shows a blue globe on a yellow diamond, set upon a green field.
<P>BRAZIL is the largest country in South America and the largest Portuguese-speaking nation on Earth, with some 120 million inhabitants. Brasilia is the capital. </P> <IMG SRC="brazil.gif"> <P> The flag shows a blue globe on a yellow diamond, set upon a green field.</P>	BRAZIL is the largest country in South America and the largest Portuguese-speaking nation on Earth, with some 120 million inhabitants. Brasilia is the capital. The flag shows a blue globe on a yellow diamond, set upon a green field.

The fact that <TD> tags can contain <IMG> tags (as you've just seen above) is one of the key factors involved in using tables for page layout. It's much more robust to arrange images and text like this than it is to do so with the ALIGN attribute or to try leaving it entirely up to the browser. I hope this site has contained more than enough examples already of this (and will continue to do so) for you to require a specific example of it here. Well, apart from this one anyway, which gives me a blatant excuse to show off some of my baby photos. Dads do that kind of thing.

Joe Whitworth (born March 2003)

Again, this is possible without tables - but it's much more robust, and ultimately easier, with them. Here's the code:

<TABLE WIDTH="80%" CELLPADDING=5>
    <CAPTION>Joe Whitworth (born March 2003)</CAPTION>
        <TR>
        <TD><IMG SRC="joe4.jpg" HEIGHT=200 WIDTH=280
            ALT="Image of Joe, no. 1"></TD>
        <TD><IMG SRC="joe5.jpg" HEIGHT=200 WIDTH=280
            ALT="Image of Joe, no. 2"></TD>
        </TR>
</TABLE>

To repeat once more, please do realise that using images well involves much more than simply bunging <IMG> tags on your pages, so please do ensure you've read and understood the other pages in this lesson.

<P>A photo of baby Joe Whitworth:</P>
<IMG SRC="joe4.jpg"
     ALT="Image: Joe aged 3 months">

<P>A photo of baby Joe Whitworth:</P>
<OBJECT DATA="joe4.jpg"
        TYPE="image/jpg">
Image: Joe aged 3 months
</OBJECT>

Back to the top

Back to the menu for lesson 5