davesite.com / webstation / html tutorial
Try our: CSS Tutorial, Web Design Tutorial

HTML Tutorial Chapters:  
...
HTML Tutorial
HTML Code MiniChapter 11: More About Graphics

What's a good graphics program?
I have personally used Photoshop nearly as long as I've been making web sites. Photoshop is part of Adobe's Creative Suite family of products. The full version of Photoshop can be expensive, but the Elements edition for Windows or Elements for Mac runs under $100.

Corel's Paint Shop Pro is an awesome alternative to Photoshop for Windows users. It's feature packed and easy to use.

If you're looking for the "free" alternative, consider THE GIMP. You can get it for Windows, Mac, or Linux.

You can also get the Elements version of Photoshop FREE with a Wacom USB drawing tablet. This is an awesome way to get into web graphics for a very low price. Wacom makes SMALL tablets and MEDIUM tablets great for new designers. Also, students can get discounts on Adobe's software at Academic Superstore / Journey Ed.
Students and teachers save up to 80% on software! Students software at 85% off!

Aligning Images with Text...

You may have noticed by now that if you load an image without any alignment, it will take up almost all of the room and only allow you to have one line of text next to it, if you are confused, here's an example:

<img src="html_small.jpg">Here is an image<br>
Isn't it cool?

Here is an image
Isn't it cool?

If you want to be able to have the text start at the top next to the image, you must use the ALIGN attribute... example:

<img src="html_small.jpg" align="left">Here is an image<br>
Isn't it cool?

Here is an image
Isn't it cool?

Using <BR CLEAR=ALL>...

When you use the ALIGN attribute with images you may notice a problem when you use the <HR> tag, because in some cases you may want the horizontal rule to fall below the image.. not next to it.. example:

<img src="html2.gif" align="left">this is a big image.<hr>

this is a big image.




If you want the horizontal rule to fall below the image, you can add the <br clear="all"> tag between the image and the horizontal rule. Example:

<img src="html2.gif" align="left">this is a big image.
<br clear="all"><hr>

this is a big image.

This is also useful in other instances, such as when you want the text to fall below the image.

Transparent Gifs...

.gif files support a feature called transparency, in which one color out of the 256 colors is set to be transparent. The HTML: Advanced and Enhanced graphic pictured above is an example of a transparent gif, because the background of the file is invisible, letting the web page's background show through. In many graphics programs you will find an option to save the background color as transparent, which allows you to make your own transparent gifs.

Interlaced vs. Non-Interlaced...

When a graphic is downloaded into a web page, it is loaded one of two ways, interlaced (every other line the first time, then the other lines the second time) or non-interlaced (first line, then second line, then third line) Here is an Example of each type:

Interlaced Gif - flowers_int.gif
Non-Interlaced Gif - flowers_non.gif
Non-Interlaced Jpg - flowers_nonjpg.jpg
The two gifs take about the same time to load, so it is up to you which one you wish to use on your web pages. This feature is not determined by a tag, rather by the format you saved the file in. (You'll notice the jpg is clearer... that's because jpg was made for photographs.)

"I'm Lost" - Why do I write a small paragraph about interlaced vs. non-interlaced images? When this tutorial was first written, 28.8kbps modems were the newest and greatest thing. In speeds of 28.8kbps and less (most cell phone/PDA browsers circa 2000/2001 still run at 9.6kbps to 14.4kbps) an interlaced image has the appearance of loading faster, and makes your site look a bit more professional. In current day when most modem speeds are 56kbps and it is common to have cable or DSL in the home, this is not nearly as much of a concern.

Animated Gifs...

The gif version 89a supports an advanced technology which allows animation. Inside a single .gif file is stored many picture frames and an index telling how long each frame should be shown, if they should repeat after they are done, etc. If you wish to create your own animated gifs, try using UnFREEz [freeware] or the Gif Construction Set from Alchemy Mindworks [shareware] if you are using Windows. Animated .gifs are treated as a standard img file, so it is loaded with the standard <IMG> tag.

HTML Now!The Button pictured to the right is also an animated .gif.

Reference to the standard IMG tag...


<img src="image.ext" width="x" height="x" border="x" alt="x">
Name Of File--^    pixels--^ pixels-^ border-^ text-^
                     wide       deep      size  description

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>Little Joe's Graphics</title></head>
<body>

<img src="http://www.davesite.com/webstation/html/html2.gif" align="left"><br clear="all"><hr>
<img src="http://www.davesite.com/webstation/html/learnnow.gif" border="0" align="left">
This is a cool animation:)
This page Copyright &copy; Little Joe's Pages &amp; davesite.com.

</body>
</html>




[ Go to MiniChapter 10! | Index | Go to MiniChapter 12! ]

Copyright © 1996-2010 Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/chap11.shtml