Title: XHTML/CSS 3
Class: Coding
Date: 03.03.2007
XHTML/CSS Part three - Images
Images on the web are basically JPEG's, PNG's and GIF's. There are a few other formats allowed but these three are the most common. Which type do you use? Whatever makes the smallest file size with reasonable quality! Small, because we want them to download fast. Images are not part of the web page and are downloaded seperately after the XHTML page has been received. The XHTML code simply determines where to find the image, where to put the image on the page and it doesn't care if the actual image exists or not.
The image tag is one of those which has everything included within the tag and therefore does not have a second closing tag. The style content is exactly the same as a div in regard to positioning and border. The extra items are the source address and the 'alt' description. Careful selection of the width and height values is critical - they must match the image size exactly!
The source address should be a full path address to allow search engines to perform well on your site. Also the 'alt' description should be as descriptive as possible. This is used by blind readers via voice synthesizer programs, as well as by search engine spiders. The border should be set to 'none' otherwise you will automatically get one on some browsers.
Images should never be used as links! Neither the blind nor search engine spiders can see pictures! They don't know it is a link. Image maps should be avoided for the same reasons.
A typical image will be coded as follows, although the order of the component parts isn't important:
<img src="http://www.example.net/images/webmaster.gif" alt="A picture of the webmaster wearing only his underpants which is the standard uniform for this profession." style="position:absolute;left:400px;top:175px;width:342px;height:272px;border:none;" />
In XHTML, everything depends on the order that the page is written. Therefore, if you want to write some text over an image, it is an easy matter to follow this with a suitably placed div with a transparent background.
(This doesn't work in all browsers!!! The text is written before the image arrives on some browsers, the image then being placed on top. Making the image a background to a div can help. background-image: url(/images/picture.gif);)
You could also write text under transparent parts of an image. But beware! If your content is considered as hidden, you could be permanently banned by search engines!
As we have already discussed, text gives problems due to the different fonts used. Therefore, trying to wrap text around an image is equally difficult and probably should be avoided.
Images include animations of course. The placement of animated images should be carefully thought out. A brightly coloured, rapidly flashing animation right next to an important piece of text can be very disturbing to the reader. Animations also distract the attention in ways which the designer hasn't thought about. Many people have learned to ignore animated content because they believe it must be an advertisement.
Finally, images eat up bandwidth and frustrate users waiting for them to load. Use images sparingly!
How do you make images for the web? Almost any graphics software will do, but those that have 'optimization' are prefered. The best images are made in the final size. Never try to resize an image. We want to use the smallest filesize, so convert in this order - bitmap, jpg, png, gif. Then see what is smallest but still looks good.
Now, you should be able to make up a reasonable looking page. Just think about how many XHTML tags you have used, and how many style expressions. It isn't many! Simple XHTML/CSS is so easy! You already know enough to create a web page. From now on, we will introduce more tags and style expressions that will make you a webmaster if you practice enough.
Next, all about links.