HTML Basics: Images

Once you’ve got your text on a page, the next thing that you usually want to add are images. Images can be used to add visuals to content, or can be used to improve the overall design of a site.

To display images on the page you need to use the tag img. Note, this is for images within the content. Background images should be set using the CSS background property.

The basic use of the image tag is

<img src="images/image.gif" alt="My Image" />

The image tag accepts a number of attributes:

src

This is the source ie. the path to the image. This can be the full URL, absolute to the root or relative to the page. This is required.

alt

This is the alternative text. This is is displayed when the image doesn’t load. This is also read by search engines and screen readers (for visually impaired visitors). This is required.

height

This sets the height of the image. If it’s unused, the true image height will be used.

width

This sets the width of the image. If it’s unused, the true image width will be used.

longdesc

This accepts a URL to a longer description of the image.

usemap

This defines the image as an image map

For a more in depth explanation on longdesc I recommend “longdesc, it’s not just alternate text“. We will cover image maps another time as these will need their own post!

Image tags can also accept the standard general attributes of id, class, title, style and lang. So, for example, the Blogging Tips logo on this site uses the following image code

<img src="http://www.bloggingtips.com/wp-content/themes/BloggingTips/images/logo.gif" alt="Blogging Tips" />

You could also use

<img src="http://www.bloggingtips.com/wp-content/themes/BloggingTips/images/logo.gif" alt="Blogging Tips" width="472" height="77" id="btlogo" />

Which defines the height and width of the image, along with giving the image an id for use in the CSS.

Linking Images

When it comes to linking images, you can use the same properties as linking pages, and just treat the image in the same way as you’d treat text. For example, the Blogging Tips logo is linked back to the front end of the site ie.

<a href="http://www.bloggingtips.com"><img src="http://www.bloggingtips.com/wp-content/themes/BloggingTips/images/logo.gif" alt="Blogging Tips" /></a>

This will then link the whole image.

Image CSS properties

There are deprecated attributes for the image tag that can be recreated using CSS. These properties are

border

This gives the image a border. Set it to ‘none’ to turn off the border, especially when the image is linked, or else you will get a border, the colour of the links, around the image.

margin

This recreates the vspace (vertical margin) and hspace (horizontal margin) attributes.

float

This recreates the align attribute, however it requires a lot more explanation before it can be used without causing layout problems.

To use these in your style sheet you can use:

img { border: none }
img {
   border: 1px;
   margin: 5px;
}
img {
   border: none;
   margin: 0 10px 10px 0;
}

I’ll be explaining the border properties in more depth later on, but here I’ve simply used the property value and given it one value of none or a value in pixels, for the thickness of the border. For the margin property it can accept 1, 2, 3 or 4 values:

• 1 value: Sets the margin for all sides ie. the top, right, bottom and left margins.
• 2 values: The first value sets the top and bottom margins, the second sets the left and right margins.
• 3 values: The first value sets the top margin, the second sets the left and right margin, the third sets the bottom margin.
• 4 values: Sets the margin values in the order top right bottom left.

Images can be placed on a page on their own, within a div, a paragraph (although this should only be used alongside content and not just for images on their own), a header, a list or links. Just remember, if you use an image, always have an alt attribute that briefly explains what the image is or what it says, so that if the image doesn’t load then the visitor at least knows what should have been there. Even more important if your menu uses image buttons!

Written by Sarah from Stuff By Sarah
Posted on December 11th, 2008 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

5