|
Inserting Graphics
What is a Web page without graphics. It would only be a boring collection of plain text.
People say that a picture is worth more than 1000 words. Adding images to your
Web page is easy as adding bold text. You use the <IMG> tag to insert images.
This tag has no content and the end tag is forbidden.
We'll look at the main attributes of the <IMG> tag.
id, class This two attributes are used in conjunction with style sheets.
src This attribute determines the location of the image file.
alt This attribute is used to give a short description of the image. You can see
it if you hold your mouse over the image. This is very helpful for browsers that don't
support images.
longcesc If your need a longer description of the image, then you should use the
longdesc attribute.
title Gives the image a title.
height, width Height and width of the image. They are use to override the actual
image size. TIP: Don't try to stretch GIF images. For stretching use JPEG format images.
border This creates a border around the image.
usemap This attribute is associated with image maps. Image maps are images with
click able areas, actually hyperlinks. It is best to have an image map editor for creating image maps.
One of them is Mapedit by bountell.com. You can download it as a 30-day
trial version and if you like it, you can buy it.
Here is a simple example that shows how to use the <IMG> element:
<IMG src="images/family.jpg" alt="Family picture 2000" height="250" width="200">
Some tips on how to use images effectively
You should know that there are no fast rules about inserting images, these are only
guidelines. The two major issues here are download speed and visual presentation.
- Use the lowest color depth appropriate for your applications. What those this mean. Well,
don't save your black-and-white pictures in 16.7 million colors.
- Use the smallest image appropriate. Don't put a 800*600 pixels image on the web. If you want
to show big pictures use thumbnails instead that link to the pictures. Most people will hit the back
button if the page takes to long to load.
- Use text instead of images if possible
- Keep images in the context of your page. Don't add a picture that doesn't contribute to the
content of the page.
|