Images

You can use images to greatly enhance your web pages. Images are used in four main ways in XHTML:

External link: The user clicks on a link, and the image appears in the browser window, replacing the current page
Inline: The image is integrated into the page. Text and other elements flow around it
Background: The image is used as the background for a page or element on a page
Custom bullet: The image is used as a custom bullet for a list.

Building an inline image

An inline image is created using the <img> tag. Take a look at the following code:

<img src = "twoPi.jpg"
     alt = "a silly cartoon of my face" />

The code produces the following image: a silly cartoon of my face

There are several items to note about this tag:

The src attribute: The src property gives an address for an image. This address can be absolute or relative (see below for a discussion of this)
The alt attribute: The alt attribute describes the image for people who do not have images turned on in their browser. This is useful for text-to-speech readers used for those with visual impairments, and it's handy for anyone trying to speed up their browsing by turning off images.
The /> ending: Unlike most tags in HTML/XHTML, <img> doesn't use an ending tag. Instead, end the tag with a forward slash (/) to indicate there will be no </img> tag

Absolute and Relative References

Any address you give for a web resource can be given in one of two primary ways: absolute or relative. Here's how they work:

Absolute Reference

The full address of a resource on the internet
begins with a protocol (usually http://)
can point to any resource anywhere on the web
Usually used to point to external assests

Example:

      
<img src = "http://www.cs.iupui.edu/~aharris/face.gif"
     alt = "Me before I shave" />

Relative Reference

A partial address to a resource in the local system
Does not begin with a protocol
Refers to something in the local file system
Expects to find the resource in the current directory
Usually used to point to internal assets

Example:

<img src = "twoPi.jpg"
     alt = "a silly cartoon of my face" />

Using a background image

Any CSS style can have a background image applied to it.The background-image property is used to do this. Here is the code that created the background image used on this page:

body {
  background-image: url("bgPattern3.jpg")
}

There are a few important things to know about background images:

Apply to an element: You can apply a background image to any HTML element you wish. If you want the image to apply to the entire page, you can attach the style to the body element.
The background-image attribute: This CSS style attribute is what tells the browser to expect a background image.
The url qualifier: You have to specify that the following text will be a URL (web address) so use the url() convention to do this.
An image file: Incorporate any image file you wish. You can use an absolute or relative reference.

Creating a bad background

Background images are something of an art form. They should be subtle. This paragraph shows what can happen when you use the wrong kind of image in a background. Background images are something of an art form. They should be subtle. This paragraph shows what can happen when you use the wrong kind of image in a background. Background images are something of an art form. They should be subtle. This paragraph shows what can happen when you use the wrong kind of image in a background. Background images are something of an art form. They should be subtle. This paragraph shows what can happen when you use the wrong kind of image in a background. Background images are something of an art form. They should be subtle. This paragraph shows what can happen when you use the wrong kind of image in a background.

Creating a good background

A good background image has the following characteristics:

It is subtle. It doesnt demand attention.
It tiles seamlessly. This makes the file smaller and less distracting
It has low contrast. It's either mostly dark or mostly light.
It contrasts with the foreground. If there is text displayed on the image, the text must be strikingly different in value so it stands out.

Quick tutorial for making a background in Gimp

Make a default image: Start small. 256 by 256 is fine
Create a random image: Experiment with filters-render and script-fu-render options to get interesting random patterns
Offset the image: Use layer-transform-offset to get the offset dialog. Offset the image by x/2, y/2.
smooth the edges: Use the clone tool or the blur tool for this
Apply a new layer over the top: Make this layer black for a darker background, or white for a lighter background
Adjust the transparency of the top layer: Make the top layer just transparent enough to see the pattern underneath.
Save the image: Use jpg, gif, or png, and save in the same directory as the file if possible