Introduction
Text
Formatting
Links
Lists
Images
Image Formats
Image Tag
Background Images
Image Maps
Example
Tables
Frames
Forms
Conclusion

Image
The code for adding images to your website is as easy as that of the code for links. The <IMG> tag is your base tag. This is an empty tag so it will not have a closing tag. Here is the complete syntax for an image file:

<IMG SRC="file.gif" ALT="file description" ALIGN="" HEIGHT="" WIDTH="" BORDER="" HSPACE="" VSPACE="">

This is the complete source code for adding an image not all attributes will be necessary for each file or layout of the file.

SOURCE
First thing to know when placing an image is the location of your file on the server and the file name. The source attribute is where you will place the your files address.

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

You can place either a full URL or a relative URL in the source attribute. If you don't know how to locate a files address (or URL) refer to the discussion in the links section. It is common practice to place all of the images in a separate directory (folder), usually named images. In the previous example the browser will look for an image names image.gif, inside the images folder.

ALT
The alt attribute appends text to your image. This text is displayed:
  1. If your image doesn't load successfully - (due to internet traffic, or from bad connection between the server and browser, if user clicks stop on browser, or if you typed the incorrect address).
  2. On mouseover on most browsers
  3. On text only browsers.
I advise to always place alternate text in your images, so that you don't limit your audience by having them leave if the file does not load. It's good to have some idea of what an image might be without having to wait for it to load.

<IMG SRC="sample.gif" ALT"sample">

Align
The align attribute, does just that aligns the image…but it aligns the image to the text. In order to describe how this alignment works it is best to just see all options set out. Here are the alignment options:

Left Alignment
Aligns the image in the left margin and wraps the text that follows the image.
Lorem Ipsum. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here.
<IMG SRC="../images/sample.jpg" WIDTH="75" HEIGHT="75" BORDER="0" ALIGN="left">
Right Alignment
Aligns the image in the right margin and wraps the text that precedes the image.
Lorem Ipsum. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here.
<IMG SRC="../images/sample.jpg" WIDTH="75" HEIGHT="75" BORDER="0" ALIGN="right">
Top Alignment
Aligns the top of the image with the surrounding text.
Lorem Ipsum. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here.
<IMG SRC="../images/sample.jpg" WIDTH="75" HEIGHT="75" BORDER="0" ALIGN="top">
Bottom Alignment
aligns the bottom of the image with the surrounding text.
Lorem Ipsum. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here.
<IMG SRC="../images/sample.jpg" WIDTH="75" HEIGHT="75" BORDER="0" ALIGN="bottom">
Middle Alignment
aligns the middle of the image with the surrounding text.
Lorem Ipsum. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here.
<IMG SRC="../images/sample.jpg" WIDTH="75" HEIGHT="75" BORDER="0" ALIGN="middle">
Center Alignment
Center doesn't work so you have to just center the image and text using the <CENTER> tag, or <DIV ALIGN="center"> aligns text along the top of an image
Lorem Ipsum. Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here.
Text goes here, text goes here, text goes here, text goes here, text goes here. Text goes here, text goes here, text goes here, text goes here, text goes here.
<div align="center"><IMG SRC="../images/sample.jpg" WIDTH="75" HEIGHT="75" BORDER="0" ALT=""></div>
Other Alignments
  • Texttop - aligns the top of the image with the top of the tallest text in the line.
  • Absmiddle - aligns the image with the middle of the current line.
  • Baseline - aligns the image with the baseline of the current line.
  • Absbottom - aligns the image with the bottom of the current line.

Height and Width
The height and width attributes are required in the image tag, if you do not place this tag the browser will not know what size the image is supposed to be and will take longer to load in order to determine the size. You can also resize your image by using these attributes, but it is best to resize them in your graphic program for better quality.

<IMG SRC="sample.gif" HEIGHT="75" WIDTH="75">

Border
The border attribute sets the size of the border around the edge of the image. If you would not like a border around the image just set it to "0". If you want a thick border increase the size, by increasing the value of the border attribute. By default, the border is set to "0" unless you use your image as a link, then it is set to "1". The size is set in pixels.

<IMG SRC="sample.gif" BORDER="5">

HSPACE AND VSPACE
The HSPACE stands for Horizontal space, which controls the size of the blank space on the left and right hand sides of the image simultaneously. The VSPACE attributes stand for Vertical Space, this controls the size of the blank space on the top and bottom of the image simultaneously. I usually use this attribute when wrapping text and I do not want the text to touch the image.

<IMG SRC="sample.gif" HSPACE="5" VSPACE="5">

Unfortunately, you cannot control just one side, usually if you want space on one size you will want to use a pixel space (a 1x1 gif the color of your background or transparent) and resize it to your specifications to push the image one way or another. This is used most often since it works on all browsers and gives you more control over your layout.

back  next

© Copyright 2000-2002 by Pepmint.com. All Rights Reserved

Search Pepmint.com

home :: tutorial :: portfolio :: links :: hammies :: guestbook :: contact