Reviews and recommendations on this web site, including web hosting reviews, may result in commissions paid to the Dave's Site. Follow on Twitter @firstdave
Check Out my new PhoneGap Tutorial / Cordova Tutorial


Hosting Tutorial - Table of Contents

This course was developed in much earlier days of the web and has been updated into Web Design Basics for iPad (same Dave, much better course!)
iPage Web Hosting -- Go Green for only $1.99/mo.
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5


HTML Code: MiniChapter 11: More About Graphics

HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad

What's a good graphics application for creating web images?

Paint Shop Pro Ultimate Photo X2

When I started my web site, I used PaintShop Pro. It's a great app, although not as feature-rich as Adobe Photoshop, but it's under $100. (Compared to $700 for Photoshop.)

I've been authorized to offer you $40 off PaintShop Pro this week direct from the makers.
Save $40 on Paint Shop Photo Pro X3 Only $59.99, & Free copy of VideoStudio Express ESD ($50 Value)

I have personally used Photoshop for over ten years now. 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 cost under $100.

If you're looking for the free alternative (a little bit harder to master), consider THE GIMP. You can get it for Windows, Mac, or Linux.

I have a collection of GIMP tutorials if you want to learn GIMP. For those of you on a budget, this is a great option.

You can also get Photoshop Elements FREE with a Wacom USB drawing tablet.

This is an awesome way to get into web graphics for a very low price. Wacom makes awesome drawing tablets.

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!

HTML Code for 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>...

PaintShop Pro Photo X3

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 Images vs. Non-Interlaced Images...

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

HTML Code - 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>
iPage has the Best Support

Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.
Copyright © Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/chap11.shtml