Web Start Letter - Website Tips and Info by Email Your Email:
We will never sell or give away your email address.

Internet Basics
   About the Internet
   About Web Browsers
   Why Domain Names

Getting Started
   HTML vs XHTML
   Making Webpage Files
   Naming Webpage Files

HTML Basics
   About HTML Tags
   Basic HTML Page
   DTDs and Doctype Tags
   Spaces and New Lines
   Special Characters
   Bold, Italics, More
   Writing Headlines
   Adding Links
   Making Lists
   Comments in HTML

Images and Colors
   How to Add Images
   Sources of Images
   Image File Formats
   Optimizing Images
   Color in HTML & CSS
   "Web-safe" Color Chart

More Advanced HTML
   Making Tables
   Formatting with Tables
   Making Forms
   Using Imagemaps
   Using Frames
   Meta Tags

Cascading Style Sheets
   Intro to CSS
   Ways to include CSS
   Some Useful CSS
   CSS Hover for Links

More
   Promoting Your Site
   How-To's Homepage
   Links

Adding images to your page

pic of a vine

<img /> tag

The basic tag to put an image into a web page is :

<img src="nameofyourimagefile.gif" height="100" width="100" alt="Sensible description of your image." />

src

The actual path and filename of your image file. Write the file location the same way you would if you were linking to it, except as the src attribute of an img tag instead of the href attribute of an a tag of course.

This means if the image is on another server you will need to use the entire URL (eg: http://www.domain-of-image.com/path/image.gif ). Usually you should avoid pulling images off of other servers. It slows down load time and if you don't have permission from the other site they could get angry at you for stealing bandwidth and remove the image or replace it with something you don't want.

pic of a vine

height & width

Use the actual height and width of your image in pixels.

While the browser will load the page and the image with out these, it is better to always use them. If you specify height and width Netscape will save space for the image and continue to load the rest of the page. If you don't specify it, the page seems to take longer because Netscape won't show anything else until the image has completely loaded and it knows what size it is. IE will continue to show text while the image loads, but stuff on the page jumps around strangely as the image loads.

Putting the wrong height and width will cause the browser to force the image into those dimensions. This is usually a bad thing. If you want the image to be smaller, resize it in a graphics program so that the actual file size is smaller. If you make the image larger using html the quality diminishes. Note the pixelation of the vine on html miracle-gro. A more finely detailed, rounder image or a photograph would be very ugly like this. See what it does to the circle below, when it is resized to 2 and 3 times larger than its real size.

The exception is when you have a small solid color gif, and you resize it to make a line or block of color.

----------------------------------------- *

alt

The text you put in the alt tag is what shows up:

  • If the user's browser does not do graphics or if graphics are turned off; maybe a text-only browser or screen reader for the blind.
  • While graphics are still downloading and aren't ready yet.
  • In the little yellow box that shows up when you put the cursor over graphics when using certain browsers on a PC.
  • They are also read by some search engines in their attempt to discover what a page is really about.

Make the alt text descriptive of your image. If you don't have anything useful to say in the alt tag, it is best to make one that just says alt="" with nothing between the quotes. Look at the source of this page and see what I've said for alt text on these images.

Other img attributes

These can be useful, but nowadays it may be better to use CSS padding and positioning.

align

To make text wrap around an image you need to add an align attribute to the image tag. align="right" will put the image to the right side of the text and align="left" will put it to the left. If you want text inbetween two images, first put the one that is aligned right, then the one aligned left, and then the text that goes in the middle.

If the image is align="top" then the top of it is lined up to the top of the text.

If the image is align="bottom" then the bottom of it lines up to the bottom of the text.

If the image is align="center" then it puts its center at the bottom of the text These alignments are very quirky though. If these three lines were on the same line they won't work right. I very rarely use these, but I use "right" and "left" all the time.

hspace, vspace

hspace stands for horizontal space, with it you can set how much space there is on the sides of an image before the text or next image.

vspace stands for vertical space, with it you can set how much space there is on the top and bottom of an image before the text or next image.

Using image as a link

To use an image as a link, all you have to do is place it between a link <a href=....> tag and a </a> tag. You may place text within the same a href tag if you wish. Be extra sure to use useful alt text for an image used as a link.

There will be a border around the graphic in the same color as your links are when you use it as a link. If you don't want the border you will need to add border="0" inside the image tag.