WebThings - by Jan Weijers
All chapters...
Table of contents
Introduction
A simple HTML document
Images
Lists
Links
Tables
Frames
Forms
Cascading style sheets
JavaScript
Programming in PHP
Server side includes
CGI & Perl
Extended characters
Examples of colours
Learn more
Software
Recent changes
Alphabetical index
In this chapter...
Graphics formats and sizes
Inline images
WIDTH and HEIGHT attributes
TITLE attribute

 

 

Taalkeuze...
U hebt gekozen om Engels als eerste taal te gebruiken.Nederlands vlaggetje Klik hier om te kiezen voor Nederlands.

Images

Your web site is going to be a dull place without images. You will want to include logos and photos. This chapter explains you something about different graphics formats and how to place images in your pages.

Graphics formats and sizes

The most commonly used graphics format is JPEG. The files are names *.jpeg or *.jpg. Almost all digital camera's produce photos in this format. Other commonly used formats are GIF and PNG. All the examples below work with all file formats.

Some graphics converters and drawing programmes allow you to save a GIF file as "interlaced". This allows browsers to draw a rough version of the image before the whole thing is downloaded. In a world of ever increasing bandwidth this is less relevant.

When saving images for your web site, make sure they are not too large. If you image is 100 kilobytes in size, someone with a 512 kbps second connection (say, a cheap ADSL connection) will need two seconds to download it. If you have ten such images on your page, it will take twenty seconds. This may be long enough to get your reader to click on to the next page.

When you build a photo album the reader will expect to wait a bit longer for the page to download. But other pages should load fast. Aim to keep regular pages below 100 kilobyte, including graphics and style sheet.

To the top

Inline images

The basic element to include an image is very simple:

<IMG SRC="w3c-html4.gif" ALT="HTML logo">

HTML logo

Where SRC="w3c-html4.gif" specifies the name of the file (SRC stands for source).

The ALT="HTML logo" attribute defines the text that is displayed by a browser that cannot handle graphics or in case the user chooses not to download the graphics. The ALT attribute is obligatory. Visually handicapped people who use special braille computers to browse the web are totally dependant on what you write in the ALT attribute. If you use images as links it is important to remember this and provide an alternative.

To the top

WIDTH and HEIGHT attributes

The WIDTH and HEIGHT attributes are used to specify the size of your image:

<IMG SRC="parts/w3c-html4.gif" WIDTH="88" HEIGHT="31" ALT="HTML logo">

Knowing the sizes of the image enables the browser to start lay-out of the page before all the images are downloaded. You can use a drawing or graphics programme to get the size of the images you use. Most browsers can tell you the size of an image of you open it seperately in a new window (right-click or ctrl-click on the image). Good HTML editors can insert width and height automatically.

If you specify anything else that the real size of the picture, most browsers will reduce or enlarge the image to fit the size you specified. Look at what this example does:

<IMG SRC="parts/w3c-html4.gif" WIDTH="400" HEIGHT="31" ALT="HTML logo">

HTML logo

However, the are limits to how far the image can be stretched and the results will be unpredicatable.

To the top

TITLE attribute

With images you can use a TITLE attribute. This will make a text appear if the mouse cursor hovers of the image for a short while. You can use this for extra comments. For example:

<IMG SRC="parts/w3c-html4.gif" WIDTH="88" HEIGHT="31" ALT="HTML logo" TITLE="This is the official HTML 4 logo">

HTML logo

This will make the text "This is the official HTML 4 logo" appear when the mouse cursor hovers over the image. This is useful to show extra information with the image. The TITLE attribute works with almost any element.

To the top

 

Feedback welcome...

Please let me know your opinion about this guide, information you would like to be added or any errors you have discovered. Click here.

 

Open standards...

This site conforms completely to open standards of the World Wide Web Consortium (W3C). Click on the logos to verify that.

HTML 4 logo

CSS logo

 

 

©1995-2010 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.