main menus
subject index
a-z index
lesson 5 index
teaching materials home page
help pages
printer-friendly/text-only version
resources page
get help with problems
|
|
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. Remember, though, this means it needs the / at the end of the single tag.
Quite a few attributes can be used in the tag, as follows:
- 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.
- height and width: see the height and width attribute page.
- usemap: this turns 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 lecture 7. For simple images, you wouldn't use this attribute.
Perhaps surprisingly, you can define some style sheet properties for images. I usually find myself defining border-related properties if only to turn borders off (e.g. border-width: 0px;). Why I might want to do this is covered on the page about images as links.
| How can I align images on the page? There doesn't seem to be anything here which can do it. There are several ways to try and align images on a page. The reason I've not mentioned some of the possible attributes and style sheet properties is that they have either been deprecated from XHTML1.0 or are not very robust (which is why they've been deprecated). The easiest way to lay out images is to use a table and/or a <div> tag. All the images on this site that are centre-aligned but not placed to the side of text are enclosed in <div> tags. If they have text beside or around them they'll be within a table cell: as with the question mark to the left, and the example photographs below. |
<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 leave it 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>
<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.
|
IMPORTANT NOTE. This is intended for those who wish to graduate into any kind of "professional" web design: but everyone might benefit from a look at it.
The days of the <img> tag are numbered. The W3C (World Wide Web Consortium) have specified that, to be strictly correct HTML, images should now be defined by means of an <object> tag. <object> is a generic tag for placing not just images on the page, but Java Applets, video clips, and objects from other media. The idea is to create a single tag that can cope not just with existing media but unforeseen future ones. Compare then these two pieces of code: they should have an identical effect, but look carefully at how the latter has its elements rearranged from the former:
<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>
This is not therefore a matter of simply replacing <img> with <object>: what was the alt attribute text now becomes an integral part of the page, and there is a closing tag which formats this text, "overlaying" it with the image object. Obviously, one would need to change the type attribute for different object media. For more information, see the official specification at http://www.w3.org/TR/html401/struct/objects.html
which will open in the second browser window.
Though this is now the official way to render images, browser support for this technique still cannot be depended on. For that reason I have not yet reflected it in this site whether in terms of the site's structure (that is, I still use <img> tags) or its teaching (I still teach them too). I would imagine that within one or two years, though, I will be, once I've convinced myself of its widespread applicability. Anyone with serious intent vis-à-vis web design should be aware of this issue.
|
Back to the top
Back to the menu for lesson 5
|
