Images and Backgrounds

Table of
Contents

Introduction

Starting
Template
Basic
HTML Tags
Dressing Up
Your Text
Images and
Backgrounds
Hyper Text
Links
Publishing
Your Pages

The next two sections are part of what makes HTML so interesting and appealing. HTML allows for you to insert other inline files, such as images, animations, music, or anything else that can be observed on a PC. Most browsers allow for viewing of images and Internet Explorer allows for an insertion of background music. Some other objects need plug ins such as Real Audio, or Shockwave to be able to view them. Let's start with images.

Inserting Images

HTML alows for the insertion of images by letting you describe the location of the image and how to display it, for example; what size it should be, wether it should be lined up with the top, bottom or middle of the line, wether it should have a border around it, etc. An image is inserted using the IMG SRC tag. Here is an example:

<IMG SRC="batcape.gif">

And the result, assuming that batcape.gif is in the same directory or folder as the one your document is in, is this:

To test your new inline image insertion skills:

  1. right click on the batcape image
  2. click "save as"
  3. choose the same folder as the HTML document you are creating
  4. now insert the code listed above to insert the new image into your document

Images on the web are generally of the form jpeg or gif, and most browsers will accept these formats. As you can see format of inserting an image is like so:

  • The IMG SRC tag is a stand alone tag
  • After IMG SRC there is an equal sign
  • Aside from betweenIMG and SRC there are no spaces
  • The document address is enclosed in quotes

You will notice that the image adress (batcape.gif) is a relative address. A relative address can be used when the image you want to call is in the same directory as the document, which is normally the case. If the image you would like to insert is in another folder or on another server you will have to give the entire address or URL (Uniform Resource Locator). For example:

<IMG SRC="http://www.someplace.com/batcape.gif">

Or you may link to somewhere else on your own computer for offline viewing

<IMG SRC="C:\WINDOWS\Desktop\HTML Documents\batcape.gif"

Or if your images are in a seperate folder in the same directory you can use a semi-relative URL. For example if the image is in a folder named images in the same directory you would use.

<IMG SRC="images/batcape.gif">

Vertically Aligning Inline Images

You can use the ALIGN attribute within the image tag to vertically align the image relative to the line of text it is in. Examples:

<P><IMG SRC="top1.gif" ALIGN="top">Here is the text next to a top aligned image</P>
<P><IMG SRC="middle1.gif" ALIGN="middle">Here is the text next to a middle aligned image</P>
<P><IMG SRC="bottom1.gif" ALIGN="bottom">Here is the text next to a bottom aligned image</P>

Here is the text next to a top aligned image

Here is the text next to a middle aligned image

Here is the text next to a bottom aligned image

More Image Attributes

Here are a couple more attributes to play with that you can place within the IMG tag.

  • BORDER:This attribute, when used with a value of your choice will, believe it or not, create a border around your image, or when set to zero will create a non-border. (you will use this when you get to the hyper-link section.)
  • WIDTH and HEIGHT:Yes you guessed it. This will make the picture what ever width and height you would like. There are a couple of things you need to know about this. First of all it is a good idea to always include the WIDTH and HEIGHT attributes with all of your images. This will allow the browser to format the entire page first without having to wait for the images to download. The second point is that, although it is possible to make a large photo appear small on your document using these attributes, it is not really recomended. The browser must still download the whole image and then make it smaller. This can be very time consuming. The best thing to do is to use a graphics editor to make the image the size you want first.
  • ALT:The ALT attribute is mainly for browsers that are not able to view images. There are also many users out there who have there image viewer disabled for faster downloads. So with the ALT attribute you can set the value equal to some text that briefly describes your image. Then when the user places his/her pointer over the image the text magically appears.
    OK ready to dive in with an example?
<IMG SRC="batcape.gif" BORDER="7" WIDTH="75" HEIGHT="75" ALT="The Batman">
The Batman

BACKGROUND IMAGES

You may also use an image for the background of your document. Be sure that your text will still be easily readable on top of the background.

To insert a background image you would use the BACKGROUND tag inserted in the open BODY tag right below the HEAD tag at the top of your document. If you would like you can right click on this image, save it in your new HTML documents folder and insert it as a background. A quick web search will supply you with a mind boggling amount of free backgrounds.

Here is the example:

<BODY BACKGROUND="clouds.gif">

O.K. Now we are ready to learn about what helps make The Web, a web- hyper-links

continue tour
Continue Tutorial