Lyn's Resource Center Header Logo
Menu

Main Page
Basic HTML
Advanced HTML
Images
Frames
Tables
Forms
META Tags
Page Tips
ASCII Codes
Color (Hex) Codes
Links
What's New
Contact Me
Feedback Form

The first step in adding an image to your page -- even before you add any code -- is to upload it to the directory your homepage(s) are on. (Check with your hosting provider for more information on how to upload images.)

Once this is done, you're ready to add the code. I'm going to use an image for an example. (I'll be using this image throughout this page also.) The image's name is Flwer4.gif, so you'd add this image into your page with the following:

<IMG SRC="Flwer4.gif">

And here's how it would look:



Most hosts allows you to upload files and create pages in subdirectories. Sometimes this is easier, so you can put all your images into a directory called "images". If you had a subdirectory called "images", you would use this code instead:

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

That's it! I know, I know, you're probably thinking it seems just too simple. Ok, I have to admit, although that is the basic code, there are tons of attributes that can be added to this tag. The next sections will go more into depth with this.

Note: Make sure you spell your image name correctly and also use the proper capitalization! Errors of those types are the main reason why an image won't show up properly. For instance, with some hosts, pic.gif Pic.gif pic.GIF and PIC.GIF would all be considered DIFFERENT images.

This section will discuss some of the attributes used in combination with the image tags. The attribute being discussed in each section will be displayed in red in the examples.

WIDTH, HEIGHT
These attributes are used within the image tag. They are used to specify the image's size. For instance, the flower image used in the section above is 83x100 pixels. By adding this in the form of height and width, it helps the overall page load faster. Here's how you'd add them to the tag:

<IMG SRC="Flwer4.gif" WIDTH="83" HEIGHT="100">
ALT
The ALT tag is used to supply alternate text to non image browsers, and also to ones with the images shut off. It also comes in handy if you messed up on your HTML and your image comes out "broken". The viewer of your page is then able to determine what your image was supposed to be. Your ALT tag should describe what your image is. For example, the flower image I've been using on this page is a daisy. So for my ALT tag:

<IMG SRC="Flwer4.gif" WIDTH="83" HEIGHT="100" ALT="Daisy Image">
BORDER
This attribute is used mostly with linked images, but can also be used with regular images. When you use an image as a link, a border is put around it by default. A regular image has a default border of 0. You can change the size of that border by changing the number after the BORDER attribute. For example, by typing this:

<IMG SRC="Flwer4.gif" BORDER=1>

The image would look like this:

Daisy Image

Notice there's a thin border around it. In the tag above, you can see that this is set at 1. Setting it to 0 would not display a border. Making the number larger than 1 would make a thicker border.
This section discusses aligning images, specifically with something. Text is a perfect thing to align with an image as an example, so that's what we will be using. First of all, I should mention that ALIGN is an attribute. I didn't put it in the last section, because this is too big of a topic to just squeeze in with the other attributes.

ALIGN's elements are LEFT, RIGHT, CENTER, TOP, MIDDLE, and BOTTOM. These attributes would be added the same way the attributes in the last section were. Let's see some examples with our trusty old daisy image:

This image is aligned left with the text. You'd add ALIGN=LEFT to your image tag to do this.






This image is aligned center with the text. You'd add ALIGN=CENTER to your image tag to do this.

This image is aligned right with the text. You'd add ALIGN=RIGHT to your image tag to do this.






This image is aligned top with the text. You'd add ALIGN=TOP to your image tag to do this.
This image is aligned middle with the text. You'd add ALIGN=MIDDLE to your image tag to do this.
This image is aligned bottom with the text. You'd add ALIGN=BOTTOM to your image tag to do this.

You can use ANY image (well, at least any image in internet suported formats) to make a background. For instance, click here to see the daisy image as a background. In order to make the daisy image the page's background, add BACKGROUND="Flwer4.gif" to your body tag. (More on body tags.) Here's a sample of what the body tag would look like:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#008080" VLINK="#0000ff" BACKGROUND="Flwer4.gif">

One thing you should take note of: not all images are suitable as a background. For instance, although I chose to use the daisy as an example, it would hide a lot of text if you choose black as a text color. Basically, test out your backgrounds before you publish them to the internet. (Of course, you should always test a page out before publishing it anyway!)

This section will show you how to turn an image into a link. Let's use the daisy picture once again. (I bet you're all sick of that daisy by now...) Now, let's say I wanted to use it as a link to tlkpride.org. I would then combine the tag to put an image on a page with the tag to make a hyperlink. (More on hyperlinks.) The tag would look like this:

<A HREF="http://www.tlkpride.org"><IMG SRC="Flwer4.gif"></A>

Notice how the tag for the image is surrounded by the hyperlink tag. The output would be this:



If you click on the daisy above, it will take you to Geocities. Note that there is a border around the image. If you remember the section above on image attributes, by default, a linked image has a border. To get rid of this border, simply add the BORDER=0 attribute to the image tag.
Page and graphics design and content © Copyright 1998-2009 Lyn Knarr.
Please email me at lionkingfanatic@netscape.net if you need help with your page/site.
Most graphics and headers were made using Paint Shop Pro. Please do not take any images off these pages without my permission.