Introduction
This tutorial covers the basic image tag including alt text, height, width and alignment; making images clickable; and working with animationed images. If you're already confident with the basic image tags, click on the word "click" above and start there.
Basic Graphics
Web pages would be kind of dull without pictures. If you don't already have some images you'd like to put on your web page, try opening your favorite search engine and searching on "Free clipart". You'll want to locate images in .jpg or .gif format for use on your web pages. If you find an image you'd like to use, you can generally save it by RIGHT mouse clicking on the image then selecting "save as". You should respect image copyrights. Please only "lift" images that are stated to be free for you to use.
A typical tag for an image looks like:
<img src="learn.jpg" />
This particular tag is saying that we want to use an image file named "learn.jpg" as the source of our image. Before we go on, please avoid spaces, underlines, tilde's or any other unusual characters in the names of your images. This will save you a lot of frustration later.
Image Attributes
Like the tags we studied earlier, the image tag has some attributes that can help the tag to work better in our pages. One of these attributes sets some alternative text that will be displayed if for some reason your visitor is unable to view your image. The attribute is ALT and is used like this:
<img src="learn.jpg" alt="Learn HTML" />
Normally, the web browser will download the image file, and use the size of the image to determine how much space should be used on the page to display it and then lay out the page accordingly. This means a delay while the image downloads until your page can be displayed properly.
You can help things along by including the correct size of the image in pixels as part of the HTML tag for the image. This way the browser can set aside a space big enough for your image and display the rest of the page while the image downloads. This does not speed the download of the image but it does make your page seem to load much faster, which your vistors will appreciate.
The size information that you need to give the browser is the HEIGHT and WIDTH of the image in pixels. Using these attributes in our tag, the code now looks like:
<img src="learn.jpg" alt="Learn HTML" height="100" width="200" />
Your browser will load your entire original image then resize it to 100x200. Because smaller images load faster, it's actually best to use an image editing program such as Paint Shop Pro to acturally size your original image down to your hight and width specs.
Image Folders, Image Names
Many people feel that their main web space directory gets a cluttered feel to it if the image files and HTML files are all in the same directory. They prefer to upload the images to a separate subdirectory, usually named "images". They then use the relative URL to call an image file from the subdirectory. The code that is used in this case looks something like:
<img src="images/learn.jpg" alt="Learn HTML" height="100" width="200" />
By using the name of the subdirectory in the path of the src attribute, the image file will be retrieved from the subdirectory.
When writing HTML, always keep track of your image file names. The names will have to match the actual filenames you upload to your webspace. Case counts so learn.jpg and LEARN.jpg wouldn't match and the image wouldn't display.
Adding Text to images
Now let's add some text.
Align controls how the text flows around the image. It has 5 possible values:
Top- Places one line of text even with the top of the image
Middle- Places one line of text at the middle of the image
Bottom- Places one line of text even with the bottom of the image.
Left- Places the graphic on the left side of the page, with your text paragraph wrapped around the right side of the image.
Right- Places the image on the right side of the page, with your text paragraph wrapped around the left side of the graphic.
Because this alignment control specifies the orientation of text around your image, you'll need to use something like < div align="center">image tag here</div> if you want to center the image itself.
Putting it all together
All of the tags and attributes we've been talking about can be combined into a single image tag. Here's what it may look like:
<img src="images/learn.jpg" height="100" width="200" alt="learn html" Align="bottom" /> This is a caption below my photo.
Return to top of page
Clickable Images
Clickable images are graphics that, when clicked, do something. They may take you to another page, they may play a sound, they may link you to another graphic (often small thumbnails are linked to the larger version of the same image). These may also be referred to as "hyperlinked images". When you hear either term, it means there will be an image that can be clicked upon. This does not refer to a regular text-based link that, when clicked, takes you to an image.
To make an image into a link, use:
<a href="url-to-go-to"><img src="filename.ext"></a>
Example:
<a href="www.hpu.edu"><img src="mypic.gif"></a>
This will create an image with a blue border around it indicating that it's clickable. Here's what it will look like:
If you want to eliminate that border, use:
<a href="www.hpu.edu"><img src="mypic.gif" border="0"></a>
Return to top of page
Animated Images:
The easiest and most common form of animation on the web these days is the animated gif. These are added to your pages the same way as you'd add any image. You do NOT need to create your own animations. You can locate what you need on the web by going to your favorite search engine then entering "Animated GIF" as the search word. Animation can draw attention to important parts of a web page. They should be used sparingly as too much animation makes a site difficult to read and use.
Here are a few sites to get you started:
Animation at WebDeveloper.com
Animation Factory
Would you rather create your own?
http://www.gifworks.com/
http://hometown.aol.com/royalef/gifmake.htm
A final note about animations: Use them sparingly. Animations can call attention to an important point on your page. But you want to avoid using so many blinking, flipping, spinning, squirting animations that it looks as though the circus has come to town. Think "moderation in all things".
Going Further
Please consider viewing our tutorial on Troubleshooting image problems, Image resizing, aspect ratio, and transparancy. To find it, Click Here
